harmonise styles

src/ClockBuilder.module.css

@@ -14,31 +14,6 @@
   flex-wrap: wrap;
   gap: 14px;
 }
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.field label {
-  font-size: 11px;
-  color: #999;
-}
-.field input,
-.field select {
-  background-color: #242324;
-  border: 1px solid #646464;
-  color: #ffe6c0;
-  border-radius: 4px;
-  padding: 5px 8px;
-  font-family: ui-monospace, monospace;
-  font-size: 12.5px;
-  min-width: 120px;
-}
-.field input:focus,
-.field select:focus {
-  outline: 2px solid #f1be64;
-  outline-offset: 1px;
-}
 
 .footer {
   display: flex;

src/ClockBuilder.tsx

@@ -174,36 +174,39 @@ export default function ClockBuilder() {
   return (
     <div className={styles.wrap}>
       <div className={styles.header}>
-        <div className={styles.field}>
+        <div className="field">
           <label>Cycle length (ticks)</label>
-          <ExpressionInput value={duration} min={2} onCommit={setDuration} />
+          <ExpressionInput className="dark" styles={{ max }} value={duration} min={2} onCommit={setDuration} />
         </div>
 
-        <div className={styles.field}>
+        <div className="field">
           <label>Clock signal icon</label>
           <SelectSignal value={clockSignal?.name} onSelectSignal={(_, sig) => setClockSignal(sig)} />
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Throughput unit</label>
-          <select value={displayUnit} onChange={(e) => setDisplayUnit(e.target.value as "s" | "m")}>
+          <select className={"dark"} value={displayUnit} onChange={(e) => setDisplayUnit(e.target.value as "s" | "m")}>
             <option value="s">items/s</option>
             <option value="m">items/min</option>
           </select>
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Belt reference</label>
           <input
             type="text"
+            className={"dark"}
             value={beltReference.name}
             onChange={(e) => setBeltReference({ ...beltReference, name: e.target.value })}
           />
-          <input
-            type="number"
-            value={beltReference.itemsPerSecond}
-            onChange={(e) =>
+
+          <ExpressionInput
+            className={"dark"}
+            value={duration}
+            min={2}
+            onCommit={(e) =>
               setBeltReference({
                 ...beltReference,
-                itemsPerSecond: Number(e.target.value) || 0,
+                itemsPerSecond: Number(e) || 0,
               })
             }
           />

src/assets/ClockTimeline/ClockTimeline.module.css

@@ -99,22 +99,12 @@
   position: sticky;
   left: 0;
   display: flex;
-  align-items: center;
+  align-items: normal;
   width: 100cqw;
   gap: 8px;
 }
 .rowNameInput {
-  background: #373737;
-  border: 1px solid #646464;
-  color: #ffe6c0;
-  border-radius: 4px;
-  padding: 3px 8px;
-  font-size: 12px;
-  width: 110px;
-}
-.rowNameInput:focus {
-  outline: 2px solid #f1be64;
-  outline-offset: 1px;
+  width: 200px;
 }
 .lane {
   position: relative;
@@ -199,13 +189,12 @@
 }
 
 .signalList {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 10px;
 }
 .signalChip {
-  display: flex;
-  align-items: center;
+  display: inline-flex;
   gap: 4px;
   position: relative;
 }

src/assets/ClockTimeline/SignalEditorList.tsx

@@ -6,19 +6,27 @@ import SelectSignal from "../Selector/SelectSignal";
 
 interface SignalEditorListProps {
   signals: Signal[];
+  placeholder?: string;
   onAdd: (signal: Signal | null) => void;
   onUpdate: (index: number, signal: Signal | null) => void;
   onRemove: (index: number) => void;
   onReorder: (sourceIdx: number, targetIdx: number) => void;
 }
 
-export default function SignalEditorList({ signals, onAdd, onUpdate, onRemove, onReorder }: SignalEditorListProps) {
+export default function SignalEditorList({
+  signals,
+  placeholder,
+  onAdd,
+  onUpdate,
+  onRemove,
+  onReorder,
+}: SignalEditorListProps) {
   const draggedSignalIdx = useRef<number | null>(null);
 
   return (
     <div className={styles.signalList}>
       {signals.map((s, i) => (
-        <div
+        <span
           key={`${s.name}-${i}`}
           className={styles.signalChip}
           draggable={signals.length > 1}
@@ -48,9 +56,14 @@ export default function SignalEditorList({ signals, onAdd, onUpdate, onRemove, o
               ✕
             </button>
           )}
-        </div>
+        </span>
       ))}
-      <SelectSignal className={styles.signalEmpty} key={signals.length} onSelectSignal={(_, sig) => onAdd(sig)} />
+      <SelectSignal
+        placeholder={placeholder}
+        className={styles.signalEmpty}
+        key={signals.length}
+        onSelectSignal={(_, sig) => onAdd(sig)}
+      />
     </div>
   );
 }

src/assets/ClockTimeline/TimelineRow.tsx

@@ -116,31 +116,39 @@ export default function TimelineRow({ rowId }: { rowId: string }) {
   return (
     <div className={styles.rowBlockWrap}>
       <div className={styles.rowHeader}>
-        <input
-          className={styles.rowNameInput}
-          value={row.name}
-          onChange={(e) => updateRow(row.id, { name: e.target.value })}
-        />
+        <div className="field horizontal">
+          <input
+            type="text"
+            className={styles.rowNameInput}
+            value={row.name}
+            onChange={(e) => updateRow(row.id, { name: e.target.value })}
+          />
+        </div>
         <SignalEditorList
+          placeholder="Add Signal"
           signals={row.signals}
           onAdd={addRowSignal}
           onUpdate={updateRowSignal}
           onRemove={removeRowSignal}
           onReorder={reorderRowSignals}
         />
-        <div className={styles.rowStats}>
-          <label>Stack</label>
+        <div className="field horizontal">
+          <label>Stack size</label>
           <ExpressionInput value={row.stackSize} min={1} onCommit={(v) => updateRow(rowId, { stackSize: v })} />
+        </div>
+        <div className="field horizontal">
           <label>Inserters</label>
           <ExpressionInput value={row.inserterCount} min={1} onCommit={(v) => updateRow(rowId, { inserterCount: v })} />
         </div>
-        <select className={styles.autoFillPreset} defaultValue="chest_to_belt" id={`autofill-preset-${row.id}`}>
-          {ACTION_PRESETS.filter((p) => p.id !== "custom").map((p) => (
-            <option key={p.id} value={p.id}>
-              {p.label}
-            </option>
-          ))}
-        </select>
+        <div className="field horizontal">
+          <select defaultValue="chest_to_belt" id={`autofill-preset-${row.id}`}>
+            {ACTION_PRESETS.filter((p) => p.id !== "custom").map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.label}
+              </option>
+            ))}
+          </select>
+        </div>
         <button
           className="button-green"
           onClick={() => {

src/assets/SelectedBlockPanel.module.css

@@ -33,31 +33,7 @@
   gap: 18px;
   flex-wrap: wrap;
 }
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.field label {
-  font-size: 11px;
-  color: #999;
-}
-.field input,
-.field select {
-  background-color: #373737;
-  border: 1px solid #646464;
-  color: #ffe6c0;
-  border-radius: 4px;
-  padding: 5px 8px;
-  font-family: ui-monospace, monospace;
-  font-size: 12.5px;
-  width: 100px;
-}
-.field input:focus,
-.field select:focus {
-  outline: 2px solid #f1be64;
-  outline-offset: 1px;
-}
+
 .removeBtn {
   margin-left: auto;
   background-color: #fe5a5a;

src/assets/SelectedBlockPanel.tsx

@@ -38,10 +38,11 @@ export default function SelectedBlockPanel() {
       </div>
 
       <div className={styles.fields}>
-        <div className={styles.field}>
+        <div className="field">
           <label>Action</label>
           <select
             value={block.presetId}
+            className="dark"
             onChange={(e) => {
               const p = getPreset(e.target.value);
               updateBlock(blockId, { presetId: p.id, duration: p.ticks + 1 });
@@ -54,19 +55,19 @@ export default function SelectedBlockPanel() {
             ))}
           </select>
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Start (tick)</label>
           <ExpressionInput value={block.start} min={0} onCommit={(v) => updateBlock(blockId, { start: v })} />
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Duration (ticks)</label>
           <ExpressionInput value={block.duration} min={1} onCommit={(v) => updateBlock(blockId, { duration: v })} />
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Count</label>
           <ExpressionInput value={block.count} min={1} onCommit={(v) => updateBlock(blockId, { count: v })} />
         </div>
-        <div className={styles.field}>
+        <div className="field">
           <label>Repeat ×</label>
           <ExpressionInput value={block.repeat ?? 1} min={1} onCommit={(v) => updateBlock(blockId, { repeat: v })} />
         </div>

src/assets/Selector/SelectSignal.module.css

@@ -9,7 +9,6 @@
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  color: #000;
   box-shadow:
     inset 8px 0px 4px -8px #000,
     inset -8px 0px 4px -8px #000,

src/assets/Selector/SelectSignal.tsx

@@ -44,10 +44,15 @@ function SelectSignal({ style, className, value, placeholder, onSelectSignal }:
   );
 
   return (
-    <div className={className} style={style}>
-      <button type="button" className={`${styles.trigger} ${showMenu ? styles.open : ""}`} onClick={onOpenMenu}>
+    <>
+      <button
+        style={style}
+        type="button"
+        className={`${className ?? ""} ${styles.trigger} ${showMenu ? styles.open : ""}`}
+        onClick={onOpenMenu}
+      >
         {signal == null ? (
-          <span className={styles.placeholder}>Select signal</span>
+          <span className={styles.placeholder}>{placeholder ?? "Select signal"}</span>
         ) : (
           <Tooltip title={signal.name}>
             <Icon iconName={signal.icon ?? ""} size={24} />
@@ -56,13 +61,13 @@ function SelectSignal({ style, className, value, placeholder, onSelectSignal }:
       </button>
       <Popper open={showMenu} anchorEl={anchorEl} placement="right">
         <SelectMenu
-          title={placeholder ?? "Select signal"}
+          title="Select signal"
           categories={data.signalGroup}
           onSelectItem={onSelectRecipe}
           onClose={() => setShowMenu(false)}
         />
       </Popper>
-    </div>
+    </>
   );
 }
 export default SelectSignal;

src/assets/components/ExpressionInput.module.css

@@ -1,14 +1,3 @@
 .input {
-  background-color: #373737;
-  border: 1px solid #646464;
-  color: #ffe6c0;
-  border-radius: 4px;
-  padding: 5px 8px;
-  font-family: ui-monospace, monospace;
-  font-size: 12.5px;
   width: 100px;
 }
-.input:focus {
-  outline: 2px solid #f1be64;
-  outline-offset: 1px;
-}

src/engine/Dashboard/Dashboard.module.css

@@ -99,224 +99,6 @@
   position: relative;
 }
 
-/* --- USER PROVIDED FACTORIO BUTTONS --- */
-.panel-button {
-  border: none;
-  cursor: pointer;
-  position: relative;
-  background-color: #313031;
-  height: 24px;
-  aspect-ratio: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 8px 4px -8px #000,
-    inset 0px -8px 4px -8px #000,
-    inset 0px 8px 4px -8px #fff,
-    inset 0px -8px 2px -8px #432400,
-    0px 0px 4px 0px #000;
-}
-.panel-button:active,
-.panel-button.active {
-  box-shadow:
-    inset 0px 9px 2px -8px #000,
-    inset 8px 0px 4px -8px #563a10,
-    inset 8px 0px 4px -8px #563a10,
-    inset -8px 0px 4px -8px #563a10,
-    inset -8px 0px 4px -8px #563a10,
-    inset 0px -9px 2px -8px #fff,
-    0px 0px 4px 0px #000;
-  background-color: #f1be64;
-  filter: none;
-  outline: 0;
-}
-.panel-button.hover,
-.panel-button:focus,
-.panel-button:hover {
-  color: #000;
-  text-decoration: none;
-  outline: 0;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 9px 2px -8px #fff,
-    inset 0px -8px 4px -8px hsl(36, 94%, 20%),
-    0px 0px 4px 0px #000,
-    inset 0px 0px 4px 2px #f9b44b;
-  background-color: #e39827;
-  filter: drop-shadow(0 0 2px #f9b44b);
-}
-input:focus {
-  border: none;
-  filter: drop-shadow(0 0 2px #f9b44b);
-}
-.button {
-  background-color: #8e8e8e;
-  padding: 10px 12px;
-  font-size: 100%;
-  text-align: left;
-  color: #000;
-  font-weight: 600;
-  display: inline-block;
-  vertical-align: baseline;
-  min-width: 128px;
-  border: none;
-  line-height: inherit;
-  white-space: nowrap;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 10px 2px -8px #e3e3e3,
-    inset 0px 10px 2px -8px #282828,
-    inset 0px -9px 2px -8px #000,
-    0px 0px 4px 0px #000;
-  position: relative;
-  margin-right: 14px;
-  cursor: pointer;
-  user-select: none;
-  height: 36px;
-  text-align: left;
-}
-.button:hover,
-.button.hover {
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 9px 2px -8px #fff,
-    inset 0px 8px 4px -8px #000,
-    inset 0px -8px 4px -8px #000,
-    inset 0px -9px 2px -8px #432400,
-    0px 0px 4px 0px #000,
-    inset 0px 0px 4px 2px #f9b44b;
-  background-color: #e39827;
-  filter: drop-shadow(0 0 2px #f9b44b);
-}
-.button:active,
-.button.active {
-  box-shadow:
-    inset 0px 10px 2px -8px #000,
-    inset 0px 9px 2px -8px #000,
-    inset 8px 0px 4px -8px #563a10,
-    inset 8px 0px 4px -8px #563a10,
-    inset -8px 0px 4px -8px #563a10,
-    inset -8px 0px 4px -8px #563a10,
-    inset 0px 9px 2px -8px #563a10,
-    inset 0px -9px 2px -8px #563a10,
-    inset 0px -8.5px 0px -8px #563a10,
-    0px 0px 4px 0px #000;
-  background-color: #f1be64;
-}
-.button.disabled {
-  background-color: #3d3d3d;
-  color: #818181;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 8px 4px -8px #000,
-    inset 0px -6px 4px -8px #818181,
-    inset 0px -8px 4px -8px #000,
-    0px 0px 4px 0px #000;
-}
-.button-green {
-  background-color: #5eb663;
-  padding: 10px 12px;
-  font-size: 100%;
-  color: #000;
-  font-weight: 600;
-  display: inline-block;
-  min-width: 128px;
-  border: none;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 10px 2px -8px #95df99,
-    inset 0px 10px 2px -8px #163218,
-    inset 0px -9px 2px -8px #000,
-    0px 0px 4px 0px #000;
-  margin-right: 14px;
-  cursor: pointer;
-  user-select: none;
-  height: 36px;
-}
-.button-green:hover {
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 9px 2px -8px #cdf1cf,
-    inset 0px 8px 4px -8px #000,
-    inset 0px -8px 4px -8px #000,
-    inset 0px -9px 2px -8px #432400,
-    0px 0px 4px 0px #000,
-    inset 0px 0px 4px 2px #34be3c;
-  background-color: #92e897;
-  filter: drop-shadow(0 0 2px #34be3c);
-}
-.button-red {
-  background-color: #fe5a5a;
-  padding: 10px 12px;
-  font-size: 100%;
-  color: #000;
-  font-weight: 600;
-  display: inline-block;
-  min-width: 128px;
-  border: none;
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 10px 2px -8px #fda1a1,
-    inset 0px 10px 2px -8px #8b0101,
-    inset 0px -9px 2px -8px #000,
-    0px 0px 4px 0px #000;
-  margin-right: 14px;
-  cursor: pointer;
-  user-select: none;
-  height: 36px;
-}
-.button-red:hover {
-  box-shadow:
-    inset 8px 0px 4px -8px #000,
-    inset -8px 0px 4px -8px #000,
-    inset 0px 9px 2px -8px #f8eaea,
-    inset 0px 8px 4px -8px #000,
-    inset 0px -8px 4px -8px #000,
-    inset 0px -9px 2px -8px #432400,
-    0px 0px 4px 0px #000,
-    inset 0px 0px 4px 2px #c35353;
-  background-color: #ff9b9b;
-  filter: drop-shadow(0 0 2px #c35353);
-}
-input[type="text"],
-input[type="number"] {
-  height: 36px;
-  background: #8e8e8e;
-  border-radius: 4px;
-  padding: 6px;
-  border: none;
-  box-shadow:
-    inset 0px 4px 1px -2px #000,
-    inset 0px -4px 1px -2px #c5c5c5,
-    inset 2px 0px 1px 0px #5f5f5f,
-    inset -2px 0px 1px 0px #5f5f5f,
-    inset 0px -2px 2px 0px #5f5f5f,
-    0px 0px 4px 1px #2e2521;
-  outline: none;
-}
-input[type="text"]:focus,
-input[type="number"]:focus {
-  color: #000;
-  background: #f0dab4;
-  box-shadow:
-    inset 0px 4px 2px -2px #000,
-    inset 0px -1px 1px 0px #74624b,
-    inset 0px -4px 2px -2px #e0e0e0,
-    inset 2px 0px 2px 0px #a6885c,
-    inset -2px 0px 2px 0px #a6885c,
-    0px 0px 4px 1px #2e2521;
-}
-
 .timelineScrollArea {
   overflow-x: auto;
   overflow-y: hidden;

src/index.css

@@ -434,6 +434,21 @@ input:focus {
     0px 0px 4px 0px #000;
   filter: none;
 }
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field label {
+  font-size: 11px;
+  color: #999;
+}
+.field.horizontal {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+select,
 input[type="text"],
 input[type="password"],
 input[type="email"],
@@ -444,11 +459,11 @@ textarea {
   font-family: inherit;
   line-height: 1.2;
   font-size: 105%;
-  height: 36px;
+  height: 32px;
   max-width: 100%;
   background: #8e8e8e;
   border-radius: 4px;
-  padding: 6px;
+  padding: 5px 8px;
   border: none;
   box-shadow:
     inset 0px 4px 1px -2px #000,
@@ -458,6 +473,7 @@ textarea {
     inset 0px -2px 2px 0px #5f5f5f,
     0px 0px 4px 1px #2e2521;
 }
+select,
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus,
@@ -475,6 +491,18 @@ textarea:focus {
     inset -2px 0px 2px 0px #a6885c,
     0px 0px 4px 1px #2e2521;
 }
+
+input.dark,
+select.dark {
+  background-color: #242324;
+  border: 1px solid #646464;
+  color: #ffe6c0;
+}
+input:focus.dark,
+select:focus.dark {
+  outline: 2px solid #f1be64;
+  outline-offset: 1px;
+}
 textarea {
   width: 100%;
   height: 8.1em;