let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): refresh dashboard theme

Browse Source
This commit is contained in:
Peter Steinberger
2026-01-02 11:21:51 +00:00
parent 7f8af736dd
commit 95f03d63ad
3 changed files with 280 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
ui/src/styles/base.css
View File

@@ -1,54 +1,60 @@
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Unbounded:wght@400;500;600&family=Work+Sans:wght@400;500;600;700&display=swap");
:root { :root {
--bg: #0a0e14; --bg: #0a0f14;
--bg-accent: #101826; --bg-accent: #111826;
--bg-grad-1: #1a2740; --bg-grad-1: #162031;
--bg-grad-2: #241626; --bg-grad-2: #1f2a22;
--bg-overlay: rgba(255, 255, 255, 0.03); --bg-overlay: rgba(255, 255, 255, 0.05);
--bg-glow: rgba(54, 207, 201, 0.08); --bg-glow: rgba(245, 159, 74, 0.12);
--panel: rgba(18, 24, 36, 0.92); --panel: rgba(14, 20, 30, 0.88);
--panel-strong: rgba(24, 32, 46, 0.95); --panel-strong: rgba(18, 26, 38, 0.96);
--chrome: rgba(10, 14, 20, 0.75); --chrome: rgba(9, 14, 20, 0.72);
--chrome-strong: rgba(10, 14, 20, 0.82); --chrome-strong: rgba(9, 14, 20, 0.86);
--text: rgba(246, 248, 252, 0.95); --text: rgba(244, 246, 251, 0.96);
--chat-text: rgba(246, 248, 252, 0.88); --chat-text: rgba(231, 237, 244, 0.92);
--muted: rgba(210, 218, 230, 0.62); --muted: rgba(156, 169, 189, 0.72);
--border: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.09);
--accent: #ff7a3d; --border-strong: rgba(255, 255, 255, 0.16);
--accent-2: #36cfc9; --accent: #f59f4a;
--ok: #1bd98a; --accent-2: #34c7b7;
--ok: #2bd97f;
--warn: #f2c94c; --warn: #f2c94c;
--danger: #ff5c5c; --danger: #ff6b6b;
--focus: rgba(245, 159, 74, 0.35);
--grid-line: rgba(255, 255, 255, 0.04);
--theme-switch-x: 50%; --theme-switch-x: 50%;
--theme-switch-y: 50%; --theme-switch-y: 50%;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; "Liberation Mono", "Courier New", monospace;
--font-body: "Space Grotesk", system-ui, sans-serif; --font-body: "Work Sans", system-ui, sans-serif;
--font-display: "Fraunces", "Times New Roman", serif; --font-display: "Unbounded", "Times New Roman", serif;
color-scheme: dark; color-scheme: dark;
} }
:root[data-theme="light"] { :root[data-theme="light"] {
--bg: #f5f7fb; --bg: #f5f1ea;
--bg-accent: #ffffff; --bg-accent: #ffffff;
--bg-grad-1: #e3edf9; --bg-grad-1: #f1e6d6;
--bg-grad-2: #f7e6f0; --bg-grad-2: #e5eef4;
--bg-overlay: rgba(28, 32, 46, 0.04); --bg-overlay: rgba(28, 32, 46, 0.05);
--bg-glow: rgba(54, 207, 201, 0.12); --bg-glow: rgba(52, 199, 183, 0.14);
--panel: rgba(255, 255, 255, 0.9); --panel: rgba(255, 255, 255, 0.9);
--panel-strong: rgba(255, 255, 255, 0.98); --panel-strong: rgba(255, 255, 255, 0.97);
--chrome: rgba(255, 255, 255, 0.72); --chrome: rgba(255, 255, 255, 0.75);
--chrome-strong: rgba(255, 255, 255, 0.82); --chrome-strong: rgba(255, 255, 255, 0.88);
--text: rgba(20, 24, 36, 0.96); --text: rgba(27, 36, 50, 0.98);
--chat-text: rgba(20, 24, 36, 0.82); --chat-text: rgba(36, 48, 66, 0.9);
--muted: rgba(50, 58, 76, 0.6); --muted: rgba(80, 94, 114, 0.7);
--border: rgba(16, 24, 40, 0.12); --border: rgba(18, 24, 40, 0.12);
--accent: #ff7a3d; --border-strong: rgba(18, 24, 40, 0.2);
--accent-2: #1bb9b1; --accent: #e28a3f;
--ok: #15b97a; --accent-2: #1ba99d;
--warn: #c58a1a; --ok: #1aa86c;
--danger: #e84343; --warn: #b3771c;
--danger: #d44848;
--focus: rgba(226, 138, 63, 0.35);
--grid-line: rgba(18, 24, 40, 0.06);
color-scheme: light; color-scheme: light;
} }
@@ -63,16 +69,13 @@ body {
body { body {
margin: 0; margin: 0;
font: 15px/1.4 var(--font-body); font: 15px/1.5 var(--font-body);
background: radial-gradient( background:
1200px 900px at 20% 0%, radial-gradient(1200px 900px at 15% -10%, var(--bg-grad-1) 0%, transparent 55%)
var(--bg-grad-1) 0%,
var(--bg) 55%
)
fixed, fixed,
radial-gradient(900px 700px at 90% 10%, var(--bg-grad-2) 0%, transparent 55%) radial-gradient(900px 700px at 80% 10%, var(--bg-grad-2) 0%, transparent 60%)
fixed, fixed,
var(--bg); linear-gradient(160deg, var(--bg) 0%, var(--bg-accent) 100%) fixed;
color: var(--text); color: var(--text);
} }
@@ -80,16 +83,37 @@ body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background: linear-gradient( background:
135deg, linear-gradient(
140deg,
var(--bg-overlay) 0%, var(--bg-overlay) 0%,
rgba(255, 255, 255, 0) 35% rgba(255, 255, 255, 0) 40%
), ),
radial-gradient( radial-gradient(620px 420px at 75% 75%, var(--bg-glow), transparent 60%);
600px 400px at 80% 80%, pointer-events: none;
var(--bg-glow), z-index: 0;
transparent 60% }
body::after {
content: "";
position: fixed;
inset: 0;
background:
repeating-linear-gradient(
90deg,
var(--grid-line) 0,
var(--grid-line) 1px,
transparent 1px,
transparent 140px
),
repeating-linear-gradient(
0deg,
var(--grid-line) 0,
var(--grid-line) 1px,
transparent 1px,
transparent 140px
); );
opacity: 0.45;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
} }
@@ -160,3 +184,14 @@ select {
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes dashboard-enter {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

167
ui/src/styles/components.css
View File

@@ -1,34 +1,38 @@
.card { .card {
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--panel); background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 65%),
border-radius: 18px; var(--panel);
border-radius: 16px;
padding: 16px; padding: 16px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
animation: rise 0.35s ease; animation: rise 0.4s ease;
} }
.card-title { .card-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 18px; font-size: 16px;
letter-spacing: 0.6px;
text-transform: uppercase;
} }
.card-sub { .card-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 12px;
} }
.stat { .stat {
background: var(--panel-strong); background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), transparent 70%),
var(--panel-strong);
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--border-strong);
} }
.stat-label { .stat-label {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 1px;
} }
.stat-value { .stat-value {
@@ -51,6 +55,7 @@
.note-title { .note-title {
font-weight: 600; font-weight: 600;
letter-spacing: 0.2px;
} }
.status-list { .status-list {
@@ -72,19 +77,20 @@
.label { .label {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.6px; letter-spacing: 0.9px;
} }
.pill { .pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border: 1px solid var(--border); border: 1px solid var(--border-strong);
padding: 6px 10px; padding: 6px 12px;
border-radius: 999px; border-radius: 999px;
background: var(--panel); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent),
var(--panel);
} }
.theme-toggle { .theme-toggle {
@@ -101,8 +107,8 @@
gap: var(--theme-gap); gap: var(--theme-gap);
padding: var(--theme-pad); padding: var(--theme-pad);
border-radius: 999px; border-radius: 999px;
border: 1px solid var(--border); border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.04);
} }
.theme-toggle__indicator { .theme-toggle__indicator {
@@ -114,10 +120,12 @@
border-radius: 999px; border-radius: 999px;
transform: translateY(-50%) transform: translateY(-50%)
translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap)))); translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap))));
background: var(--panel-strong); background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent),
border: 1px solid var(--border); var(--panel-strong);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); border: 1px solid var(--border-strong);
transition: transform 180ms ease-out, background 180ms ease-out; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
transition: transform 180ms ease-out, background 180ms ease-out,
box-shadow 180ms ease-out;
z-index: 0; z-index: 0;
} }
@@ -170,28 +178,31 @@
.statusDot.ok { .statusDot.ok {
background: var(--ok); background: var(--ok);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 10px rgba(43, 217, 127, 0.4);
} }
.btn { .btn {
border: 1px solid var(--border); border: 1px solid var(--border-strong);
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
padding: 8px 12px; padding: 8px 14px;
border-radius: 10px; border-radius: 999px;
cursor: pointer; cursor: pointer;
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
} }
.btn:hover { .btn:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
} }
.btn.primary { .btn.primary {
border-color: rgba(255, 122, 61, 0.35); border-color: rgba(245, 159, 74, 0.45);
background: rgba(255, 122, 61, 0.18); background: rgba(245, 159, 74, 0.2);
} }
.btn.danger { .btn.danger {
border-color: rgba(255, 92, 92, 0.4); border-color: rgba(255, 107, 107, 0.45);
background: rgba(255, 92, 92, 0.16); background: rgba(255, 107, 107, 0.18);
} }
.field { .field {
@@ -201,17 +212,28 @@
.field span { .field span {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 11px;
letter-spacing: 0.4px;
} }
.field input, .field input,
.field textarea, .field textarea,
.field select { .field select {
border: 1px solid var(--border); border: 1px solid var(--border-strong);
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.22);
border-radius: 10px; border-radius: 12px;
padding: 8px 10px; padding: 9px 11px;
outline: none; outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease,
background 150ms ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--focus);
background: rgba(0, 0, 0, 0.28);
} }
.field select { .field select {
@@ -238,6 +260,10 @@
white-space: pre; white-space: pre;
} }
.field textarea:focus {
background: rgba(0, 0, 0, 0.32);
}
.field.checkbox { .field.checkbox {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: center; align-items: center;
@@ -249,6 +275,19 @@
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
} }
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select {
background: rgba(255, 255, 255, 0.9);
border-color: var(--border-strong);
}
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field textarea:focus,
:root[data-theme="light"] .field select:focus {
background: #ffffff;
}
.muted { .muted {
color: var(--muted); color: var(--muted);
} }
@@ -259,9 +298,10 @@
.callout { .callout {
padding: 10px 12px; padding: 10px 12px;
border-radius: 12px; border-radius: 14px;
background: rgba(255, 255, 255, 0.05); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent),
border: 1px solid rgba(255, 255, 255, 0.08); rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
} }
.callout.danger { .callout.danger {
@@ -274,12 +314,19 @@
font-size: 12px; font-size: 12px;
background: rgba(0, 0, 0, 0.35); background: rgba(0, 0, 0, 0.35);
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
max-height: 360px; max-height: 360px;
overflow: auto; overflow: auto;
} }
:root[data-theme="light"] .code-block,
:root[data-theme="light"] .list-item,
:root[data-theme="light"] .table-row,
:root[data-theme="light"] .chip {
background: rgba(255, 255, 255, 0.85);
}
.list { .list {
display: grid; display: grid;
gap: 12px; gap: 12px;
@@ -308,13 +355,13 @@
.list-sub { .list-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 12px;
} }
.list-meta { .list-meta {
text-align: right; text-align: right;
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 11px;
display: grid; display: grid;
gap: 4px; gap: 4px;
min-width: 220px; min-width: 220px;
@@ -333,7 +380,7 @@
} }
.chip { .chip {
font-size: 12px; font-size: 11px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 999px; border-radius: 999px;
padding: 4px 8px; padding: 4px 8px;
@@ -365,7 +412,7 @@
} }
.table-head { .table-head {
font-size: 12px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.8px; letter-spacing: 0.8px;
color: var(--muted); color: var(--muted);
@@ -414,11 +461,11 @@
padding: 14px 12px; padding: 14px 12px;
min-width: 0; min-width: 0;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--border);
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.26) 100% rgba(0, 0, 0, 0.3) 100%
); );
} }
@@ -457,10 +504,10 @@
.chat-bubble { .chat-bubble {
border: 1px solid var(--border); border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.24); background: rgba(0, 0, 0, 0.24);
border-radius: 18px; border-radius: 16px;
padding: 10px 12px; padding: 10px 12px;
min-width: 0; min-width: 0;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
} }
:root[data-theme="light"] .chat-bubble { :root[data-theme="light"] .chat-bubble {
@@ -469,20 +516,20 @@
} }
.chat-line.user .chat-bubble { .chat-line.user .chat-bubble {
border-color: rgba(255, 122, 61, 0.35); border-color: rgba(245, 159, 74, 0.45);
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(255, 122, 61, 0.24) 0%, rgba(245, 159, 74, 0.26) 0%,
rgba(255, 122, 61, 0.12) 100% rgba(245, 159, 74, 0.12) 100%
); );
} }
.chat-line.assistant .chat-bubble { .chat-line.assistant .chat-bubble {
border-color: rgba(54, 207, 201, 0.16); border-color: rgba(52, 199, 183, 0.2);
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(54, 207, 201, 0.08) 0%, rgba(52, 199, 183, 0.12) 0%,
rgba(0, 0, 0, 0.22) 100% rgba(0, 0, 0, 0.24) 100%
); );
} }
@@ -496,18 +543,18 @@
@keyframes chatStreamPulse { @keyframes chatStreamPulse {
0% { 0% {
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(54, 207, 201, 0); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24), 0 0 0 0 rgba(52, 199, 183, 0);
} }
60% { 60% {
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), 0 0 0 6px rgba(54, 207, 201, 0.06); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24), 0 0 0 6px rgba(52, 199, 183, 0.08);
} }
100% { 100% {
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(54, 207, 201, 0); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24), 0 0 0 0 rgba(52, 199, 183, 0);
} }
} }
.chat-bubble.streaming { .chat-bubble.streaming {
border-color: rgba(54, 207, 201, 0.32); border-color: rgba(52, 199, 183, 0.4);
animation: chatStreamPulse 1.6s ease-in-out infinite; animation: chatStreamPulse 1.6s ease-in-out infinite;
} }
@@ -548,7 +595,7 @@
.chat-compose__field textarea { .chat-compose__field textarea {
min-height: 72px; min-height: 72px;
padding: 10px 12px; padding: 10px 12px;
border-radius: 14px; border-radius: 16px;
resize: vertical; resize: vertical;
white-space: pre-wrap; white-space: pre-wrap;
font-family: var(--font-body); font-family: var(--font-body);
@@ -579,7 +626,7 @@
margin-top: 12px; margin-top: 12px;
border-radius: 14px; border-radius: 14px;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border: 1px dashed rgba(255, 255, 255, 0.12); border: 1px dashed rgba(255, 255, 255, 0.18);
padding: 12px; padding: 12px;
display: inline-flex; display: inline-flex;
} }

112
ui/src/styles/layout.css
View File

@@ -1,11 +1,14 @@
.shell { .shell {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-columns: 240px 1fr; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-areas: grid-template-areas:
"topbar topbar" "topbar topbar"
"nav content"; "nav content";
gap: 18px;
padding: 18px;
animation: dashboard-enter 0.6s ease-out;
} }
.topbar { .topbar {
@@ -13,21 +16,31 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 18px 24px; padding: 16px 20px;
border-bottom: 1px solid var(--border); border: 1px solid var(--border);
background: var(--chrome); border-radius: 18px;
backdrop-filter: blur(16px); background: linear-gradient(135deg, var(--chrome), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(18px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.brand {
display: grid;
gap: 4px;
} }
.brand-title { .brand-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 22px; font-size: 20px;
letter-spacing: 0.4px; letter-spacing: 0.6px;
text-transform: uppercase;
} }
.brand-sub { .brand-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
} }
.topbar-status { .topbar-status {
@@ -38,49 +51,87 @@
.nav { .nav {
grid-area: nav; grid-area: nav;
padding: 18px 16px; padding: 16px;
border-right: 1px solid var(--border); border: 1px solid var(--border);
background: var(--chrome-strong); border-radius: 20px;
background: var(--panel);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(18px);
} }
.nav-group { .nav-group {
margin-bottom: 18px; margin-bottom: 18px;
display: grid; display: grid;
gap: 6px; gap: 6px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.nav-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
} }
.nav-label { .nav-label {
font-size: 11px; font-size: 10px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.4px; letter-spacing: 1.6px;
color: var(--muted); color: var(--muted);
} }
.nav-item { .nav-item {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
padding: 9px 12px; padding: 10px 12px 10px 14px;
border-radius: 12px; border-radius: 12px;
border: 1px solid transparent; border: 1px solid transparent;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.02);
color: var(--muted); color: var(--muted);
cursor: pointer; cursor: pointer;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease,
transform 160ms ease;
}
.nav-item:hover {
color: var(--text);
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
}
.nav-item::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
width: 4px;
height: 60%;
border-radius: 999px;
transform: translateY(-50%);
background: transparent;
} }
.nav-item.active { .nav-item.active {
color: var(--text); color: var(--text);
border-color: rgba(255, 122, 61, 0.45); border-color: rgba(245, 159, 74, 0.45);
background: rgba(255, 122, 61, 0.14); background: rgba(245, 159, 74, 0.16);
transform: translateX(2px);
}
.nav-item.active::before {
background: var(--accent);
box-shadow: 0 0 12px rgba(245, 159, 74, 0.4);
} }
.content { .content {
grid-area: content; grid-area: content;
padding: 24px 28px 32px; padding: 8px 6px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 20px;
} }
.content-header { .content-header {
@@ -88,17 +139,19 @@
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 0 6px;
} }
.page-title { .page-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 24px; font-size: 26px;
letter-spacing: 0.4px; letter-spacing: 0.6px;
} }
.page-sub { .page-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 12px;
letter-spacing: 0.4px;
} }
.page-meta { .page-meta {
@@ -108,7 +161,7 @@
.grid { .grid {
display: grid; display: grid;
gap: 16px; gap: 18px;
} }
.grid-cols-2 { .grid-cols-2 {
@@ -121,13 +174,13 @@
.stat-grid { .stat-grid {
display: grid; display: grid;
gap: 12px; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
} }
.note-grid { .note-grid {
display: grid; display: grid;
gap: 12px; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
} }
@@ -139,13 +192,13 @@
.stack { .stack {
display: grid; display: grid;
gap: 12px; gap: 14px;
} }
.filters { .filters {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 10px;
align-items: center; align-items: center;
} }
@@ -157,6 +210,7 @@
"topbar" "topbar"
"nav" "nav"
"content"; "content";
padding: 12px;
} }
.nav { .nav {
@@ -164,12 +218,14 @@
gap: 16px; gap: 16px;
overflow-x: auto; overflow-x: auto;
border-right: none; border-right: none;
border-bottom: 1px solid var(--border); padding: 12px;
} }
.nav-group { .nav-group {
grid-auto-flow: column; grid-auto-flow: column;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
border-bottom: none;
padding-bottom: 0;
} }
.grid-cols-2, .grid-cols-2,