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

- 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

View file

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

View file

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