152 lines
3.7 KiB
CSS
152 lines
3.7 KiB
CSS
/* Timeline Custom Styles for Dark/Light Mode */
|
|
|
|
/* Light Mode (default) */
|
|
.react-calendar-timeline {
|
|
background-color: oklch(var(--b1));
|
|
color: oklch(var(--bc));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-cursor-line {
|
|
background-color: oklch(var(--p));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-sidebar {
|
|
background-color: oklch(var(--b2));
|
|
border-right: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-sidebar-row {
|
|
border-bottom: 1px solid oklch(var(--b3));
|
|
color: oklch(var(--bc));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-header {
|
|
background-color: oklch(var(--b2)) !important;
|
|
border-bottom: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-header-root {
|
|
background-color: oklch(var(--b2)) !important;
|
|
border-bottom: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-dateHeader {
|
|
color: oklch(var(--bc)) !important;
|
|
background-color: oklch(var(--b2)) !important;
|
|
border-right: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-dateHeader-primary {
|
|
background-color: oklch(var(--b2)) !important;
|
|
color: oklch(var(--bc)) !important;
|
|
border-bottom: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
/* Fix for any nested date header elements */
|
|
.react-calendar-timeline .rct-dateHeader * {
|
|
color: oklch(var(--bc)) !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.react-calendar-timeline .rct-scroll {
|
|
background-color: oklch(var(--b1));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-items {
|
|
background-color: oklch(var(--b1));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-item {
|
|
background-color: oklch(var(--p));
|
|
color: oklch(var(--pc));
|
|
border: 1px solid oklch(var(--pf));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.react-calendar-timeline .rct-item.selected {
|
|
background-color: oklch(var(--s));
|
|
color: oklch(var(--sc));
|
|
border-color: oklch(var(--sf));
|
|
}
|
|
|
|
/* Timeline item type specific colors */
|
|
.timeline-item.station {
|
|
background-color: oklch(var(--p)) !important;
|
|
border-color: oklch(var(--pf)) !important;
|
|
}
|
|
|
|
.timeline-item.lst_01 {
|
|
background-color: oklch(var(--s)) !important;
|
|
border-color: oklch(var(--sf)) !important;
|
|
}
|
|
|
|
.timeline-item.lst_02 {
|
|
background-color: oklch(var(--a)) !important;
|
|
border-color: oklch(var(--af)) !important;
|
|
}
|
|
|
|
.timeline-item.lst_03 {
|
|
background-color: oklch(var(--n)) !important;
|
|
border-color: oklch(var(--nf)) !important;
|
|
}
|
|
|
|
.timeline-item.lst_04 {
|
|
background-color: oklch(var(--in)) !important;
|
|
border-color: oklch(var(--inf)) !important;
|
|
}
|
|
|
|
/* Station booking colors - dynamic colors for different stations */
|
|
.timeline-item.station {
|
|
background-color: oklch(var(--p)) !important;
|
|
border-color: oklch(var(--pf)) !important;
|
|
}
|
|
|
|
/* Additional station colors for variety when multiple stations are booked */
|
|
.timeline-item.station:nth-child(odd) {
|
|
background-color: oklch(var(--p)) !important;
|
|
border-color: oklch(var(--pf)) !important;
|
|
}
|
|
|
|
.timeline-item.station:nth-child(even) {
|
|
background-color: oklch(var(--s)) !important;
|
|
border-color: oklch(var(--sf)) !important;
|
|
}
|
|
|
|
/* Vertical lines */
|
|
.react-calendar-timeline .rct-vertical-line {
|
|
border-left: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
.react-calendar-timeline .rct-horizontal-line {
|
|
border-bottom: 1px solid oklch(var(--b3));
|
|
}
|
|
|
|
/* Today line */
|
|
.react-calendar-timeline .rct-today {
|
|
background-color: oklch(var(--er) / 0.2);
|
|
}
|
|
|
|
/* Hover effects */
|
|
.react-calendar-timeline .rct-item:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
/* Scrollbar styling for dark mode compatibility */
|
|
.react-calendar-timeline ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.react-calendar-timeline ::-webkit-scrollbar-track {
|
|
background: oklch(var(--b2));
|
|
}
|
|
|
|
.react-calendar-timeline ::-webkit-scrollbar-thumb {
|
|
background: oklch(var(--b3));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.react-calendar-timeline ::-webkit-scrollbar-thumb:hover {
|
|
background: oklch(var(--bc) / 0.3);
|
|
}
|