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.
236 lines
No EOL
4.3 KiB
CSS
236 lines
No EOL
4.3 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;
|
|
}
|
|
}
|
|
|
|
/* Workweek Presets */
|
|
swp-workweek-presets {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
swp-preset-button {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
color: var(--color-text-secondary);
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
|
|
&[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&[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;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Visual indication when filter is active */
|
|
swp-search-container.filter-active input {
|
|
border-color: var(--color-primary);
|
|
background: rgba(33, 150, 243, 0.05);
|
|
}
|
|
|
|
/* 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);
|
|
} |