thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 16:02:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
eeabd188ecb889971856465968a62cfebda0d3bb
bitvid/css/tokens.css
T

271 lines
11 KiB
CSS
Raw Blame History

:root {
/* Color tokens */
--color-page: rgb(255 255 255);
--color-page-alt: rgb(249 250 251);
--color-surface: rgb(15 23 42);
--color-surface-alt: rgb(17 24 39);
--color-bg: var(--color-surface);
--color-card: rgb(30 41 59);
--color-card-private: rgb(59 29 116);
--color-card-critical: rgb(63 11 19);
--color-panel: rgb(31 41 55);
--color-panel-hover: rgb(51 65 85);
--color-border: rgb(55 65 81);
--color-border-subtle: rgb(209 213 219);
--color-primary: rgb(254 0 50);
--color-secondary: rgb(255 147 165);
--color-logo-accent: var(--color-primary);
--color-logo-wordmark: var(--color-neutral-700);
--color-logo-wordmark-inverse: var(--color-white);
--color-logo-background: var(--color-neutral-700);
--color-logo-background-inverse: var(--color-white);
--color-info: rgb(96 165 250);
--color-info-strong: rgb(37 99 235);
--color-info-pressed: rgb(29 78 216);
--color-muted-strong: rgb(107 114 128);
--color-text: rgb(248 250 252);
--color-text-strong: rgb(15 23 42);
--color-text-muted: var(--color-muted);
--color-muted: rgb(148 163 184);
--color-muted-alt: rgb(156 163 175);
--color-subtle-text: rgb(226 232 240);
--color-subtle: rgb(229 231 235);
--color-critical: rgb(127 29 29);
--color-critical-strong: rgb(153 27 27);
--color-warning: rgb(250 204 21);
--color-warning-strong: rgb(217 119 6);
--color-warning-surface: rgb(146 64 14 / 0.24);
--color-warning-glass: rgb(250 204 21 / 0.18);
--color-neutral-700: rgb(63 63 70);
--color-neutral-600: rgb(82 82 91);
--color-white: rgb(255 255 255);
--color-black: rgb(0 0 0);
--color-overlay: rgb(26 34 52);
--color-overlay-black: rgb(0 0 0 / 0.9);
--color-overlay-muted: rgb(15 23 42 / 0.55);
--color-overlay-strong: rgb(15 23 42 / 0.75);
--color-overlay-darker: rgb(15 23 42 / 0.88);
--color-overlay-panel: rgb(26 34 52 / 0.82);
--color-overlay-panel-soft: rgb(26 34 52 / 0.65);
--color-overlay-panel-tint: rgb(31 41 55 / 0.5);
--color-overlay-panel-glass: rgb(28 37 58 / 0.72);
--color-overlay-panel-glass-soft: rgb(31 41 55 / 0.55);
--color-modal-backdrop: rgb(8 12 24 / 0.58);
--color-modal-surface: rgb(20 28 46 / 0.78);
--color-overlay-veil: rgb(11 17 32 / 0.96);
--color-overlay-banner: rgb(51 65 85 / 0.95);
--color-sidebar-surface: rgb(17 24 39 / 0.94);
--color-sidebar-surface-alt: rgb(11 22 48 / 0.78);
--color-sidebar-border: rgb(148 163 184 / 0.28);
--color-sidebar-border-strong: rgb(148 163 184 / 0.42);
--color-sidebar-hover: rgb(56 189 248 / 0.18);
--color-sidebar-hover-strong: rgb(129 140 248 / 0.28);
--color-sidebar-glow: rgb(56 189 248 / 0.35);
--color-sidebar-accent-start: rgb(56 189 248 / 0.9);
--color-sidebar-accent-end: rgb(129 140 248 / 0.85);
--color-sidebar-text-muted: rgb(203 213 225 / 0.75);
--color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
--color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92);
--color-surface-tint-subtle: rgb(148 163 184 / 0.08);
--color-border-translucent: rgb(148 163 184 / 0.18);
--color-border-translucent-strong: rgb(148 163 184 / 0.25);
--color-border-translucent-bright: rgb(148 163 184 / 0.32);
--color-border-translucent-stronger: rgb(148 163 184 / 0.35);
--color-border-translucent-strongest: rgb(148 163 184 / 0.4);
--color-border-translucent-glow: rgb(148 163 184 / 0.55);
--color-border-translucent-medium: rgb(148 163 184 / 0.2);
--color-border-neutral-soft: rgb(229 231 235 / 0.35);
--color-border-info-soft: rgb(96 165 250 / 0.35);
--color-border-sidebar-strong: rgb(55 65 81 / 0.9);
--color-ring-private: rgb(168 85 247 / 0.55);
--color-ring-private-hover: rgb(192 132 252 / 0.65);
--color-ring-critical: rgb(239 68 68 / 0.4);
--color-ring-critical-soft: rgb(239 68 68 / 0.35);
--color-ring-critical-hover: rgb(239 68 68 / 0.45);
--color-ring-critical-strong: rgb(239 68 68 / 0.55);
--color-ring-alert: rgb(220 38 38 / 0.6);
--color-gradient-visibility-start: rgb(129 140 248 / 0.4);
--color-gradient-visibility-end: rgb(192 132 252 / 0.32);
--color-white-soft: rgb(255 255 255 / 0.1);
--color-white-softer: rgb(255 255 255 / 0.3);
--color-white-softest: rgb(255 255 255 / 0.4);
--color-shadow-floating: rgb(8 11 30 / 0.55);
--color-shadow-elevated: rgb(8 11 30 / 0.45);
--color-shadow-panel: rgb(15 23 42 / 0.35);
--color-shadow-notification: rgb(15 23 42 / 0.3);
--color-shadow-sidebar: rgb(0 0 0 / 0.45);
--color-divider-strong: rgb(15 23 42 / 0.35);
--color-text-frosted-strong: rgb(226 232 240 / 0.94);
--color-text-frosted: rgb(226 232 240 / 0.9);
--color-text-frosted-soft: rgb(226 232 240 / 0.82);
/* Layout & stacking */
--scrollbar-width: 0.5rem;
--scrollbar-track: var(--color-white-soft);
--scrollbar-thumb: var(--color-white-softer);
--scrollbar-thumb-hover: var(--color-white-softest);
/* Sidebar stack must remain below modal overlays. */
--z-sidebar-overlay: 10;
--z-sidebar: 20;
--z-modal-root: 100;
--z-modal-overlay: 110;
--z-modal-content: 120;
--z-modal-player: 130;
--sidebar-width-expanded: 16rem;
--sidebar-width-collapsed: 4rem;
--sidebar-width: var(--sidebar-width-expanded);
--sidebar-control-size: 2.75rem;
--sidebar-content-gap: 1rem;
--blog-embed-height: 100rem;
/* Blog palette */
--color-blog-transparent: rgb(0 0 0 / 0);
--color-blog-cyan-500: rgb(6 182 212);
--color-blog-sky-500: rgb(0 187 255);
--color-blog-teal-600: rgb(14 116 144);
--color-blog-green-800: rgb(20 83 45);
--color-blog-green-700: rgb(21 128 61);
--color-blog-teal-700: rgb(22 78 99);
--color-blog-gray-900: rgb(23 23 23);
--color-blog-coffee-900: rgb(28 25 23);
--color-blog-green-500: rgb(34 197 94);
--color-blog-gray-800: rgb(43 43 43);
--color-blog-gray-700: rgb(59 59 59);
--color-blog-teal-accent: rgb(62 139 138);
--color-blog-gray-650: rgb(64 64 64);
--color-blog-brown-700: rgb(68 64 60);
--color-blog-purple-900: rgb(88 28 135);
--color-blog-gray-500: rgb(102 102 102);
--color-blog-gray-450: rgb(115 115 115);
--color-blog-gray-440: rgb(116 116 116);
--color-blog-brown-500: rgb(120 113 108);
--color-blog-rust-700: rgb(124 45 18);
--color-blog-purple-700: rgb(126 34 206);
--color-blog-purple-accent: rgb(146 55 156);
--color-blog-purple-muted: rgb(150 96 156);
--color-blog-gray-300: rgb(153 153 153);
--color-blog-purple-500: rgb(168 85 247);
--color-blog-gray-275: rgb(169 169 169);
--color-blog-red-600: rgb(185 28 28);
--color-blog-rust-600: rgb(194 65 12);
--color-blog-error: rgb(202 23 23);
--color-blog-gray-220: rgb(203 203 203);
--color-blog-gray-210: rgb(204 204 204);
--color-blog-gray-200: rgb(222 222 222);
--color-blog-amber-500: rgb(228 152 77);
--color-blog-gray-190: rgb(224 224 224);
--color-blog-orange-600: rgb(227 84 40);
--color-blog-gray-180: rgb(233 233 233);
--color-blog-gray-170: rgb(235 235 235);
--color-blog-red-500: rgb(239 68 68);
--color-blog-amber-400: rgb(246 173 85);
--color-blog-neutral-100: rgb(245 245 245);
--color-blog-neutral-120: rgb(246 246 246);
--color-blog-orange-500: rgb(249 115 22);
--color-blog-neutral-50: rgb(253 253 253);
--ztr-font: var(--font-family-sans);
--ztr-font-size: var(--font-size-base);
--ztr-text-color: var(--color-blog-gray-800);
--ztr-link-color: var(--color-blog-purple-700);
--ztr-icon-color: var(--color-blog-gray-700);
--ztr-background-color: rgba(0, 0, 0, 0.03);
--ztr-login-button-color: var(--color-blog-gray-800);
/* Spacing scale */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* Border radii */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
--shadow-modal: 0 2.75rem 6rem -1.25rem rgb(8 11 30 / 75%);
/* Typography */
--font-family-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-family-mono: "Fira Code", "SFMono-Regular", ui-monospace, monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--line-height-tight: 1.1;
--line-height-snug: 1.25;
--line-height-base: 1.5;
--line-height-relaxed: 1.75;
/* Motion */
--motion-duration-fast: 120ms;
--motion-duration-base: 160ms;
--motion-duration-slow: 280ms;
--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--modal-motion-duration: var(--motion-duration-base);
}
[data-theme="light"] {
/* Light theme overrides */
--color-surface: rgb(248 250 252);
--color-surface-alt: rgb(241 245 249);
--color-bg: var(--color-surface);
--color-card: rgb(255 255 255);
--color-card-private: rgb(244 236 255);
--color-card-critical: rgb(255 228 230);
--color-panel: rgb(255 255 255);
--color-panel-hover: rgb(226 232 240);
--color-border: rgb(148 163 184);
--color-border-subtle: rgb(203 213 225);
--color-primary: rgb(220 38 38);
--color-text: rgb(15 23 42);
--color-text-strong: rgb(15 23 42);
--color-muted: rgb(71 85 105);
--color-muted-alt: rgb(100 116 139);
--color-muted-strong: rgb(51 65 85);
--color-overlay: rgb(15 23 42 / 0.55);
--color-overlay-muted: rgb(15 23 42 / 0.35);
--color-overlay-strong: rgb(15 23 42 / 0.65);
--color-overlay-darker: rgb(15 23 42 / 0.72);
--color-overlay-panel: rgb(15 23 42 / 0.78);
--color-sidebar-surface: rgb(255 255 255 / 0.82);
--color-sidebar-surface-alt: rgb(226 232 240 / 0.7);
--color-sidebar-border: rgb(148 163 184 / 0.22);
--color-sidebar-border-strong: rgb(148 163 184 / 0.32);
--color-sidebar-hover: rgb(37 99 235 / 0.15);
--color-sidebar-hover-strong: rgb(79 70 229 / 0.24);
--color-sidebar-glow: rgb(14 165 233 / 0.3);
--color-sidebar-accent-start: rgb(14 165 233 / 0.85);
--color-sidebar-accent-end: rgb(129 140 248 / 0.78);
--color-sidebar-text-muted: rgb(71 85 105 / 0.82);
--color-overlay-panel-soft: rgb(15 23 42 / 0.6);
--color-overlay-panel-tint: rgb(148 163 184 / 0.2);
--color-modal-backdrop: rgb(15 23 42 / 0.45);
--color-modal-surface: rgb(248 250 252 / 0.92);
--color-overlay-panel-glass: rgb(255 255 255 / 0.82);
--color-overlay-veil: rgb(148 163 184 / 0.5);
--color-overlay-panel-gradient-start: rgb(255 255 255 / 0.92);
--color-overlay-panel-gradient-end: rgb(226 232 240 / 0.92);
--color-surface-tint-subtle: rgb(15 23 42 / 0.08);
--color-border-translucent: rgb(148 163 184 / 0.18);
--color-border-translucent-strong: rgb(148 163 184 / 0.22);
--color-border-translucent-bright: rgb(148 163 184 / 0.28);
--color-border-translucent-stronger: rgb(148 163 184 / 0.32);
--color-border-translucent-strongest: rgb(148 163 184 / 0.36);
--color-border-translucent-glow: rgb(148 163 184 / 0.45);
--color-border-translucent-medium: rgb(148 163 184 / 0.2);
--color-border-neutral-soft: rgb(148 163 184 / 0.25);
--color-overlay-banner: rgb(148 163 184 / 0.7);
}
Reference in new issue View Git Blame Copy Permalink