122 lines
No EOL
2.5 KiB
SCSS
122 lines
No EOL
2.5 KiB
SCSS
@use '../variables' as v;
|
|
|
|
window.Overlay {
|
|
|
|
.weather-card {
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
background-color: v.$bg-base;
|
|
}
|
|
|
|
.weather-current-row {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.weather-current-icon {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.weather-current-temp {
|
|
font-family: v.$font-sans;
|
|
font-size: 42px;
|
|
font-weight: bold;
|
|
color: v.$text-primary;
|
|
color: v.$accent-primary-light;
|
|
}
|
|
|
|
.weather-current-wind {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: v.$text-muted;
|
|
font-family: v.$font-sans;
|
|
}
|
|
|
|
.weather-today-row {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.weather-today-icon {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.weather-today-highlow {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: v.$text-primary;
|
|
font-family: v.$font-sans;
|
|
}
|
|
|
|
.weather-rain-pill {
|
|
font-size: 12px;
|
|
color: v.$accent-primary-light;
|
|
font-family: v.$font-monospace;
|
|
font-weight: 600;
|
|
// Pill background
|
|
border-radius: 999px;
|
|
background-color: rgba(v.$accent-primary, 0.15);
|
|
padding: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.weather-forecast-title {
|
|
font-family: v.$font-sans;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
color: v.$text-muted;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.weather-forecast-box {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.weather-forecast-day {
|
|
padding: 6px 4px;
|
|
border-radius: 8px;
|
|
|
|
&:hover {
|
|
background-color: v.$bg-surface-hover;
|
|
transition: v.$transition-fast;
|
|
}
|
|
}
|
|
|
|
.weather-forecast-label {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: v.$text-muted;
|
|
font-family: v.$font-sans;
|
|
}
|
|
|
|
.weather-forecast-icon {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.weather-forecast-temps {
|
|
font-size: 12px;
|
|
color: v.$text-primary;
|
|
font-family: v.$font-monospace;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.weather-forecast-rain {
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: v.$accent-primary-light;
|
|
font-family: v.$font-monospace;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.weather-rain-bar-bg {
|
|
border-radius: 999px;
|
|
background-color: rgba(v.$accent-primary, 0.15);
|
|
min-width: 60px;
|
|
margin: 2px 6px 0;
|
|
}
|
|
|
|
.weather-rain-bar-fg {
|
|
border-radius: 999px;
|
|
background: v.$accent-gradient;
|
|
min-height: 4px;
|
|
}
|
|
} |