alexei.dolgolyov
0bd30c5e17
Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
219 lines
5.6 KiB
CSS
219 lines
5.6 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
:root {
|
|
/* HSL-based primary color (overridden by theme store via JS) */
|
|
--primary-h: 220;
|
|
--primary-s: 70%;
|
|
--primary-l: 50%;
|
|
|
|
--background: hsl(0 0% 100%);
|
|
--foreground: hsl(240 10% 3.9%);
|
|
--muted: hsl(240 4.8% 95.9%);
|
|
--muted-foreground: hsl(240 3.8% 46.1%);
|
|
--popover: hsl(0 0% 100%);
|
|
--popover-foreground: hsl(240 10% 3.9%);
|
|
--card: hsl(0 0% 100%);
|
|
--card-foreground: hsl(240 10% 3.9%);
|
|
--border: hsl(240 5.9% 90%);
|
|
--input: hsl(240 5.9% 90%);
|
|
--primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--primary-foreground: hsl(0 0% 98%);
|
|
--secondary: hsl(240 4.8% 95.9%);
|
|
--secondary-foreground: hsl(240 5.9% 10%);
|
|
--accent: hsl(240 4.8% 95.9%);
|
|
--accent-foreground: hsl(240 5.9% 10%);
|
|
--destructive: hsl(0 72.2% 50.6%);
|
|
--destructive-foreground: hsl(0 0% 98%);
|
|
--ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--radius: 0.5rem;
|
|
--sidebar: hsl(0 0% 98%);
|
|
--sidebar-foreground: hsl(240 5.3% 26.1%);
|
|
--sidebar-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--sidebar-primary-foreground: hsl(0 0% 98%);
|
|
--sidebar-accent: hsl(240 4.8% 95.9%);
|
|
--sidebar-accent-foreground: hsl(240 5.9% 10%);
|
|
--sidebar-border: hsl(220 13% 91%);
|
|
--sidebar-ring: hsl(var(--primary-h) calc(var(--primary-s) * 1.2) 60%);
|
|
}
|
|
|
|
.dark {
|
|
--primary-l: 60%;
|
|
|
|
--background: hsl(240 10% 3.9%);
|
|
--foreground: hsl(0 0% 98%);
|
|
--muted: hsl(240 3.7% 15.9%);
|
|
--muted-foreground: hsl(240 5% 64.9%);
|
|
--popover: hsl(240 10% 3.9%);
|
|
--popover-foreground: hsl(0 0% 98%);
|
|
--card: hsl(240 6% 7%);
|
|
--card-foreground: hsl(0 0% 98%);
|
|
--border: hsl(240 3.7% 15.9%);
|
|
--input: hsl(240 3.7% 15.9%);
|
|
--primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--primary-foreground: hsl(240 5.9% 10%);
|
|
--secondary: hsl(240 3.7% 15.9%);
|
|
--secondary-foreground: hsl(0 0% 98%);
|
|
--accent: hsl(240 3.7% 15.9%);
|
|
--accent-foreground: hsl(0 0% 98%);
|
|
--destructive: hsl(0 62.8% 30.6%);
|
|
--destructive-foreground: hsl(0 0% 98%);
|
|
--ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--sidebar: hsl(240 5.9% 6%);
|
|
--sidebar-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
|
|
--sidebar-primary-foreground: hsl(0 0% 100%);
|
|
--sidebar-accent: hsl(240 3.7% 15.9%);
|
|
--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
|
--sidebar-border: hsl(240 3.7% 15.9%);
|
|
--sidebar-ring: hsl(var(--primary-h) calc(var(--primary-s) * 1.2) 60%);
|
|
}
|
|
|
|
@theme inline {
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
}
|
|
|
|
/* ===== Status Indicator Pulse ===== */
|
|
@keyframes status-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 0 currentColor;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
box-shadow: 0 0 0 4px transparent;
|
|
}
|
|
}
|
|
|
|
.status-online {
|
|
animation: status-pulse 2s ease-in-out infinite;
|
|
color: hsl(142 71% 45%);
|
|
}
|
|
|
|
/* ===== Card Hover Effects ===== */
|
|
.card-hover {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: scale(1.02);
|
|
box-shadow:
|
|
0 10px 25px -5px rgba(0, 0, 0, 0.15),
|
|
0 4px 10px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .card-hover:hover {
|
|
box-shadow:
|
|
0 10px 25px -5px rgba(0, 0, 0, 0.4),
|
|
0 4px 10px -5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ===== Skeleton Loading ===== */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--muted) 25%,
|
|
hsl(240 4.8% 85%) 50%,
|
|
var(--muted) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.dark .skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--muted) 25%,
|
|
hsl(240 3.7% 22%) 50%,
|
|
var(--muted) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
/* ===== Scrollbar Styling ===== */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--muted-foreground);
|
|
border-radius: 4px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ===== Aurora Keyframes ===== */
|
|
@keyframes aurora-shift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|