jensandClaude Sonnet 4.6
83fd16e46c
Ports on_action_sud_new/_save/_load() and on_action_sud_start/_stop() from client/brewpi_gui.py: Load/Save stand in for the native file dialogs with <input type="file">/FileReader and a Blob/<a download>, New sends the same hardcoded empty-doc Load, and Start/Stop are gated by updateSudActions() mirroring update_sud_actions()'s enabled/disabled logic. Also fixes the status line's step number being one below what the Progress tab's plates show for the same step (same bug just fixed in the desktop client). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0189FkmyJkY77HqsNomr1DwV
138 lines
2.4 KiB
CSS
138 lines
2.4 KiB
CSS
:root {
|
|
--led-off: #555555;
|
|
--led-green: #2ecc71;
|
|
--led-green-dim: #1b5e36;
|
|
--led-orange: #e67e22;
|
|
--led-orange-dim: #7a4111;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
padding: 0.5em 1em 4em 1em;
|
|
color: #222;
|
|
}
|
|
|
|
header#connection-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1em;
|
|
padding-bottom: 0.5em;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.status-connected { color: #2ecc71; font-weight: bold; }
|
|
.status-disconnected { color: #999; }
|
|
|
|
#lcd-panel {
|
|
display: grid;
|
|
grid-template-columns: 10em 6em 6em;
|
|
gap: 0.2em 1em;
|
|
margin: 1em 0;
|
|
max-width: 30em;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
nav#tabs {
|
|
margin-top: 1em;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
.tab-btn {
|
|
background: none;
|
|
border: 1px solid #ccc;
|
|
border-bottom: none;
|
|
padding: 0.4em 1em;
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
.tab-btn.active {
|
|
background: #fff;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.tab-content { display: none; padding: 1em 0; }
|
|
.tab-content.active { display: block; }
|
|
|
|
.panel {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 0.6em 1em;
|
|
margin-bottom: 0.8em;
|
|
max-width: 30em;
|
|
}
|
|
.panel h3 { margin: 0 0 0.4em 0; }
|
|
.panel label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6em;
|
|
margin: 0.3em 0;
|
|
}
|
|
.panel input[type="range"] { flex: 1; }
|
|
|
|
.hidden { display: none; }
|
|
|
|
.button-row {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
margin: 0.3em 0;
|
|
}
|
|
.button-row button:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 36em; }
|
|
|
|
.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;
|
|
}
|
|
.step-plate .led {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--led-off);
|
|
border: 1px solid #222;
|
|
}
|
|
.step-plate .title {
|
|
font-weight: bold;
|
|
grid-column: 2;
|
|
}
|
|
.step-plate .remaining {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
.step-plate .field {
|
|
color: #555;
|
|
font-size: 0.95em;
|
|
}
|
|
.step-plate .span2 { grid-column: span 2; }
|
|
|
|
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;
|
|
}
|