LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup, layout fixes, better event colors.

Browse Source
This commit is contained in:
LeoVasanko
2025-08-21 02:57:04 +00:00
parent f94ab1d4c3
commit ba513d1199
5 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
colors.css
+32 -7
View File
@@ -1,10 +1,9 @@
/* Color tokens */
:root {
--bg: #f6f7fb;
--panel: #fff;
--today: #f83;
--ink: #111;
--ink-rgb: 17, 17, 17;
--ink: #222;
--inkstrong: #000;
--muted: #888;
--weekend: #888;
--firstday: #000;
@@ -27,14 +26,26 @@
.oct { background: hsl(18 78% 95%) }
.nov { background: hsl(18 78% 88%) }
.event-color-0 { background: hsl(0, 40%, 80%); }
.event-color-1 { background: hsl(30, 40%, 80%); }
.event-color-2 { background: hsl(60, 40%, 80%); }
.event-color-3 { background: hsl(90, 40%, 80%); }
.event-color-4 { background: hsl(120, 40%, 80%); }
.event-color-5 { background: hsl(150, 40%, 80%); }
.event-color-6 { background: hsl(180, 40%, 80%); }
.event-color-7 { background: hsl(210, 40%, 80%); }
.event-color-8 { background: hsl(240, 40%, 80%); }
.event-color-9 { background: hsl(270, 40%, 80%); }
.event-color-10 { background: hsl(300, 40%, 80%); }
.event-color-11 { background: hsl(330, 40%, 80%); }
/* 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;
--inkstrong: #fff;
--muted: #888;
--weekend: #999;
--firstday: #fff;
@@ -56,15 +67,29 @@
.sep { background: hsl(18 70% 18%) }
.oct { background: hsl(18 70% 26%) }
.nov { background: hsl(18 70% 18%) }
.event-color-0 { background: hsl(0, 40%, 50%); }
.event-color-1 { background: hsl(30, 40%, 50%); }
.event-color-2 { background: hsl(60, 40%, 50%); }
.event-color-3 { background: hsl(90, 40%, 50%); }
.event-color-4 { background: hsl(120, 40%, 50%); }
.event-color-5 { background: hsl(150, 40%, 50%); }
.event-color-6 { background: hsl(180, 40%, 50%); }
.event-color-7 { background: hsl(210, 40%, 50%); }
.event-color-8 { background: hsl(240, 40%, 50%); }
.event-color-9 { background: hsl(270, 40%, 50%); }
.event-color-10 { background: hsl(300, 40%, 50%); }
.event-color-11 { background: hsl(330, 40%, 50%); }
}
/* Selection styles */
.weekend { color: var(--weekend) }
.firstday { color: var(--firstday); text-shadow: 0 0 .1em rgba(var(--ink-rgb), .5) }
.firstday { color: var(--firstday); text-shadow: 0 0 .1em; }
.selected {
background: var(--select);
border: 2px solid rgba(var(--ink-rgb), .3);
border: 2px solid var(--ink);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.selected .event { opacity: .7 }