135 lines
4.4 KiB
CSS
135 lines
4.4 KiB
CSS
/* Light mode & common */
|
|
:root {
|
|
--panel: #ffffff;
|
|
--panel-alt: #f6f8fa;
|
|
--panel-accent: #eef4ff;
|
|
--today: #f83;
|
|
--ink: #222;
|
|
--strong: #000;
|
|
--muted: #6a6f76;
|
|
--muted-alt: #9aa2ad;
|
|
--accent: #2563eb;
|
|
--accent-soft: #dbeafe;
|
|
--accent-hover: #1d4ed8;
|
|
--danger: #dc2626;
|
|
--danger-hover: #b91c1c;
|
|
--weekend: #555;
|
|
--firstday: #000;
|
|
--select: #aaf;
|
|
--shadow: #fff;
|
|
--label-bg: #fafbfe;
|
|
--label-bg-rgb: 250, 251, 254;
|
|
--holiday: #da0;
|
|
--holiday-label: var(--strong);
|
|
|
|
/* Input / recurrence tokens */
|
|
--input-border: var(--muted-alt);
|
|
--input-focus: var(--accent);
|
|
--pill-bg: var(--panel-alt);
|
|
--pill-active-bg: var(--accent);
|
|
--pill-active-ink: #fff;
|
|
--pill-hover-bg: var(--accent-soft);
|
|
|
|
/* Vue component color mappings */
|
|
--bg: var(--panel);
|
|
--border-color: #ddd;
|
|
|
|
/* Event transparency */
|
|
--event-alpha: 0.7;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--panel: #121417;
|
|
--panel-alt: #1d2228;
|
|
--panel-accent: #1a2634;
|
|
--today: #f83;
|
|
--ink: #e5e7eb;
|
|
--strong: #fff;
|
|
--muted: #7d8691;
|
|
--muted-alt: #5d646d;
|
|
--accent: #3b82f6;
|
|
--accent-soft: rgba(59, 130, 246, 0.15);
|
|
--accent-hover: #2563eb;
|
|
--danger: #ef4444;
|
|
--danger-hover: #dc2626;
|
|
--workday: var(--ink);
|
|
--weekend: #999;
|
|
--firstday: #fff;
|
|
--select: #3355ff;
|
|
--shadow: #000;
|
|
--label-bg: #1a1d25;
|
|
--label-bg-rgb: 26, 29, 37;
|
|
--input-border: var(--muted-alt);
|
|
--input-focus: var(--accent);
|
|
--pill-bg: #222a32;
|
|
--pill-active-bg: var(--accent);
|
|
--pill-active-ink: #fff;
|
|
--pill-hover-bg: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Vue component color mappings (dark) */
|
|
--bg: var(--panel);
|
|
--border-color: #333;
|
|
|
|
/* Holiday colors (dark mode) */
|
|
--holiday: #ffc107;
|
|
--holiday-label: #fff8e1;
|
|
|
|
--weekend: #aaa;
|
|
|
|
}
|
|
}
|
|
|
|
/* Month tints (light) */
|
|
.dec { background: hsl(220 50% 77%) }
|
|
.jan { background: hsl(220 50% 60%) }
|
|
.feb { background: hsl(220 50% 77%) }
|
|
.mar { background: hsl(130 40% 85%) }
|
|
.apr { background: hsl(130 65% 75%) }
|
|
.may { background: hsl(130 80% 65%) }
|
|
.jun { background: hsl(50 85% 70%) }
|
|
.jul { background: hsl(50 85% 85%) }
|
|
.aug { background: hsl(50 85% 70%) }
|
|
.sep { background: hsl(22 100% 75%) }
|
|
.oct { background: hsl(22 40% 65%) }
|
|
.nov { background: hsl(22 15% 55%) }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.dec { background: hsl(220 50% 10%) }
|
|
.jan { background: hsl(220 50% 4%) }
|
|
.feb { background: hsl(220 50% 10%) }
|
|
.mar { background: hsl(130 60% 3%) }
|
|
.apr { background: hsl(130 60% 6%) }
|
|
.may { background: hsl(130 60% 10%) }
|
|
.jun { background: hsl(50 85% 8%) }
|
|
.jul { background: hsl(50 85% 12%) }
|
|
.aug { background: hsl(50 85% 8%) }
|
|
.sep { background: hsl(22 100% 10%) }
|
|
.oct { background: hsl(22 90% 6%) }
|
|
.nov { background: hsl(22 80% 3%) }
|
|
}
|
|
|
|
/* Light mode — gray shades and colors */
|
|
.event-color-0 { background: hsla(0, 0%, 85%, var(--event-alpha)); } /* lightest grey */
|
|
.event-color-1 { background: hsla(0, 0%, 75%, var(--event-alpha)); } /* light grey */
|
|
.event-color-2 { background: hsla(0, 0%, 65%, var(--event-alpha)); } /* medium grey */
|
|
.event-color-3 { background: hsla(0, 0%, 55%, var(--event-alpha)); } /* dark grey */
|
|
.event-color-4 { background: hsla(0, 100%, 70%, var(--event-alpha)); } /* red */
|
|
.event-color-5 { background: hsla(90, 100%, 50%, var(--event-alpha)); } /* green - darker for perceptional purposes */
|
|
.event-color-6 { background: hsla(220, 100%, 70%, var(--event-alpha)); } /* blue */
|
|
.event-color-7 { background: hsla(280, 100%, 70%, var(--event-alpha)); } /* purple */
|
|
|
|
/* Dark-mode event colors are grouped right after the light-mode equivalents */
|
|
@media (prefers-color-scheme: dark) {
|
|
.event-color-0 { background: hsla(0, 0%, 50%, var(--event-alpha)); } /* lightest grey */
|
|
.event-color-1 { background: hsla(0, 0%, 40%, var(--event-alpha)); } /* light grey */
|
|
.event-color-2 { background: hsla(0, 0%, 30%, var(--event-alpha)); } /* medium grey */
|
|
.event-color-3 { background: hsla(0, 0%, 20%, var(--event-alpha)); } /* dark grey */
|
|
.event-color-4 { background: hsla(0, 80%, 40%, var(--event-alpha)); } /* red */
|
|
.event-color-5 { background: hsla(90, 80%, 30%, var(--event-alpha)); } /* green - darker for perceptional purposes */
|
|
.event-color-6 { background: hsla(220, 80%, 40%, var(--event-alpha)); } /* blue */
|
|
.event-color-7 { background: hsla(280, 80%, 40%, var(--event-alpha)); } /* purple */
|
|
}
|
|
|
|
|