SakurasanandClaude Sonnet 5
489a79564c
Vue 3 + TS + Vite + Tailwind with self-built UI components. Landing, auth, user dashboard (keys/usage/settings), and admin console (overview/models/channels/users/usage/config). Theme system (light/dark/system) with pre-paint boot script, theme-aware ECharts, and a channel editor with multi-format (Anthropic/OpenAI) selection. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
77 lines
2.4 KiB
CSS
77 lines
2.4 KiB
CSS
/* Design tokens — themeable (dark default + light), dashboard feel for an
|
|
API gateway. Neutral slate scale + a single indigo accent; monospace for
|
|
tokens, endpoints and code. Values are raw RGB triplets consumed by
|
|
Tailwind via rgb(var(--x) / <alpha-value>). The effective theme is set as
|
|
`data-theme` on <html> by an inline script (see index.html) and kept in
|
|
sync by stores/theme.ts. */
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
|
|
/* surfaces */
|
|
--t-bg: 9 12 21; /* page background, near-black navy */
|
|
--t-surface: 17 22 36; /* cards / panels */
|
|
--t-surface-2: 24 31 48; /* raised elements, table headers */
|
|
--t-border: 37 45 66;
|
|
--t-border-strong: 57 67 96;
|
|
|
|
/* text */
|
|
--t-text: 228 232 240;
|
|
--t-text-soft: 148 163 184;
|
|
--t-text-mute: 100 116 139;
|
|
|
|
/* accent */
|
|
--t-accent: 99 102 241;
|
|
--t-accent-hover: 129 140 248;
|
|
--t-accent-soft: 99 102 241;
|
|
|
|
/* semantic */
|
|
--t-success: 52 211 153;
|
|
--t-warning: 251 191 36;
|
|
--t-danger: 248 113 113;
|
|
--t-info: 56 189 248;
|
|
|
|
/* typography */
|
|
--t-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
|
|
'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
--t-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
|
|
'Liberation Mono', monospace;
|
|
|
|
/* shape */
|
|
--t-radius: 0.5rem;
|
|
--t-radius-sm: 0.375rem;
|
|
--t-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.5);
|
|
--t-shadow-pop: 0 12px 40px -8px rgb(0 0 0 / 0.7);
|
|
}
|
|
|
|
[data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
/* surfaces */
|
|
--t-bg: 248 250 252; /* slate-50 page background */
|
|
--t-surface: 255 255 255; /* cards / panels */
|
|
--t-surface-2: 241 245 249; /* raised elements, table headers */
|
|
--t-border: 226 232 240; /* slate-200 */
|
|
--t-border-strong: 203 213 225; /* slate-300 */
|
|
|
|
/* text */
|
|
--t-text: 15 23 42; /* slate-900 */
|
|
--t-text-soft: 71 85 105; /* slate-600 */
|
|
--t-text-mute: 100 116 139; /* slate-500 */
|
|
|
|
/* accent — indigo-600/700 (darker than the dark theme for white bg) */
|
|
--t-accent: 79 70 229;
|
|
--t-accent-hover: 67 56 202;
|
|
--t-accent-soft: 99 102 241;
|
|
|
|
/* semantic — 600-level so they stay readable on white */
|
|
--t-success: 5 150 105;
|
|
--t-warning: 217 119 6;
|
|
--t-danger: 220 38 38;
|
|
--t-info: 2 132 199;
|
|
|
|
/* shape */
|
|
--t-shadow-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 8px 24px -12px rgb(15 23 42 / 0.14);
|
|
--t-shadow-pop: 0 12px 40px -8px rgb(15 23 42 / 0.2);
|
|
}
|