mirror of
https://github.com/openclaw/openclaw.git
synced 2026-05-27 19:50:41 +00:00
UI: polish dashboard — agents overview, chat toolbar, debug & login UX (#23553)
* UI: polish dashboard — agents overview, chat toolbar, debug simplification, login UX * fix(ui): restore chat draft ordering, remove extra toolbar buttons * UI: replace agent avatar fallback with lobster emoji * style(ui): update layout styles for sidebar and shell, adjusting navigation widths for improved responsiveness * feat(ui): implement sidebar resizing functionality and enhance navigation with new search and sorting features for sessions * fix(ui): update references from ClawDash to OpenClaw in checklist and dashboard header * style(ui): adjust sidebar minimum width and add responsive behavior for narrow states * UI: minimal chat agent bar — remove sessions panel, strip chrome * style(ui): update light theme colors and add ambient gradient for Luxe Cream & Coral * UI: replace sparkle with OpenClaw lobster logo in chat * style(ui): rename theme toggle to theme select and update related styles; adjust layout and spacing for agents and chat components * style(ui): enhance agents panel layout with grid system, update toolbar styles, and refine usage chart presentation * style(ui): adjust sessions table column width and refine agent model fields layout for better responsiveness * style(ui): refine component styles for improved layout and responsiveness; adjust gradients, spacing, and element alignment across chat and agent interfaces * ui: align chat-controls session container * ui: enlarge agent controls for better touch targets * ui: pass basePath to avatar renderer in grouped chat * ui: formatting fixups from pre-commit hooks * style(ui): update layout and spacing for chat controls; enhance select component styles and improve responsiveness * UI: tighten chat header spacing and icon sizes * UI: widen chat attachment gap * style(ui): refine chat header layout and adjust icon sizes for improved visual consistency * style(ui): enhance component styles and layout; introduce new inline field styles, update overview card design, and improve session filters for better usability * style(ui): improve CSS formatting and consistency across components; adjust gradients, spacing, and layout for better readability and visual appeal * fix(ui): correct rendering of empty state in overview cards by replacing 'nothing' with an empty string
This commit is contained in:
Val Alexander
@@ -96,55 +96,55 @@
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* ─── Theme: light (Docs) — Warm Editorial Dark ─── */
|
||||
/* ─── Theme: light — Luxe Cream & Coral ─── */
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
|
||||
--vscode-bg: #0e0c0e;
|
||||
--vscode-sidebar: #131012;
|
||||
--vscode-panel: #161214;
|
||||
--vscode-panel-border: rgba(255, 255, 255, 0.06);
|
||||
--vscode-surface: #1a1618;
|
||||
--vscode-hover: #201c1e;
|
||||
--vscode-contrast: #080608;
|
||||
--vscode-text: #d5d0cf;
|
||||
--vscode-muted: #7a7472;
|
||||
--vscode-subtle: #4a4442;
|
||||
--vscode-ghost: #1a1616;
|
||||
--vscode-accent: #ca3a29;
|
||||
--vscode-accent-alpha: rgba(202, 58, 41, 0.14);
|
||||
--vscode-selection: #3d1418;
|
||||
--vscode-success: #00d4aa;
|
||||
--vscode-danger: #ca3a29;
|
||||
--vscode-bg: #faf7f2;
|
||||
--vscode-sidebar: #f5f0e8;
|
||||
--vscode-panel: #fffef9;
|
||||
--vscode-panel-border: rgba(26, 22, 20, 0.08);
|
||||
--vscode-surface: #fffef9;
|
||||
--vscode-hover: #f0ebe3;
|
||||
--vscode-contrast: #f0ebe3;
|
||||
--vscode-text: #1a1614;
|
||||
--vscode-muted: #6b5d54;
|
||||
--vscode-subtle: #9c8f84;
|
||||
--vscode-ghost: #ebe6df;
|
||||
--vscode-accent: #c73526;
|
||||
--vscode-accent-alpha: rgba(199, 53, 38, 0.12);
|
||||
--vscode-selection: rgba(199, 53, 38, 0.18);
|
||||
--vscode-success: #0d9b7a;
|
||||
--vscode-danger: #c73526;
|
||||
|
||||
--kn-claw: #ca3a29;
|
||||
--kn-claw-bright: #fd8e2e;
|
||||
--kn-claw-dim: rgba(202, 58, 41, 0.12);
|
||||
--kn-claw-ember: #fb9231;
|
||||
--kn-claw-deep: #9a2d1f;
|
||||
--kn-ocean: #0e0c0e;
|
||||
--kn-ocean-bright: #201c1e;
|
||||
--kn-ocean-mid: #161214;
|
||||
--kn-ocean-dim: rgba(14, 12, 14, 0.8);
|
||||
--kn-ocean-deep: #0e0c0e;
|
||||
--kn-silver: #8a7e72;
|
||||
--kn-silver-bright: #c0b4a8;
|
||||
--kn-silver-dim: rgba(138, 126, 114, 0.12);
|
||||
--kn-bioluminescence: #00d4aa;
|
||||
--kn-warm-dark: #1a1416;
|
||||
--kn-void: #1a1416;
|
||||
--kn-claw: #c73526;
|
||||
--kn-claw-bright: #e85a4a;
|
||||
--kn-claw-dim: rgba(199, 53, 38, 0.14);
|
||||
--kn-claw-ember: #d94a3a;
|
||||
--kn-claw-deep: #9a2a1e;
|
||||
--kn-ocean: #faf7f2;
|
||||
--kn-ocean-bright: #fffef9;
|
||||
--kn-ocean-mid: #f5f0e8;
|
||||
--kn-ocean-dim: rgba(250, 247, 242, 0.9);
|
||||
--kn-ocean-deep: #f0ebe3;
|
||||
--kn-silver: #6b5d54;
|
||||
--kn-silver-bright: #1a1614;
|
||||
--kn-silver-dim: rgba(107, 93, 84, 0.12);
|
||||
--kn-bioluminescence: #0d9b7a;
|
||||
--kn-warm-dark: #1a1614;
|
||||
--kn-void: #ebe6df;
|
||||
|
||||
--glass-blur: 0px;
|
||||
--glass-saturate: 100%;
|
||||
--glass-bg: rgba(22, 18, 20, 0.95);
|
||||
--glass-bg-elevated: rgba(26, 22, 24, 0.96);
|
||||
--glass-border: rgba(255, 255, 255, 0.06);
|
||||
--glass-border-hover: rgba(202, 58, 41, 0.25);
|
||||
--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--glass-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
--glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
|
||||
--glass-blur: 12px;
|
||||
--glass-saturate: 110%;
|
||||
--glass-bg: rgba(255, 254, 249, 0.88);
|
||||
--glass-bg-elevated: rgba(255, 255, 255, 0.95);
|
||||
--glass-border: rgba(26, 22, 20, 0.1);
|
||||
--glass-border-hover: rgba(199, 53, 38, 0.35);
|
||||
--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
--glass-shadow-sm: 0 2px 12px rgba(26, 22, 20, 0.06), 0 1px 3px rgba(26, 22, 20, 0.04);
|
||||
--glass-shadow-md: 0 8px 32px rgba(26, 22, 20, 0.08), 0 2px 8px rgba(26, 22, 20, 0.04);
|
||||
--glass-shadow-lg: 0 20px 56px rgba(26, 22, 20, 0.12), 0 4px 16px rgba(26, 22, 20, 0.06);
|
||||
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: 8px;
|
||||
@@ -491,6 +491,16 @@
|
||||
--agent-tab-hover-bg: var(--vscode-accent-alpha);
|
||||
}
|
||||
|
||||
/* Light theme semantic overrides (accent buttons need dark text) */
|
||||
:root[data-theme="light"] {
|
||||
--card-highlight: rgba(255, 255, 255, 0.85);
|
||||
--accent-foreground: #ffffff;
|
||||
--primary-foreground: #ffffff;
|
||||
--destructive-foreground: #ffffff;
|
||||
--focus-offset-color: var(--bg);
|
||||
--grid-line: rgba(26, 22, 20, 0.06);
|
||||
}
|
||||
|
||||
/* ─── Accessibility: High Contrast ─── */
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
@@ -714,6 +724,20 @@ select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ─── light — Luxe Cream ambient gradient ─── */
|
||||
|
||||
:root[data-theme="light"] body {
|
||||
background:
|
||||
radial-gradient(ellipse 90% 60% at 50% -15%, rgba(199, 53, 38, 0.04) 0%, transparent 55%),
|
||||
radial-gradient(ellipse 70% 50% at 85% 40%, rgba(13, 155, 122, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 60% 40% at 15% 80%, rgba(199, 53, 38, 0.02) 0%, transparent 45%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] body::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ─── clawdash — Chrome Metallic Overrides ─── */
|
||||
|
||||
:root[data-theme="clawdash"] body {
|
||||
|
||||
Reference in New Issue
Block a user