83 lines
3.2 KiB
CSS
83 lines
3.2 KiB
CSS
/*
|
|
* Theme Variables - Edit these to create new themes
|
|
*/
|
|
|
|
:root,
|
|
[data-theme="crimson"] {
|
|
--bg: #07040a;
|
|
--bg-alt: #0d070c;
|
|
--bg-card: rgba(255, 255, 255, 0.04);
|
|
--bg-card-hover: rgba(255, 255, 255, 0.07);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--glass-border-hover: rgba(220, 20, 60, 0.45);
|
|
--accent: #dc143c;
|
|
--accent-light: #ff1744;
|
|
--accent-dark: #960f2c;
|
|
--accent-glow: rgba(220, 20, 60, 0.35);
|
|
--accent-glow-sm: rgba(220, 20, 60, 0.18);
|
|
--text: #ffffff;
|
|
--text-2: #ddd0d4;
|
|
--text-muted: #8c7a80;
|
|
--nav-bg: rgba(7, 4, 10, 0.85);
|
|
--nav-border: rgba(255, 255, 255, 0.06);
|
|
--stats-bg: rgba(220, 20, 60, 0.07);
|
|
--stats-border: rgba(220, 20, 60, 0.18);
|
|
--divider: rgba(255, 255, 255, 0.06);
|
|
--shadow-deep: rgba(0, 0, 0, 0.6);
|
|
--inset-shine: rgba(255, 255, 255, 0.04);
|
|
--hero-glow-1: rgba(220, 20, 60, 0.22);
|
|
--hero-glow-2: rgba(220, 20, 60, 0.1);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #080808;
|
|
--bg-alt: #0f0f0f;
|
|
--bg-card: rgba(255, 255, 255, 0.04);
|
|
--bg-card-hover: rgba(255, 255, 255, 0.07);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--glass-border-hover: rgba(255, 255, 255, 0.22);
|
|
--accent: #dc143c;
|
|
--accent-light: #ff1744;
|
|
--accent-dark: #960f2c;
|
|
--accent-glow: rgba(220, 20, 60, 0.28);
|
|
--accent-glow-sm: rgba(220, 20, 60, 0.1);
|
|
--text: #ffffff;
|
|
--text-2: #c8c8c8;
|
|
--text-muted: #707070;
|
|
--nav-bg: rgba(8, 8, 8, 0.88);
|
|
--nav-border: rgba(255, 255, 255, 0.07);
|
|
--stats-bg: rgba(255, 255, 255, 0.03);
|
|
--stats-border: rgba(255, 255, 255, 0.08);
|
|
--divider: rgba(255, 255, 255, 0.07);
|
|
--shadow-deep: rgba(0, 0, 0, 0.7);
|
|
--inset-shine: rgba(255, 255, 255, 0.03);
|
|
--hero-glow-1: rgba(220, 20, 60, 0.1);
|
|
--hero-glow-2: rgba(220, 20, 60, 0.04);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--bg: #f5f4f6;
|
|
--bg-alt: #eeecef;
|
|
--bg-card: rgba(255, 255, 255, 0.72);
|
|
--bg-card-hover: rgba(255, 255, 255, 0.95);
|
|
--glass-border: rgba(0, 0, 0, 0.08);
|
|
--glass-border-hover: rgba(192, 18, 48, 0.35);
|
|
--accent: #c0122e;
|
|
--accent-light: #e0153a;
|
|
--accent-dark: #8b0020;
|
|
--accent-glow: rgba(192, 18, 48, 0.22);
|
|
--accent-glow-sm: rgba(192, 18, 48, 0.1);
|
|
--text: #0d0a0e;
|
|
--text-2: #2e2830;
|
|
--text-muted: #6a6068;
|
|
--nav-bg: rgba(245, 244, 246, 0.88);
|
|
--nav-border: rgba(0, 0, 0, 0.08);
|
|
--stats-bg: rgba(192, 18, 48, 0.06);
|
|
--stats-border: rgba(192, 18, 48, 0.16);
|
|
--divider: rgba(0, 0, 0, 0.07);
|
|
--shadow-deep: rgba(0, 0, 0, 0.1);
|
|
--inset-shine: rgba(255, 255, 255, 0.8);
|
|
--hero-glow-1: rgba(192, 18, 48, 0.12);
|
|
--hero-glow-2: rgba(192, 18, 48, 0.06);
|
|
}
|