diff options
| author | Adam Soltys <[email protected]> | 2026-09-21 16:28:31 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-21 16:28:31 -0700 |
| commit | 4b7017e216d91f09657091c8abf110ff34023cef (patch) | |
| tree | c28cf4eea55c853f2a7ac83c65fae581f76de301 /src | |
| parent | 8afa3cbc3b5d866a1486f46331711da206857176 (diff) | |
| download | coinosv3-4b7017e216d91f09657091c8abf110ff34023cef.tar.gz coinosv3-4b7017e216d91f09657091c8abf110ff34023cef.zip | |
Receive/Send bar in light mode: paper with a hairline, the chosen tab a soft grey pill.
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Tmfg8k5f3TbNJS34qiqHAp
Diffstat (limited to 'src')
| -rw-r--r-- | src/style.css | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/src/style.css b/src/style.css index 5a0e3a8..bd7a20a 100644 --- a/src/style.css +++ b/src/style.css @@ -22,7 +22,9 @@ --surface2: #f7f8fa; /* subtle raised surface (hover, mnemonic cells) */ --toast-bg: #15171a; /* dark toast on light page */ --toast-fg: #ffffff; - --tab-bg: #e9ebef; /* tab strip background */ + --tab-bg: #ffffff; /* tab strip: paper, like the flat cards beside it */ + --tab-border: var(--line); + --tab-active: #ececef; /* the chosen tab: a quiet grey pill, no shadow */ --info: #3949ab; --info-soft: #eef2ff; --info-line: #d4ddfb; @@ -56,6 +58,8 @@ --toast-bg: #2c323b; /* raised toast that reads against the dark page */ --toast-fg: #f3f5f8; --tab-bg: #20242b; + --tab-border: transparent; + --tab-active: var(--paper); --wash: rgba(247, 147, 26, 0.07); --info: #9db4ff; --info-soft: #1a2030; @@ -184,12 +188,12 @@ input { scroll-margin-top: 12px; } .balance .split .v.pending { color: var(--accent-ink); } /* ---- tabs ---- */ -.tabs { display: flex; gap: 4px; background: var(--tab-bg); border-radius: 12px; padding: 4px; margin: 16px 0; } +.tabs { display: flex; gap: 4px; background: var(--tab-bg); border: 1px solid var(--tab-border); border-radius: 12px; padding: 4px; margin: 16px 0; } .tabs button { flex: 1; border: 0; background: transparent; padding: 9px 4px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; } -.tabs button.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); } +.tabs button.active { background: var(--tab-active); color: var(--ink); } /* ---- buttons ---- */ button, .btn { |