danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

UI consistency (tabs/cards): add .tab and .card primitives (no migration)

Browse source 
Add the canonical .tab (bordered rounded-pill filter tab) and .card ("glass"
content card) primitives as the documented design-system standard for new
markup and the React pages — modeled on the cleanest existing looks
(watchlist filter pill; dashboard service/stat card).

Deliberately NOT migrating the existing tab/card components onto them: the
current implementations are visually divergent and JS-coupled (active-state
toggled by class name, cards built in JS), so a blind consolidation risks
subtle regressions. These primitives let new/React code be consistent now;
the legacy components migrate when visually verifiable / in React.

Unused classes -> zero visual change to the current UI.
This commit is contained in:
BoulderBadgeDad 2026-05-29 08:28:18 -07:00
parent dd5fe844d4
commit 079c169f8d
1 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
webui/static/style.css
View file

@ -8068,6 +8068,51 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
/* ── Shared tab / filter-pill primitive ─────────────────────────────
Canonical pill tab (the bordered rounded-pill filter look). New markup and
the React pages should use `.tab` + `.tab.active`. Existing per-page pill
classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately
left in place — they're JS-coupled and visually divergent, so they should be
migrated only when visually verifiable / in React, not blind. */
.tab {
padding: 6px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
}
.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); }
.tab.active {
color: #fff;
border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.15);
}
/* ── Shared card primitive ──────────────────────────────────────────
Canonical "glass" content card (the dashboard service/stat card look). New
markup and the React pages should use `.card`. Existing per-feature card
classes are left in place; migrate when visually verifiable / in React. */
.card {
padding: 20px 22px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(18, 18, 22, 0.9);
backdrop-filter: blur(12px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: all 0.2s ease;
}
.card:hover {
transform: translateY(-2px);
border-color: rgba(var(--accent-rgb), 0.3);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* ── Shared page shell ──────────────────────────────────────────────
The canonical page card (the dashboard / stats look). Adopted by the
dashboard, tools, watchlist and wishlist pages — and intended for reuse