91 lines
2.2 KiB
CSS
91 lines
2.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme {
|
|
--font-sans: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;
|
|
--font-display: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;
|
|
|
|
/* Catppuccin Theme */
|
|
--color-crust: #11111b;
|
|
--color-mantle: #181825;
|
|
--color-base: #1e1e2e;
|
|
--color-surface0: #313244;
|
|
--color-surface1: #45475a;
|
|
--color-surface2: #585b70;
|
|
--color-red: #f38ba8;
|
|
|
|
--color-neon-primary: #f38ba8;
|
|
--color-neon-alert: #f38ba8;
|
|
--color-neon-blue: #f38ba8;
|
|
--color-panel-glass: rgba(24, 24, 37, 0.7);
|
|
|
|
|
|
--shadow-glow-primary: 0 0 15px rgba(243, 139, 168, 0.4);
|
|
--shadow-glow-alert: 0 0 15px rgba(243, 139, 168, 0.4);
|
|
--shadow-glow-blue: 0 0 15px rgba(243, 139, 168, 0.4);
|
|
--map-icon-filter: invert(1) contrast(100) opacity(0.9);
|
|
}
|
|
|
|
.light-theme {
|
|
--map-icon-filter: invert(0) contrast(150) opacity(0.9);
|
|
--color-crust: #dce0e8;
|
|
--color-mantle: #e6e9ef;
|
|
--color-base: #eff1f5;
|
|
--color-surface0: #ccd0da;
|
|
--color-surface1: #bcc0cc;
|
|
--color-surface2: #acb0be;
|
|
--color-red: #d20f39;
|
|
--color-neon-primary: #ea76cb;
|
|
--color-neon-alert: #e64553;
|
|
--color-neon-blue: #fe640b;
|
|
--color-panel-glass: rgba(239, 241, 245, 0.9);
|
|
color: #4c4f69 !important;
|
|
}
|
|
|
|
|
|
.light-theme .text-white,
|
|
.light-theme .text-slate-200,
|
|
.light-theme .text-slate-300,
|
|
.light-theme .text-slate-400,
|
|
.light-theme .text-slate-500 {
|
|
color: #4c4f69 !important;
|
|
}
|
|
|
|
|
|
:root.color-blind {
|
|
--color-neon-primary: #ffb86c;
|
|
--color-neon-blue: #8be9fd;
|
|
}
|
|
|
|
|
|
:root.high-contrast {
|
|
--color-crust: #000000;
|
|
--color-mantle: #0a0a0a;
|
|
--color-base: #111111;
|
|
}
|
|
|
|
:root.light-theme.high-contrast {
|
|
--color-crust: #ffffff;
|
|
--color-mantle: #f4f4f4;
|
|
--color-base: #ebebeb;
|
|
}
|
|
|
|
.light-theme border-white {
|
|
border-color: rgba(76, 79, 105, 0.1);
|
|
}
|
|
|
|
.light-theme .border-white\/5,
|
|
.light-theme .border-white\/10,
|
|
.light-theme .border-white\/20 {
|
|
border-color: rgba(76, 79, 105, 0.15);
|
|
}
|
|
|
|
@utility glass-panel {
|
|
background-color: var(--color-panel-glass);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid color-mix(in srgb, var(--color-surface1) 30%, transparent);
|
|
}
|
|
|
|
@utility text-glow {
|
|
text-shadow: 0 0 10px currentColor;
|
|
} |