timothy/ersatztv
1
0
Fork 0
Code Issues 51 Pull Requests 5 Actions Packages Projects Releases 9 Wiki Activity

feat(frontend): wire ChicoryTV SPA themes

Browse Source 
refs #79
This commit is contained in:
timothy
2026-07-02 07:56:12 +02:00
parent b183c6a154
commit e282bcecfa
7 changed files with 398 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/shell.css
+154 -57
View File
@@ -1,23 +1,25 @@
.ctv-app-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
background: var(--ctv-bg, #0f1115);
color: var(--text-primary, #e6e9ef);
grid-template-columns: var(--sidebar-w, 232px) minmax(0, 1fr);
background: var(--surface-app, #12100e);
color: var(--text-primary, #f0ebe4);
font-family: var(--font-sans, system-ui, sans-serif);
font-size: var(--text-sm, 13px);
line-height: var(--leading-normal, 1.5);
}
.ctv-sidebar {
border-right: 1px solid var(--border-default, #262b36);
background: var(--surface-sunken, #0b0d11);
padding: 16px 10px;
border-right: 1px solid var(--border-hairline, #2e2823);
background: var(--ctv-bg-sunken, #0c0b09);
padding: var(--space-7, 16px) var(--space-5, 10px);
}
.ctv-brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px 18px;
gap: var(--space-5, 10px);
padding: 0 var(--space-5, 10px) var(--space-8, 20px);
}
.ctv-brand img {
@@ -29,12 +31,12 @@
.ctv-topbar h2,
.ctv-panel h3 {
margin: 0;
letter-spacing: 0;
letter-spacing: var(--tracking-normal, 0);
}
.ctv-brand h1 {
font-size: 16px;
line-height: 1.1;
font-size: var(--text-lg, 16px);
line-height: var(--leading-tight, 1.2);
}
.ctv-brand span,
@@ -47,113 +49,185 @@
.ctv-brand span,
.ctv-panel-header p,
.ctv-topbar p {
font-size: 12px;
font-size: var(--text-xs, 12px);
}
.ctv-nav {
display: grid;
gap: 3px;
gap: var(--space-2, 4px);
}
.ctv-nav a {
position: relative;
display: flex;
align-items: center;
gap: 9px;
height: 34px;
padding: 0 10px;
border-radius: 5px;
color: var(--text-secondary, #9aa4b2);
gap: var(--space-4, 8px);
height: var(--control-h, 34px);
padding: 0 var(--space-5, 10px);
border-radius: var(--radius-sm, 5px);
color: var(--text-secondary, #a89e92);
text-decoration: none;
font-size: 13px;
font-size: var(--text-sm, 13px);
transition:
background var(--dur-fast, 90ms) var(--ease-standard, ease),
color var(--dur-fast, 90ms) var(--ease-standard, ease);
}
.ctv-nav a:hover,
.ctv-nav a.is-active {
background: var(--surface-selected, #222732);
color: var(--text-primary, #e6e9ef);
background: var(--surface-selected, #2c2620);
color: var(--text-primary, #f0ebe4);
}
.ctv-nav a.is-active::before {
position: absolute;
left: 0;
width: 3px;
height: 18px;
border-radius: 999px;
height: var(--space-8, 20px);
border-radius: var(--radius-pill, 999px);
background: var(--action-primary, #e08a3c);
content: "";
}
.ctv-main {
min-width: 0;
padding: 24px 32px;
padding: var(--space-9, 24px) var(--pad-page, 32px);
}
.ctv-topbar {
min-height: 52px;
min-height: var(--topbar-h, 52px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--border-default, #262b36);
padding-bottom: 18px;
gap: var(--space-7, 16px);
border-bottom: 1px solid var(--border-hairline, #2e2823);
padding-bottom: var(--space-8, 20px);
}
.ctv-topbar h2 {
font-size: 20px;
font-size: var(--text-xl, 20px);
line-height: var(--leading-tight, 1.2);
}
.ctv-topbar p,
.ctv-panel-header p {
margin: 0 0 4px;
margin: 0 0 var(--space-2, 4px);
text-transform: uppercase;
font-weight: 600;
font-weight: var(--weight-semibold, 600);
letter-spacing: var(--tracking-caps, 0.06em);
}
.ctv-primary-action {
height: 34px;
height: var(--control-h, 34px);
display: inline-flex;
align-items: center;
gap: 8px;
gap: var(--gap-inline, 8px);
border: 1px solid var(--action-primary, #e08a3c);
border-radius: 5px;
border-radius: var(--radius-sm, 5px);
background: var(--action-primary, #e08a3c);
color: var(--action-primary-text, #111318);
padding: 0 12px;
color: var(--text-on-accent, #1f1204);
padding: 0 var(--space-6, 12px);
font: inherit;
font-weight: 600;
font-weight: var(--weight-semibold, 600);
transition:
background var(--dur-fast, 90ms) var(--ease-standard, ease),
border-color var(--dur-fast, 90ms) var(--ease-standard, ease);
}
.ctv-primary-action:hover {
border-color: var(--action-primary-hover, #ec9a52);
background: var(--action-primary-hover, #ec9a52);
}
.ctv-theme-switcher {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--gap-inline, 8px);
margin-top: var(--space-7, 16px);
color: var(--text-secondary, #a89e92);
font-size: var(--text-xs, 12px);
}
.ctv-theme-switcher span {
font-weight: var(--weight-semibold, 600);
letter-spacing: var(--tracking-caps, 0.06em);
text-transform: uppercase;
}
.ctv-theme-switcher div {
display: flex;
gap: var(--space-3, 6px);
}
.ctv-theme-swatch {
width: 24px;
height: 24px;
border: 2px solid transparent;
border-radius: var(--radius-pill, 999px);
cursor: pointer;
padding: 0;
transition:
border-color var(--dur-fast, 90ms) var(--ease-standard, ease),
transform var(--dur-fast, 90ms) var(--ease-standard, ease);
}
.ctv-theme-swatch:hover {
transform: translateY(-1px);
}
.ctv-theme-swatch:focus-visible {
outline: 0;
box-shadow: var(--ring-focus, 0 0 0 3px var(--focus-ring));
}
.ctv-theme-swatch[aria-pressed="true"] {
border-color: var(--text-primary, #f0ebe4);
}
.ctv-theme-swatch-warm {
background: #e08a3c;
}
.ctv-theme-swatch-cool {
background: #5b7cfa;
}
.ctv-theme-swatch-dual {
background: linear-gradient(135deg, #5b7cfa 0 50%, #f0663f 50% 100%);
}
.ctv-panel {
margin-top: 24px;
border: 1px solid var(--border-default, #262b36);
border-radius: 7px;
background: var(--surface-default, #171a21);
margin-top: var(--space-9, 24px);
border: 1px solid var(--border-hairline, #2e2823);
border-radius: var(--radius-md, 7px);
background: var(--surface-card, #1c1917);
}
.ctv-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
border-bottom: 1px solid var(--border-default, #262b36);
gap: var(--space-7, 16px);
padding: var(--space-7, 16px);
border-bottom: 1px solid var(--border-hairline, #2e2823);
}
.ctv-panel h3 {
font-size: 16px;
font-size: var(--text-lg, 16px);
line-height: var(--leading-snug, 1.35);
}
.ctv-status {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
background: var(--status-ok-bg, rgba(63, 185, 132, 0.14));
gap: var(--space-3, 6px);
border-radius: var(--radius-pill, 999px);
background: var(--ctv-ok-soft, rgba(63, 185, 132, 0.14));
color: var(--status-ok, #3fb984);
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
padding: var(--space-2, 4px) var(--space-4, 8px);
font-size: var(--text-xs, 12px);
font-weight: var(--weight-semibold, 600);
}
.ctv-stats {
@@ -163,9 +237,9 @@
.ctv-stats div {
display: grid;
gap: 6px;
padding: 16px;
border-right: 1px solid var(--border-default, #262b36);
gap: var(--space-3, 6px);
padding: var(--space-7, 16px);
border-right: 1px solid var(--border-hairline, #2e2823);
}
.ctv-stats div:last-child {
@@ -174,7 +248,9 @@
.ctv-stats strong {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 26px;
font-size: var(--text-2xl, 26px);
font-feature-settings: var(--numeric-feature);
font-variant-numeric: tabular-nums;
line-height: 1;
}
@@ -185,7 +261,7 @@
.ctv-sidebar {
border-right: 0;
border-bottom: 1px solid var(--border-default, #262b36);
border-bottom: 1px solid var(--border-hairline, #2e2823);
}
.ctv-nav,
@@ -194,6 +270,27 @@
}
.ctv-main {
padding: 20px 16px;
padding: var(--space-8, 20px) var(--space-7, 16px);
}
.ctv-topbar {
align-items: flex-start;
flex-direction: column;
}
.ctv-theme-switcher {
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.ctv-nav a,
.ctv-primary-action,
.ctv-theme-swatch {
transition: none;
}
.ctv-theme-swatch:hover {
transform: none;
}
}