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

UI: refresh dashboard design system (#1786)

Browse Source 
* UI: refresh dashboard design system

- Typography: swap Inter for Space Grotesk (geometric, techy)
- Colors: punchier accent red, add teal secondary, warmer darks
- Cards: better shadows, hover lift effect, increased padding
- Stats: uppercase labels, larger bold values
- Buttons: hover lift micro-interaction, glow on primary
- Status dots: glow effects and subtle pulse animation
- Callouts: gradient backgrounds for depth
- Navigation: active state accent bar indicator
- Layout: more breathing room, bolder page titles

* UI: remove nav active bar indicator

* UI: hide nav scrollbar, remove nav border

* fix: add changelog entry for dashboard refresh (#1786) (thanks @mousberg)

---------

Co-authored-by: Peter Steinberger <steipete@gmail.com>
This commit is contained in:
David Gelberg
2026-01-25 12:29:25 +00:00
committed by GitHub
parent c96ffa7186
commit 2fcbed2111
4 changed files with 264 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -14,6 +14,7 @@ Docs: https://docs.clawd.bot
- TTS: add auto mode enum (off/always/inbound/tagged) with per-session `/tts` override. (#1667) Thanks @sebslight. https://docs.clawd.bot/tts - TTS: add auto mode enum (off/always/inbound/tagged) with per-session `/tts` override. (#1667) Thanks @sebslight. https://docs.clawd.bot/tts
- Channels: add LINE plugin (Messaging API) with rich replies, quick replies, and plugin HTTP registry. (#1630) Thanks @plum-dawg. - Channels: add LINE plugin (Messaging API) with rich replies, quick replies, and plugin HTTP registry. (#1630) Thanks @plum-dawg.
- Dev: add prek pre-commit hooks + dependabot config for weekly updates. (#1720) Thanks @dguido. - Dev: add prek pre-commit hooks + dependabot config for weekly updates. (#1720) Thanks @dguido.
- UI: refresh Control UI dashboard design system (typography, colors, spacing). (#1786) Thanks @mousberg.
- Docs: expand FAQ (migration, scheduling, concurrency, model recommendations, OpenAI subscription auth, Pi sizing, hackable install, docs SSL workaround). - Docs: expand FAQ (migration, scheduling, concurrency, model recommendations, OpenAI subscription auth, Pi sizing, hackable install, docs SSL workaround).
- Docs: add verbose installer troubleshooting guidance. - Docs: add verbose installer troubleshooting guidance.
- Docs: add macOS VM guide with local/hosted options + VPS/nodes guidance. (#1693) Thanks @f-trycua. - Docs: add macOS VM guide with local/hosted options + VPS/nodes guidance. (#1693) Thanks @f-trycua.

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

@@ -1,171 +1,188 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
:root { :root {
/* Background - Deep Navy Slate */ /* Background - Warmer dark with depth */
--bg: #0c0d12; --bg: #12141a;
--bg-accent: #0d0e14; --bg-accent: #14161d;
--bg-elevated: #181a21; --bg-elevated: #1a1d25;
--bg-hover: #252830; --bg-hover: #262a35;
--bg-muted: #252830; --bg-muted: #262a35;
/* Card / Surface */ /* Card / Surface - More contrast between levels */
--card: #13151c; --card: #181b22;
--card-foreground: #f8fafc; --card-foreground: #f4f4f5;
--card-highlight: rgba(255, 255, 255, 0.04); --card-highlight: rgba(255, 255, 255, 0.05);
--popover: #13151c; --popover: #181b22;
--popover-foreground: #f8fafc; --popover-foreground: #f4f4f5;
/* Panel */ /* Panel */
--panel: #0c0d12; --panel: #12141a;
--panel-strong: #181a21; --panel-strong: #1a1d25;
--panel-hover: #252830; --panel-hover: #262a35;
--chrome: rgba(12, 13, 18, 0.95); --chrome: rgba(18, 20, 26, 0.95);
--chrome-strong: rgba(12, 13, 18, 0.98); --chrome-strong: rgba(18, 20, 26, 0.98);
/* Text */ /* Text - Slightly warmer */
--text: #f8fafc; --text: #e4e4e7;
--text-strong: #ffffff; --text-strong: #fafafa;
--chat-text: #f8fafc; --chat-text: #e4e4e7;
--muted: #94a3b8; --muted: #71717a;
--muted-strong: #64748b; --muted-strong: #52525b;
--muted-foreground: #94a3b8; --muted-foreground: #71717a;
/* Border */ /* Border - Subtle but defined */
--border: #333842; --border: #27272a;
--border-strong: #454d5c; --border-strong: #3f3f46;
--border-hover: #5a6373; --border-hover: #52525b;
--input: #333842; --input: #27272a;
--ring: #ff4d4d; --ring: #ff5c5c;
/* Accent - The signature red */ /* Accent - Punchy signature red */
--accent: #ff4d4d; --accent: #ff5c5c;
--accent-hover: #ff6666; --accent-hover: #ff7070;
--accent-muted: #ff4d4d; --accent-muted: #ff5c5c;
--accent-subtle: rgba(255, 77, 77, 0.12); --accent-subtle: rgba(255, 92, 92, 0.15);
--accent-foreground: #f8fafc; --accent-foreground: #fafafa;
--primary: #ff4d4d; --accent-glow: rgba(255, 92, 92, 0.25);
--primary: #ff5c5c;
--primary-foreground: #ffffff; --primary-foreground: #ffffff;
/* Secondary */ /* Secondary - Teal accent for variety */
--secondary: #252830; --secondary: #1e2028;
--secondary-foreground: #f8fafc; --secondary-foreground: #f4f4f5;
--accent-2: #3b82f6; --accent-2: #14b8a6;
--accent-2-muted: rgba(59, 130, 246, 0.7); --accent-2-muted: rgba(20, 184, 166, 0.7);
--accent-2-subtle: rgba(20, 184, 166, 0.15);
/* Semantic */ /* Semantic - More saturated */
--ok: #22c55e; --ok: #22c55e;
--ok-muted: rgba(34, 197, 94, 0.7); --ok-muted: rgba(34, 197, 94, 0.75);
--ok-subtle: rgba(34, 197, 94, 0.1); --ok-subtle: rgba(34, 197, 94, 0.12);
--destructive: #ef4444; --destructive: #ef4444;
--destructive-foreground: #fafafa; --destructive-foreground: #fafafa;
--warn: #eab308; --warn: #f59e0b;
--warn-muted: rgba(234, 179, 8, 0.7); --warn-muted: rgba(245, 158, 11, 0.75);
--warn-subtle: rgba(234, 179, 8, 0.1); --warn-subtle: rgba(245, 158, 11, 0.12);
--danger: #ef4444; --danger: #ef4444;
--danger-muted: rgba(239, 68, 68, 0.7); --danger-muted: rgba(239, 68, 68, 0.75);
--danger-subtle: rgba(239, 68, 68, 0.1); --danger-subtle: rgba(239, 68, 68, 0.12);
--info: #3b82f6; --info: #3b82f6;
/* Focus */ /* Focus - With glow */
--focus: rgba(255, 77, 77, 0.2); --focus: rgba(255, 92, 92, 0.25);
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring);
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 20px var(--accent-glow);
/* Grid */ /* Grid */
--grid-line: rgba(255, 255, 255, 0.03); --grid-line: rgba(255, 255, 255, 0.04);
/* Theme transition */ /* Theme transition */
--theme-switch-x: 50%; --theme-switch-x: 50%;
--theme-switch-y: 50%; --theme-switch-y: 50%;
/* Typography */ /* Typography - Space Grotesk for personality */
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Shadows - minimal */ /* Shadows - Richer with subtle color */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.03);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
--shadow-glow: 0 0 30px var(--accent-glow);
/* Radii - shadcn uses smaller radii */ /* Radii - Slightly larger for friendlier feel */
--radius-sm: 4px; --radius-sm: 6px;
--radius-md: 6px; --radius-md: 8px;
--radius-lg: 8px; --radius-lg: 12px;
--radius-xl: 12px; --radius-xl: 16px;
--radius-full: 9999px; --radius-full: 9999px;
--radius: 6px; --radius: 8px;
/* Transitions */ /* Transitions - Snappy but smooth */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 120ms;
--duration-normal: 200ms; --duration-normal: 200ms;
--duration-slow: 300ms; --duration-slow: 350ms;
color-scheme: dark; color-scheme: dark;
} }
/* Light theme */ /* Light theme - Clean with subtle warmth */
:root[data-theme="light"] { :root[data-theme="light"] {
--bg: #f8f8f7; --bg: #fafafa;
--bg-accent: #f3f2f0; --bg-accent: #f5f5f5;
--bg-elevated: #ffffff; --bg-elevated: #ffffff;
--bg-hover: #eae8e6; --bg-hover: #f0f0f0;
--bg-muted: #eae8e6; --bg-muted: #f0f0f0;
--bg-content: #f0efed; --bg-content: #f5f5f5;
--card: #ffffff; --card: #ffffff;
--card-foreground: #1c1917; --card-foreground: #18181b;
--card-highlight: rgba(0, 0, 0, 0.04); --card-highlight: rgba(0, 0, 0, 0.03);
--popover: #ffffff; --popover: #ffffff;
--popover-foreground: #1c1917; --popover-foreground: #18181b;
--panel: #f8f8f7; --panel: #fafafa;
--panel-strong: #f0efed; --panel-strong: #f5f5f5;
--panel-hover: #e5e3e1; --panel-hover: #ebebeb;
--chrome: rgba(248, 248, 247, 0.95); --chrome: rgba(250, 250, 250, 0.95);
--chrome-strong: rgba(248, 248, 247, 0.98); --chrome-strong: rgba(250, 250, 250, 0.98);
--text: #44403c; --text: #3f3f46;
--text-strong: #292524; --text-strong: #18181b;
--chat-text: #44403c; --chat-text: #3f3f46;
--muted: #5c5856; --muted: #71717a;
--muted-strong: #44403c; --muted-strong: #52525b;
--muted-foreground: #5c5856; --muted-foreground: #71717a;
--border: #e0dedc; --border: #e4e4e7;
--border-strong: #d6d3d1; --border-strong: #d4d4d8;
--border-hover: #a8a5a0; --border-hover: #a1a1aa;
--input: #e0dedc; --input: #e4e4e7;
--accent: #b91c1c; --accent: #dc2626;
--accent-hover: #dc2626; --accent-hover: #ef4444;
--accent-muted: #b91c1c; --accent-muted: #dc2626;
--accent-subtle: rgba(185, 28, 28, 0.18); --accent-subtle: rgba(220, 38, 38, 0.12);
--accent-foreground: #ffffff; --accent-foreground: #ffffff;
--primary: #b91c1c; --accent-glow: rgba(220, 38, 38, 0.15);
--primary: #dc2626;
--primary-foreground: #ffffff; --primary-foreground: #ffffff;
--secondary: #eae8e6; --secondary: #f4f4f5;
--secondary-foreground: #44403c; --secondary-foreground: #3f3f46;
--accent-2: #0d9488;
--accent-2-muted: rgba(13, 148, 136, 0.75);
--accent-2-subtle: rgba(13, 148, 136, 0.12);
--ok: #15803d; --ok: #16a34a;
--ok-muted: rgba(21, 128, 61, 0.75); --ok-muted: rgba(22, 163, 74, 0.75);
--ok-subtle: rgba(21, 128, 61, 0.12); --ok-subtle: rgba(22, 163, 74, 0.1);
--destructive: #b91c1c; --destructive: #dc2626;
--destructive-foreground: #fafafa; --destructive-foreground: #fafafa;
--warn: #a16207; --warn: #d97706;
--warn-muted: rgba(161, 98, 7, 0.75); --warn-muted: rgba(217, 119, 6, 0.75);
--warn-subtle: rgba(161, 98, 7, 0.12); --warn-subtle: rgba(217, 119, 6, 0.1);
--danger: #b91c1c; --danger: #dc2626;
--danger-muted: rgba(185, 28, 28, 0.75); --danger-muted: rgba(220, 38, 38, 0.75);
--danger-subtle: rgba(185, 28, 28, 0.12); --danger-subtle: rgba(220, 38, 38, 0.1);
--info: #1d4ed8; --info: #2563eb;
--focus: rgba(185, 28, 28, 0.25); --focus: rgba(220, 38, 38, 0.2);
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring), 0 0 16px var(--accent-glow);
--grid-line: rgba(0, 0, 0, 0.06); --grid-line: rgba(0, 0, 0, 0.05);
/* Light shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-glow: 0 0 24px var(--accent-glow);
color-scheme: light; color-scheme: light;
} }
@@ -181,8 +198,8 @@ body {
body { body {
margin: 0; margin: 0;
font: 400 14px/1.5 var(--font-body); font: 400 14px/1.55 var(--font-body);
letter-spacing: -0.011em; letter-spacing: -0.02em;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -270,11 +287,11 @@ select {
background: var(--border-strong); background: var(--border-strong);
} }
/* Animations */ /* Animations - Polished with spring feel */
@keyframes rise { @keyframes rise {
from { from {
opacity: 0; opacity: 0;
transform: translateY(4px); transform: translateY(8px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -294,7 +311,7 @@ select {
@keyframes scale-in { @keyframes scale-in {
from { from {
opacity: 0; opacity: 0;
transform: scale(0.96); transform: scale(0.95);
} }
to { to {
opacity: 1; opacity: 1;
@@ -305,7 +322,7 @@ select {
@keyframes dashboard-enter { @keyframes dashboard-enter {
from { from {
opacity: 0; opacity: 0;
transform: translateY(8px); transform: translateY(12px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -322,6 +339,32 @@ select {
} }
} }
@keyframes pulse-subtle {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes glow-pulse {
0%, 100% {
box-shadow: 0 0 0 rgba(255, 92, 92, 0);
}
50% {
box-shadow: 0 0 20px var(--accent-glow);
}
}
/* Stagger animation delays for grouped elements */
.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 50ms; }
.stagger-3 { animation-delay: 100ms; }
.stagger-4 { animation-delay: 150ms; }
.stagger-5 { animation-delay: 200ms; }
.stagger-6 { animation-delay: 250ms; }
/* Focus visible styles */ /* Focus visible styles */
:focus-visible { :focus-visible {
outline: none; outline: none;

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

@@ -1,63 +1,75 @@
@import './chat.css'; @import './chat.css';
/* =========================================== /* ===========================================
Cards Cards - Refined with depth
=========================================== */ =========================================== */
.card { .card {
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--card); background: var(--card);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 16px; padding: 20px;
animation: rise 0.3s var(--ease-out); animation: rise 0.35s var(--ease-out) backwards;
transition: border-color var(--duration-fast) ease; transition:
box-shadow: inset 0 1px 0 var(--card-highlight); border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight);
} }
.card:hover { .card:hover {
border-color: var(--border-strong); border-color: var(--border-strong);
box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-highlight);
} }
.card-title { .card-title {
font-size: 14px; font-size: 15px;
font-weight: 600; font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-strong); color: var(--text-strong);
} }
.card-sub { .card-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 13px;
margin-top: 4px; margin-top: 6px;
line-height: 1.5;
} }
/* =========================================== /* ===========================================
Stats Stats - Bold values, subtle labels
=========================================== */ =========================================== */
.stat { .stat {
background: var(--card); background: var(--card);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 12px 14px; padding: 14px 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
transition: border-color var(--duration-fast) ease; transition:
border-color var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
box-shadow: inset 0 1px 0 var(--card-highlight); box-shadow: inset 0 1px 0 var(--card-highlight);
} }
.stat:hover { .stat:hover {
border-color: var(--border-strong); border-color: var(--border-strong);
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight);
} }
.stat-label { .stat-label {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 11px;
font-weight: 500; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
} }
.stat-value { .stat-value {
font-size: 20px; font-size: 24px;
font-weight: 600; font-weight: 700;
margin-top: 4px; margin-top: 6px;
letter-spacing: -0.02em; letter-spacing: -0.03em;
line-height: 1.1;
} }
.stat-value.ok { .stat-value.ok {
@@ -70,11 +82,12 @@
.stat-card { .stat-card {
display: grid; display: grid;
gap: 4px; gap: 6px;
} }
.note-title { .note-title {
font-weight: 600; font-weight: 600;
letter-spacing: -0.01em;
} }
/* =========================================== /* ===========================================
@@ -262,7 +275,7 @@
} }
/* =========================================== /* ===========================================
Status Dot Status Dot - With glow for emphasis
=========================================== */ =========================================== */
.statusDot { .statusDot {
@@ -270,14 +283,18 @@
height: 8px; height: 8px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
background: var(--danger); background: var(--danger);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
animation: pulse-subtle 2s ease-in-out infinite;
} }
.statusDot.ok { .statusDot.ok {
background: var(--ok); background: var(--ok);
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
animation: none;
} }
/* =========================================== /* ===========================================
Buttons Buttons - Tactile with personality
=========================================== */ =========================================== */
.btn { .btn {
@@ -287,23 +304,30 @@
gap: 8px; gap: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: var(--bg-elevated); background: var(--bg-elevated);
padding: 8px 14px; padding: 9px 16px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em;
cursor: pointer; cursor: pointer;
transition: transition:
border-color var(--duration-fast) ease, border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) ease; background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
} }
.btn:hover { .btn:hover {
background: var(--bg-hover); background: var(--bg-hover);
border-color: var(--border-strong); border-color: var(--border-strong);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
} }
.btn:active { .btn:active {
background: var(--secondary); background: var(--secondary);
transform: translateY(0);
box-shadow: none;
} }
.btn svg { .btn svg {
@@ -321,11 +345,13 @@
border-color: var(--accent); border-color: var(--accent);
background: var(--accent); background: var(--accent);
color: var(--primary-foreground); color: var(--primary-foreground);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} }
.btn.primary:hover { .btn.primary:hover {
background: var(--accent-hover); background: var(--accent-hover);
border-color: var(--accent-hover); border-color: var(--accent-hover);
box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow);
} }
/* Keyboard shortcut badge (shadcn style) */ /* Keyboard shortcut badge (shadcn style) */
@@ -497,32 +523,34 @@
} }
/* =========================================== /* ===========================================
Callouts Callouts - Informative with subtle depth
=========================================== */ =========================================== */
.callout { .callout {
padding: 12px 14px; padding: 14px 16px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--secondary); background: var(--secondary);
border: 1px solid var(--border); border: 1px solid var(--border);
font-size: 13px; font-size: 13px;
line-height: 1.5;
position: relative;
} }
.callout.danger { .callout.danger {
border-color: var(--danger-subtle); border-color: rgba(239, 68, 68, 0.25);
background: var(--danger-subtle); background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
color: var(--danger); color: var(--danger);
} }
.callout.info { .callout.info {
border-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.25);
background: rgba(59, 130, 246, 0.1); background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
color: var(--info); color: var(--info);
} }
.callout.success { .callout.success {
border-color: var(--ok-subtle); border-color: rgba(34, 197, 94, 0.25);
background: var(--ok-subtle); background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
color: var(--ok); color: var(--ok);
} }
@@ -655,13 +683,13 @@
} }
/* =========================================== /* ===========================================
Chips Chips - Compact and punchy
=========================================== */ =========================================== */
.chip-row { .chip-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 8px;
} }
.chip { .chip {
@@ -669,10 +697,18 @@
font-weight: 500; font-weight: 500;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-full); border-radius: var(--radius-full);
padding: 4px 10px; padding: 5px 12px;
color: var(--muted); color: var(--muted);
background: var(--secondary); background: var(--secondary);
transition: border-color var(--duration-fast) ease; transition:
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.chip:hover {
border-color: var(--border-strong);
transform: translateY(-1px);
} }
.chip input { .chip input {
@@ -681,12 +717,14 @@
.chip-ok { .chip-ok {
color: var(--ok); color: var(--ok);
border-color: var(--ok-subtle); border-color: rgba(34, 197, 94, 0.3);
background: var(--ok-subtle);
} }
.chip-warn { .chip-warn {
color: var(--warn); color: var(--warn);
border-color: var(--warn-subtle); border-color: rgba(245, 158, 11, 0.3);
background: var(--warn-subtle);
} }
/* =========================================== /* ===========================================

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

@@ -132,18 +132,19 @@
} }
.brand-title { .brand-title {
font-size: 15px; font-size: 16px;
font-weight: 600; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.03em;
line-height: 1.1; line-height: 1.1;
color: var(--text-strong); color: var(--text-strong);
} }
.brand-sub { .brand-sub {
font-size: 11px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: var(--muted); color: var(--muted);
letter-spacing: 0.02em; letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1; line-height: 1;
} }
@@ -195,8 +196,8 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 16px 12px; padding: 16px 12px;
border-right: 1px solid var(--border);
background: var(--bg); background: var(--bg);
scrollbar-width: none; /* Firefox */
transition: transition:
width var(--shell-focus-duration) var(--shell-focus-ease), width var(--shell-focus-duration) var(--shell-focus-ease),
padding var(--shell-focus-duration) var(--shell-focus-ease), padding var(--shell-focus-duration) var(--shell-focus-ease),
@@ -204,6 +205,10 @@
min-height: 0; min-height: 0;
} }
.nav::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.shell--chat-focus .nav { .shell--chat-focus .nav {
width: 0; width: 0;
padding: 0; padding: 0;
@@ -412,10 +417,10 @@
.content { .content {
grid-area: content; grid-area: content;
padding: 8px 8px 24px; padding: 12px 16px 32px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 24px;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@@ -456,18 +461,19 @@
} }
.page-title { .page-title {
font-size: 24px; font-size: 26px;
font-weight: 600; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.035em;
line-height: 1.2; line-height: 1.15;
color: var(--text-strong); color: var(--text-strong);
} }
.page-sub { .page-sub {
color: var(--muted); color: var(--muted);
font-size: 13px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-top: 4px; margin-top: 6px;
letter-spacing: -0.01em;
} }
.page-meta { .page-meta {
@@ -501,7 +507,7 @@
.grid { .grid {
display: grid; display: grid;
gap: 16px; gap: 20px;
} }
.grid-cols-2 { .grid-cols-2 {
@@ -514,19 +520,19 @@
.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(150px, 1fr));
} }
.note-grid { .note-grid {
display: grid; display: grid;
gap: 12px; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
} }
.row { .row {
display: flex; display: flex;
gap: 10px; gap: 12px;
align-items: center; align-items: center;
} }