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.
194 lines
No EOL
3.3 KiB
CSS
194 lines
No EOL
3.3 KiB
CSS
/* styles/components/popup.css */
|
|
|
|
/* Event popup */
|
|
swp-event-popup {
|
|
position: fixed;
|
|
background: #f9f5f0;
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow-popup);
|
|
padding: 16px;
|
|
min-width: 300px;
|
|
z-index: var(--z-popup);
|
|
animation: fadeIn var(--transition-fast);
|
|
|
|
/* Chevron arrow */
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: inherit;
|
|
transform: rotate(45deg);
|
|
top: 50%;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
/* Right-side popup (arrow on left) */
|
|
&[data-align="right"] {
|
|
&::before {
|
|
left: -8px;
|
|
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Left-side popup (arrow on right) */
|
|
&[data-align="left"] {
|
|
&::before {
|
|
right: -8px;
|
|
box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Popup header */
|
|
swp-popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
gap: 16px;
|
|
}
|
|
|
|
swp-popup-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Popup actions */
|
|
swp-popup-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
swp-action-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
color: var(--color-text-secondary);
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
&:active {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Specific button styles */
|
|
&[data-action="delete"]:hover {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
&[data-action="close"]:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Popup content */
|
|
swp-popup-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
swp-time-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.875rem;
|
|
|
|
swp-icon {
|
|
font-size: 1.25rem;
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
|
|
/* Loading overlay */
|
|
swp-loading-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
}
|
|
|
|
swp-loading-overlay[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
swp-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid #f3f3f3;
|
|
border-top: 3px solid var(--color-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Snap indicator */
|
|
swp-snap-indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: var(--color-primary);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
z-index: var(--z-drag-ghost);
|
|
|
|
&[data-active="true"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
&::before {
|
|
content: attr(data-time);
|
|
position: absolute;
|
|
right: 8px;
|
|
top: -24px;
|
|
background: var(--color-primary);
|
|
color: white;
|
|
padding: 2px 8px;
|
|
font-size: 0.75rem;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
swp-event-popup {
|
|
min-width: 250px;
|
|
max-width: calc(100vw - 32px);
|
|
}
|
|
|
|
swp-popup-title {
|
|
font-size: 1rem;
|
|
}
|
|
} |