9c65143df2
Improves event rendering by introducing dedicated event renderers and streamlining event display logic. - Adds a base event renderer and specialized date and resource-based renderers to handle event display logic. - Renders all-day events within a dedicated container in the calendar header. - Removes the direct filtering of all-day events from the `GridManager`. - Fixes an issue where the 'Summer Festival' event started on the wrong date. The changes enhance the flexibility and maintainability of the calendar, provide dedicated containers and styling for allday events and fix date issues related to certain events
210 lines
No EOL
4 KiB
CSS
210 lines
No EOL
4 KiB
CSS
/* styles/base.css */
|
|
|
|
/* CSS Reset and Base */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* CSS Variables */
|
|
:root {
|
|
/* Grid measurements */
|
|
--hour-height: 60px;
|
|
--minute-height: 1px;
|
|
--snap-interval: 15;
|
|
--day-column-min-width: 250px;
|
|
--week-days: 7;
|
|
--header-height: 80px;
|
|
--all-day-row-height: 0px; /* Default height for all-day events row */
|
|
|
|
/* Time boundaries - Default fallback values */
|
|
--day-start-hour: 0;
|
|
--day-end-hour: 24;
|
|
--work-start-hour: 8;
|
|
--work-end-hour: 17;
|
|
|
|
/* Colors */
|
|
--color-primary: #2196f3;
|
|
--color-secondary: #ff9800;
|
|
--color-success: #4caf50;
|
|
--color-danger: #f44336;
|
|
--color-warning: #ff9800;
|
|
|
|
/* Grid colors */
|
|
--color-grid-line: #e0e0e0;
|
|
--color-grid-line-light: rgba(0, 0, 0, 0.05);
|
|
--color-hour-line: rgba(0, 0, 0, 0.2);
|
|
--color-work-hours: rgba(255, 255, 255, 0.9);
|
|
--color-current-time: #ff0000;
|
|
|
|
/* Event colors - Updated with month-view-expanded.html color scheme */
|
|
--color-event-meeting: #e8f5e8;
|
|
--color-event-meeting-border: #4caf50;
|
|
--color-event-meal: #fff8e1;
|
|
--color-event-meal-border: #ff9800;
|
|
--color-event-work: #fff8e1;
|
|
--color-event-work-border: #ff9800;
|
|
--color-event-milestone: #ffebee;
|
|
--color-event-milestone-border: #f44336;
|
|
--color-event-personal: #f3e5f5;
|
|
--color-event-personal-border: #9c27b0;
|
|
|
|
/* UI colors */
|
|
--color-background: #ffffff;
|
|
--color-surface: #f5f5f5;
|
|
--color-event-grid: #ffffff;
|
|
--color-non-work-hours: #ff980038;
|
|
--color-text: #333333;
|
|
--color-text-secondary: #666666;
|
|
--color-border: #e0e0e0;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
--shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 300ms ease;
|
|
--transition-slow: 500ms ease;
|
|
|
|
/* Z-index layers */
|
|
--z-grid: 1;
|
|
--z-event: 10;
|
|
--z-event-hover: 20;
|
|
--z-drag-ghost: 30;
|
|
--z-current-time: 40;
|
|
--z-popup: 100;
|
|
--z-loading: 200;
|
|
}
|
|
|
|
/* Base styles */
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--color-text);
|
|
background-color: var(--color-surface);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Custom elements default display */
|
|
swp-calendar,
|
|
swp-calendar-nav,
|
|
swp-calendar-container,
|
|
swp-calendar-grid,
|
|
swp-header-cell,
|
|
swp-time-cell,
|
|
swp-day-cell,
|
|
swp-events-container,
|
|
swp-event,
|
|
swp-loading-overlay,
|
|
swp-nav-group,
|
|
swp-nav-button,
|
|
swp-search-container,
|
|
swp-search-icon,
|
|
swp-search-clear,
|
|
swp-view-selector,
|
|
swp-view-button,
|
|
swp-week-info,
|
|
swp-week-number,
|
|
swp-date-range,
|
|
swp-day-name,
|
|
swp-day-date,
|
|
swp-event-time,
|
|
swp-event-title,
|
|
swp-spinner {
|
|
display: block;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #bbb;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #999;
|
|
}
|
|
|
|
/* Selection styling */
|
|
::selection {
|
|
background-color: rgba(33, 150, 243, 0.2);
|
|
color: inherit;
|
|
}
|
|
|
|
/* Focus styles */
|
|
:focus {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* Utility classes */
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.transparent {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
} |