Source code
Revision control
Copy as Markdown
Other Tools
.weather-forecast-widget {
@include newtab-card-style;
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
// Match the new card width if sections are enabled
.has-sections-grid & {
width: var(--newtab-card-width-medium);
}
border-radius: var(--border-radius-large);
padding: var(--space-medium);
height: var(--newtab-card-height);
display: flex;
flex-direction: column;
box-shadow: var(--box-shadow-card);
--weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90));
--weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
--weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90));
--weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90));
--weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90));
.city-wrapper {
display: flex;
align-items: center;
h3 {
margin-block: 0;
font-weight: var(--font-weight-semibold);
}
}
.current-weather-wrapper {
display: flex;
align-items: center;
margin-block: var(--space-small);
padding: var(--space-medium);
border-radius: var(--border-radius-medium);
width: 100%;
// Setting background color based on temperature icon
&:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) {
background-color: var(--weather-sunny-background-color);
}
&:has(.iconId7, .iconId8, .iconI11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) {
background-color: var(--weather-cloudy-background-color);
}
&:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) {
background-color: var(--weather-rainy-background-color);
}
&:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44 ) {
background-color: var(--weather-snowy-background-color);
}
&:has(.iconId30) {
background-color: var(--weather-hot-background-color);
}
}
// Weather Symbol Icons
.weather-icon-column {
width: var(--size-item-large);
height: var(--size-item-large);
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.weather-icon {
width: var(--size-item-large);
height: auto;
vertical-align: middle;
@media (prefers-contrast) {
-moz-context-properties: fill, stroke;
fill: currentColor;
stroke: currentColor;
}
&.iconId1 {
content: url('chrome://browser/skin/weather/sunny.svg');
}
&.iconId2 {
content: url('chrome://browser/skin/weather/mostly-sunny.svg');
}
&:is(.iconId3, .iconId4, .iconId6) {
content: url('chrome://browser/skin/weather/partly-sunny.svg');
}
&.iconId5 {
content: url('chrome://browser/skin/weather/hazy-sunshine.svg');
}
&:is(.iconId7, .iconId8) {
content: url('chrome://browser/skin/weather/cloudy.svg');
}
&.iconId11 {
content: url('chrome://browser/skin/weather/fog.svg');
}
&.iconId12 {
content: url('chrome://browser/skin/weather/showers.svg');
}
&:is(.iconId13, .iconId14) {
content: url('chrome://browser/skin/weather/mostly-cloudy-with-showers.svg');
}
&.iconId15 {
content: url('chrome://browser/skin/weather/thunderstorms.svg');
}
&:is(.iconId16, .iconId17) {
content: url('chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg');
}
&.iconId18 {
content: url('chrome://browser/skin/weather/rain.svg');
}
&:is(.iconId19, .iconId20, .iconId25) {
content: url('chrome://browser/skin/weather/flurries.svg');
}
&.iconId21 {
content: url('chrome://browser/skin/weather/partly-sunny-with-flurries.svg');
}
&:is(.iconId22, .iconId23) {
content: url('chrome://browser/skin/weather/snow.svg');
}
&:is(.iconId24, .iconId31) {
content: url('chrome://browser/skin/weather/ice.svg');
}
&:is(.iconId26, .iconId29) {
content: url('chrome://browser/skin/weather/freezing-rain.svg');
}
&.iconId30 {
content: url('chrome://browser/skin/weather/hot.svg');
}
&.iconId32 {
content: url('chrome://browser/skin/weather/windy.svg');
}
&.iconId33 {
content: url('chrome://browser/skin/weather/night-clear.svg');
}
&:is(.iconId34, .iconId35, .iconId36, .iconId38) {
content: url('chrome://browser/skin/weather/night-mostly-clear.svg');
}
&.iconId37 {
content: url('chrome://browser/skin/weather/night-hazy-moonlight.svg');
}
&:is(.iconId39, .iconId40) {
content: url('chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg');
height: var(--size-item-large);
}
&:is(.iconId41, .iconId42) {
content: url('chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg');
}
&:is(.iconId43, .iconId44) {
content: url('chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg');
}
}
}
.weather-info-column {
display: flex;
flex-direction: column;
margin-inline: var(--space-medium);
.temperature-unit {
text-transform: uppercase;
font-weight: var(--font-weight-semibold);
}
.temperature-description {
font-size: var(--font-size-small);
color: var(--text-color-deemphasized);
}
}
.high-low-column {
display: flex;
align-items: flex-end;
align-self: flex-start;
margin-inline-start: auto;
color: var(--text-color-deemphasized);
.high-temperature {
margin-inline-end: var(--space-small);
}
.arrow-icon {
display: inline-block;
width: var(--size-item-xsmall);
height: var(--size-item-xsmall);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
&.arrow-up {
background-image: url('chrome://global/skin/icons/shaft-arrow-up.svg');
}
&.arrow-down {
background-image: url('chrome://global/skin/icons/shaft-arrow-down.svg');
}
}
}
hr {
border: 0;
border-block-start: 1px solid var(--border-color);
width: 100%;
}
.forecast-row {
.today-forecast {
margin-block-start: 0;
font-weight: var(--font-weight-semibold);
}
.forecast-row-items {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
margin-block-start: var(--space-small);
li {
background: var(--newtab-background-color);
border-radius: var(--border-radius-small);
display: flex;
flex-direction: column;
align-items: center;
margin-inline: var(--space-xsmall);
padding-inline: var(--space-small);
padding-block: var(--space-xsmall);
font-size: var(--font-size-small);
}
}
}
.weather-forecast-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-start: auto;
a {
font-size: var(--font-size-small);
}
span {
font-size: var(--font-size-xsmall);
}
}