e2cf4d1e04
Removes `pointer-events: none` from various calendar elements. This ensures that the elements are correctly interactive, allowing the user to click on them as intended.
315 lines
No EOL
6.6 KiB
CSS
315 lines
No EOL
6.6 KiB
CSS
/* Calendar Month View Styles */
|
|
|
|
/* Month view specific container - extends swp-calendar-container for month layout */
|
|
swp-calendar[data-view="month"] swp-calendar-container {
|
|
overflow: hidden;
|
|
background: var(--color-background);
|
|
}
|
|
|
|
/* Month grid layout with week numbers column */
|
|
.month-grid {
|
|
display: grid;
|
|
grid-template-columns: 40px repeat(7, 1fr); /* Week numbers + 7 days */
|
|
grid-template-rows: 40px repeat(6, 1fr);
|
|
min-height: 600px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Week number header cell */
|
|
.month-week-header {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
height: 40px;
|
|
}
|
|
|
|
/* Month day headers - only day names, right aligned */
|
|
.month-day-header {
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 8px 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.875rem;
|
|
height: 40px;
|
|
}
|
|
|
|
.month-day-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Week number cells */
|
|
.month-week-number {
|
|
grid-column: 1;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Month day cells */
|
|
.month-day-cell {
|
|
border-right: 1px solid var(--color-border);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 8px;
|
|
background: var(--color-background);
|
|
transition: background-color var(--transition-fast);
|
|
position: relative;
|
|
min-height: 100px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.month-day-cell:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
.month-day-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Other month dates (previous/next month) */
|
|
.month-day-cell.other-month {
|
|
background: var(--color-surface);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Today highlighting - subtle with left border */
|
|
.month-day-cell.today {
|
|
background: #f0f8ff;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
/* Weekend styling */
|
|
.month-day-cell.weekend {
|
|
background: #fafbfc;
|
|
}
|
|
|
|
/* Day number in each cell */
|
|
.month-day-number {
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.month-day-cell.today .month-day-number {
|
|
color: var(--color-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Events container within each day */
|
|
.month-events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 70px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Individual month events - compact version */
|
|
.month-event {
|
|
background: #e3f2fd;
|
|
color: var(--color-primary);
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
border-left: 2px solid var(--color-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.month-event:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Event categories using existing color scheme */
|
|
.month-event.category-meeting {
|
|
background: #e8f5e8;
|
|
color: var(--color-success);
|
|
border-left-color: var(--color-success);
|
|
}
|
|
|
|
.month-event.category-deadline {
|
|
background: #ffebee;
|
|
color: var(--color-error);
|
|
border-left-color: var(--color-error);
|
|
}
|
|
|
|
.month-event.category-work {
|
|
background: #fff8e1;
|
|
color: var(--color-secondary);
|
|
border-left-color: var(--color-secondary);
|
|
}
|
|
|
|
.month-event.category-personal {
|
|
background: #f3e5f5;
|
|
color: #7b1fa2;
|
|
border-left-color: #9c27b0;
|
|
}
|
|
|
|
/* "More events" indicator */
|
|
.month-event-more {
|
|
background: var(--color-surface);
|
|
color: var(--color-text-secondary);
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
font-size: 9px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border: 1px dashed var(--color-border);
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.month-event-more:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
/* Expanded month view - duration-based events */
|
|
.month-grid.expanded {
|
|
min-height: 800px;
|
|
}
|
|
|
|
.month-grid.expanded .month-day-cell {
|
|
min-height: 120px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.month-grid.expanded .month-events {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.month-grid.expanded .month-event {
|
|
padding: 2px 6px;
|
|
font-size: 11px;
|
|
min-height: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
white-space: normal;
|
|
text-overflow: clip;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Duration-based event sizing (30px per hour) */
|
|
.month-event.duration-30min { min-height: 15px; }
|
|
.month-event.duration-1h { min-height: 30px; }
|
|
.month-event.duration-1h30 { min-height: 45px; }
|
|
.month-event.duration-2h { min-height: 60px; }
|
|
.month-event.duration-3h { min-height: 90px; }
|
|
.month-event.duration-4h { min-height: 120px; }
|
|
|
|
/* Event time display for expanded view */
|
|
.month-event-time {
|
|
font-size: 9px;
|
|
opacity: 0.8;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.month-event-title {
|
|
font-weight: 600;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.month-event-subtitle {
|
|
font-size: 9px;
|
|
opacity: 0.7;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* All-day events */
|
|
.month-event.all-day {
|
|
background: linear-gradient(90deg, var(--color-primary), rgba(33, 150, 243, 0.7));
|
|
color: white;
|
|
border-left-color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.month-grid {
|
|
grid-template-columns: 30px repeat(7, 1fr);
|
|
min-height: 400px;
|
|
}
|
|
|
|
.month-day-cell {
|
|
min-height: 60px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.month-day-header {
|
|
padding: 8px 4px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.month-event {
|
|
font-size: 9px;
|
|
padding: 1px 3px;
|
|
}
|
|
|
|
.month-events {
|
|
max-height: 40px;
|
|
}
|
|
|
|
.month-week-number {
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
/* Loading state for month view */
|
|
swp-calendar[data-view="month"][data-loading="true"] .month-grid {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Month view navigation animation support */
|
|
.month-grid {
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
.month-grid.sliding-out-left {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.month-grid.sliding-out-right {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.month-grid.sliding-in-left {
|
|
transform: translateX(-100%);
|
|
animation: slideInFromLeft var(--transition-normal) forwards;
|
|
}
|
|
|
|
.month-grid.sliding-in-right {
|
|
transform: translateX(100%);
|
|
animation: slideInFromRight var(--transition-normal) forwards;
|
|
}
|
|
|
|
@keyframes slideInFromLeft {
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slideInFromRight {
|
|
to { transform: translateX(0); }
|
|
} |