112 lines
3.6 KiB
CSS
112 lines
3.6 KiB
CSS
:root {
|
|
--body-bg-color: #121212;
|
|
--body-bg-color2: #232323;
|
|
--body-bg-color3: #1a1a1a;
|
|
--text-color: hsl(213 20% 80%);
|
|
--footer-bg-color: #000000;
|
|
--footer-link-color: hsl(213, 20%, 65%);
|
|
--footer-link-hover-color: hsl(211, 98%, 90%);
|
|
|
|
--accent-blue: #64c7ff;
|
|
--accent-blue-hover: #2da8f4;
|
|
--accent-blue-light: #bceeff;
|
|
--link-blue: #8ab4f8;
|
|
--accent-orange: #b16a00;
|
|
--accent-green-bright: #a8ff60;
|
|
--accent-purple-bright: #e553ff;
|
|
--accent-pink-bright: #f6a7ff;
|
|
--accent-rose-light: #ffd8d8;
|
|
|
|
--text-muted: #aaa;
|
|
--text-muted2: #999;
|
|
--text-light: #ccc;
|
|
--text-soft: #bbb;
|
|
--text-softer: #ddd;
|
|
--text-softest: #eee;
|
|
--text-dim: #d0d0d0;
|
|
--text-white: #fff;
|
|
--footer-text-muted: #b0b0b0;
|
|
--text-red: #d44;
|
|
--text-green: #22cc55;
|
|
--heading-green: #9fd356;
|
|
--heading-yellow: #e6c84f;
|
|
--heading-purple: #da88ff;
|
|
--heading-pink: #f38c8c;
|
|
|
|
--border-dark: #444;
|
|
--border-darker: #333;
|
|
--border-panel: #3a3a3a;
|
|
--border-muted: #888;
|
|
|
|
--bg-dark: #111;
|
|
--surface-dark: #222;
|
|
--surface-overlay: #1a1a1a;
|
|
--surface-elevated: #2a2a2a;
|
|
--surface-contrast: #2b2b2b;
|
|
--surface-accent: #2d3a3f;
|
|
--surface-muted: #333;
|
|
--surface-elevated-hover: #3a3a3a;
|
|
--shadow-color: #000000;
|
|
|
|
--scrollbar-thumb: #555;
|
|
|
|
/* Transparency helpers */
|
|
--transparent: rgba(0, 0, 0, 0);
|
|
|
|
/* Neutral white alphas */
|
|
--bg-white-00: rgba(255, 255, 255, 0);
|
|
--bg-white-015: rgba(255, 255, 255, 0.015);
|
|
--bg-white-02: rgba(255, 255, 255, 0.02);
|
|
--bg-white-03: rgba(255, 255, 255, 0.03);
|
|
--bg-white-04: rgba(255, 255, 255, 0.04);
|
|
--bg-white-05: rgba(255, 255, 255, 0.05);
|
|
--bg-white-06: rgba(255, 255, 255, 0.06);
|
|
--bg-white-10: rgba(255, 255, 255, 0.1);
|
|
--bg-white-12: rgba(255, 255, 255, 0.12);
|
|
--bg-white-15: rgba(255, 255, 255, 0.15);
|
|
--bg-white-20: rgba(255, 255, 255, 0.2);
|
|
--bg-white-25: rgba(255, 255, 255, 0.25);
|
|
|
|
/* Accent overlays */
|
|
--accent-blue-alpha-20: rgba(138, 180, 248, 0.2);
|
|
--accent-blue-alpha-40: rgba(138, 180, 248, 0.4);
|
|
--accent-blue-glow: rgba(200, 240, 255, 0.18);
|
|
|
|
/* Utility overlays */
|
|
--bg-red-01: rgba(255, 0, 0, 0.1);
|
|
--bg-green-01: rgba(0, 255, 0, 0.1);
|
|
--bg-green-02: rgba(0, 255, 0, 0.2);
|
|
--bg-lime-005: rgba(0, 255, 100, 0.05);
|
|
--bg-lime-01: rgba(0, 255, 100, 0.1);
|
|
|
|
/* Accent blues */
|
|
--bg-accent-blue-01: rgba(100, 199, 255, 0.1);
|
|
--bg-accent-blue-005: rgba(100, 199, 255, 0.05);
|
|
--bg-accent-blue-008: rgba(100, 199, 255, 0.08);
|
|
|
|
/* Neutral black alphas */
|
|
--overlay-black-30: rgba(0, 0, 0, 0.3);
|
|
--overlay-black-40: rgba(0, 0, 0, 0.4);
|
|
--overlay-black-50: rgba(0, 0, 0, 0.5);
|
|
--overlay-black-60: rgba(0, 0, 0, 0.6);
|
|
--overlay-black-70: rgba(0, 0, 0, 0.7);
|
|
--overlay-black-75: rgba(0, 0, 0, 0.75);
|
|
--overlay-black-80: rgba(0, 0, 0, 0.8);
|
|
|
|
/* Charcoal solids */
|
|
--surface-panel-strong: rgba(30, 30, 30, 1);
|
|
--surface-charcoal-90: rgba(15, 15, 15, 0.9);
|
|
--surface-charcoal: rgba(15, 15, 15, 1);
|
|
--surface-onyx-95: rgba(1, 1, 1, 0.95);
|
|
--surface-onyx: rgba(1, 1, 1, 1);
|
|
|
|
/* Metallic header accents */
|
|
--header-metal-stripe-strong: hsla(0, 0%, 28%, 0.02);
|
|
--header-metal-stripe-highlight: hsla(0, 0%, 32%, 0.04);
|
|
--header-metal-stripe-soft: hsla(0, 0%, 22%, 0.01);
|
|
--header-metal-stripe-soft-highlight: hsla(0, 0%, 26%, 0.03);
|
|
--header-metal-gradient-top: hsl(0, 0%, 18%);
|
|
--header-metal-gradient-mid: hsl(0, 0%, 22%);
|
|
--header-metal-gradient-bottom: hsl(0, 0%, 16%);
|
|
}
|