225 lines
4.7 KiB
CSS
225 lines
4.7 KiB
CSS
/*
|
|
* Picker Component Theme-Aware Styling
|
|
*
|
|
* This CSS module provides enhanced dark theme support for the Picker component.
|
|
* Features include:
|
|
* - Automatic theme detection using CSS variables
|
|
* - Enhanced visual feedback for selected items
|
|
* - Smooth animations and transitions
|
|
* - Accessibility improvements (focus states, high contrast)
|
|
* - Responsive design for mobile devices
|
|
* - Reduced motion support for accessibility
|
|
*
|
|
* The styling automatically adapts to both light and dark themes using CSS variables
|
|
* defined in the application's theme system.
|
|
*/
|
|
|
|
.pickerContainer {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background-color: var(--secondary-background);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.pickerContainer:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 1px var(--primary);
|
|
}
|
|
|
|
.pickerColumn {
|
|
flex: 1;
|
|
border-right: 1px solid var(--border);
|
|
background-color: var(--secondary-background);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.pickerColumn:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.pickerItem {
|
|
height: 36px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border-radius: 4px;
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
.pickerItem:hover {
|
|
background-color: var(--background);
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.pickerItem.selected {
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
opacity: 1;
|
|
background-color: var(--background);
|
|
border-radius: 4px;
|
|
margin: 2px 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.pickerItem.unselected {
|
|
font-weight: 400;
|
|
color: var(--text-color-gray);
|
|
opacity: 0.7;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.pickerItemText {
|
|
font-size: 16px;
|
|
padding: 9px 0;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
width: 100%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Dark theme specific enhancements */
|
|
[data-theme="dark"] .pickerContainer {
|
|
background-color: var(--secondary-background);
|
|
border-color: var(--border);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .pickerContainer:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 1px var(--primary), 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] .pickerColumn {
|
|
background-color: var(--secondary-background);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme="dark"] .pickerItem.selected {
|
|
background-color: var(--background);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
[data-theme="dark"] .pickerItem:hover {
|
|
background-color: var(--background);
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
[data-theme="dark"] .pickerItem.unselected {
|
|
color: var(--text-color-gray);
|
|
}
|
|
|
|
/* Light theme specific enhancements */
|
|
[data-theme="light"] .pickerContainer {
|
|
background-color: var(--secondary-background);
|
|
border-color: var(--border);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-theme="light"] .pickerContainer:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 1px var(--primary), 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
[data-theme="light"] .pickerItem.selected {
|
|
background-color: var(--background);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
[data-theme="light"] .pickerItem:hover {
|
|
background-color: var(--background);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-theme="light"] .pickerItem.unselected {
|
|
color: var(--text-color-gray);
|
|
}
|
|
|
|
/* Accessibility enhancements */
|
|
.pickerItem:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.pickerItem:focus-visible.selected {
|
|
outline-color: var(--primary);
|
|
}
|
|
|
|
/* Animation for smooth transitions */
|
|
@keyframes pickerItemSelect {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.pickerItem.selected {
|
|
animation: pickerItemSelect 0.2s ease-out;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 480px) {
|
|
.pickerItemText {
|
|
font-size: 14px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.pickerItem {
|
|
height: 32px;
|
|
margin: 1px 2px;
|
|
}
|
|
|
|
.pickerItem.selected {
|
|
margin: 1px 2px;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.pickerContainer {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.pickerItem.selected {
|
|
border: 2px solid var(--primary);
|
|
background-color: var(--primary);
|
|
color: var(--secondary-background);
|
|
}
|
|
|
|
.pickerItem.unselected {
|
|
color: var(--foreground);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pickerItem,
|
|
.pickerContainer,
|
|
.pickerItemText {
|
|
transition: none;
|
|
}
|
|
|
|
.pickerItem.selected {
|
|
animation: none;
|
|
}
|
|
|
|
.pickerItem:hover {
|
|
transform: none;
|
|
}
|
|
}
|