Items 16-22: Icon classification, accessibility, responsive design, API params
- Consolidate 5 weather icon methods into classifyWeatherIcon/applyWeatherIconClasses - Add focus-visible styles, ARIA attributes, keyboard nav on config button/modal - Add responsive breakpoints for departure cards, weather widget, config modal - Simplify CSS selectors: replace :not(:is(...)) chains with body.normal - Fix upsidedown layout margin assumption with transform-based centering - Upgrade weather icons from @2x to @4x for high-DPI displays - Add forecast window and transport filter params to SL departures API Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1291,6 +1291,272 @@ body.dark-mode .config-file-label {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Accessibility - Focus styles
|
||||
======================================== */
|
||||
.config-button:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
opacity: 1;
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.config-tab:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
body.dark-mode .config-tab:focus-visible {
|
||||
outline-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.config-modal-close:focus-visible {
|
||||
outline: 2px solid var(--color-surface);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.config-modal-footer button:focus-visible,
|
||||
.config-option button:focus-visible,
|
||||
#search-site-button:focus-visible,
|
||||
#select-from-map-button:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
body.dark-mode .config-modal-footer button:focus-visible,
|
||||
body.dark-mode .config-option button:focus-visible {
|
||||
outline-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.config-option select:focus-visible,
|
||||
.config-option input[type="text"]:focus-visible,
|
||||
.config-search-input:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -1px;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
body.dark-mode .config-option select:focus-visible,
|
||||
body.dark-mode .config-option input[type="text"]:focus-visible,
|
||||
body.dark-mode .config-search-input:focus-visible {
|
||||
outline-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Accessibility - Color contrast improvements */
|
||||
#custom-weather .sun-times {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.site-search-result div:last-child {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
body.dark-mode .site-search-result div:last-child {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
body.dark-mode .time-range {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Responsive Design - Departure cards
|
||||
======================================== */
|
||||
@media (max-width: 768px) {
|
||||
.departure-card {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.line-number-box {
|
||||
min-width: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.line-number-large {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.direction-destination {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.countdown-large {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.times-container {
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.direction-arrow-box {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Weather responsive */
|
||||
#custom-weather .current-weather {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#custom-weather .location-info {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#custom-weather .temperature {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour {
|
||||
min-width: 44px;
|
||||
height: 80px;
|
||||
padding: 4px 3px;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour .icon img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Config modal responsive */
|
||||
.config-modal-content {
|
||||
width: 95%;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.config-modal-body {
|
||||
max-height: calc(95vh - 180px);
|
||||
}
|
||||
|
||||
.config-tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.config-tab {
|
||||
padding: 10px 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.departure-card {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.line-number-box {
|
||||
min-width: 36px;
|
||||
width: 36px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.line-number-large {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.transport-mode-icon .transport-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.directions-wrapper {
|
||||
padding: 4px 6px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.direction-destination {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.countdown-large {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.times-container {
|
||||
min-width: 75px;
|
||||
max-width: 75px;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.direction-arrow-box {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* Weather responsive */
|
||||
#custom-weather {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#custom-weather .weather-icon img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
#custom-weather .temperature {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour {
|
||||
min-width: 38px;
|
||||
height: 70px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour .time {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour .icon img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
#custom-weather .forecast-hour .temp {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/* Config modal responsive */
|
||||
.config-modal-header h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.config-modal-header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.config-modal-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.config-modal-footer {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.config-tab {
|
||||
padding: 8px 8px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.config-flex-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.config-flex-row-mb {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.countdown-large.urgent,
|
||||
|
||||
Reference in New Issue
Block a user