mirror of
https://github.com/openclaw/openclaw.git
synced 2026-06-26 09:19:30 +00:00
b01a54de6f
* fix(ui): restore sidebar session picker interactivity above desktop workbench The collapsed sidebar session picker was covered by the chat content area when the workspace rail was visible at wider viewports. Two issues caused this: 1. .sidebar-session-select--collapsed .chat-session-picker used var(--z-dropdown) which was never defined, creating an invalid z-index declaration (falls back to auto). 2. .shell-nav and .content--chat are grid siblings with equal z-index (auto), and .content--chat (later DOM) paints above .shell-nav, covering the session picker that extends from the nav column into the content column. Fix: add position:relative + z-index:10 to .shell-nav so it stacks above .content--chat; change overflow from hidden to visible so the session picker extends beyond the nav rail; replace undefined var(--z-dropdown) with z-index:100. * fix(ui): keep sidebar picker z-index tokenized --------- Co-authored-by: Vincent Koc <vincentkoc@ieee.org>
782 lines
19 KiB
CSS
782 lines
19 KiB
CSS
:root {
|
|
/* Background - Deep, rich dark with layered depth */
|
|
--bg: #0e1015;
|
|
--bg-accent: #13151b;
|
|
--bg-elevated: #191c24;
|
|
--bg-hover: #1f2330;
|
|
--bg-muted: #1f2330;
|
|
|
|
/* Card / Surface - Clear hierarchy between levels */
|
|
--card: #161920;
|
|
--card-foreground: #f0f0f2;
|
|
--card-highlight: rgba(255, 255, 255, 0.04);
|
|
--popover: #191c24;
|
|
--popover-foreground: #f0f0f2;
|
|
|
|
/* Panel */
|
|
--panel: #0e1015;
|
|
--panel-strong: #191c24;
|
|
--panel-hover: #1f2330;
|
|
--chrome: rgba(14, 16, 21, 0.96);
|
|
--chrome-strong: rgba(14, 16, 21, 0.98);
|
|
|
|
/* Text - Clean contrast */
|
|
--text: #d4d4d8;
|
|
--text-strong: #f4f4f5;
|
|
--chat-text: #d4d4d8;
|
|
--muted: #8b8b94;
|
|
--muted-strong: #898990;
|
|
--muted-foreground: #8b8b94;
|
|
|
|
/* Border - Whisper-thin, barely there */
|
|
--border: #1e2028;
|
|
--border-strong: #2e3040;
|
|
--border-hover: #3e4050;
|
|
--input: #1e2028;
|
|
--ring: #ff5c5c;
|
|
|
|
/* Accent - Punchy signature red */
|
|
--accent: #ff5c5c;
|
|
--accent-hover: #ff7070;
|
|
--accent-muted: #ff5c5c;
|
|
--accent-subtle: rgba(255, 92, 92, 0.1);
|
|
--accent-foreground: #fafafa;
|
|
--accent-glow: rgba(255, 92, 92, 0.2);
|
|
--selection-bg: #005fcc;
|
|
--selection-fg: #ffffff;
|
|
--primary: #ff5c5c;
|
|
--primary-foreground: #ffffff;
|
|
|
|
/* Secondary */
|
|
--secondary: #161920;
|
|
--secondary-foreground: #f0f0f2;
|
|
--accent-2: #14b8a6;
|
|
--accent-2-muted: rgba(20, 184, 166, 0.7);
|
|
--accent-2-subtle: rgba(20, 184, 166, 0.1);
|
|
|
|
/* Semantic */
|
|
--ok: #22c55e;
|
|
--ok-muted: rgba(34, 197, 94, 0.75);
|
|
--ok-subtle: rgba(34, 197, 94, 0.08);
|
|
--destructive: #ef4444;
|
|
--destructive-foreground: #fafafa;
|
|
--warn: #f59e0b;
|
|
--warn-muted: rgba(245, 158, 11, 0.75);
|
|
--warn-subtle: rgba(245, 158, 11, 0.08);
|
|
--danger: #ef4444;
|
|
--danger-muted: rgba(239, 68, 68, 0.75);
|
|
--danger-subtle: rgba(239, 68, 68, 0.08);
|
|
--info: #3b82f6;
|
|
|
|
/* Focus */
|
|
--focus: rgba(255, 92, 92, 0.2);
|
|
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 80%, transparent);
|
|
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);
|
|
|
|
/* Grid */
|
|
--grid-line: rgba(255, 255, 255, 0.03);
|
|
|
|
/* Theme transition */
|
|
--theme-switch-x: 50%;
|
|
--theme-switch-y: 50%;
|
|
|
|
/* Typography */
|
|
--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-display: var(--font-body);
|
|
--control-ui-text-scale: 1;
|
|
--control-ui-text-xs: calc(11px * var(--control-ui-text-scale));
|
|
--control-ui-text-sm: calc(12px * var(--control-ui-text-scale));
|
|
--control-ui-text-md: calc(14px * var(--control-ui-text-scale));
|
|
--control-ui-text-lg: calc(16px * var(--control-ui-text-scale));
|
|
--control-ui-input-text-size: max(16px, calc(14px * var(--control-ui-text-scale)));
|
|
--chat-text-size: var(--control-ui-text-md);
|
|
|
|
/* Shadows - Subtle, layered depth */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
|
|
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5);
|
|
--shadow-glow: 0 0 24px var(--accent-glow);
|
|
|
|
/* Radii - Slightly larger for modern feel */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
--radius: 10px;
|
|
|
|
/* Transitions - Crisp and responsive */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--duration-fast: 100ms;
|
|
--duration-normal: 180ms;
|
|
--duration-slow: 300ms;
|
|
--safe-area-top: env(safe-area-inset-top, 0px);
|
|
--safe-area-right: env(safe-area-inset-right, 0px);
|
|
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-area-left: env(safe-area-inset-left, 0px);
|
|
|
|
/* Layering */
|
|
--z-dropdown: 100;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Light theme tokens apply to every light-mode family. */
|
|
:root[data-theme-mode="light"] {
|
|
--bg: #f8f9fa;
|
|
--bg-accent: #f1f3f5;
|
|
--bg-elevated: #ffffff;
|
|
--bg-hover: #eceef0;
|
|
--bg-muted: #eceef0;
|
|
--bg-content: #f1f3f5;
|
|
|
|
--card: #ffffff;
|
|
--card-foreground: #1a1a1e;
|
|
--card-highlight: rgba(0, 0, 0, 0.02);
|
|
--popover: #ffffff;
|
|
--popover-foreground: #1a1a1e;
|
|
|
|
--panel: #f8f9fa;
|
|
--panel-strong: #f1f3f5;
|
|
--panel-hover: #e6e8eb;
|
|
--chrome: rgba(248, 249, 250, 0.96);
|
|
--chrome-strong: rgba(248, 249, 250, 0.98);
|
|
|
|
--text: #3c3c43;
|
|
--text-strong: #1a1a1e;
|
|
--chat-text: #3c3c43;
|
|
--muted: #6a6a6f;
|
|
--muted-strong: #545458;
|
|
--muted-foreground: #6a6a6f;
|
|
|
|
--border: #e5e5ea;
|
|
--border-strong: #d1d1d6;
|
|
--border-hover: #aeaeb2;
|
|
--input: #e5e5ea;
|
|
|
|
--accent: #dc2626;
|
|
--accent-hover: #ef4444;
|
|
--accent-muted: #dc2626;
|
|
--accent-subtle: rgba(220, 38, 38, 0.08);
|
|
--accent-foreground: #ffffff;
|
|
--accent-glow: rgba(220, 38, 38, 0.1);
|
|
--primary: #dc2626;
|
|
--primary-foreground: #ffffff;
|
|
|
|
--secondary: #f1f3f5;
|
|
--secondary-foreground: #3c3c43;
|
|
--accent-2: #0d9488;
|
|
--accent-2-muted: rgba(13, 148, 136, 0.75);
|
|
--accent-2-subtle: rgba(13, 148, 136, 0.08);
|
|
|
|
--ok: #15803d;
|
|
--ok-muted: rgba(21, 128, 61, 0.75);
|
|
--ok-subtle: rgba(21, 128, 61, 0.08);
|
|
--destructive: #dc2626;
|
|
--destructive-foreground: #fafafa;
|
|
--warn: #b45309;
|
|
--warn-muted: rgba(180, 83, 9, 0.75);
|
|
--warn-subtle: rgba(180, 83, 9, 0.08);
|
|
--danger: #dc2626;
|
|
--danger-muted: rgba(220, 38, 38, 0.75);
|
|
--danger-subtle: rgba(220, 38, 38, 0.08);
|
|
--info: #2563eb;
|
|
|
|
--focus: rgba(220, 38, 38, 0.15);
|
|
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent);
|
|
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 12px var(--accent-glow);
|
|
|
|
--grid-line: rgba(0, 0, 0, 0.04);
|
|
|
|
/* Light shadows - Subtle, clean */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
|
|
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.1);
|
|
--shadow-glow: 0 0 20px var(--accent-glow);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Scrollbar - visible on light backgrounds */
|
|
:root[data-theme-mode="light"]::-webkit-scrollbar-thumb,
|
|
:root[data-theme-mode="light"] ::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
:root[data-theme-mode="light"]::-webkit-scrollbar-thumb:hover,
|
|
:root[data-theme-mode="light"] ::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* Theme families override accent tokens while keeping shared surfaces/layout. */
|
|
:root[data-theme="openknot"] {
|
|
/*
|
|
* Accent — crimson red on true black
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #080808, relative luminance ≈ 0.003):
|
|
* --accent #e5243b L ≈ 0.118 contrast ≈ 5.8:1 AA text ✓
|
|
* --accent-hover #f03e52 L ≈ 0.163 contrast ≈ 7.2:1 ✓
|
|
* --primary-foreground #fafafa on #e5243b button: 4.6:1 AA ✓
|
|
* focus-ring at 70% opacity: ≈ 3.4:1 against bg ✓ (non-text 3:1 required)
|
|
*/
|
|
--ring: #e5243b;
|
|
--accent: #e5243b;
|
|
--accent-hover: #f03e52;
|
|
--accent-muted: #e5243b;
|
|
--accent-subtle: rgba(229, 36, 59, 0.12);
|
|
--accent-glow: rgba(229, 36, 59, 0.24);
|
|
--primary: #e5243b;
|
|
--primary-foreground: #fafafa;
|
|
|
|
/* Focus — crimson ring */
|
|
--focus: rgba(229, 36, 59, 0.2);
|
|
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent);
|
|
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);
|
|
|
|
/* Surfaces — true black canvas */
|
|
--bg: #080808;
|
|
--bg-accent: #0d0d0f;
|
|
--bg-elevated: #141416;
|
|
--bg-hover: #1a1a1e;
|
|
--bg-muted: #1a1a1e;
|
|
|
|
--card: #111113;
|
|
--card-foreground: #f0f0f2;
|
|
--card-highlight: rgba(255, 255, 255, 0.03);
|
|
--popover: #141416;
|
|
--popover-foreground: #f0f0f2;
|
|
|
|
--panel: #080808;
|
|
--panel-strong: #141416;
|
|
--panel-hover: #1a1a1e;
|
|
--chrome: rgba(8, 8, 8, 0.96);
|
|
--chrome-strong: rgba(8, 8, 8, 0.98);
|
|
|
|
/* Text — high contrast on black */
|
|
--text: #e0e0e2;
|
|
--text-strong: #f5f5f7;
|
|
--chat-text: #e0e0e2;
|
|
--muted: #8a8a94;
|
|
--muted-strong: #888892;
|
|
--muted-foreground: #8a8a94;
|
|
|
|
/* Borders — whisper-thin, barely visible */
|
|
--border: #1a1a1e;
|
|
--border-strong: #2a2a30;
|
|
--border-hover: #3a3a42;
|
|
--input: #1a1a1e;
|
|
|
|
--secondary: #111113;
|
|
--secondary-foreground: #f0f0f2;
|
|
--accent-2: #8b1a2b;
|
|
--accent-2-muted: rgba(139, 26, 43, 0.7);
|
|
--accent-2-subtle: rgba(139, 26, 43, 0.12);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
|
|
|
|
--grid-line: rgba(255, 255, 255, 0.025);
|
|
}
|
|
|
|
:root[data-theme="openknot-light"] {
|
|
/*
|
|
* Accent — deep red on cool white
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #f9f9fb, relative luminance ≈ 0.941):
|
|
* --accent #c41e30 L ≈ 0.078 contrast ≈ 7.5:1 AAA text ✓
|
|
* --accent-hover #a8192a L ≈ 0.054 contrast ≈ 9.1:1 ✓
|
|
* --primary-foreground #ffffff on #c41e30 button: 5.0:1 AA ✓
|
|
* focus-ring at 60% opacity: ≈ 3.2:1 against bg ✓ (non-text 3:1 required)
|
|
*/
|
|
--ring: #c41e30;
|
|
--accent: #c41e30;
|
|
--accent-hover: #a8192a;
|
|
--accent-muted: #c41e30;
|
|
--accent-subtle: rgba(196, 30, 48, 0.08);
|
|
--accent-glow: rgba(196, 30, 48, 0.12);
|
|
--primary: #c41e30;
|
|
--primary-foreground: #ffffff;
|
|
|
|
/* Surfaces — cool white with subtle warmth */
|
|
--bg: #f9f9fb;
|
|
--bg-accent: #f2f2f5;
|
|
--bg-elevated: #ffffff;
|
|
--bg-hover: #eaeaef;
|
|
--bg-muted: #eaeaef;
|
|
--bg-content: #f2f2f5;
|
|
|
|
--card: #ffffff;
|
|
--card-foreground: #18181b;
|
|
--card-highlight: rgba(0, 0, 0, 0.02);
|
|
--popover: #ffffff;
|
|
--popover-foreground: #18181b;
|
|
|
|
--panel: #f9f9fb;
|
|
--panel-strong: #f2f2f5;
|
|
--panel-hover: #e4e4ea;
|
|
--chrome: rgba(249, 249, 251, 0.96);
|
|
--chrome-strong: rgba(249, 249, 251, 0.98);
|
|
|
|
/* Text — crisp dark on white */
|
|
--text: #3a3a42;
|
|
--text-strong: #18181b;
|
|
--chat-text: #3a3a42;
|
|
--muted: #6a6a72;
|
|
--muted-strong: #52525a;
|
|
--muted-foreground: #6a6a72;
|
|
|
|
/* Borders — clean, minimal */
|
|
--border: #e2e2e8;
|
|
--border-strong: #ccccd4;
|
|
--border-hover: #adadb8;
|
|
--input: #e2e2e8;
|
|
|
|
--secondary: #f2f2f5;
|
|
--secondary-foreground: #3a3a42;
|
|
--accent-2: #7a1420;
|
|
--accent-2-muted: rgba(122, 20, 32, 0.75);
|
|
--accent-2-subtle: rgba(122, 20, 32, 0.08);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08);
|
|
|
|
--grid-line: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
:root[data-theme="dash"] {
|
|
/*
|
|
* Accent — chocolate brown on deep cocoa
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #1a1210, relative luminance ≈ 0.0069):
|
|
* --accent #b47840 L ≈ 0.235 contrast ≈ 5.0:1 AA text ✓ (floor: #a8703c → 4.4:1, fails)
|
|
* --accent-hover #c8885a L ≈ 0.306 contrast ≈ 6.3:1 ✓
|
|
* --primary-foreground #1a1210 on #b47840 button: 5.0:1 AA ✓
|
|
* focus-ring at 80% opacity: ≈ 3.5:1 against bg ✓ (non-text 3:1 required)
|
|
*/
|
|
--ring: #b47840;
|
|
--accent: #b47840;
|
|
--accent-hover: #c8885a;
|
|
--accent-muted: #b47840;
|
|
--accent-subtle: rgba(180, 120, 64, 0.16);
|
|
--accent-glow: rgba(180, 120, 64, 0.24);
|
|
--primary: #b47840;
|
|
--primary-foreground: #1a1210;
|
|
|
|
/* Focus — match chocolate accent, slightly higher ring opacity for dark bg visibility */
|
|
--focus: rgba(180, 120, 64, 0.2);
|
|
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 80%, transparent);
|
|
--focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);
|
|
|
|
/* Surfaces — deep cocoa tones */
|
|
--bg: #1a1210;
|
|
--bg-accent: #201816;
|
|
--bg-elevated: #28201c;
|
|
--bg-hover: #302822;
|
|
--bg-muted: #302822;
|
|
|
|
--card: #221a16;
|
|
--card-foreground: #ece0d8;
|
|
--card-highlight: rgba(255, 240, 225, 0.04);
|
|
--popover: #28201c;
|
|
--popover-foreground: #ece0d8;
|
|
|
|
--panel: #1a1210;
|
|
--panel-strong: #28201c;
|
|
--panel-hover: #302822;
|
|
--chrome: rgba(26, 18, 16, 0.96);
|
|
--chrome-strong: rgba(26, 18, 16, 0.98);
|
|
|
|
--text: #d8c8b8;
|
|
--text-strong: #f0e4da;
|
|
--chat-text: #d8c8b8;
|
|
--muted: #9a8878;
|
|
--muted-strong: #8a7868;
|
|
--muted-foreground: #9a8878;
|
|
|
|
--border: #302418;
|
|
--border-strong: #443828;
|
|
--border-hover: #5a4c3a;
|
|
--input: #302418;
|
|
|
|
--secondary: #221a16;
|
|
--secondary-foreground: #ece0d8;
|
|
--accent-2: #a88050;
|
|
--accent-2-muted: rgba(168, 128, 80, 0.7);
|
|
--accent-2-subtle: rgba(168, 128, 80, 0.12);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(10, 6, 4, 0.35);
|
|
--shadow-md: 0 4px 16px rgba(10, 6, 4, 0.45);
|
|
--shadow-lg: 0 12px 32px rgba(10, 6, 4, 0.55);
|
|
|
|
--grid-line: rgba(255, 240, 225, 0.03);
|
|
}
|
|
|
|
:root[data-theme="dash-light"] {
|
|
/*
|
|
* Accent — deep chocolate on warm parchment
|
|
*
|
|
* WCAG 2.1 AA audit (bg = #f7f2ec, relative luminance ≈ 0.893):
|
|
* --accent #6e4828 L ≈ 0.081 contrast ≈ 7.2:1 AAA text ✓
|
|
* --accent-hover #5c3c20 L ≈ 0.054 contrast ≈ 8.9:1 ✓
|
|
* --primary-foreground #ffffff on #6e4828 button: 8.0:1 AAA ✓
|
|
* focus-ring at 70% opacity: ≈ 3.4:1 against parchment bg ✓
|
|
*/
|
|
--ring: #6e4828;
|
|
--accent: #6e4828;
|
|
--accent-hover: #5c3c20;
|
|
--accent-muted: #6e4828;
|
|
--accent-subtle: rgba(110, 72, 40, 0.12);
|
|
--accent-glow: rgba(110, 72, 40, 0.16);
|
|
--primary: #6e4828;
|
|
--primary-foreground: #ffffff;
|
|
|
|
/* Surfaces — warm parchment tones */
|
|
--bg: #f7f2ec;
|
|
--bg-accent: #f0e8e0;
|
|
--bg-elevated: #ffffff;
|
|
--bg-hover: #e8ddd2;
|
|
--bg-muted: #e8ddd2;
|
|
--bg-content: #f0e8e0;
|
|
|
|
--card: #ffffff;
|
|
--card-foreground: #2c2118;
|
|
--card-highlight: rgba(80, 50, 20, 0.02);
|
|
--popover: #ffffff;
|
|
--popover-foreground: #2c2118;
|
|
|
|
--panel: #f7f2ec;
|
|
--panel-strong: #f0e8e0;
|
|
--panel-hover: #e0d4c8;
|
|
--chrome: rgba(247, 242, 236, 0.96);
|
|
--chrome-strong: rgba(247, 242, 236, 0.98);
|
|
|
|
--text: #4a3828;
|
|
--text-strong: #2c2118;
|
|
--chat-text: #4a3828;
|
|
--muted: #756050;
|
|
--muted-strong: #604838;
|
|
--muted-foreground: #756050;
|
|
|
|
--border: #ddd0c2;
|
|
--border-strong: #c8b8a6;
|
|
--border-hover: #b0a090;
|
|
--input: #ddd0c2;
|
|
|
|
--secondary: #f0e8e0;
|
|
--secondary-foreground: #4a3828;
|
|
--accent-2: #6a4e30;
|
|
--accent-2-muted: rgba(106, 78, 48, 0.75);
|
|
--accent-2-subtle: rgba(106, 78, 48, 0.1);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
|
|
--shadow-md: 0 4px 12px rgba(60, 40, 20, 0.08);
|
|
--shadow-lg: 0 12px 28px rgba(60, 40, 20, 0.1);
|
|
|
|
--grid-line: rgba(80, 50, 20, 0.04);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font: 400 14px/1.55 var(--font-body);
|
|
letter-spacing: -0.01em;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
body {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
/* Theme transition */
|
|
@keyframes theme-circle-transition {
|
|
0% {
|
|
clip-path: circle(0% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%));
|
|
}
|
|
100% {
|
|
clip-path: circle(150% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%));
|
|
}
|
|
}
|
|
|
|
html.theme-transition {
|
|
view-transition-name: theme;
|
|
}
|
|
|
|
html.theme-transition::view-transition-old(theme) {
|
|
mix-blend-mode: normal;
|
|
animation: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
html.theme-transition::view-transition-new(theme) {
|
|
mix-blend-mode: normal;
|
|
z-index: 2;
|
|
animation: theme-circle-transition 0.4s var(--ease-out) forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html.theme-transition::view-transition-old(theme),
|
|
html.theme-transition::view-transition-new(theme) {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
openclaw-app {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@media (display-mode: standalone) {
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
@supports (height: 100dvh) {
|
|
html,
|
|
body {
|
|
height: 100dvh;
|
|
}
|
|
}
|
|
|
|
body {
|
|
position: fixed;
|
|
inset: 0;
|
|
padding-top: var(--safe-area-top);
|
|
padding-right: var(--safe-area-right);
|
|
padding-bottom: var(--safe-area-bottom);
|
|
padding-left: var(--safe-area-left);
|
|
}
|
|
|
|
openclaw-app {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--selection-bg);
|
|
color: var(--selection-fg);
|
|
}
|
|
|
|
/* Scrollbar styling - Minimal, barely visible */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
/* Animations - Polished with spring feel */
|
|
@keyframes rise {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes dashboard-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
/* Skeleton loading primitives */
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-hover) 50%, var(--bg-muted) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.skeleton-line {
|
|
height: 14px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.skeleton-line--short {
|
|
width: 40%;
|
|
}
|
|
|
|
.skeleton-line--medium {
|
|
width: 65%;
|
|
}
|
|
|
|
.skeleton-line--long {
|
|
width: 85%;
|
|
}
|
|
|
|
.skeleton-stat {
|
|
height: 28px;
|
|
width: 60px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.skeleton-block {
|
|
height: 48px;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
@keyframes pulse-subtle {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 20px var(--accent-glow);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.glow-pulse,
|
|
[class*="glow-pulse"] {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Focus visible styles */
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|