827 lines
19 KiB
SCSS
827 lines
19 KiB
SCSS
// Custom font sizing for weather widget
|
|
:root {
|
|
--newtab-weather-content-font-size: var(--font-size-small);
|
|
--newtab-weather-sponsor-font-size: 8px;
|
|
}
|
|
|
|
.weather {
|
|
font-size: inherit;
|
|
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;
|
|
|
|
// Bug 1914055 - Layout experiment: logo/search spacing
|
|
.layout-variant-a &,
|
|
.layout-variant-b & {
|
|
inset-inline-start: 24px;
|
|
inset-block-start: 24px;
|
|
}
|
|
}
|
|
|
|
// Bug 1914055 - Layout experiment: Position the weather widget absolutely
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.weather-placeholder {
|
|
width: 240px;
|
|
height: 98px;
|
|
padding: var(--space-small) var(--space-medium);
|
|
border-radius: var(--border-radius-medium);
|
|
background: var(--newtab-background-color-secondary);
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
.placeholder-image {
|
|
height: 100%;
|
|
width: 80px;
|
|
margin-inline-end: var(--space-medium);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.placeholder-context {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.placeholder-header {
|
|
height: 45px;
|
|
width: 100%;
|
|
margin-block-end: var(--space-small);
|
|
}
|
|
|
|
.placeholder-description {
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.placeholder-fill {
|
|
color: var(--newtab-text-primary-color);
|
|
background: var(--newtab-button-active-background);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
|
|
&.placeholder-seen {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: -100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0%) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0%) 100%);
|
|
z-index: 2;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
inset-inline-start: -100%;
|
|
}
|
|
|
|
// We apply the same frame from 50-100% to account for a delay in a repeating animation.
|
|
50%, 100% {
|
|
inset-inline-start: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bug 1914055 - Layout experiment: logo/search spacing
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bug 1959189 - Show mobile QR code modal toggle next to weather widget
|
|
.has-mobile-download-promo {
|
|
$mobile-download-promo-width: 32px;
|
|
// No Variant Layout, Var A Layout
|
|
.weather, &.layout-variant-a .weather {
|
|
// Default spacing (--space-xlarge) + width of .mobile-download-promo (32px) + gap
|
|
@media (min-width: $break-point-medium) {
|
|
inset-inline-start: calc($mobile-download-promo-width + var(--space-xxlarge));
|
|
}
|
|
}
|
|
|
|
&.layout-variant-b .weather {
|
|
// Var B: width of .mobile-download-promo (32px) + gap
|
|
@media (min-width: $break-point-medium) {
|
|
inset-inline-start: auto;
|
|
inset-inline-end: calc($mobile-download-promo-width + var(--space-medium));
|
|
}
|
|
|
|
// Var B offset (40px) + width of .mobile-download-promo (32px) + gap
|
|
@media (min-width: $break-point-layout-variant) {
|
|
inset-inline-end: calc(40px + $mobile-download-promo-width + var(--space-medium));
|
|
}
|
|
}
|
|
|
|
// Layout when search has been turned off. It will show one breakpoint later than `has-search`
|
|
&.layout-variant-b.no-search .weather {
|
|
// Var B offset (40px) + width of .mobile-download-promo (32px) + gap
|
|
@media (min-width: $break-point-large) {
|
|
inset-inline-end: calc(40px + $mobile-download-promo-width + var(--space-medium));
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bug 1914055 - Layout experiment: logo/search spacing
|
|
.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;
|
|
|
|
// Bug 1915727 - Layout experiment: hide error message on smallest breakpoint
|
|
.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);
|
|
}
|
|
|
|
// Bug 1908010 - This overwrites the design system color because of a
|
|
// known 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-card);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
// Bug 1908010 - This overwrites the design system color because of a
|
|
// known 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;
|
|
|
|
// Bug 1908010 - This overwrites the design system color because of a
|
|
// known 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bug 1914193 - Only show the temperature on the smallest breakpoint and
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|