feat: enhance layout components, data layer and global styles
- SidebarRail, TopBar, FilterBar: improved navigation and filtering UX - metrics.js, requests.js: expanded data with multi-range trend series - composables: enhanced useChat, useNavigation, useRequests - global.css: refined design tokens and utility classes - Add DocFilterBar component and LoginView page Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
@@ -1,20 +1,24 @@
|
||||
:root {
|
||||
--bg: #f6f8fb;
|
||||
--bg: #f8fafc;
|
||||
--surface: #fff;
|
||||
--surface-soft: #f9fbff;
|
||||
--ink: #101828;
|
||||
--text: #344054;
|
||||
--muted: #667085;
|
||||
--line: #e4e7ec;
|
||||
--line-strong: #d0d5dd;
|
||||
--primary: #335cff;
|
||||
--primary-soft: #eef3ff;
|
||||
--success: #0e9384;
|
||||
--success-soft: #e7f8f5;
|
||||
--warning: #b54708;
|
||||
--warning-soft: #fff4e5;
|
||||
--danger: #b42318;
|
||||
--danger-soft: #ffebe9;
|
||||
--ink: #1e293b;
|
||||
--text: #334155;
|
||||
--muted: #64748b;
|
||||
--line: #e2e8f0;
|
||||
--line-strong: #cbd5e1;
|
||||
--primary: #10b981;
|
||||
--primary-soft: #ecfdf5;
|
||||
--secondary: #3b82f6;
|
||||
--purple: #8b5cf6;
|
||||
--orange: #f59e0b;
|
||||
--red: #ef4444;
|
||||
--success: #10b981;
|
||||
--success-soft: #ecfdf5;
|
||||
--warning: #f59e0b;
|
||||
--warning-soft: #fffbeb;
|
||||
--danger: #ef4444;
|
||||
--danger-soft: #fef2f2;
|
||||
--nav: #0b1220;
|
||||
--nav-muted: #7d89a5;
|
||||
--radius: 8px;
|
||||
@@ -26,11 +30,11 @@
|
||||
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
|
||||
button, input, select, textarea { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(51,92,255,.24); outline-offset: 2px; }
|
||||
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(16,185,129,.20); outline-offset: 2px; }
|
||||
|
||||
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
|
||||
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
|
||||
h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; font-weight: 700; }
|
||||
|
||||
.btn {
|
||||
min-height: 42px;
|
||||
@@ -59,13 +63,12 @@ h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line
|
||||
.badge.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 2px rgba(16,24,40,.04);
|
||||
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
|
||||
transition: box-shadow 160ms var(--ease);
|
||||
}
|
||||
.panel:hover { transform: translateY(-2px); border-color: rgba(51,92,255,.22); box-shadow: 0 16px 42px rgba(16,24,40,.08); }
|
||||
.panel:hover { box-shadow: 0 4px 10px rgba(15,23,42,.08); }
|
||||
|
||||
.mini-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 12px; font-weight: 750; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user