From 95a05eb0c23bf488b878ed61804d41267a83572a Mon Sep 17 00:00:00 2001 From: Jens Ahrensfeld Date: Thu, 25 Jun 2026 21:00:53 +0200 Subject: [PATCH] Retheme web UI to dark Mainsail-inspired design with transport buttons - Full dark theme: #121212 background, #1e1e1e surface cards, orange accent (#ff7043), muted secondary text, subtle borders/shadows - Green phosphor LCD displays with glow effect - Circular colour-coded transport buttons: green play, amber pause, red stop (Unicode icons, hover brightness effect) - Panel headings in orange uppercase with letter-spacing - Orange accent-color on range/checkbox inputs - Fixed .hidden specificity vs #pot-reset-row with !important Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_01Tqxrk8uj4M3w3d3eXm3xK8 --- web/index.html | 6 +- web/style.css | 311 +++++++++++++++++++++++++++++++++---------------- 2 files changed, 216 insertions(+), 101 deletions(-) diff --git a/web/index.html b/web/index.html index 8161e8b..1e29e38 100644 --- a/web/index.html +++ b/web/index.html @@ -16,9 +16,9 @@ - - - + + + diff --git a/web/style.css b/web/style.css index 3d5a3f8..76bc50b 100644 --- a/web/style.css +++ b/web/style.css @@ -1,150 +1,265 @@ :root { - --led-off: #555555; - --led-green: #2ecc71; - --led-green-dim: #1b5e36; - --led-orange: #e67e22; - --led-orange-dim: #7a4111; + --bg: #121212; + --surface: #1e1e1e; + --surface-2: #2a2a2a; + --border: #383838; + --text: #e0e0e0; + --text-muted: #9e9e9e; + --accent: #ff7043; + --green: #4caf50; + --green-dim: #1b5e20; + --orange: #ffa726; + --orange-dim: #6d3b00; + --red: #f44336; + --led-off: #444444; + --led-green: var(--green); + --led-green-dim: var(--green-dim); + --led-orange: var(--orange); + --led-orange-dim: var(--orange-dim); } +*, *::before, *::after { box-sizing: border-box; } + body { - font-family: sans-serif; - margin: 0; - padding: 0.5em 1em 4em 1em; - color: #222; + font-family: 'Segoe UI', system-ui, sans-serif; + margin: 0; + padding: 0.5em 1em 4em 1em; + background: var(--bg); + color: var(--text); } +/* --- Inputs & buttons --- */ + +input[type="text"], +input[type="number"] { + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 4px; + color: var(--text); + padding: 0.3em 0.5em; +} +input[type="text"]:focus, +input[type="number"]:focus { + outline: none; + border-color: var(--accent); +} + +button { + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: 4px; + color: var(--text); + padding: 0.3em 0.8em; + cursor: pointer; + transition: background 0.1s, border-color 0.1s; +} +button:hover:not(:disabled) { + background: #333; + border-color: #555; +} +button:disabled { opacity: 0.4; cursor: default; } + +/* --- Header --- */ + header#connection-bar { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 1em; - padding-bottom: 0.5em; - border-bottom: 1px solid #ccc; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1em; + padding: 0.6em 0; + border-bottom: 1px solid var(--border); } -.status-connected { color: #2ecc71; font-weight: bold; } -.status-disconnected { color: #999; } +.status-connected { color: var(--green); font-weight: bold; } +.status-disconnected { color: var(--text-muted); } + +/* --- Sud controls section --- */ #sud-controls { - display: flex; - align-items: center; - gap: 0.5em; - padding-left: 1em; - border-left: 1px solid #ccc; + display: flex; + align-items: center; + gap: 0.4em; + padding-left: 1em; + border-left: 1px solid var(--border); } +/* --- Transport buttons (circular, coloured) --- */ + +.transport-btn { + width: 38px; + height: 38px; + border-radius: 50%; + border: none; + font-size: 15px; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + transition: filter 0.15s, box-shadow 0.15s; + flex-shrink: 0; +} +.transport-btn:not(:disabled):hover { + filter: brightness(1.25); + box-shadow: 0 0 10px rgba(255,255,255,0.18); +} +.transport-btn:disabled { opacity: 0.35; cursor: default; } + +.transport-start { background: var(--green); color: #fff; } +.transport-pause { background: var(--orange); color: #fff; } +.transport-stop { background: var(--red); color: #fff; } + +/* --- LCD panel --- */ + #lcd-panel { - display: grid; - grid-template-columns: 10em 6em 6em; - gap: 0.2em 1em; - margin: 1em 0; - max-width: 30em; + display: grid; + grid-template-columns: 11em 6em 6em; + gap: 0.25em 1em; + margin: 1em 0; + max-width: 32em; +} +.lcd-row { display: contents; } +.lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; } +.lcd-label { color: var(--text-muted); font-size: 0.9em; align-self: center; } +.lcd { + font-family: 'Courier New', 'Lucida Console', monospace; + font-size: 1.1em; + background: #091209; + border: 1px solid #2a6e2a; + padding: 0.15em 0.4em; + text-align: right; + color: #7dfa7d; + text-shadow: 0 0 6px rgba(100,255,100,0.45); + border-radius: 3px; } -.lcd-row { display: contents; } -.lcd-header { font-weight: bold; } -.lcd-label { color: #555; } -.lcd { - font-family: monospace; - font-size: 1.1em; - background: #fff; - border: 1px solid #2ecc71; - padding: 0.1em 0.3em; - text-align: right; -} +/* --- Tabs --- */ nav#tabs { - margin-top: 1em; - border-bottom: 1px solid #ccc; + margin-top: 1em; + border-bottom: 1px solid var(--border); } .tab-btn { - background: none; - border: 1px solid #ccc; - border-bottom: none; - padding: 0.4em 1em; - cursor: pointer; - position: relative; - top: 1px; + background: none; + border: 1px solid transparent; + border-bottom: none; + color: var(--text-muted); + padding: 0.4em 1.1em; + cursor: pointer; + position: relative; + top: 1px; + border-radius: 4px 4px 0 0; + transition: color 0.15s; } +.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); } .tab-btn.active { - background: #fff; - font-weight: bold; - border-bottom: 1px solid #fff; + background: var(--surface); + color: var(--text); + font-weight: bold; + border-color: var(--border); + border-bottom: 1px solid var(--surface); } -.tab-content { display: none; padding: 1em 0; } +.tab-content { display: none; padding: 1em 0; } .tab-content.active { display: block; } +/* --- Manual tab panels --- */ + .panel { - border: 1px solid #ddd; - border-radius: 4px; - padding: 0.6em 1em; - margin-bottom: 0.8em; - max-width: 30em; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.8em 1.1em; + margin-bottom: 0.8em; + max-width: 30em; + box-shadow: 0 2px 8px rgba(0,0,0,0.45); +} +.panel h3 { + margin: 0 0 0.5em 0; + font-size: 0.85em; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--accent); + border-bottom: 1px solid var(--border); + padding-bottom: 0.35em; } -.panel h3 { margin: 0 0 0.4em 0; } .panel label { - display: flex; - align-items: center; - gap: 0.6em; - margin: 0.3em 0; + display: flex; + align-items: center; + gap: 0.6em; + margin: 0.4em 0; } -.panel input[type="range"] { flex: 1; } +.panel input[type="range"] { flex: 1; accent-color: var(--accent); } +.panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; } +.panel input[type="number"] { width: 6em; } -.hidden { display: none; } +#pot-reset-row { display: flex; align-items: center; gap: 0.6em; margin: 0.4em 0; } -#sud-controls button:disabled { opacity: 0.5; cursor: default; } +/* --- Hidden --- */ +.hidden { display: none !important; } -#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 36em; } +/* --- Progress tab: step plates --- */ + +#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; } .step-plate { - border: 1px solid #ccc; - border-radius: 4px; - padding: 0.5em 0.8em; - display: grid; - grid-template-columns: 1.4em 1fr auto; - gap: 0.2em 0.6em; - align-items: center; + background: var(--surface); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.55em 0.9em; + display: grid; + grid-template-columns: 1.4em 1fr auto; + gap: 0.2em 0.6em; + align-items: center; + box-shadow: 0 2px 6px rgba(0,0,0,0.35); } .step-plate .led { - width: 14px; - height: 14px; - border-radius: 50%; - background: var(--led-off); - border: 1px solid #222; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--led-off); + border: 1px solid #555; } .step-plate .title { - font-weight: bold; - grid-column: 2; + font-weight: bold; + grid-column: 2; } .step-plate .remaining { - font-weight: bold; - text-align: right; + font-weight: bold; + text-align: right; + font-family: 'Courier New', monospace; + color: var(--accent); } .step-plate .field { - color: #555; - font-size: 0.95em; + color: var(--text-muted); + font-size: 0.88em; } .step-plate .span2 { grid-column: span 2; } +/* --- Message dialog --- */ + #sud-message-dialog { - border: 1px solid #ccc; - border-radius: 4px; - padding: 1em 1.4em; - max-width: 24em; + background: var(--surface); + color: var(--text); + border: 1px solid var(--border); + border-radius: 8px; + padding: 1.2em 1.6em; + max-width: 24em; + box-shadow: 0 8px 32px rgba(0,0,0,0.7); } -#sud-message-dialog::backdrop { background: rgba(0, 0, 0, 0.3); } +#sud-message-dialog::backdrop { background: rgba(0,0,0,0.65); } #sud-message-dialog form { margin-top: 1em; text-align: right; } +/* --- Footer --- */ + footer { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background: #f0f0f0; - border-top: 1px solid #ccc; - padding: 0.3em 1em; - display: flex; - justify-content: space-between; - font-size: 0.9em; + position: fixed; + bottom: 0; left: 0; right: 0; + background: var(--surface); + border-top: 1px solid var(--border); + padding: 0.35em 1em; + display: flex; + justify-content: space-between; + font-size: 0.82em; + color: var(--text-muted); }