@event-calendar/core
Version:
Full-sized drag & drop event calendar with resource & timeline views
68 lines (59 loc) • 2.21 kB
CSS
.ec {
color-scheme: light;
/* Main colors */
--ec-color-400: oklch(70.8% 0 0);
--ec-color-300: oklch(87% 0 0);
--ec-color-200: oklch(92.2% 0 0);
--ec-color-100: oklch(97% 0 0);
--ec-color-50: oklch(98.5% 0 0);
/* General props */
--ec-bg-color: #fff;
--ec-text-color: currentcolor;
--ec-border-color: var(--ec-color-300);
/* Buttons */
--ec-button-bg-color: var(--ec-bg-color);
--ec-button-border-color: var(--ec-border-color);
--ec-button-text-color: var(--ec-text-color);
--ec-button-active-bg-color: var(--ec-color-200);
--ec-button-active-border-color: var(--ec-color-400);
--ec-button-active-text-color: var(--ec-button-text-color);
/* Days */
--ec-today-bg-color: oklch(98.7% 0.026 102.212);
--ec-highlight-color: oklch(98.4% 0.019 200.873);
/* Events */
--ec-event-bg-color: oklch(70.7% 0.165 254.624);
--ec-event-text-color: #fff;
--ec-bg-event-color: var(--ec-color-300);
--ec-bg-event-opacity: 0.3;
--ec-event-col-gap: .375rem;
/* Now Indicator */
--ec-now-indicator-color: oklch(63.7% 0.237 25.331);
/* Popup */
--ec-popup-bg-color: var(--ec-bg-color);
.ec-dark & {
color-scheme: dark;
--ec-color-400: oklch(43.9% 0 0);
--ec-color-300: oklch(37.1% 0 0);
--ec-color-200: oklch(26.9% 0 0);
--ec-color-100: oklch(20.5% 0 0);
--ec-color-50: oklch(14.5% 0 0);
--ec-bg-color: var(--ec-color-100);
--ec-today-bg-color: oklch(28.6% 0.066 53.813);
--ec-highlight-color: oklch(30.2% 0.056 229.695);
--ec-bg-event-opacity: 0.5;
}
@media (prefers-color-scheme: dark) {
.ec-auto-dark & {
color-scheme: dark;
--ec-color-400: oklch(43.9% 0 0);
--ec-color-300: oklch(37.1% 0 0);
--ec-color-200: oklch(26.9% 0 0);
--ec-color-100: oklch(20.5% 0 0);
--ec-color-50: oklch(14.5% 0 0);
--ec-bg-color: var(--ec-color-100);
--ec-today-bg-color: oklch(28.6% 0.066 53.813);
--ec-highlight-color: oklch(30.2% 0.056 229.695);
--ec-bg-event-opacity: 0.5;
}
}
}