Display national holidays on the calendar.
This commit is contained in:
Leo Vasanko
@@ -20,6 +20,13 @@
|
||||
--label-bg: #fafbfe;
|
||||
--label-bg-rgb: 250, 251, 254;
|
||||
|
||||
/* Holiday colors */
|
||||
--holiday-bg: rgba(255, 215, 0, 0.1);
|
||||
--holiday-border: rgba(255, 215, 0, 0.3);
|
||||
--holiday-text: #8b4513;
|
||||
--holiday-label-bg: rgba(255, 215, 0, 0.8);
|
||||
--holiday-label-text: #5d4037;
|
||||
|
||||
/* Input / recurrence tokens */
|
||||
--input-border: var(--muted-alt);
|
||||
--input-focus: var(--accent);
|
||||
@@ -34,28 +41,68 @@
|
||||
}
|
||||
|
||||
/* Month tints (light) */
|
||||
.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% 92%) }
|
||||
.jun { background: hsl(45 85% 95%) }
|
||||
.jul { background: hsl(45 85% 92%) }
|
||||
.aug { background: hsl(45 85% 95%) }
|
||||
.sep { background: hsl(18 78% 92%) }
|
||||
.oct { background: hsl(18 78% 95%) }
|
||||
.nov { background: hsl(18 78% 92%) }
|
||||
.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% 92%);
|
||||
}
|
||||
.jun {
|
||||
background: hsl(45 85% 95%);
|
||||
}
|
||||
.jul {
|
||||
background: hsl(45 85% 92%);
|
||||
}
|
||||
.aug {
|
||||
background: hsl(45 85% 95%);
|
||||
}
|
||||
.sep {
|
||||
background: hsl(18 78% 92%);
|
||||
}
|
||||
.oct {
|
||||
background: hsl(18 78% 95%);
|
||||
}
|
||||
.nov {
|
||||
background: hsl(18 78% 92%);
|
||||
}
|
||||
|
||||
/* 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, 70%, 70%) } /* red */
|
||||
.event-color-5 { background: hsl(90, 70%, 70%) } /* green */
|
||||
.event-color-6 { background: hsl(230, 70%, 70%) } /* blue */
|
||||
.event-color-7 { background: hsl(280, 70%, 70%) } /* purple */
|
||||
.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, 70%, 70%);
|
||||
} /* red */
|
||||
.event-color-5 {
|
||||
background: hsl(90, 70%, 70%);
|
||||
} /* green */
|
||||
.event-color-6 {
|
||||
background: hsl(230, 70%, 70%);
|
||||
} /* blue */
|
||||
.event-color-7 {
|
||||
background: hsl(280, 70%, 70%);
|
||||
} /* purple */
|
||||
|
||||
/* Color tokens (dark) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -69,7 +116,7 @@
|
||||
--muted: #7d8691;
|
||||
--muted-alt: #5d646d;
|
||||
--accent: #3b82f6;
|
||||
--accent-soft: rgba(59,130,246,0.15);
|
||||
--accent-soft: rgba(59, 130, 246, 0.15);
|
||||
--accent-hover: #2563eb;
|
||||
--danger: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
@@ -85,32 +132,79 @@
|
||||
--pill-bg: #222a32;
|
||||
--pill-active-bg: var(--accent);
|
||||
--pill-active-ink: #fff;
|
||||
--pill-hover-bg: rgba(255,255,255,0.08);
|
||||
--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-bg: rgba(255, 193, 7, 0.15);
|
||||
--holiday-border: rgba(255, 193, 7, 0.4);
|
||||
--holiday-text: #ffc107;
|
||||
--holiday-label-bg: rgba(255, 193, 7, 0.2);
|
||||
--holiday-label-text: #fff8e1;
|
||||
}
|
||||
|
||||
.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%) }
|
||||
.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, 0%, 50%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 40%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 30%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 20%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 70%, 40%) } /* red */
|
||||
.event-color-5 { background: hsl(90, 70%, 30%) } /* green - darker for perceptional purposes */
|
||||
.event-color-6 { background: hsl(230, 70%, 40%) } /* blue */
|
||||
.event-color-7 { background: hsl(280, 70%, 40%) } /* purple */
|
||||
.event-color-0 {
|
||||
background: hsl(0, 0%, 50%);
|
||||
} /* lightest grey */
|
||||
.event-color-1 {
|
||||
background: hsl(0, 0%, 40%);
|
||||
} /* light grey */
|
||||
.event-color-2 {
|
||||
background: hsl(0, 0%, 30%);
|
||||
} /* medium grey */
|
||||
.event-color-3 {
|
||||
background: hsl(0, 0%, 20%);
|
||||
} /* dark grey */
|
||||
.event-color-4 {
|
||||
background: hsl(0, 70%, 40%);
|
||||
} /* red */
|
||||
.event-color-5 {
|
||||
background: hsl(90, 70%, 30%);
|
||||
} /* green - darker for perceptional purposes */
|
||||
.event-color-6 {
|
||||
background: hsl(230, 70%, 40%);
|
||||
} /* blue */
|
||||
.event-color-7 {
|
||||
background: hsl(280, 70%, 40%);
|
||||
} /* purple */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user