5a686da7f5
Updates mock event data to reflect a more recent week and includes events spanning early/late hours. Enhances event rendering by adjusting the top and height styles for better visual appearance. Refactors CSS to improve grid line display and event hover effects, and moves hour marker styles to a more appropriate CSS file. Provides default fallback values for time boundaries using CSS variables.
204 lines
No EOL
3.7 KiB
CSS
204 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;
|
|
--day-column-min-width: 250px;
|
|
--week-days: 7;
|
|
|
|
/* 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: #b0b0b0;
|
|
--color-work-hours: rgba(0, 100, 0, 0.06);
|
|
--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-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);
|
|
}
|
|
} |