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.
178 lines
No EOL
3.3 KiB
CSS
178 lines
No EOL
3.3 KiB
CSS
/* styles/components/events.css */
|
|
|
|
/* Event base styles */
|
|
swp-event {
|
|
position: absolute;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
cursor: move;
|
|
transition: box-shadow 150ms ease, transform 150ms ease;
|
|
z-index: 10;
|
|
left: 1px;
|
|
right: 1px;
|
|
padding: 8px;
|
|
|
|
/* Event types */
|
|
&[data-type="meeting"] {
|
|
background: var(--color-event-meeting);
|
|
border-left: 4px solid var(--color-event-meeting-border);
|
|
}
|
|
|
|
&[data-type="meal"] {
|
|
background: var(--color-event-meal);
|
|
border-left: 4px solid var(--color-event-meal-border);
|
|
}
|
|
|
|
&[data-type="work"] {
|
|
background: var(--color-event-work);
|
|
border-left: 4px solid var(--color-event-work-border);
|
|
}
|
|
|
|
&[data-type="milestone"] {
|
|
background: var(--color-event-milestone);
|
|
border-left: 4px solid var(--color-event-milestone-border);
|
|
}
|
|
|
|
}
|
|
|
|
swp-event:hover {
|
|
box-shadow: var(--shadow-md);
|
|
filter: brightness(0.95);
|
|
z-index: 20;
|
|
}
|
|
|
|
swp-event-time {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
opacity: 0.8;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
swp-event-title {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Resize handles */
|
|
swp-resize-handle {
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
height: 4px;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-fast);
|
|
|
|
/* The two lines */
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
&::before {
|
|
top: 0;
|
|
}
|
|
|
|
&::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Hit area */
|
|
swp-handle-hitarea {
|
|
position: absolute;
|
|
left: -8px;
|
|
right: -8px;
|
|
top: -6px;
|
|
bottom: -6px;
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
&[data-position="top"] {
|
|
top: 4px;
|
|
}
|
|
|
|
&[data-position="bottom"] {
|
|
bottom: 4px;
|
|
}
|
|
}
|
|
|
|
/* Multi-day events */
|
|
swp-multi-day-event {
|
|
position: relative;
|
|
height: 28px;
|
|
margin: 2px 4px;
|
|
padding: 0 8px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
/* Event type colors */
|
|
&[data-type="milestone"] {
|
|
background: var(--color-event-milestone);
|
|
color: var(--color-event-milestone-border);
|
|
}
|
|
|
|
/* Continuation indicators */
|
|
&[data-continues-before="true"] {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: 0;
|
|
padding-left: 20px;
|
|
|
|
&::before {
|
|
content: '◀';
|
|
position: absolute;
|
|
left: 4px;
|
|
opacity: 0.6;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&[data-continues-after="true"] {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-right: 0;
|
|
padding-right: 20px;
|
|
|
|
&::after {
|
|
content: '▶';
|
|
position: absolute;
|
|
right: 4px;
|
|
opacity: 0.6;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
}
|
|
|
|
/* Event creation preview */
|
|
swp-event-preview {
|
|
position: absolute;
|
|
left: 8px;
|
|
right: 8px;
|
|
background: rgba(33, 150, 243, 0.1);
|
|
border: 2px dashed var(--color-primary);
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
|
|
/* Position via CSS variables */
|
|
top: calc(var(--preview-start) * var(--minute-height));
|
|
height: calc(var(--preview-duration) * var(--minute-height));
|
|
} |