moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): polish brew form and stepper buttons

Browse source 
- Hide native number input spin buttons across browsers
- Fix brew time field width to match sibling fields
- Restyle .btn-adjust with accent-subtle fill instead of border
- Remove (M:SS) hint from brew time label
This commit is contained in:
Jon Seager 2026-02-07 11:29:51 +00:00
parent 4eed3658f2
commit cc4f9068d9
No known key found for this signature in database
2 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
static/css/input.css
View file

@ -111,6 +111,16 @@ a {
transition: border-color 150ms ease, box-shadow 150ms ease;
}
input.input-field[type="number"]::-webkit-inner-spin-button,
input.input-field[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.input-field[type="number"] {
-moz-appearance: textfield;
}
.input-field:focus {
outline: none;
border-color: var(--accent);
@ -124,17 +134,16 @@ a {
align-items: center;
justify-content: center;
border-radius: 0.375rem;
border: 1px solid var(--border);
background-color: transparent;
color: var(--text-secondary);
border: none;
background-color: var(--accent-subtle);
color: var(--accent);
font-weight: 700;
transition: background-color 150ms ease, border-color 150ms ease;
transition: background-color 150ms ease, color 150ms ease;
}
.btn-adjust:hover {
background-color: var(--surface-alt);
border-color: var(--accent);
color: var(--accent);
background-color: var(--accent);
color: var(--accent-text);
}
/* ── Pills ─────────────────────────────────────────────────────── */

18
templates/pages/add.html
View file

@ -353,14 +353,16 @@
<!-- Brew Time -->
<div>
<h4 class="text-xs font-semibold text-text-muted uppercase tracking-wide mb-3">Brew Time</h4>
<div class="flex flex-col gap-1 text-sm" style="max-width: 16rem">
<span class="text-text">Time (M:SS)</span>
<div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$_brewTime = Math.max(5, $_brewTime - 5)">-</button>
<input type="hidden" name="brew_time" data-attr:value="$_brewTime" />
<input type="text" readonly class="input-field flex-1 text-center"
data-attr:value="Math.floor($_brewTime / 60) + ':' + String($_brewTime % 60).padStart(2, '0')" />
<button type="button" class="btn-adjust" data-on:click="$_brewTime = $_brewTime + 5">+</button>
<div class="grid gap-4 sm:grid-cols-2">
<div class="flex flex-col gap-1 text-sm">
<span class="text-text">Time</span>
<div class="flex items-center gap-2">
<button type="button" class="btn-adjust" data-on:click="$_brewTime = Math.max(5, $_brewTime - 5)">-</button>
<input type="hidden" name="brew_time" data-attr:value="$_brewTime" />
<input type="text" readonly class="input-field flex-1 text-center"
data-attr:value="Math.floor($_brewTime / 60) + ':' + String($_brewTime % 60).padStart(2, '0')" />
<button type="button" class="btn-adjust" data-on:click="$_brewTime = $_brewTime + 5">+</button>
</div>
</div>
</div>
</div>