feat(redesign): aurora foundation — tokens, glass sidebar, dashboard
Foundation pass on the Aurora redesign: - app.css: full token swap to lavender/orchid/mint/sky pastel palette, vivid aurora gradient backdrop, frosted glass surface tokens, two themes (Aurora dark + Pearl light), shadow recipe for floating glass. - fonts: add Geist Sans / Geist Mono / Newsreader, drop DM Sans usage (legacy fontsource entries kept in package.json until full migration). - layout.svelte: sidebar becomes a floating glass rail with a conic- gradient brand orb, Newsreader italic 'Bridge' wordmark, soft glass hovers on nav links, gradient active indicator, gradient user avatar. - Card.svelte: glass surface + inner highlight + soft hover lift. - PageHeader.svelte: Newsreader serif display title. - +page.svelte (dashboard): stat cards become glass with colored accent 'orb', event timeline gets soft glass rows + slide-on-hover. Build clean (0 errors, pre-existing a11y warnings unchanged). Other pages still inherit old chrome via shared tokens but will need component-specific passes; tracked separately.
This commit is contained in:
Generated
+44
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "notify-bridge-frontend",
|
||||
"version": "0.1.0",
|
||||
"version": "0.5.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "notify-bridge-frontend",
|
||||
"version": "0.1.0",
|
||||
"version": "0.5.2",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.18.0",
|
||||
"@codemirror/lang-html": "^6.4.11",
|
||||
@@ -15,7 +15,10 @@
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.40.0",
|
||||
"@fontsource/dm-sans": "^5.2.8",
|
||||
"@fontsource/geist-mono": "^5.2.7",
|
||||
"@fontsource/geist-sans": "^5.2.5",
|
||||
"@fontsource/jetbrains-mono": "^5.2.8",
|
||||
"@fontsource/newsreader": "^5.2.10",
|
||||
"@mdi/js": "^7.4.47",
|
||||
"codemirror": "^6.0.2"
|
||||
},
|
||||
@@ -612,6 +615,22 @@
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/geist-mono": {
|
||||
"version": "5.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz",
|
||||
"integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/geist-sans": {
|
||||
"version": "5.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
|
||||
"integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/jetbrains-mono": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
|
||||
@@ -620,6 +639,14 @@
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/newsreader": {
|
||||
"version": "5.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz",
|
||||
"integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/date": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
|
||||
@@ -2865,11 +2892,26 @@
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
|
||||
"integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA=="
|
||||
},
|
||||
"@fontsource/geist-mono": {
|
||||
"version": "5.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.2.7.tgz",
|
||||
"integrity": "sha512-xVPVFISJg/K0VVd+aQN0Y7X/sw9hUcJPyDWFJ5GpyU3bHELhoRsJkPSRSHXW32mOi0xZCUQDOaPj1sqIFJ1FGg=="
|
||||
},
|
||||
"@fontsource/geist-sans": {
|
||||
"version": "5.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/geist-sans/-/geist-sans-5.2.5.tgz",
|
||||
"integrity": "sha512-anllOHyJbElRs9fV15TeDRqAeb1IKm4bSknPl6ZMoyPTx1BBy7logudcUwpNjmQLkzn4Q0JGQLRCUKJYoyST6A=="
|
||||
},
|
||||
"@fontsource/jetbrains-mono": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
|
||||
"integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ=="
|
||||
},
|
||||
"@fontsource/newsreader": {
|
||||
"version": "5.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/newsreader/-/newsreader-5.2.10.tgz",
|
||||
"integrity": "sha512-TFaYzoFhDqarUyV2yYjgZZEwT4bpaj6sGBnXSnFknQ/QB8/9LzfY6IO9+inHOX4zzPp87Z7/KuG1OI5gr91Q3A=="
|
||||
},
|
||||
"@internationalized/date": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
|
||||
|
||||
@@ -35,7 +35,10 @@
|
||||
"@codemirror/theme-one-dark": "^6.1.3",
|
||||
"@codemirror/view": "^6.40.0",
|
||||
"@fontsource/dm-sans": "^5.2.8",
|
||||
"@fontsource/geist-mono": "^5.2.7",
|
||||
"@fontsource/geist-sans": "^5.2.5",
|
||||
"@fontsource/jetbrains-mono": "^5.2.8",
|
||||
"@fontsource/newsreader": "^5.2.10",
|
||||
"@mdi/js": "^7.4.47",
|
||||
"codemirror": "^6.0.2"
|
||||
}
|
||||
|
||||
+224
-82
@@ -1,41 +1,80 @@
|
||||
@import '@fontsource/dm-sans/300.css';
|
||||
@import '@fontsource/dm-sans/400.css';
|
||||
@import '@fontsource/dm-sans/500.css';
|
||||
@import '@fontsource/dm-sans/600.css';
|
||||
@import '@fontsource/dm-sans/700.css';
|
||||
@import '@fontsource/jetbrains-mono/400.css';
|
||||
@import '@fontsource/jetbrains-mono/500.css';
|
||||
@import '@fontsource/jetbrains-mono/600.css';
|
||||
@import '@fontsource/geist-sans/300.css';
|
||||
@import '@fontsource/geist-sans/400.css';
|
||||
@import '@fontsource/geist-sans/500.css';
|
||||
@import '@fontsource/geist-sans/600.css';
|
||||
@import '@fontsource/geist-sans/700.css';
|
||||
@import '@fontsource/geist-mono/400.css';
|
||||
@import '@fontsource/geist-mono/500.css';
|
||||
@import '@fontsource/geist-mono/600.css';
|
||||
@import '@fontsource/newsreader/300-italic.css';
|
||||
@import '@fontsource/newsreader/400.css';
|
||||
@import '@fontsource/newsreader/400-italic.css';
|
||||
@import '@fontsource/newsreader/500.css';
|
||||
@import '@fontsource/newsreader/500-italic.css';
|
||||
@import '@fontsource/newsreader/600.css';
|
||||
@import 'tailwindcss';
|
||||
|
||||
@theme {
|
||||
--color-background: #f8f9fb;
|
||||
--color-foreground: #1a1a2e;
|
||||
--color-muted: #eef0f4;
|
||||
--color-muted-foreground: #525866;
|
||||
--color-border: #e2e4ea;
|
||||
--color-primary: #0d9488;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-accent: #eef0f4;
|
||||
--color-accent-foreground: #1a1a2e;
|
||||
--color-destructive: #ef4444;
|
||||
--color-card: #ffffff;
|
||||
--color-card-foreground: #1a1a2e;
|
||||
--color-success-bg: #ecfdf5;
|
||||
--color-success-fg: #059669;
|
||||
--color-warning-bg: #fffbeb;
|
||||
--color-warning-fg: #d97706;
|
||||
--color-error-bg: #fef2f2;
|
||||
--color-error-fg: #dc2626;
|
||||
--color-glow: rgba(13, 148, 136, 0.15);
|
||||
--color-glow-strong: rgba(13, 148, 136, 0.3);
|
||||
--color-sidebar: #ffffff;
|
||||
--color-sidebar-active: rgba(13, 148, 136, 0.08);
|
||||
--font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
|
||||
--radius: 0.625rem;
|
||||
/* Layered z-index scale — refer to these instead of ad-hoc numbers.
|
||||
Ordered: base < sticky < dropdown < overlay < modal < tooltip < toast */
|
||||
/* === AURORA: dark default ("Aurora") === */
|
||||
--color-background: #050613;
|
||||
--color-background-deep: #02030a;
|
||||
--color-foreground: #f3f1ff;
|
||||
--color-muted: rgba(255, 255, 255, 0.04);
|
||||
--color-muted-foreground: #b6b2d4;
|
||||
--color-border: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* Glass surfaces — replace solid card */
|
||||
--color-glass: rgba(255, 255, 255, 0.04);
|
||||
--color-glass-strong: rgba(255, 255, 255, 0.07);
|
||||
--color-glass-elev: rgba(255, 255, 255, 0.10);
|
||||
--color-highlight: rgba(255, 255, 255, 0.14);
|
||||
--color-input-bg: rgba(255, 255, 255, 0.04);
|
||||
--color-rule-strong: rgba(255, 255, 255, 0.16);
|
||||
|
||||
/* Accent palette — soft pastel constellation */
|
||||
--color-primary: #b8a7ff; /* lavender — main accent */
|
||||
--color-primary-foreground: #02030a;
|
||||
--color-orchid: #ff9ec4;
|
||||
--color-mint: #7ee8c4;
|
||||
--color-citrus: #f0e16a;
|
||||
--color-coral: #ff8a78;
|
||||
--color-sky: #8ec9ff;
|
||||
|
||||
--color-accent: rgba(255, 255, 255, 0.07);
|
||||
--color-accent-foreground: #f3f1ff;
|
||||
--color-destructive: #ff8a78;
|
||||
|
||||
/* Card mapping (kept for backward compat with components that read --color-card) */
|
||||
--color-card: rgba(255, 255, 255, 0.04);
|
||||
--color-card-foreground: #f3f1ff;
|
||||
|
||||
/* Status surfaces */
|
||||
--color-success-bg: rgba(126, 232, 196, 0.12);
|
||||
--color-success-fg: #7ee8c4;
|
||||
--color-warning-bg: rgba(240, 225, 106, 0.12);
|
||||
--color-warning-fg: #f0e16a;
|
||||
--color-error-bg: rgba(255, 138, 120, 0.12);
|
||||
--color-error-fg: #ff8a78;
|
||||
|
||||
/* Glow tokens — used for focus rings, hover halos */
|
||||
--color-glow: rgba(184, 167, 255, 0.20);
|
||||
--color-glow-strong: rgba(184, 167, 255, 0.45);
|
||||
|
||||
/* Sidebar tokens */
|
||||
--color-sidebar: rgba(255, 255, 255, 0.04);
|
||||
--color-sidebar-active: rgba(255, 255, 255, 0.10);
|
||||
|
||||
/* Shadow recipe for floating glass */
|
||||
--shadow-card: 0 1px 0 rgba(255,255,255,0.07) inset, 0 30px 60px -20px rgba(0,0,0,0.6);
|
||||
|
||||
/* Typography */
|
||||
--font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'Consolas', monospace;
|
||||
--font-display: 'Newsreader', ui-serif, Georgia, serif;
|
||||
|
||||
--radius: 1rem;
|
||||
|
||||
/* z-index scale (unchanged) */
|
||||
--z-base: 1;
|
||||
--z-sticky: 10;
|
||||
--z-dropdown: 30;
|
||||
@@ -45,30 +84,56 @@
|
||||
--z-toast: 70;
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
/* === AURORA: light theme ("Pearl") overrides === */
|
||||
[data-theme="light"] {
|
||||
--color-background: #f5f3ff;
|
||||
--color-background-deep: #ede9fe;
|
||||
--color-foreground: #1a1530;
|
||||
--color-muted: rgba(20, 15, 60, 0.04);
|
||||
--color-muted-foreground: #4a4670;
|
||||
--color-border: rgba(20, 15, 60, 0.08);
|
||||
|
||||
--color-glass: rgba(255, 255, 255, 0.55);
|
||||
--color-glass-strong: rgba(255, 255, 255, 0.65);
|
||||
--color-glass-elev: rgba(255, 255, 255, 0.80);
|
||||
--color-highlight: rgba(255, 255, 255, 0.9);
|
||||
--color-input-bg: rgba(255, 255, 255, 0.85);
|
||||
--color-rule-strong: rgba(20, 15, 60, 0.16);
|
||||
|
||||
--color-primary: #6d4ce0;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-orchid: #d63384;
|
||||
--color-mint: #008a64;
|
||||
--color-citrus: #a07a00;
|
||||
--color-coral: #e0512f;
|
||||
--color-sky: #1f6fcc;
|
||||
|
||||
--color-accent: rgba(20, 15, 60, 0.04);
|
||||
--color-accent-foreground: #1a1530;
|
||||
--color-destructive: #e0512f;
|
||||
|
||||
--color-card: rgba(255, 255, 255, 0.55);
|
||||
--color-card-foreground: #1a1530;
|
||||
|
||||
--color-success-bg: rgba(0, 138, 100, 0.10);
|
||||
--color-success-fg: #008a64;
|
||||
--color-warning-bg: rgba(160, 122, 0, 0.10);
|
||||
--color-warning-fg: #a07a00;
|
||||
--color-error-bg: rgba(224, 81, 47, 0.10);
|
||||
--color-error-fg: #e0512f;
|
||||
|
||||
--color-glow: rgba(109, 76, 224, 0.18);
|
||||
--color-glow-strong: rgba(109, 76, 224, 0.40);
|
||||
|
||||
--color-sidebar: rgba(255, 255, 255, 0.55);
|
||||
--color-sidebar-active: rgba(255, 255, 255, 0.85);
|
||||
|
||||
--shadow-card: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 40px -16px rgba(80, 50, 180, 0.18);
|
||||
}
|
||||
|
||||
/* Legacy alias — many components still read [data-theme="dark"] */
|
||||
[data-theme="dark"] {
|
||||
--color-background: #0c0e14;
|
||||
--color-foreground: #e4e6ed;
|
||||
--color-muted: #1a1d28;
|
||||
--color-muted-foreground: #8b8fa4;
|
||||
--color-border: #252836;
|
||||
--color-primary: #14b8a6;
|
||||
--color-primary-foreground: #0c0e14;
|
||||
--color-accent: #1a1d28;
|
||||
--color-accent-foreground: #e4e6ed;
|
||||
--color-destructive: #f87171;
|
||||
--color-card: #13151e;
|
||||
--color-card-foreground: #e4e6ed;
|
||||
--color-success-bg: #052e16;
|
||||
--color-success-fg: #34d399;
|
||||
--color-warning-bg: #422006;
|
||||
--color-warning-fg: #fbbf24;
|
||||
--color-error-bg: #450a0a;
|
||||
--color-error-fg: #f87171;
|
||||
--color-glow: rgba(20, 184, 166, 0.12);
|
||||
--color-glow-strong: rgba(20, 184, 166, 0.25);
|
||||
--color-sidebar: #10121a;
|
||||
--color-sidebar-active: rgba(20, 184, 166, 0.1);
|
||||
/* defaults already match :root — no overrides needed, declaration kept for color-scheme */
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -78,25 +143,49 @@ body {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
letter-spacing: -0.005em;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Subtle background pattern */
|
||||
/* === Aurora atmosphere — vivid blurred blobs behind everything === */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: -20vh -10vw;
|
||||
background:
|
||||
radial-gradient(40vw 40vw at 12% 18%, rgba(184, 167, 255, 0.55), transparent 60%),
|
||||
radial-gradient(35vw 35vw at 88% 22%, rgba(255, 158, 196, 0.45), transparent 60%),
|
||||
radial-gradient(50vw 35vw at 78% 88%, rgba(126, 232, 196, 0.40), transparent 60%),
|
||||
radial-gradient(40vw 30vw at 6% 92%, rgba(142, 201, 255, 0.42), transparent 60%);
|
||||
filter: blur(60px) saturate(140%);
|
||||
pointer-events: none;
|
||||
z-index: -2;
|
||||
animation: aurora-drift 28s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background-image: radial-gradient(circle at 1px 1px, var(--color-border) 0.5px, transparent 0);
|
||||
background-size: 32px 32px;
|
||||
background: radial-gradient(circle at 50% 50%, transparent 30%, var(--color-background-deep) 100%);
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@keyframes aurora-drift {
|
||||
from { transform: translate(0, 0) scale(1); }
|
||||
to { transform: translate(-2%, 1%) scale(1.05); }
|
||||
}
|
||||
|
||||
[data-theme="light"] body::before { opacity: 0.85; }
|
||||
|
||||
/* Form controls */
|
||||
input, select, textarea {
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-input-bg);
|
||||
border-color: var(--color-rule-strong);
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
@@ -107,39 +196,61 @@ input:focus-visible, select:focus-visible, textarea:focus-visible {
|
||||
box-shadow: 0 0 0 3px var(--color-glow), 0 0 12px var(--color-glow);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
button:focus-visible, a:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.375rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* Override browser autofill styles in dark mode */
|
||||
/* Override browser autofill in dark mode */
|
||||
[data-theme="dark"] input:-webkit-autofill,
|
||||
[data-theme="dark"] input:-webkit-autofill:hover,
|
||||
[data-theme="dark"] input:-webkit-autofill:focus,
|
||||
[data-theme="dark"] select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px #13151e inset !important;
|
||||
-webkit-text-fill-color: #e4e6ed !important;
|
||||
caret-color: #e4e6ed;
|
||||
-webkit-box-shadow: 0 0 0 1000px #0d0e1c inset !important;
|
||||
-webkit-text-fill-color: #f3f1ff !important;
|
||||
caret-color: #f3f1ff;
|
||||
}
|
||||
|
||||
/* Color scheme for native controls */
|
||||
[data-theme="dark"] { color-scheme: dark; }
|
||||
[data-theme="light"] { color-scheme: light; }
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb { background: var(--color-rule-strong); border-radius: 999px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); }
|
||||
|
||||
/* Animations */
|
||||
/* === Glass surface utility — used by cards, panels, sidebar === */
|
||||
.glass {
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 22px;
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
}
|
||||
.glass::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.glass-strong {
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
.glass-elev {
|
||||
background: var(--color-glass-elev);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection { background: var(--color-primary); color: var(--color-primary-foreground); }
|
||||
|
||||
/* === Animations === */
|
||||
@keyframes fadeSlideIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
@@ -160,6 +271,16 @@ a:focus-visible {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes aurora-rise {
|
||||
from { opacity: 0; transform: translateY(14px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes aurora-pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 0.6; }
|
||||
}
|
||||
|
||||
.animate-fade-slide-in {
|
||||
animation: fadeSlideIn 0.4s ease-out forwards;
|
||||
}
|
||||
@@ -178,9 +299,13 @@ a:focus-visible {
|
||||
animation: countUp 0.5s ease-out both;
|
||||
}
|
||||
|
||||
.animate-rise {
|
||||
animation: aurora-rise 0.6s cubic-bezier(.2,.7,.2,1) both;
|
||||
}
|
||||
|
||||
/* Stagger children utility */
|
||||
.stagger-children > * {
|
||||
animation: fadeSlideIn 0.4s ease-out forwards;
|
||||
animation: aurora-rise 0.55s cubic-bezier(.2,.7,.2,1) both;
|
||||
}
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
|
||||
.stagger-children > *:nth-child(2) { animation-delay: 60ms; }
|
||||
@@ -193,10 +318,14 @@ a:focus-visible {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.font-display {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
/* Card highlight for cross-entity navigation */
|
||||
@keyframes cardHighlight {
|
||||
0%, 100% { box-shadow: none; }
|
||||
25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px color-mix(in srgb, var(--color-primary) 30%, transparent); }
|
||||
25%, 75% { box-shadow: 0 0 0 3px var(--color-primary), 0 0 20px var(--color-glow-strong); }
|
||||
}
|
||||
|
||||
/* Dim overlay behind highlighted card */
|
||||
@@ -213,3 +342,16 @@ a:focus-visible {
|
||||
.nav-dim-overlay.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Live pulse dot — for "live" / armed indicators */
|
||||
.aurora-pulse {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-mint);
|
||||
box-shadow: 0 0 8px var(--color-mint);
|
||||
display: inline-block;
|
||||
animation: aurora-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
.aurora-pulse.warn { background: var(--color-citrus); box-shadow: 0 0 8px var(--color-citrus); }
|
||||
.aurora-pulse.error { background: var(--color-coral); box-shadow: 0 0 8px var(--color-coral); }
|
||||
.aurora-pulse.idle { background: var(--color-muted-foreground); box-shadow: none; opacity: 0.5; animation: none; }
|
||||
|
||||
@@ -1,30 +1,55 @@
|
||||
<script lang="ts">
|
||||
let { children, class: className = '', hover = false, entityId = undefined, ...rest } = $props<{
|
||||
children: import('svelte').Snippet;
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
children: Snippet;
|
||||
class?: string;
|
||||
hover?: boolean;
|
||||
entityId?: number | string;
|
||||
[key: string]: any;
|
||||
}>();
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
let { children, class: className = '', hover = false, entityId = undefined, ...rest }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="card-component {hover ? 'card-hover' : ''} {className}"
|
||||
style="background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1.25rem;"
|
||||
data-entity-id={entityId}
|
||||
{...rest}
|
||||
>
|
||||
{@render children()}
|
||||
<div class="card-component__inner">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-component {
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
position: relative;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 22px;
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-component::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.card-component__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 1.25rem 1.4rem;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 16px var(--color-glow), 0 0 0 1px var(--color-glow);
|
||||
border-color: var(--color-rule-strong);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<script lang="ts">
|
||||
let { title, description = '', children } = $props<{
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
children?: import('svelte').Snippet;
|
||||
}>();
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { title, description = '', children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="page-header">
|
||||
<div class="animate-fade-slide-in">
|
||||
<h2 class="text-2xl font-semibold tracking-tight">{title}</h2>
|
||||
<h2 class="page-header__title">{title}</h2>
|
||||
{#if description}
|
||||
<p class="text-sm mt-1.5" style="color: var(--color-muted-foreground);">{description}</p>
|
||||
<p class="page-header__desc">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if children}
|
||||
@@ -19,3 +23,29 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.page-header__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.05;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
.page-header__desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-muted-foreground);
|
||||
margin-top: 0.4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { api } from '$lib/api';
|
||||
import { getAuth, loadUser, logout } from '$lib/auth.svelte';
|
||||
import { t, getLocale, setLocale, type Locale } from '$lib/i18n';
|
||||
import { t, getLocale, setLocale } from '$lib/i18n';
|
||||
import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
||||
@@ -346,26 +346,28 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else if auth.user}
|
||||
<div class="flex h-screen">
|
||||
<div class="app-shell">
|
||||
<!-- Sidebar -->
|
||||
<aside
|
||||
class="sidebar {collapsed ? 'w-[3.75rem]' : 'w-[15rem]'} flex flex-col max-md:hidden"
|
||||
style="background: var(--color-sidebar); border-right: 1px solid var(--color-border); transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center {collapsed ? 'justify-center p-2.5' : 'justify-between px-5 py-4'}" style="border-bottom: 1px solid var(--color-border);">
|
||||
<div class="sidebar-header flex items-center {collapsed ? 'justify-center p-3' : 'justify-between px-5 py-5'}">
|
||||
{#if !collapsed}
|
||||
<div class="animate-fade-slide-in">
|
||||
<h1 class="text-base font-semibold tracking-tight flex items-center gap-1.5" style="color: var(--color-foreground);">
|
||||
{#if globalProviderFilter.provider}
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
|
||||
{/if}
|
||||
<span><span style="color: var(--color-primary);">Notify</span> Bridge</span>
|
||||
</h1>
|
||||
<p class="text-[0.7rem] text-[var(--color-muted-foreground)] mt-0.5 tracking-wide uppercase">{t('app.tagline')}</p>
|
||||
<div class="animate-fade-slide-in flex items-center gap-2.5">
|
||||
<div class="brand-orb"></div>
|
||||
<div>
|
||||
<h1 class="brand-mark">
|
||||
{#if globalProviderFilter.provider}
|
||||
<span class="brand-mark__icon" style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={16} /></span>
|
||||
{/if}
|
||||
<span class="brand-mark__notify">Notify</span> <em>Bridge</em>
|
||||
</h1>
|
||||
<p class="brand-tag">{t('app.tagline')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if globalProviderFilter.provider}
|
||||
<span style="color: var(--color-primary);"><MdiIcon name={providerDefaultIcon(globalProviderFilter.provider)} size={18} /></span>
|
||||
{:else}
|
||||
<div class="brand-orb brand-orb--small"></div>
|
||||
{/if}
|
||||
<button onclick={toggleSidebar}
|
||||
class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
|
||||
@@ -502,8 +504,7 @@
|
||||
<div class="px-1.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-[0.7rem] font-semibold"
|
||||
style="background: var(--color-primary); color: var(--color-primary-foreground);">
|
||||
<div class="user-avatar">
|
||||
{auth.user.username[0].toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
@@ -663,44 +664,115 @@
|
||||
<SearchPalette onopen={(fn) => openSearch = fn} />
|
||||
|
||||
<style>
|
||||
@media (max-width: 767px) {
|
||||
.mobile-nav { display: flex !important; }
|
||||
.mobile-more-panel a:hover,
|
||||
.mobile-more-panel button:hover {
|
||||
background: var(--color-muted);
|
||||
}
|
||||
/* === AURORA SHELL === */
|
||||
.app-shell {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
padding: 18px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
/* Provider filter chips */
|
||||
.provider-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.375rem;
|
||||
/* === SIDEBAR — frosted glass rail === */
|
||||
.sidebar {
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
border-radius: 22px;
|
||||
box-shadow: var(--shadow-card);
|
||||
position: sticky;
|
||||
top: 18px;
|
||||
height: calc(100vh - 36px);
|
||||
overflow: hidden;
|
||||
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.sidebar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
}
|
||||
.sidebar > * { position: relative; z-index: 1; }
|
||||
.sidebar-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Brand mark — italic Newsreader serif */
|
||||
.brand-mark {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.brand-mark__notify {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.brand-mark em {
|
||||
font-style: italic;
|
||||
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.brand-mark__icon {
|
||||
margin-right: 2px;
|
||||
align-self: center;
|
||||
}
|
||||
.brand-tag {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
.provider-chip:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
.brand-orb {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 11px;
|
||||
background: conic-gradient(from 220deg, var(--color-primary), var(--color-orchid), var(--color-mint), var(--color-primary));
|
||||
box-shadow: 0 4px 14px var(--color-glow);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.provider-chip.active {
|
||||
border-color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
color: var(--color-primary);
|
||||
.brand-orb::after {
|
||||
content: '';
|
||||
position: absolute; inset: 4px;
|
||||
border-radius: 7px;
|
||||
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6), transparent 50%);
|
||||
}
|
||||
.brand-orb--small { width: 26px; height: 26px; border-radius: 9px; }
|
||||
|
||||
/* User avatar */
|
||||
.user-avatar {
|
||||
width: 30px; height: 30px;
|
||||
border-radius: 50%;
|
||||
display: grid; place-items: center;
|
||||
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary));
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.78rem;
|
||||
box-shadow: 0 0 0 2px var(--color-glass) inset;
|
||||
}
|
||||
|
||||
.provider-filter-btn {
|
||||
color: var(--color-muted-foreground);
|
||||
background: transparent;
|
||||
}
|
||||
.provider-filter-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-muted);
|
||||
color: var(--color-foreground);
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
|
||||
/* Sidebar icon button (toggle, logout) */
|
||||
@@ -709,47 +781,53 @@
|
||||
background: transparent;
|
||||
}
|
||||
.sidebar-icon-btn:hover {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
/* Search button */
|
||||
.search-btn {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.search-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-glass-elev);
|
||||
border-color: var(--color-rule-strong);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
/* Nav links (top-level items, group headers, group children) */
|
||||
/* Nav links — soft glass hovers, gradient bar on active */
|
||||
.nav-link {
|
||||
color: var(--color-muted-foreground);
|
||||
background: transparent;
|
||||
font-weight: 400;
|
||||
font-weight: 450;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
.nav-link:not(.active):hover {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
.nav-link.active {
|
||||
color: var(--color-primary);
|
||||
color: var(--color-foreground);
|
||||
font-weight: 500;
|
||||
background: var(--color-glass-elev);
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight), 0 4px 18px -8px var(--color-glow);
|
||||
}
|
||||
.nav-link.active-bg {
|
||||
background: var(--color-sidebar-active);
|
||||
background: var(--color-glass-elev);
|
||||
}
|
||||
|
||||
/* Footer pill buttons (locale, theme) */
|
||||
.footer-pill {
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.footer-pill:hover {
|
||||
color: var(--color-foreground);
|
||||
box-shadow: 0 0 8px var(--color-glow);
|
||||
background: var(--color-glass-elev);
|
||||
border-color: var(--color-rule-strong);
|
||||
}
|
||||
|
||||
/* Change password link */
|
||||
@@ -762,35 +840,62 @@
|
||||
|
||||
/* Primary action button (password form submit) */
|
||||
.primary-btn {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
|
||||
color: white;
|
||||
border: 0;
|
||||
box-shadow: 0 6px 20px -8px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
|
||||
}
|
||||
.primary-btn:hover {
|
||||
box-shadow: 0 0 16px var(--color-glow-strong);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 24px -6px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-weight: 500;
|
||||
padding: 0.12rem 0.45rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
background: var(--color-glass-elev);
|
||||
color: var(--color-foreground);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.2;
|
||||
min-width: 1.2rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.nav-link.active .nav-badge {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
border-color: transparent;
|
||||
}
|
||||
.nav-badge-sm {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 600;
|
||||
padding: 0.05rem 0.35rem;
|
||||
font-weight: 500;
|
||||
padding: 0.06rem 0.4rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-muted);
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.2;
|
||||
min-width: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Mobile bottom-nav */
|
||||
@media (max-width: 767px) {
|
||||
.app-shell {
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
.sidebar {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
.mobile-nav { display: flex !important; }
|
||||
.mobile-more-panel a:hover,
|
||||
.mobile-more-panel button:hover {
|
||||
background: var(--color-glass-strong);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
||||
import EventChart from '$lib/components/EventChart.svelte';
|
||||
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
|
||||
import EntitySelect from '$lib/components/EntitySelect.svelte';
|
||||
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
||||
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
||||
import { eventTypeFilterItems, sortFilterItems, providerDefaultIcon } from '$lib/grid-items';
|
||||
@@ -409,20 +408,128 @@
|
||||
onconfirm={clearEvents} oncancel={() => confirmClearEvents = false} />
|
||||
|
||||
<style>
|
||||
.stat-card { position: relative; border-radius: 0.75rem; padding: 1px; background: linear-gradient(135deg, var(--accent), transparent 60%, var(--color-border)); transition: all 0.3s ease; }
|
||||
.stat-card:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent); }
|
||||
.stat-card-inner { background: var(--color-card); border-radius: calc(0.75rem - 1px); padding: 1.25rem; }
|
||||
.stat-icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; flex-shrink: 0; }
|
||||
.stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; animation: countUp 0.5s ease-out both; }
|
||||
.stat-value-text { font-size: 1rem; font-weight: 600; line-height: 1.3; animation: countUp 0.5s ease-out both; }
|
||||
/* === Aurora glass stat cards with colored "orb" === */
|
||||
.stat-card {
|
||||
position: relative;
|
||||
border-radius: 22px;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
transition: transform 0.25s cubic-bezier(.4,.4,0,1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 220px; height: 220px;
|
||||
border-radius: 50%;
|
||||
right: -100px; top: -90px;
|
||||
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
filter: blur(20px);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.stat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.stat-card:hover { transform: translateY(-3px); }
|
||||
.stat-card:hover::before { transform: scale(1.15); }
|
||||
.stat-card-inner { position: relative; z-index: 1; padding: 1.4rem; }
|
||||
.stat-icon {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 2.5rem; height: 2.5rem;
|
||||
border-radius: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-glass-elev) !important;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight);
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.85rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.025em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
animation: countUp 0.5s ease-out both;
|
||||
}
|
||||
.stat-value-text {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
animation: countUp 0.5s ease-out both;
|
||||
}
|
||||
.stat-suffix { font-size: 1rem; font-weight: 400; color: var(--color-muted-foreground); }
|
||||
.event-timeline { display: flex; flex-direction: column; }
|
||||
.event-item { display: flex; align-items: flex-start; gap: 0.75rem; position: relative; padding-bottom: 0.5rem; }
|
||||
.event-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; z-index: 1; }
|
||||
.event-line { position: absolute; left: 4px; top: 18px; bottom: 0; width: 2px; background: var(--color-border); }
|
||||
.event-content { flex: 1; min-width: 0; padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: var(--color-card); border: 1px solid var(--color-border); transition: all 0.2s ease; }
|
||||
.event-content:hover { border-color: var(--color-primary); box-shadow: 0 0 12px var(--color-glow); }
|
||||
.event-badge { display: inline-block; font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 9999px; background: var(--color-muted); color: var(--color-muted-foreground); white-space: nowrap; font-family: var(--font-mono); }
|
||||
.clear-events-btn { color: var(--color-muted-foreground); background: transparent; }
|
||||
.clear-events-btn:hover { background: color-mix(in srgb, var(--color-error-fg) 10%, transparent); border-color: color-mix(in srgb, var(--color-error-fg) 40%, var(--color-border)); color: var(--color-error-fg); }
|
||||
|
||||
/* === Event timeline — softer, glass, gradient bullets === */
|
||||
.event-timeline { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.event-item {
|
||||
display: flex; align-items: flex-start; gap: 0.85rem;
|
||||
position: relative; padding-bottom: 0.5rem;
|
||||
}
|
||||
.event-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
.event-line {
|
||||
position: absolute;
|
||||
left: 4px; top: 20px; bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
.event-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 14px;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: inset 0 1px 0 var(--color-highlight);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.event-content:hover {
|
||||
background: var(--color-glass-strong);
|
||||
border-color: var(--color-rule-strong);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.event-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-glass-strong);
|
||||
color: var(--color-muted-foreground);
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-mono);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.clear-events-btn {
|
||||
color: var(--color-muted-foreground);
|
||||
background: var(--color-glass-strong) !important;
|
||||
border-radius: 10px !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.clear-events-btn:hover {
|
||||
background: var(--color-error-bg) !important;
|
||||
border-color: color-mix(in srgb, var(--color-error-fg) 40%, var(--color-border)) !important;
|
||||
color: var(--color-error-fg);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user