mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
421 lines
17 KiB
CSS
421 lines
17 KiB
CSS
: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-info-glass: rgb(37 99 235 / 0.18);
|
|
--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-intense: rgb(250 204 21 / 0.48);
|
|
--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;
|
|
--space-sidebar-shell-inline: var(--space-lg);
|
|
--space-sidebar-shell-block-start: var(--space-lg);
|
|
--space-sidebar-shell-block-end: 1.75rem;
|
|
--space-sidebar-scroll-gap: 1.75rem;
|
|
--space-sidebar-panel-gap: 1.35rem;
|
|
--space-sidebar-panel-padding-block: 1.35rem;
|
|
--space-sidebar-panel-padding-inline: 1.1rem;
|
|
--space-sidebar-footer-gap: 0.85rem;
|
|
--space-sidebar-trigger-padding-block: 0.78rem;
|
|
--space-sidebar-popover-offset: 0.85rem;
|
|
--space-sidebar-popover-padding-block: 0.85rem;
|
|
--space-sidebar-popover-padding-inline: 0.65rem;
|
|
--space-sidebar-popover-gap: 0.45rem;
|
|
--space-sidebar-nav-padding-block: 0.7rem;
|
|
--space-sidebar-subnav-padding-block: 0.55rem;
|
|
--space-sidebar-nav-translate: 0.35rem;
|
|
--grid-card-min-width: 20rem;
|
|
--popover-backdrop-blur: 12px;
|
|
--toast-translate: 0.75rem;
|
|
--sidebar-mobile-gutter: 3rem;
|
|
--popup-padding-inline: 1rem;
|
|
--popup-padding-block: 0.75rem;
|
|
--blog-embed-height: 100rem;
|
|
|
|
/* Progress primitives */
|
|
--progress-height-sm: 0.25rem;
|
|
--progress-height-md: 0.5rem;
|
|
--progress-radius: var(--radius-full);
|
|
--progress-track-color: var(--color-border-subtle);
|
|
--progress-fill-color: var(--color-info);
|
|
--progress-transition-duration: var(--motion-duration-fast);
|
|
--progress-transition-ease: var(--motion-ease-out);
|
|
|
|
/* 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);
|
|
|
|
/* Blog layout */
|
|
--blog-font-size-root: 1.25rem;
|
|
--blog-font-size-display: 3rem;
|
|
--blog-font-size-title: 1.1rem;
|
|
--blog-font-size-body: 0.9rem;
|
|
--blog-font-size-meta: 0.8rem;
|
|
--blog-font-size-h1-mobile: 1.6rem;
|
|
--blog-layout-fluid-width: 80%;
|
|
--blog-layout-max-width: 47.5rem;
|
|
--blog-space-compact: 0.3rem;
|
|
--blog-space-snug: 0.4rem;
|
|
--blog-space-stack-xxl: 4rem;
|
|
--blog-space-inline-lg: 2.5rem;
|
|
--blog-space-media-stack-start: 2.5rem;
|
|
--blog-space-media-stack-end: 3.5rem;
|
|
--blog-space-heading-stack: 1.4rem;
|
|
--blog-space-heading-gap: 0.6rem;
|
|
--blog-avatar-size: 2.5rem;
|
|
--blog-avatar-size-compact: 1.5rem;
|
|
--blog-line-height-body: 1.3rem;
|
|
--blog-line-height-tight: 0.9;
|
|
--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);
|
|
|
|
/*
|
|
* Blog carousel tokens
|
|
* Consumed by .blog-carousel component styles to control layout,
|
|
* slide presentation, and progress indicators without inline CSS.
|
|
*/
|
|
--blog-carousel-gap: var(--space-lg);
|
|
--blog-carousel-slide-radius: var(--radius-xl);
|
|
--blog-carousel-slide-min-height: 18rem;
|
|
--blog-carousel-slide-background: var(--color-blog-neutral-50);
|
|
--blog-carousel-slide-foreground: var(--color-blog-gray-900);
|
|
--blog-carousel-slide-scale-inactive: 0.96;
|
|
--blog-carousel-progress-height: var(--progress-height-sm);
|
|
--blog-carousel-progress-radius: var(--progress-radius);
|
|
--blog-carousel-progress-track: var(--color-border-translucent);
|
|
--blog-carousel-progress-active: var(--color-blog-purple-500);
|
|
|
|
/* Spacing scale */
|
|
--space-4xs: 0.0625rem;
|
|
--space-3xs: 0.125rem;
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-xs-snug: 0.4rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-md-plus: 1.25rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-xl-compact: 2.25rem;
|
|
--space-xl-plus: 2.5rem;
|
|
--space-2xl: 3rem;
|
|
--space-2xl-plus: 3.5rem;
|
|
|
|
/* Border radii */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius-full: 9999px;
|
|
--radius-modal-xl: 1.75rem;
|
|
--radius-sidebar-shell: 1.5rem;
|
|
--radius-sidebar-panel: 1.1rem;
|
|
--radius-sidebar-nav: 0.95rem;
|
|
--radius-toggle-thumb: 0.5625rem;
|
|
|
|
/* Component sizing */
|
|
--menu-min-width: 12rem;
|
|
--modal-max-width: 38rem;
|
|
--layout-player-max-width: 68.75rem;
|
|
--layout-docs-max-width: 92.5rem;
|
|
--icon-size-sm: var(--font-size-lg);
|
|
--icon-size-md: var(--space-md-plus);
|
|
--icon-size-lg: var(--space-xl-plus);
|
|
--avatar-size-lg: var(--space-2xl-plus);
|
|
--form-textarea-min-height: 8rem;
|
|
--scrollbar-thin-width: 0.4rem;
|
|
--modal-progress-height: calc(var(--space-3xs) * 3);
|
|
--outline-thick-width: 0.1875rem;
|
|
--icon-button-ring-width: var(--outline-thick-width);
|
|
|
|
/* Form controls */
|
|
--form-select-icon-offset: var(--space-sm);
|
|
--form-select-icon-gap: var(--space-xs-snug);
|
|
--form-select-icon-hit-area: var(--space-xl-plus);
|
|
--form-select-icon-size: 0.6rem;
|
|
--form-checkbox-checkmark-offset: calc(var(--space-3xs) * -1);
|
|
|
|
/* 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%);
|
|
--shadow-sidebar-shell: 0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);
|
|
--shadow-sidebar-accent: 0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);
|
|
--shadow-sidebar-trigger: 0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);
|
|
--shadow-sidebar-dropup: 0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);
|
|
--shadow-sidebar-panel: 0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);
|
|
--shadow-sidebar-focus-ring: 0 0 0 0.125rem var(--color-sidebar-glow),
|
|
0 0 0 0.25rem var(--color-sidebar-hover-strong);
|
|
|
|
/* 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;
|
|
--font-size-xl-plus: 1.875rem;
|
|
--font-size-modal-title-base: 1.25rem;
|
|
--font-size-sidebar-nav: 0.95rem;
|
|
--font-size-sidebar-subnav: 0.85rem;
|
|
--font-size-sidebar-trigger: 0.9rem;
|
|
--line-height-tight: 1.1;
|
|
--line-height-snug: 1.25;
|
|
--line-height-base: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
|
|
/* Beacon UI tokens */
|
|
--grid-border-width: calc(var(--space-2xs) / 4);
|
|
--grid-canvas-padding-top: var(--grid-border-width);
|
|
--grid-viewport-min-height: calc(var(--space-xl) - var(--space-sm));
|
|
--grid-cell-padding-block: var(--space-sm);
|
|
--grid-cell-padding-inline: var(--space-md);
|
|
--grid-header-font-size: var(--font-size-xs);
|
|
--grid-header-letter-spacing: 0.08em;
|
|
--grid-overlay-margin: 10%;
|
|
--grid-overlay-padding-block: var(--space-md);
|
|
--grid-overlay-padding-inline: var(--space-xl);
|
|
--grid-overlay-radius: var(--radius-lg);
|
|
--grid-overlay-font-size: var(--font-size-lg);
|
|
--grid-overlay-text-opacity: 0.66;
|
|
--grid-resizer-width: calc(var(--space-2xs) * 1.25);
|
|
--grid-resize-overlay-width: var(--grid-border-width);
|
|
--grid-sort-indicator-size: calc(var(--space-lg) - var(--space-2xs));
|
|
--grid-sort-indicator-offset: var(--space-xs);
|
|
--grid-sort-indicator-stroke: calc(var(--space-2xs) / 2);
|
|
--grid-sort-indicator-thickness: var(--grid-border-width);
|
|
--notify-padding-block: var(--space-md);
|
|
--notify-padding-inline: var(--space-2xl);
|
|
--notify-font-size: var(--font-size-base);
|
|
--notify-dismiss-size: calc(var(--space-xl) + var(--space-xs));
|
|
--notify-dismiss-size-compact: calc(var(--space-lg) + var(--space-2xs));
|
|
--notify-dismiss-font-size: var(--font-size-sm);
|
|
--notify-dismiss-radius: var(--radius-full);
|
|
--notify-dismiss-color: var(--color-subtle);
|
|
--notify-dismiss-background: var(--color-overlay-panel);
|
|
--notify-dismiss-background-hover: var(--color-overlay-panel-soft);
|
|
--z-notify: 1200;
|
|
|
|
/* 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);
|
|
--color-shadow-intense: rgb(234 179 8 / 0.35);
|
|
}
|