Joshua
8b8cb8210c
- HubPage: agent summary stats, cards, status badges, progress bars, refresh - LogsPage: activity feed from tasks, status filter, loading skeleton - ProjectsPage: project cards with status badges and agent counts - SessionsPage: responsive table/card view with model/token info - SettingsPage: dark mode toggle, gateway URL, refresh interval persist - ThemeProvider with dark/light mode via CSS custom properties - useLocalStorage hook for settings persistence - Loading/error/empty states across all pages - npm run build passes cleanly
77 lines
2.3 KiB
CSS
77 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-surface-darkest: #0D0F12;
|
|
--color-surface-dark: #13161A;
|
|
--color-surface-medium: #1C2027;
|
|
--color-surface-light: #252B33;
|
|
--color-surface-lighter: #2D3748;
|
|
--color-on-surface: #E2E8F0;
|
|
--color-on-surface-variant: #8A9BB0;
|
|
--color-on-surface-muted: #64748B;
|
|
--color-primary: #38BDF8;
|
|
--color-secondary: #2DD4BF;
|
|
--color-accent: #A78BFA;
|
|
--color-danger: #F87171;
|
|
--color-status-active: #38BDF8;
|
|
--color-status-idle: #2DD4BF;
|
|
--color-status-thinking: #A78BFA;
|
|
--color-status-error: #F87171;
|
|
--color-status-offline: #64748B;
|
|
|
|
/* Light mode overrides */
|
|
--color-light-surface-darkest: #F8FAFC;
|
|
--color-light-surface-dark: #F1F5F9;
|
|
--color-light-surface-medium: #E2E8F0;
|
|
--color-light-surface-light: #CBD5E1;
|
|
--color-light-surface-lighter: #94A3B8;
|
|
--color-light-on-surface: #0F172A;
|
|
--color-light-on-surface-variant: #475569;
|
|
--color-light-on-surface-muted: #64748B;
|
|
--color-light-primary: #0284C7;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background-color: var(--color-surface-darkest);
|
|
color: var(--color-on-surface);
|
|
font-family: 'Inter', 'Roboto', sans-serif;
|
|
}
|
|
|
|
/* Dark theme (default) */
|
|
html.dark body {
|
|
background-color: var(--color-surface-darkest);
|
|
color: var(--color-on-surface);
|
|
}
|
|
|
|
/* Light theme */
|
|
html.light body {
|
|
background-color: var(--color-light-surface-darkest);
|
|
color: var(--color-light-on-surface);
|
|
}
|
|
|
|
html.light {
|
|
--color-surface-darkest: var(--color-light-surface-darkest);
|
|
--color-surface-dark: var(--color-light-surface-dark);
|
|
--color-surface-medium: var(--color-light-surface-medium);
|
|
--color-surface-light: var(--color-light-surface-light);
|
|
--color-surface-lighter: var(--color-light-surface-lighter);
|
|
--color-on-surface: var(--color-light-on-surface);
|
|
--color-on-surface-variant: var(--color-light-on-surface-variant);
|
|
--color-on-surface-muted: var(--color-light-on-surface-muted);
|
|
--color-primary: var(--color-light-primary);
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--color-surface-light) 25%, var(--color-surface-lighter) 50%, var(--color-surface-light) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: 0.5rem;
|
|
}
|