f29613e55f
Updates mock event data to reflect future dates for testing purposes. Adds console logging in various managers to aid in debugging and understanding the event loading and rendering process. Specifically, logs the number of loaded events, the first and last event details, and information about event rendering and time axis creation. Also, adds execution permission for PowerShell scripts in the .claude settings.
203 lines
No EOL
3.7 KiB
CSS
203 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 */
|
|
--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-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);
|
|
}
|
|
} |