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

style(ui): restyle buttons, tabs, and form inputs

Browse source 
- Change btn-adjust to grey border with orange text and subtle hover
- Add font-family/font-size to .input-field for consistency
- Redesign desktop tabs: bordered, orange text, equal width, accent
  border on active instead of filled background
- Redesign mobile tab selector: bordered dropdown with orange text,
  rounded container, subtle active background
This commit is contained in:
Jon Seager 2026-02-07 20:58:41 +00:00
parent 6829239bfc
commit dd3714f0a1
No known key found for this signature in database
2 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
static/css/input.css
View file

@ -107,6 +107,8 @@ a {
border: 1px solid var(--border);
background-color: var(--surface);
padding: 0.6rem 0.75rem;
font-family: inherit;
font-size: 0.875rem;
color: var(--text);
transition: border-color 150ms ease, box-shadow 150ms ease;
}
@ -134,7 +136,7 @@ input.input-field[type="number"] {
align-items: center;
justify-content: center;
border-radius: 0.375rem;
border: 1px solid var(--accent);
border: 1px solid var(--border);
background-color: var(--surface);
color: var(--accent);
font-weight: 700;
@ -142,8 +144,8 @@ input.input-field[type="number"] {
}
.btn-adjust:hover {
background-color: var(--accent);
color: var(--accent-text);
background-color: var(--surface-alt);
color: var(--accent-hover);
}
/* ── Sticky Submit ────────────────────────────────────────────── */
@ -316,15 +318,17 @@ input.input-field[type="number"] {
.tab {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
border-radius: 0.375rem;
padding: 0.375rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
border: none;
border: 1px solid var(--border);
background: none;
transition: background-color 150ms ease, color 150ms ease;
color: var(--text);
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
color: var(--accent);
}
.tab:not(.tab-active):hover {
@ -332,8 +336,7 @@ input.input-field[type="number"] {
}
.tab-active {
background-color: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
}
.tab-mobile {
@ -345,6 +348,7 @@ input.input-field[type="number"] {
cursor: pointer;
border: none;
background: none;
color: var(--accent);
transition: background-color 150ms ease, color 150ms ease;
color: var(--text-secondary);
}
@ -355,8 +359,6 @@ input.input-field[type="number"] {
.tab-mobile-active {
background-color: var(--accent-subtle);
color: var(--text);
font-weight: 600;
}
/* ── Timeline layout ───────────────────────────────────────────── */

7
templates/partials/tab_bar.html
View file

@ -2,7 +2,7 @@
<div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
<!-- Desktop tabs -->
<nav class="hidden md:flex flex-wrap gap-1.5 p-2" role="tablist">
<nav class="hidden md:flex gap-1.5" role="tablist">
{% for tab in tabs %}
<button
type="button"
@ -17,8 +17,7 @@
<div class="md:hidden">
<button
type="button"
class="flex w-full items-center justify-between p-3 text-sm font-medium"
style="color: var(--text)"
class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
data-on:click="$_tabsOpen = !$_tabsOpen"
>
<span>
@ -29,7 +28,7 @@
<span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
<span data-show="$_tabsOpen" style="display:none">{{ icons::chevron_up("h-5 w-5") }}</span>
</button>
<div class="flex flex-col border-t" data-show="$_tabsOpen" style="display:none">
<div class="mt-1 flex flex-col rounded-md border overflow-hidden" data-show="$_tabsOpen" style="display:none">
{% for tab in tabs %}
<button
type="button"