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.
193 lines
No EOL
3.3 KiB
CSS
193 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);
|
|
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;
|
|
}
|
|
} |