b443649ced
Refactors the calendar grid to support smoother navigation transitions by using separate week containers. This change introduces a GridManager to handle grid rendering and interactions within these containers, enabling scroll synchronization and click event handling for each week view. Also, configures the calendar to start at midnight and span a full 24-hour day, providing a more comprehensive view.
207 lines
No EOL
3.7 KiB
CSS
207 lines
No EOL
3.7 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;
|
|
|
|
/* Time boundaries */
|
|
--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-work-hours: rgba(0, 100, 0, 0.02);
|
|
--color-current-time: #ff0000;
|
|
|
|
/* Event colors */
|
|
--color-event-meeting: #e3f2fd;
|
|
--color-event-meeting-border: #2196f3;
|
|
--color-event-meal: #fff3e0;
|
|
--color-event-meal-border: #ff9800;
|
|
--color-event-work: #f3e5f5;
|
|
--color-event-work-border: #9c27b0;
|
|
--color-event-milestone: #e8f5e9;
|
|
--color-event-milestone-border: #4caf50;
|
|
|
|
/* UI colors */
|
|
--color-background: #ffffff;
|
|
--color-surface: #f5f5f5;
|
|
--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-time-axis,
|
|
swp-week-header,
|
|
swp-scrollable-content,
|
|
swp-time-grid,
|
|
swp-day-columns,
|
|
swp-day-column,
|
|
swp-events-layer,
|
|
swp-event,
|
|
swp-loading-overlay,
|
|
swp-week-container,
|
|
swp-grid-lines,
|
|
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-header,
|
|
swp-day-name,
|
|
swp-day-date,
|
|
swp-hour-marker,
|
|
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);
|
|
}
|
|
} |