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.
192 lines
No EOL
3.4 KiB
CSS
192 lines
No EOL
3.4 KiB
CSS
/* styles/components/navigation.css */
|
|
|
|
/* Navigation groups */
|
|
swp-nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Navigation buttons */
|
|
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 var(--transition-fast);
|
|
min-width: 40px;
|
|
height: 36px;
|
|
|
|
&:hover {
|
|
background: var(--color-surface);
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Icon buttons */
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* Today button */
|
|
&[data-action="today"] {
|
|
min-width: 70px;
|
|
}
|
|
}
|
|
|
|
/* View selector */
|
|
swp-view-selector {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-view-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
&:hover:not([disabled]) {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
&[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* Search container */
|
|
swp-search-container {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
swp-search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
pointer-events: none;
|
|
color: var(--color-text-secondary);
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
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: 250px;
|
|
transition: all var(--transition-fast);
|
|
|
|
&::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
background: var(--color-background);
|
|
width: 300px;
|
|
}
|
|
|
|
&::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 var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: var(--color-text-secondary);
|
|
}
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Calendar search active state */
|
|
swp-calendar[data-searching="true"] {
|
|
swp-event {
|
|
opacity: 0.15;
|
|
transition: opacity var(--transition-normal);
|
|
|
|
&[data-search-match="true"] {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Week info display */
|
|
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);
|
|
} |