c510994ca2
Changes the calendar week view to dynamically adjust its width based on the `--day-column-min-width` CSS variable. This allows for more flexible and responsive layouts, avoiding fixed widths. Also, the base calendar CSS file is now included in the index file.
500 lines
No EOL
10 KiB
CSS
500 lines
No EOL
10 KiB
CSS
/* Base CSS */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
: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: 7;
|
|
--day-end-hour: 19;
|
|
--work-start-hour: 8;
|
|
--work-end-hour: 17;
|
|
|
|
/* Colors */
|
|
--color-primary: #2196f3;
|
|
--color-grid-line: #e0e0e0;
|
|
--color-grid-line-light: rgba(0, 0, 0, 0.03);
|
|
--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;
|
|
|
|
/* 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);
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--color-text);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
/* Custom elements default display */
|
|
swp-calendar,
|
|
swp-calendar-nav,
|
|
swp-calendar-container,
|
|
swp-time-axis,
|
|
swp-week-header,
|
|
swp-scrollable-content,
|
|
swp-time-grid,
|
|
swp-day-columns,
|
|
swp-day-column,
|
|
swp-events-layer,
|
|
swp-event,
|
|
swp-loading-overlay,
|
|
swp-week-container,
|
|
swp-grid-lines {
|
|
display: block;
|
|
}
|
|
|
|
/* Main calendar container */
|
|
swp-calendar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background: var(--color-background);
|
|
position: relative;
|
|
}
|
|
|
|
/* Navigation bar */
|
|
swp-calendar-nav {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 12px 16px;
|
|
background: var(--color-background);
|
|
border-bottom: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
swp-nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
swp-nav-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 150ms ease;
|
|
min-width: 40px;
|
|
height: 36px;
|
|
}
|
|
|
|
swp-nav-button:hover {
|
|
background: var(--color-surface);
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Search container */
|
|
swp-search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
justify-self: end;
|
|
}
|
|
|
|
swp-search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
pointer-events: none;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
swp-search-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
swp-search-container input[type="search"] {
|
|
padding: 8px 36px 8px 36px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
background: var(--color-surface);
|
|
font-size: 0.875rem;
|
|
width: 200px;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-search-container input[type="search"]::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
swp-search-container input[type="search"]:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
background: var(--color-background);
|
|
width: 250px;
|
|
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
|
|
}
|
|
|
|
swp-search-container input[type="search"]::placeholder {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-search-clear {
|
|
position: absolute;
|
|
right: 8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
transition: all 150ms ease;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-search-clear:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
swp-search-clear svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
swp-search-clear[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
swp-view-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
swp-view-button:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-view-button[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
}
|
|
|
|
/* Calendar container grid */
|
|
swp-calendar-container {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr;
|
|
grid-template-rows: 1fr;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Week container for sliding */
|
|
swp-week-container {
|
|
grid-column: 2;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
position: relative;
|
|
width: 100%;
|
|
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
swp-week-container.slide-out-left {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
swp-week-container.slide-out-right {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
swp-week-container.slide-in-left {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
swp-week-container.slide-in-right {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Time axis */
|
|
swp-time-axis {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 4;
|
|
padding-top: 80px; /* Match header height */
|
|
}
|
|
|
|
swp-hour-marker {
|
|
height: var(--hour-height);
|
|
padding: 0 8px 8px 8px;
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
swp-hour-marker::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
width: 100vw;
|
|
height: 1px;
|
|
background: var(--color-grid-line);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Week header */
|
|
swp-week-header {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
height: 80px; /* Fixed height */
|
|
}
|
|
|
|
swp-day-header {
|
|
padding: 12px;
|
|
text-align: center;
|
|
border-right: 1px solid var(--color-grid-line);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
swp-day-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
swp-day-name {
|
|
display: block;
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-day-date {
|
|
display: block;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
swp-day-header[data-today="true"] swp-day-date {
|
|
color: var(--color-primary);
|
|
background: rgba(33, 150, 243, 0.1);
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 4px auto 0;
|
|
}
|
|
|
|
/* Scrollable content */
|
|
swp-scrollable-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
position: relative;
|
|
}
|
|
|
|
/* Time grid */
|
|
swp-time-grid {
|
|
position: relative;
|
|
height: calc(12 * var(--hour-height));
|
|
}
|
|
|
|
swp-time-grid::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc((var(--work-start-hour) - var(--day-start-hour)) * var(--hour-height));
|
|
height: calc((var(--work-end-hour) - var(--work-start-hour)) * var(--hour-height));
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-work-hours);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Grid lines */
|
|
swp-grid-lines {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image: repeating-linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
transparent calc(var(--hour-height) / 4 - 1px),
|
|
rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4 - 1px),
|
|
rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4)
|
|
);
|
|
}
|
|
|
|
/* Day columns */
|
|
swp-day-columns {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
swp-day-column {
|
|
position: relative;
|
|
border-right: 1px solid var(--color-grid-line);
|
|
}
|
|
|
|
swp-day-column:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
swp-events-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
/* Events */
|
|
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;
|
|
}
|
|
|
|
swp-event[data-type="meeting"] {
|
|
background: var(--color-event-meeting);
|
|
border-left: 4px solid var(--color-event-meeting-border);
|
|
}
|
|
|
|
swp-event[data-type="meal"] {
|
|
background: var(--color-event-meal);
|
|
border-left: 4px solid var(--color-event-meal-border);
|
|
}
|
|
|
|
swp-event[data-type="work"] {
|
|
background: var(--color-event-work);
|
|
border-left: 4px solid var(--color-event-work-border);
|
|
}
|
|
|
|
swp-event:hover {
|
|
box-shadow: var(--shadow-md);
|
|
transform: scale(1.02);
|
|
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;
|
|
}
|
|
|
|
/* Loading */
|
|
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); }
|
|
}
|
|
|
|
/* Week info styles */
|
|
swp-week-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-week-number {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-date-range {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-view-selector {
|
|
display: flex;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
} |