Split CSS to separate files.

2025-08-21 02:19:58 +00:00
parent 38bc50a5ff
commit f94ab1d4c3
6 changed files with 332 additions and 328 deletions
@@ -0,0 +1,77 @@
+/* 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;
+}