Event editing dialog and many other event-related improvements.
This commit is contained in:
+41
-61
@@ -3,7 +3,7 @@
|
||||
--panel: #fff;
|
||||
--today: #f83;
|
||||
--ink: #222;
|
||||
--inkstrong: #000;
|
||||
--strong: #000;
|
||||
--muted: #888;
|
||||
--weekend: #888;
|
||||
--firstday: #000;
|
||||
@@ -14,31 +14,28 @@
|
||||
}
|
||||
|
||||
/* 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%) }
|
||||
.dec { background: hsl(220 50% 95%) }
|
||||
.jan { background: hsl(220 50% 92%) }
|
||||
.feb { background: hsl(220 50% 95%) }
|
||||
.mar { background: hsl(125 60% 92%) }
|
||||
.apr { background: hsl(125 60% 95%) }
|
||||
.may { background: hsl(125 60% 88%) }
|
||||
.may { background: hsl(125 60% 92%) }
|
||||
.jun { background: hsl(45 85% 95%) }
|
||||
.jul { background: hsl(45 85% 88%) }
|
||||
.jul { background: hsl(45 85% 92%) }
|
||||
.aug { background: hsl(45 85% 95%) }
|
||||
.sep { background: hsl(18 78% 88%) }
|
||||
.sep { background: hsl(18 78% 92%) }
|
||||
.oct { background: hsl(18 78% 95%) }
|
||||
.nov { background: hsl(18 78% 88%) }
|
||||
.nov { background: hsl(18 78% 92%) }
|
||||
|
||||
.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%); }
|
||||
/* Light mode — gray shades and colors */
|
||||
.event-color-0 { background: hsl(0, 0%, 85%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 75%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 65%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 55%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 80%, 70%) } /* red */
|
||||
.event-color-5 { background: hsl(40, 80%, 70%) } /* orange */
|
||||
.event-color-6 { background: hsl(200, 80%, 70%) } /* green */
|
||||
.event-color-7 { background: hsl(280, 80%, 70%) } /* purple */
|
||||
|
||||
/* Color tokens (dark) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -46,52 +43,35 @@
|
||||
--panel: #111318;
|
||||
--today: #f83;
|
||||
--ink: #ddd;
|
||||
--inkstrong: #fff;
|
||||
--strong: #fff;
|
||||
--muted: #888;
|
||||
--weekend: #999;
|
||||
--firstday: #fff;
|
||||
--select: #44f;
|
||||
--select: #22a;
|
||||
--shadow: #888;
|
||||
--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%) }
|
||||
.dec { background: hsl(220 50% 8%) }
|
||||
.jan { background: hsl(220 50% 6%) }
|
||||
.feb { background: hsl(220 50% 8%) }
|
||||
.mar { background: hsl(125 60% 6%) }
|
||||
.apr { background: hsl(125 60% 8%) }
|
||||
.may { background: hsl(125 60% 6%) }
|
||||
.jun { background: hsl(45 85% 8%) }
|
||||
.jul { background: hsl(45 85% 6%) }
|
||||
.aug { background: hsl(45 85% 8%) }
|
||||
.sep { background: hsl(18 78% 6%) }
|
||||
.oct { background: hsl(18 78% 8%) }
|
||||
.nov { background: hsl(18 78% 6%) }
|
||||
|
||||
.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 #fff; }
|
||||
|
||||
.selected {
|
||||
background: var(--select);
|
||||
border: 2px solid var(--ink);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
|
||||
}
|
||||
.selected .event { opacity: .7 }
|
||||
.event-color-0 { background: hsl(0, 0%, 20%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 30%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 40%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 50%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 70%, 50%) } /* red */
|
||||
.event-color-5 { background: hsl(40, 70%, 50%) } /* orange */
|
||||
.event-color-6 { background: hsl(200, 70%, 50%) } /* green */
|
||||
.event-color-7 { background: hsl(280, 70%, 50%) } /* purple */
|
||||
}
|
||||
Reference in New Issue
Block a user