jens/brewpi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Retheme web UI to dark Mainsail-inspired design with transport buttons

Browse Source 
- 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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Tqxrk8uj4M3w3d3eXm3xK8
This commit is contained in:
jens
2026-06-25 21:00:53 +02:00
co-authored by Claude Sonnet 4.6
parent 42d7776a85
commit 95a05eb0c2
2 changed files with 216 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+3 -3
View File
@@ -16,9 +16,9 @@
<button id="btn-sud-load">Load&hellip;</button> <button id="btn-sud-load">Load&hellip;</button>
<input type="file" id="sud-file-input" accept="application/json" class="hidden"> <input type="file" id="sud-file-input" accept="application/json" class="hidden">
<button id="btn-sud-save">Save&hellip;</button> <button id="btn-sud-save">Save&hellip;</button>
<button id="btn-sud-start">Start</button> <button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button>
<button id="btn-sud-pause">Pause</button> <button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
<button id="btn-sud-stop">Stop</button> <button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button>
</span> </span>
</header> </header>
web/style.css
+213 -98
View File
@@ -1,150 +1,265 @@
:root { :root {
--led-off: #555555; --bg: #121212;
--led-green: #2ecc71; --surface: #1e1e1e;
--led-green-dim: #1b5e36; --surface-2: #2a2a2a;
--led-orange: #e67e22; --border: #383838;
--led-orange-dim: #7a4111; --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 { body {
font-family: sans-serif; font-family: 'Segoe UI', system-ui, sans-serif;
margin: 0; margin: 0;
padding: 0.5em 1em 4em 1em; padding: 0.5em 1em 4em 1em;
color: #222; 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 { header#connection-bar {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1em; gap: 1em;
padding-bottom: 0.5em; padding: 0.6em 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border);
} }
.status-connected { color: #2ecc71; font-weight: bold; } .status-connected { color: var(--green); font-weight: bold; }
.status-disconnected { color: #999; } .status-disconnected { color: var(--text-muted); }
/* --- Sud controls section --- */
#sud-controls { #sud-controls {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.4em;
padding-left: 1em; padding-left: 1em;
border-left: 1px solid #ccc; 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 { #lcd-panel {
display: grid; display: grid;
grid-template-columns: 10em 6em 6em; grid-template-columns: 11em 6em 6em;
gap: 0.2em 1em; gap: 0.25em 1em;
margin: 1em 0; margin: 1em 0;
max-width: 30em; 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; } /* --- Tabs --- */
.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;
}
nav#tabs { nav#tabs {
margin-top: 1em; margin-top: 1em;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border);
} }
.tab-btn { .tab-btn {
background: none; background: none;
border: 1px solid #ccc; border: 1px solid transparent;
border-bottom: none; border-bottom: none;
padding: 0.4em 1em; color: var(--text-muted);
cursor: pointer; padding: 0.4em 1.1em;
position: relative; cursor: pointer;
top: 1px; 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 { .tab-btn.active {
background: #fff; background: var(--surface);
font-weight: bold; color: var(--text);
border-bottom: 1px solid #fff; 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; } .tab-content.active { display: block; }
/* --- Manual tab panels --- */
.panel { .panel {
border: 1px solid #ddd; background: var(--surface);
border-radius: 4px; border: 1px solid var(--border);
padding: 0.6em 1em; border-radius: 6px;
margin-bottom: 0.8em; padding: 0.8em 1.1em;
max-width: 30em; 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 { .panel label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6em; gap: 0.6em;
margin: 0.3em 0; 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 { .step-plate {
border: 1px solid #ccc; background: var(--surface);
border-radius: 4px; border: 1px solid var(--border);
padding: 0.5em 0.8em; border-radius: 6px;
display: grid; padding: 0.55em 0.9em;
grid-template-columns: 1.4em 1fr auto; display: grid;
gap: 0.2em 0.6em; grid-template-columns: 1.4em 1fr auto;
align-items: center; gap: 0.2em 0.6em;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
} }
.step-plate .led { .step-plate .led {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
background: var(--led-off); background: var(--led-off);
border: 1px solid #222; border: 1px solid #555;
} }
.step-plate .title { .step-plate .title {
font-weight: bold; font-weight: bold;
grid-column: 2; grid-column: 2;
} }
.step-plate .remaining { .step-plate .remaining {
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
font-family: 'Courier New', monospace;
color: var(--accent);
} }
.step-plate .field { .step-plate .field {
color: #555; color: var(--text-muted);
font-size: 0.95em; font-size: 0.88em;
} }
.step-plate .span2 { grid-column: span 2; } .step-plate .span2 { grid-column: span 2; }
/* --- Message dialog --- */
#sud-message-dialog { #sud-message-dialog {
border: 1px solid #ccc; background: var(--surface);
border-radius: 4px; color: var(--text);
padding: 1em 1.4em; border: 1px solid var(--border);
max-width: 24em; 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; } #sud-message-dialog form { margin-top: 1em; text-align: right; }
/* --- Footer --- */
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0; left: 0; right: 0;
left: 0; background: var(--surface);
right: 0; border-top: 1px solid var(--border);
background: #f0f0f0; padding: 0.35em 1em;
border-top: 1px solid #ccc; display: flex;
padding: 0.3em 1em; justify-content: space-between;
display: flex; font-size: 0.82em;
justify-content: space-between; color: var(--text-muted);
font-size: 0.9em;
} }