Source code
Revision control
Copy as Markdown
Other Tools
// Custom font sizing for weather widget
:root {
--newtab-weather-content-font-size: 11px;
--newtab-weather-sponsor-font-size: 8px;
}
.weather {
font-size: var(--font-size-root);
margin-block-start: var(--space-xlarge);
margin-inline-start: var(--space-xlarge);
display: inline-block;
@media (min-width: $break-point-medium) {
position: absolute;
inset-inline-start: var(--space-xlarge);
inset-block-start: var(--space-xlarge);
margin-block-start: 0;
margin-inline-start: 0;
z-index: 1;
.layout-variant-a &,
.layout-variant-b & {
inset-inline-start: 24px;
inset-block-start: 24px;
}
}
// across all breakpoints to keep logo margins consistent
.no-search.layout-variant-a &,
.no-search.layout-variant-b &,
.layout-variant-a &,
.layout-variant-b & {
position: absolute;
inset-inline-start: var(--space-xlarge);
inset-block-start: var(--space-xlarge);
margin-block-start: 0;
margin-inline-start: 0;
}
// Edge case: users with weather enabled/search disabled
.no-search & {
position: relative;
margin-block-start: var(--space-xlarge);
margin-inline-start: var(--space-xlarge);
@media (min-width: $break-point-medium) {
margin-block-start: 0;
margin-inline-start: 0;
}
@media (min-width: $break-point-weather) {
position: absolute;
inset-inline-start: var(--space-xlarge);
inset-block-start: var(--space-xlarge);
margin-block-start: 0;
margin-inline-start: 0;
}
}
}
// Edge case: users with weather enabled/search disabled
.has-weather.no-search {
.outer-wrapper {
padding-top: 0;
@media (min-width: $break-point-medium) {
padding-top: 30px;
}
}
}
.layout-variant-a.has-weather.no-search,
.layout-variant-b.has-weather.no-search {
.outer-wrapper {
padding-top: 24px;
}
}
.no-search.layout-variant-b,
.layout-variant-b {
.weather {
position: absolute;
inset-inline-start: auto;
inset-inline-end: 40px;
inset-block-start: 40px;
margin-block-start: 0;
@media (min-width: $break-point-layout-variant) {
inset-inline-end: 20px;
}
@media (min-width: $break-point-large) {
inset-inline-end: 40px;
}
.weatherSponsorText {
float: inline-end;
span {
inset-inline-end: 0;
}
}
.context-menu {
inset-inline-end: 100%;
inset-inline-start: auto;
margin-inline-end: 5px;
}
}
}
.no-search.layout-variant-b {
.weather {
inset-inline-end: 20px;
@media (min-width: $break-point-small) {
inset-inline-end: 40px;
}
@media (min-width: $break-point-layout-variant) {
inset-inline-end: 20px;
}
@media (min-width: $break-point-large) {
inset-inline-end: 40px;
}
}
}
// Edge case: users with weather enabled/search enabled
.has-weather.has-search {
.outer-wrapper:not(.only-search) {
padding-top: 0;
@media (min-width: $break-point-medium) {
padding-top: 30px;
}
}
// Edge case: medium screens where we hide the weather icon and
// detail info row for overlap issues
.weatherDetailedSummaryRow {
display: block;
@media (min-width: $break-point-medium) {
display: none;
}
@media (min-width: $break-point-large) {
display: block;
}
}
.weatherIconCol {
display: flex;
@media (min-width: $break-point-medium) {
display: none;
}
@media (min-width: $break-point-large) {
display: flex;
}
}
}
.layout-variant-a.has-weather.has-search,
.layout-variant-b.has-weather.has-search {
.outer-wrapper:not(.only-search) {
padding-top: 24px;
}
}
// Unavailable / Error State
.weatherNotAvailable {
font-size: var(--newtab-weather-content-font-size);
display: flex;
align-items: center;
border-radius: var(--border-radius-medium);
height: 52px;
max-width: 205px;
.layout-variant-a & {
display: none;
@media (min-width: $break-point-medium) {
display: flex
}
}
.layout-variant-b & {
display: none;
@media (min-width: $break-point-large) {
display: flex
}
}
&:hover {
background-color: var(--button-background-color-ghost-hover);
}
&:active {
background-color: var(--button-background-color-ghost-active);
}
.icon {
margin-inline-start: var(--space-small);
min-width: var(--size-item-small);
}
p {
margin-inline-start: var(--space-small);
}
.weatherButtonContextMenuWrapper {
align-self: stretch;
padding-inline: var(--space-small);
}
// know transparency issue with color-mix syntax when a wallpaper is set
.lightWallpaper &,
.darkWallpaper & {
background-color: var(--newtab-weather-background-color);
@media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
}
.weatherCard {
margin-block-end: var(--space-xsmall);
display: flex;
flex-wrap: nowrap;
align-items: stretch;
border-radius: var(--border-radius-medium);
overflow: hidden;
&:hover, &:focus-within {
~ .weatherSponsorText {
visibility: visible;
}
}
&:focus-within {
overflow: visible;
}
&:hover {
box-shadow: var(--box-shadow-10);
}
a {
color: var(--text-color);
}
}
.weatherSponsorText {
visibility: hidden;
font-size: var(--newtab-weather-sponsor-font-size);
color: var(--newtab-contextual-text-primary-color);
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
span {
color: var(--text-color-deemphasized);
}
}
.weatherInfoLink, .weatherButtonContextMenuWrapper {
appearance: none;
background-color: var(--background-color-ghost);
border: 0;
padding: var(--space-small);
cursor: pointer;
&:hover {
background-color: var(--newtab-background-color-secondary);
&::after {
background-color: transparent
}
&:active {
background-color: var(--button-background-color-ghost-active);
}
}
&:focus-visible {
outline: var(--focus-outline);
}
// know transparency issue with color-mix syntax when a wallpaper is set
.lightWallpaper &,
.darkWallpaper & {
background-color: var(--newtab-weather-background-color);
&:hover {
background-color: var(--newtab-button-static-hover-background);
}
&:hover:active {
background-color: var(--newtab-button-static-active-background);
}
@media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
}
.weatherInfoLink {
display: flex;
gap: var(--space-medium);
padding: var(--space-small) var(--space-medium);
border-start-start-radius: var(--border-radius-medium);
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: var(--border-radius-medium);
text-decoration: none;
color: var(--text-color);;
min-width: 130px;
max-width: 190px;
text-overflow: ellipsis;
@media(min-width: $break-point-medium) {
min-width: unset;
}
&:hover ~.weatherButtonContextMenuWrapper {
&::after {
background-color: transparent
}
}
&:focus-visible {
border-radius: var(--border-radius-medium);
~ .weatherButtonContextMenuWrapper {
&::after {
background-color: transparent
}
}
}
}
.weatherButtonContextMenuWrapper {
position: relative;
cursor: pointer;
border-start-start-radius: 0;
border-start-end-radius: var(--border-radius-medium);
border-end-end-radius: var(--border-radius-medium);
border-end-start-radius: 0;
display: flex;
align-items: stretch;
width: 50px;
padding: 0;
&::after {
content: '';
inset-inline-start: 0;
top: 10px;
height: calc(100% - 20px);
width: 1px;
background-color: var(--newtab-button-static-background);
display: block;
position: absolute;
z-index: 0;
}
&:hover {
&::after {
background-color: transparent
}
}
&:focus-visible {
border-radius: var(--border-radius-medium);
&::after {
background-color: transparent
}
}
}
.weatherButtonContextMenu {
background-image: url('chrome://global/skin/icons/more.svg');
background-repeat: no-repeat;
background-size: var(--size-item-small) auto;
background-position: center;
background-color: transparent;
cursor: pointer;
fill: var(--icon-color);
-moz-context-properties: fill;
width: 100%;
height: 100%;
border: 0;
appearance: none;
min-width: var(--size-item-large);
}
.weatherText {
height: min-content;
}
.weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-small);
}
.weatherForecastRow {
text-transform: uppercase;
font-weight: var(--font-weight-bold);
}
.weatherCityRow {
color: var(--text-color-deemphasized);
}
.weatherCity {
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
font-size: var(--font-size-small);
}
// Add additional margin if detailed summary is in view
.weatherCityRow + .weatherDetailedSummaryRow {
margin-block-start: var(--space-xsmall);
}
.weatherDetailedSummaryRow {
font-size: var(--newtab-weather-content-font-size);
gap: var(--space-large);
}
.weatherHighLowTemps {
display: inline-flex;
gap: var(--space-xxsmall);
text-transform: uppercase;
word-spacing: var(--space-xxsmall);
margin-inline-end: var(--space-small);
}
.weatherTextSummary {
display: inline;
text-align: center;
max-width: 90px;
}
.weatherTemperature {
font-size: var(--font-size-large);
}
// Weather Symbol Icons
.weatherIconCol {
width: var(--size-item-large);
height: var(--size-item-large);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.weatherIcon {
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');
// height: var(--size-item-large);
}
&.iconId2 {
content: url('chrome://browser/skin/weather/mostly-sunny.svg');
// height: var(--size-item-large);
}
&:is(.iconId3, .iconId4, .iconId6) {
content: url('chrome://browser/skin/weather/partly-sunny.svg');
// height: var(--size-item-large);
}
&.iconId5 {
content: url('chrome://browser/skin/weather/hazy-sunshine.svg');
// height: var(--size-item-large);
}
&: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');
// height: var(--size-item-large);
}
&.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');
}
}
.location-input-wrapper {
background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary));
color: var(--newtab-text-primary-color);
border-radius: var(--border-radius-medium);
padding: var(--space-small);
position: relative;
// know transparency issue with color-mix syntax when a wallpaper is set
.lightWallpaper &,
.darkWallpaper & {
background-color: var(--newtab-weather-background-color);
&:hover {
background-color: var(--newtab-button-static-hover-background);
}
&:hover:active {
background-color: var(--newtab-button-static-active-background);
}
@media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
.search-icon {
content: url('chrome://global/skin/icons/search-glass.svg');
-moz-context-properties: fill;
fill: var(--icon-color);
position: absolute;
top: 50%;
transform: translateY(-50%);
inset-inline-start: 18px;
}
.close-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
inset-inline-end: var(--space-medium);
&:focus-visible {
outline: var(--focus-outline);
}
}
input {
border-radius: var(--border-radius-medium);
background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary));
padding-block: 8px;
padding-inline: 30px;
border: $border-primary;
&:focus-visible {
outline: 2px solid var(--focus-outline-color);
}
}
}
// return to default view on medium breakpoints
.has-weather.has-search.layout-variant-a,
.has-weather.has-search.layout-variant-b,
.layout-variant-a,
.layout-variant-b {
.weatherCityRow,
.weatherButtonContextMenuWrapper {
display: none;
@media(min-width: $break-point-large) {
display: flex;
}
}
// Edge case: Show weather icon at a later breakpoint
// then the temperature and city name
.weatherIconCol {
display: none;
@media(min-width: $break-point-widest) {
display: flex;
}
}
// Edge case: Show detailed view at a later breakpoint
// then the temperature and city name
.weatherDetailedSummaryRow {
display: none;
@media(min-width: $break-point-widest) {
display: block;
}
}
.weatherCard {
min-height: 55px;
}
.weatherInfoLink {
min-width: auto;
max-width: none;
@media(min-width: $break-point-widest) {
min-width: 130px;
max-width: 190px;
}
}
.weatherForecastRow {
margin-block: var(--space-small);
@media(min-width: $break-point-large) {
margin-block: unset;
}
}
.weatherSponsorText {
position: relative;
span {
position: absolute;
white-space: nowrap;
inset-block-start: var(--space-small);
@media(min-width: $break-point-large) {
inset-block-start: unset;
position: relative;
}
}
}
}