78 lines
2.0 KiB
CSS
78 lines
2.0 KiB
CSS
/* Color tokens */
|
|
:root {
|
|
--bg: #f6f7fb;
|
|
--panel: #fff;
|
|
--today: #f83;
|
|
--ink: #111;
|
|
--ink-rgb: 17, 17, 17;
|
|
--muted: #888;
|
|
--weekend: #888;
|
|
--firstday: #000;
|
|
--select: #aaf;
|
|
--label-bg: #fafbfe;
|
|
--label-bg-rgb: 250, 251, 254;
|
|
}
|
|
|
|
/* Month tints (light) */
|
|
.dec { background: hsl(220 20% 95%) }
|
|
.jan { background: hsl(220 20% 88%) }
|
|
.feb { background: hsl(220 20% 95%) }
|
|
.mar { background: hsl(125 60% 88%) }
|
|
.apr { background: hsl(125 60% 95%) }
|
|
.may { background: hsl(125 60% 88%) }
|
|
.jun { background: hsl(45 85% 95%) }
|
|
.jul { background: hsl(45 85% 88%) }
|
|
.aug { background: hsl(45 85% 95%) }
|
|
.sep { background: hsl(18 78% 88%) }
|
|
.oct { background: hsl(18 78% 95%) }
|
|
.nov { background: hsl(18 78% 88%) }
|
|
|
|
/* Color tokens (dark) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: radial-gradient(1200px 800px at 20% -10%, #1c2130 0%, #0c0f16 35%, #0a0b11 100%);
|
|
--panel: #111318;
|
|
--today: #f83;
|
|
--ink: #ddd;
|
|
--ink-rgb: 221, 221, 221;
|
|
--muted: #888;
|
|
--weekend: #999;
|
|
--firstday: #fff;
|
|
--select: #44f;
|
|
--label-bg: #1a1d25;
|
|
--label-bg-rgb: 26, 29, 37;
|
|
}
|
|
|
|
/* Month tints (dark) */
|
|
.dec { background: hsl(220 20% 22%) }
|
|
.jan { background: hsl(220 20% 16%) }
|
|
.feb { background: hsl(220 20% 22%) }
|
|
.mar { background: hsl(125 40% 18%) }
|
|
.apr { background: hsl(125 40% 26%) }
|
|
.may { background: hsl(125 40% 18%) }
|
|
.jun { background: hsl(45 70% 24%) }
|
|
.jul { background: hsl(45 70% 18%) }
|
|
.aug { background: hsl(45 70% 24%) }
|
|
.sep { background: hsl(18 70% 18%) }
|
|
.oct { background: hsl(18 70% 26%) }
|
|
.nov { background: hsl(18 70% 18%) }
|
|
}
|
|
|
|
/* Selection styles */
|
|
.weekend { color: var(--weekend) }
|
|
.firstday { color: var(--firstday); text-shadow: 0 0 .1em rgba(var(--ink-rgb), .5) }
|
|
|
|
.selected {
|
|
background: var(--select);
|
|
border: 2px solid rgba(var(--ink-rgb), .3);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
|
|
}
|
|
.selected .event { opacity: .7 }
|
|
|
|
.today h1 {
|
|
border-radius: 2em;
|
|
background: var(--today);
|
|
border: .2em solid var(--today);
|
|
margin: -.2em;
|
|
}
|