Michelle/redlight
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity
Files
2.1.0
redlight/src/index.css
Michelle 530377272b
All checks were successful
Build & Push Docker Image / build (push) Successful in 6m28s
Details
feat(theme): add cotton candy light theme with custom colors
2026-03-12 14:05:15 +01:00

999 lines
26 KiB
CSS
Raw Permalink Blame History

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* ===== DEFAULT LIGHT ===== */
:root,
[data-theme="light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #64748b;
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-text: #ffffff;
--border: #e2e8f0;
--card-bg: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e1;
--nav-bg: #ffffff;
--sidebar-bg: #f8fafc;
--hover-bg: #f1f5f9;
--success: #22c55e;
--warning: #eab308;
--error: #ef4444;
--ring: #3b82f6;
--shadow-color: rgba(0, 0, 0, 0.08);
--gradient-start: #3b82f6;
--gradient-end: #8b5cf6;
}
/* ===== DEFAULT DARK ===== */
[data-theme="dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--accent: #3b82f6;
--accent-hover: #60a5fa;
--accent-text: #ffffff;
--border: #334155;
--card-bg: #1e293b;
--input-bg: #1e293b;
--input-border: #475569;
--nav-bg: #1e293b;
--sidebar-bg: #0f172a;
--hover-bg: #334155;
--success: #22c55e;
--warning: #eab308;
--error: #ef4444;
--ring: #3b82f6;
--shadow-color: rgba(0, 0, 0, 0.3);
--gradient-start: #3b82f6;
--gradient-end: #8b5cf6;
}
/* ===== DRACULA ===== */
[data-theme="dracula"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #282a36;
--bg-secondary: #44475a;
--bg-tertiary: #383a4c;
--text-primary: #f8f8f2;
--text-secondary: #6272a4;
--accent: #bd93f9;
--accent-hover: #caa8fc;
--accent-text: #282a36;
--border: #44475a;
--card-bg: #383a4c;
--input-bg: #44475a;
--input-border: #6272a4;
--nav-bg: #21222c;
--sidebar-bg: #21222c;
--hover-bg: #44475a;
--success: #50fa7b;
--warning: #f1fa8c;
--error: #ff5555;
--ring: #bd93f9;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #bd93f9;
--gradient-end: #ff79c6;
}
/* ===== CATPPUCCIN MOCHA ===== */
[data-theme="mocha"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #1e1e2e;
--bg-secondary: #313244;
--bg-tertiary: #45475a;
--text-primary: #cdd6f4;
--text-secondary: #a6adc8;
--accent: #89b4fa;
--accent-hover: #b4befe;
--accent-text: #1e1e2e;
--border: #45475a;
--card-bg: #313244;
--input-bg: #313244;
--input-border: #585b70;
--nav-bg: #181825;
--sidebar-bg: #181825;
--hover-bg: #45475a;
--success: #a6e3a1;
--warning: #f9e2af;
--error: #f38ba8;
--ring: #89b4fa;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #89b4fa;
--gradient-end: #cba6f7;
}
/* ===== CATPPUCCIN LATTE (Light) ===== */
[data-theme="latte"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #eff1f5;
--bg-secondary: #e6e9ef;
--bg-tertiary: #dce0e8;
--text-primary: #4c4f69;
--text-secondary: #6c6f85;
--accent: #1e66f5;
--accent-hover: #2a6ef5;
--accent-text: #ffffff;
--border: #ccd0da;
--card-bg: #e6e9ef;
--input-bg: #eff1f5;
--input-border: #bcc0cc;
--nav-bg: #e6e9ef;
--sidebar-bg: #dce0e8;
--hover-bg: #dce0e8;
--success: #40a02b;
--warning: #df8e1d;
--error: #d20f39;
--ring: #1e66f5;
--shadow-color: rgba(76, 79, 105, 0.1);
--gradient-start: #1e66f5;
--gradient-end: #8839ef;
}
/* ===== NORD ===== */
[data-theme="nord"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #2e3440;
--bg-secondary: #3b4252;
--bg-tertiary: #434c5e;
--text-primary: #eceff4;
--text-secondary: #d8dee9;
--accent: #88c0d0;
--accent-hover: #8fbcbb;
--accent-text: #2e3440;
--border: #4c566a;
--card-bg: #3b4252;
--input-bg: #3b4252;
--input-border: #4c566a;
--nav-bg: #2e3440;
--sidebar-bg: #2e3440;
--hover-bg: #434c5e;
--success: #a3be8c;
--warning: #ebcb8b;
--error: #bf616a;
--ring: #88c0d0;
--shadow-color: rgba(0, 0, 0, 0.3);
--gradient-start: #88c0d0;
--gradient-end: #b48ead;
}
/* ===== TOKYO NIGHT ===== */
[data-theme="tokyo-night"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #1a1b26;
--bg-secondary: #24283b;
--bg-tertiary: #2f3349;
--text-primary: #a9b1d6;
--text-secondary: #565f89;
--accent: #7aa2f7;
--accent-hover: #89b4fa;
--accent-text: #1a1b26;
--border: #3b4261;
--card-bg: #24283b;
--input-bg: #24283b;
--input-border: #3b4261;
--nav-bg: #16161e;
--sidebar-bg: #16161e;
--hover-bg: #2f3349;
--success: #9ece6a;
--warning: #e0af68;
--error: #f7768e;
--ring: #7aa2f7;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #7aa2f7;
--gradient-end: #bb9af7;
}
/* ===== GRUVBOX DARK ===== */
[data-theme="gruvbox-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #282828;
--bg-secondary: #3c3836;
--bg-tertiary: #504945;
--text-primary: #ebdbb2;
--text-secondary: #a89984;
--accent: #fe8019;
--accent-hover: #fabd2f;
--accent-text: #282828;
--border: #504945;
--card-bg: #3c3836;
--input-bg: #3c3836;
--input-border: #665c54;
--nav-bg: #1d2021;
--sidebar-bg: #1d2021;
--hover-bg: #504945;
--success: #b8bb26;
--warning: #fabd2f;
--error: #fb4934;
--ring: #fe8019;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #fe8019;
--gradient-end: #fabd2f;
}
/* ===== GRUVBOX LIGHT ===== */
[data-theme="gruvbox-light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #fbf1c7;
--bg-secondary: #ebdbb2;
--bg-tertiary: #d5c4a1;
--text-primary: #3c3836;
--text-secondary: #665c54;
--accent: #d65d0e;
--accent-hover: #af3a03;
--accent-text: #fbf1c7;
--border: #d5c4a1;
--card-bg: #ebdbb2;
--input-bg: #fbf1c7;
--input-border: #bdae93;
--nav-bg: #ebdbb2;
--sidebar-bg: #ebdbb2;
--hover-bg: #d5c4a1;
--success: #79740e;
--warning: #b57614;
--error: #cc241d;
--ring: #d65d0e;
--shadow-color: rgba(60, 56, 54, 0.1);
--gradient-start: #d65d0e;
--gradient-end: #b57614;
}
/* ===== ROSE PINE ===== */
[data-theme="rose-pine"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #191724;
--bg-secondary: #1f1d2e;
--bg-tertiary: #26233a;
--text-primary: #e0def4;
--text-secondary: #908caa;
--accent: #c4a7e7;
--accent-hover: #ebbcba;
--accent-text: #191724;
--border: #393552;
--card-bg: #1f1d2e;
--input-bg: #1f1d2e;
--input-border: #393552;
--nav-bg: #191724;
--sidebar-bg: #191724;
--hover-bg: #26233a;
--success: #9ccfd8;
--warning: #f6c177;
--error: #eb6f92;
--ring: #c4a7e7;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #c4a7e7;
--gradient-end: #eb6f92;
}
/* ===== ROSE PINE DAWN (Light) ===== */
[data-theme="rose-pine-dawn"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #faf4ed;
--bg-secondary: #fffaf3;
--bg-tertiary: #f2e9e1;
--text-primary: #575279;
--text-secondary: #797593;
--accent: #907aa9;
--accent-hover: #b4637a;
--accent-text: #faf4ed;
--border: #dfdad9;
--card-bg: #fffaf3;
--input-bg: #faf4ed;
--input-border: #dfdad9;
--nav-bg: #fffaf3;
--sidebar-bg: #f2e9e1;
--hover-bg: #f2e9e1;
--success: #56949f;
--warning: #ea9d34;
--error: #b4637a;
--ring: #907aa9;
--shadow-color: rgba(87, 82, 121, 0.08);
--gradient-start: #907aa9;
--gradient-end: #b4637a;
}
/* ===== SOLARIZED DARK ===== */
[data-theme="solarized-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #002b36;
--bg-secondary: #073642;
--bg-tertiary: #0a4050;
--text-primary: #839496;
--text-secondary: #657b83;
--accent: #268bd2;
--accent-hover: #2aa198;
--accent-text: #fdf6e3;
--border: #073642;
--card-bg: #073642;
--input-bg: #073642;
--input-border: #586e75;
--nav-bg: #002b36;
--sidebar-bg: #002b36;
--hover-bg: #0a4050;
--success: #859900;
--warning: #b58900;
--error: #dc322f;
--ring: #268bd2;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #268bd2;
--gradient-end: #2aa198;
}
/* ===== SOLARIZED LIGHT ===== */
[data-theme="solarized-light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #fdf6e3;
--bg-secondary: #eee8d5;
--bg-tertiary: #e4ddc8;
--text-primary: #657b83;
--text-secondary: #93a1a1;
--accent: #268bd2;
--accent-hover: #2aa198;
--accent-text: #fdf6e3;
--border: #eee8d5;
--card-bg: #eee8d5;
--input-bg: #fdf6e3;
--input-border: #d3cbb7;
--nav-bg: #eee8d5;
--sidebar-bg: #eee8d5;
--hover-bg: #e4ddc8;
--success: #859900;
--warning: #b58900;
--error: #dc322f;
--ring: #268bd2;
--shadow-color: rgba(101, 123, 131, 0.1);
--gradient-start: #268bd2;
--gradient-end: #2aa198;
}
/* ===== ONE DARK ===== */
[data-theme="one-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #282c34;
--bg-secondary: #2c313a;
--bg-tertiary: #353b45;
--text-primary: #abb2bf;
--text-secondary: #636d83;
--accent: #61afef;
--accent-hover: #79bcf5;
--accent-text: #282c34;
--border: #3e4452;
--card-bg: #2c313a;
--input-bg: #2c313a;
--input-border: #3e4452;
--nav-bg: #21252b;
--sidebar-bg: #21252b;
--hover-bg: #353b45;
--success: #98c379;
--warning: #e5c07b;
--error: #e06c75;
--ring: #61afef;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #61afef;
--gradient-end: #c678dd;
}
/* ===== GITHUB DARK ===== */
[data-theme="github-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--accent-text: #0d1117;
--border: #30363d;
--card-bg: #161b22;
--input-bg: #0d1117;
--input-border: #30363d;
--nav-bg: #161b22;
--sidebar-bg: #0d1117;
--hover-bg: #21262d;
--success: #3fb950;
--warning: #d29922;
--error: #f85149;
--ring: #58a6ff;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #58a6ff;
--gradient-end: #bc8cff;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: var(--border);
border-radius: 3px;
}
}
/* ===== SCRUNKLY.CAT DARK ===== */
[data-theme="scrunkly-cat"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #161924;
--bg-secondary: #161924;
--bg-tertiary: #1b2130;
--text-primary: #dadada;
--text-secondary: #94a3b8;
--accent: #b30051;
--accent-hover: #d6336a;
--accent-text: #ffffff;
--border: rgba(255, 255, 255, 0.1);
--card-bg: #1b2130;
--input-bg: rgba(255, 255, 255, 0.05);
--input-border: rgba(255, 255, 255, 0.1);
--nav-bg: #1b2130;
--sidebar-bg: #161924;
--hover-bg: rgba(255, 255, 255, 0.03);
--success: #86b300;
--warning: #ecb637;
--error: #ec4137;
--ring: #b30051;
--shadow-color: rgba(0, 0, 0, 0.3);
--gradient-start: #b30051;
--gradient-end: #d6336a;
}
/* ===== RED MODULAR LIGHT ===== */
[data-theme="red-modular-light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--text-primary: #000000;
--text-secondary: #333333;
--accent: #e60000;
--accent-hover: #ff3333;
--accent-text: #ffffff;
--border: #e2e8f0;
--card-bg: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e1;
--nav-bg: #ffffff;
--sidebar-bg: #f8fafc;
--hover-bg: #f1f5f9;
--success: #86b300;
--warning: #ecb637;
--error: #ec4137;
--ring: #e60000;
--shadow-color: rgba(0, 0, 0, 0.3);
--gradient-start: #e60000;
--gradient-end: #ff3333;
}
/* ===== EVERFOREST DARK ===== */
[data-theme="everforest-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #2d353b;
--bg-secondary: #343f44;
--bg-tertiary: #3d484d;
--text-primary: #d3c6aa;
--text-secondary: #859289;
--accent: #a7c080;
--accent-hover: #bdd4a0;
--accent-text: #2d353b;
--border: #4f585e;
--card-bg: #343f44;
--input-bg: #343f44;
--input-border: #4f585e;
--nav-bg: #272e33;
--sidebar-bg: #272e33;
--hover-bg: #3d484d;
--success: #a7c080;
--warning: #e69875;
--error: #e67e80;
--ring: #a7c080;
--shadow-color: rgba(0, 0, 0, 0.35);
--gradient-start: #a7c080;
--gradient-end: #83c092;
}
/* ===== EVERFOREST LIGHT ===== */
[data-theme="everforest-light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #fdf6e3;
--bg-secondary: #f4f0d9;
--bg-tertiary: #eae4ca;
--text-primary: #5c6a72;
--text-secondary: #829181;
--accent: #8da101;
--accent-hover: #6e8c00;
--accent-text: #fdf6e3;
--border: #d5ceb5;
--card-bg: #f4f0d9;
--input-bg: #fdf6e3;
--input-border: #c5bda0;
--nav-bg: #f4f0d9;
--sidebar-bg: #eae4ca;
--hover-bg: #eae4ca;
--success: #8da101;
--warning: #dfa000;
--error: #f85552;
--ring: #8da101;
--shadow-color: rgba(92, 106, 114, 0.1);
--gradient-start: #8da101;
--gradient-end: #35a77c;
}
/* ===== KANAGAWA ===== */
[data-theme="kanagawa"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #1f1f28;
--bg-secondary: #2a2a37;
--bg-tertiary: #363646;
--text-primary: #dcd7ba;
--text-secondary: #727169;
--accent: #7e9cd8;
--accent-hover: #98b4e8;
--accent-text: #1f1f28;
--border: #363646;
--card-bg: #2a2a37;
--input-bg: #2a2a37;
--input-border: #363646;
--nav-bg: #16161d;
--sidebar-bg: #16161d;
--hover-bg: #363646;
--success: #76946a;
--warning: #dca561;
--error: #c34043;
--ring: #7e9cd8;
--shadow-color: rgba(0, 0, 0, 0.45);
--gradient-start: #7e9cd8;
--gradient-end: #957fb8;
}
/* ===== AYU DARK ===== */
[data-theme="ayu-dark"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #0d1017;
--bg-secondary: #131721;
--bg-tertiary: #1a212e;
--text-primary: #bfbdb6;
--text-secondary: #6c7380;
--accent: #39bae6;
--accent-hover: #59ccf0;
--accent-text: #0d1017;
--border: #1a212e;
--card-bg: #131721;
--input-bg: #0d1017;
--input-border: #242b38;
--nav-bg: #0d1017;
--sidebar-bg: #0d1017;
--hover-bg: #1a212e;
--success: #aad94c;
--warning: #ffb454;
--error: #f07178;
--ring: #39bae6;
--shadow-color: rgba(0, 0, 0, 0.5);
--gradient-start: #39bae6;
--gradient-end: #6a9ff7;
}
/* ===== MOONLIGHT ===== */
[data-theme="moonlight"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #212337;
--bg-secondary: #2b2d3f;
--bg-tertiary: #353750;
--text-primary: #c8d3f5;
--text-secondary: #828dae;
--accent: #82aaff;
--accent-hover: #9dbdff;
--accent-text: #212337;
--border: #353750;
--card-bg: #2b2d3f;
--input-bg: #2b2d3f;
--input-border: #444668;
--nav-bg: #1e2030;
--sidebar-bg: #1e2030;
--hover-bg: #353750;
--success: #c3e88d;
--warning: #ffc777;
--error: #ff757f;
--ring: #82aaff;
--shadow-color: rgba(0, 0, 0, 0.4);
--gradient-start: #82aaff;
--gradient-end: #c099ff;
}
/* ===== CYBERPUNK ===== */
[data-theme="cyberpunk"] {
color-scheme: dark;
--picker-icon-filter: invert(0.8);
--bg-primary: #0a0a0f;
--bg-secondary: #0e0e1a;
--bg-tertiary: #141428;
--text-primary: #e0e0ff;
--text-secondary: #7878bb;
--accent: #ff0080;
--accent-hover: #ff33a0;
--accent-text: #ffffff;
--border: #1e1e3a;
--card-bg: #0e0e1a;
--input-bg: #0d0d18;
--input-border: #1e1e3a;
--nav-bg: #07070f;
--sidebar-bg: #07070f;
--hover-bg: #141428;
--success: #00ff9f;
--warning: #ffdd00;
--error: #ff3333;
--ring: #ff0080;
--shadow-color: rgba(255, 0, 128, 0.15);
--gradient-start: #ff0080;
--gradient-end: #00e5ff;
}
/* ===== COTTON CANDY LIGHT ===== */
[data-theme="cotton-candy-light"] {
color-scheme: light;
--picker-icon-filter: none;
--bg-primary: #fff5f9;
--bg-secondary: #ffe8f2;
--bg-tertiary: #ffd6e8;
--text-primary: #8b2635;
--text-secondary: #b05470;
--accent: #ff85a2;
--accent-hover: #ff6b8d;
--accent-text: #ffffff;
--border: #ffc2d9;
--card-bg: #ffe8f2;
--input-bg: #fff5f9;
--input-border: #ffaac8;
--nav-bg: #ffe8f2;
--sidebar-bg: #ffd6e8;
--hover-bg: #ffd6e8;
--success: #5cb85c;
--warning: #f0ad4e;
--error: #d9534f;
--ring: #ff85a2;
--shadow-color: rgba(255, 133, 162, 0.15);
--gradient-start: #ff85a2;
--gradient-end: #c084fc;
}
@layer components {
.btn-primary {
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
bg-th-accent text-th-accent-t hover:bg-th-accent-h
transition-all duration-200 ease-out
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed;
--tw-ring-offset-color: var(--bg-primary);
}
.btn-secondary {
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
bg-th-bg-s text-th-text border border-th-border
hover:bg-th-hover transition-all duration-200 ease-out
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed;
--tw-ring-offset-color: var(--bg-primary);
}
.btn-danger {
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
bg-th-error text-white hover:opacity-90
transition-all duration-200 ease-out
focus:outline-none focus:ring-2 focus:ring-th-error focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed;
--tw-ring-offset-color: var(--bg-primary);
}
.btn-ghost {
@apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
text-th-text-s hover:bg-th-hover hover:text-th-text
transition-all duration-200 ease-out
focus:outline-none focus:ring-2 focus:ring-th-ring focus:ring-offset-2
disabled:opacity-50 disabled:cursor-not-allowed;
--tw-ring-offset-color: var(--bg-primary);
}
.input-field {
@apply w-full px-4 py-2.5 rounded-lg
bg-th-input text-th-text placeholder-th-text-s
border border-th-input-b
focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
transition-all duration-200;
}
.card {
@apply bg-th-card rounded-xl border border-th-border
shadow-th transition-all duration-200;
}
.card-hover {
@apply card hover:shadow-th-lg cursor-pointer;
}
.card-hover:hover {
border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
}
@layer utilities {
.gradient-text {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-bg {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
}
/* ═══════════════════════════════════════════════════════════════
FLATPICKR THEMED OVERRIDES — fully driven by CSS variables
═══════════════════════════════════════════════════════════════ */
/* Calendar container — appended to body */
.flatpickr-calendar {
background: var(--card-bg) !important;
border: 1px solid var(--border) !important;
border-radius: 0.75rem !important;
box-shadow: 0 10px 25px -5px var(--shadow-color), 0 4px 10px -6px var(--shadow-color) !important;
font-family: inherit !important;
color: var(--text-primary) !important;
z-index: 9999 !important;
overflow: hidden;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
display: none !important; /* hide arrow */
}
/* ── Month navigation ─────────────────────────────────────────── */
.flatpickr-months {
background: var(--bg-secondary) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0 !important;
align-items: center !important;
height: 2.75rem !important;
position: relative !important;
}
.flatpickr-months .flatpickr-month {
background: transparent !important;
color: var(--text-primary) !important;
height: 2.75rem !important;
display: flex !important;
align-items: center !important;
}
.flatpickr-current-month {
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
width: 100% !important;
position: relative !important;
left: 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: none !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
background: var(--card-bg) !important;
color: var(--text-primary) !important;
}
.flatpickr-current-month input.cur-year {
color: var(--text-primary) !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
color: var(--text-secondary) !important;
fill: var(--text-secondary) !important;
padding: 0.5rem 0.625rem !important;
transition: color 0.15s !important;
display: flex !important;
align-items: center !important;
height: 2.75rem !important;
top: 0 !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: var(--text-primary) !important;
fill: var(--text-primary) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
fill: inherit !important;
width: 12px !important;
height: 12px !important;
}
/* ── Day names row ────────────────────────────────────────────── */
.flatpickr-weekdays {
background: var(--bg-secondary) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0.125rem 0 !important;
}
span.flatpickr-weekday {
color: var(--text-secondary) !important;
font-size: 0.6875rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
/* ── Days grid ────────────────────────────────────────────────── */
.flatpickr-days {
border: none !important;
}
.dayContainer {
padding: 0.25rem !important;
}
.flatpickr-day {
color: var(--text-primary) !important;
border: none !important;
border-radius: 0.375rem !important;
font-size: 0.8125rem !important;
transition: background 0.12s, color 0.12s !important;
}
.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
background: var(--hover-bg) !important;
border: none !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: var(--accent) !important;
color: var(--accent-text) !important;
border: none !important;
font-weight: 600 !important;
}
.flatpickr-day.today:not(.selected) {
font-weight: 700 !important;
color: var(--accent) !important;
border: none !important;
position: relative !important;
}
.flatpickr-day.today:not(.selected)::after {
content: '';
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--text-secondary) !important;
opacity: 0.4 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: var(--text-secondary) !important;
opacity: 0.3 !important;
cursor: not-allowed !important;
}
/* ── Time picker ──────────────────────────────────────────────── */
.flatpickr-time {
border-top: 1px solid var(--border) !important;
background: var(--bg-secondary) !important;
max-height: none !important;
height: auto !important;
}
.flatpickr-time input {
color: var(--text-primary) !important;
background: transparent !important;
font-size: 0.9375rem !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
background: var(--hover-bg) !important;
border-radius: 0.375rem !important;
}
.flatpickr-time .flatpickr-time-separator {
color: var(--text-secondary) !important;
font-weight: 600 !important;
}
.flatpickr-time .flatpickr-am-pm {
color: var(--text-primary) !important;
background: transparent !important;
}
.flatpickr-time .numInputWrapper span {
border: none !important;
}
.flatpickr-time .numInputWrapper span.arrowUp::after {
border-bottom-color: var(--text-secondary) !important;
}
.flatpickr-time .numInputWrapper span.arrowDown::after {
border-top-color: var(--text-secondary) !important;
}
.flatpickr-time .numInputWrapper:hover span.arrowUp::after {
border-bottom-color: var(--text-primary) !important;
}
.flatpickr-time .numInputWrapper:hover span.arrowDown::after {
border-top-color: var(--text-primary) !important;
}
Reference in New Issue View Git Blame Copy Permalink