tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

WeatherForecast.scss (7254B)

      1 .weather-forecast-widget {
      2  @include newtab-card-style;
      3 
      4  grid-column: span 1;
      5  width: var(--newtab-card-grid-layout-width);
      6 
      7  // Match the new card width if sections are enabled
      8  .has-sections-grid & {
      9    width: var(--newtab-card-width-medium);
     10  }
     11 
     12  border-radius: var(--border-radius-large);
     13  padding: var(--space-medium);
     14  height: var(--newtab-card-height);
     15  display: flex;
     16  flex-direction: column;
     17  box-shadow: var(--box-shadow-card);
     18 
     19  --weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90));
     20  --weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80));
     21  --weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90));
     22  --weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90));
     23  --weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90));
     24 
     25  .city-wrapper {
     26    display: flex;
     27    align-items: center;
     28 
     29    h3 {
     30      margin-block: 0;
     31      font-weight: var(--font-weight-semibold);
     32    }
     33  }
     34 
     35  .current-weather-wrapper {
     36    display: flex;
     37    align-items: center;
     38    margin-block: var(--space-small);
     39    padding: var(--space-medium);
     40    border-radius: var(--border-radius-medium);
     41    width: 100%;
     42 
     43    // Setting background color based on temperature icon
     44    &:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) {
     45      background-color: var(--weather-sunny-background-color);
     46    }
     47 
     48    &:has(.iconId7, .iconId8, .iconI11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) {
     49      background-color: var(--weather-cloudy-background-color);
     50    }
     51 
     52    &:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) {
     53      background-color: var(--weather-rainy-background-color);
     54    }
     55 
     56    &:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44 ) {
     57      background-color: var(--weather-snowy-background-color);
     58    }
     59 
     60    &:has(.iconId30) {
     61      background-color: var(--weather-hot-background-color);
     62    }
     63  }
     64 
     65  // Weather Symbol Icons
     66  .weather-icon-column {
     67    width: var(--size-item-large);
     68    height: var(--size-item-large);
     69    display: flex;
     70    align-items: center;
     71    justify-content: center;
     72    align-self: center;
     73  }
     74 
     75  .weather-icon {
     76    width: var(--size-item-large);
     77    height: auto;
     78    vertical-align: middle;
     79 
     80    @media (prefers-contrast) {
     81      -moz-context-properties: fill, stroke;
     82      fill: currentColor;
     83      stroke: currentColor;
     84    }
     85 
     86    &.iconId1 {
     87      content: url('chrome://browser/skin/weather/sunny.svg');
     88    }
     89 
     90    &.iconId2 {
     91      content: url('chrome://browser/skin/weather/mostly-sunny.svg');
     92    }
     93 
     94    &:is(.iconId3, .iconId4, .iconId6) {
     95      content: url('chrome://browser/skin/weather/partly-sunny.svg');
     96    }
     97 
     98    &.iconId5 {
     99      content: url('chrome://browser/skin/weather/hazy-sunshine.svg');
    100    }
    101 
    102    &:is(.iconId7, .iconId8) {
    103      content: url('chrome://browser/skin/weather/cloudy.svg');
    104    }
    105 
    106    &.iconId11 {
    107      content: url('chrome://browser/skin/weather/fog.svg');
    108    }
    109 
    110    &.iconId12 {
    111      content: url('chrome://browser/skin/weather/showers.svg');
    112    }
    113 
    114    &:is(.iconId13, .iconId14) {
    115      content: url('chrome://browser/skin/weather/mostly-cloudy-with-showers.svg');
    116    }
    117 
    118    &.iconId15 {
    119      content: url('chrome://browser/skin/weather/thunderstorms.svg');
    120    }
    121 
    122    &:is(.iconId16, .iconId17) {
    123      content: url('chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg');
    124    }
    125 
    126    &.iconId18 {
    127      content: url('chrome://browser/skin/weather/rain.svg');
    128    }
    129 
    130    &:is(.iconId19, .iconId20, .iconId25) {
    131      content: url('chrome://browser/skin/weather/flurries.svg');
    132    }
    133 
    134    &.iconId21 {
    135      content: url('chrome://browser/skin/weather/partly-sunny-with-flurries.svg');
    136    }
    137 
    138    &:is(.iconId22, .iconId23) {
    139      content: url('chrome://browser/skin/weather/snow.svg');
    140    }
    141 
    142    &:is(.iconId24, .iconId31) {
    143      content: url('chrome://browser/skin/weather/ice.svg');
    144    }
    145 
    146    &:is(.iconId26, .iconId29) {
    147      content: url('chrome://browser/skin/weather/freezing-rain.svg');
    148    }
    149 
    150    &.iconId30 {
    151      content: url('chrome://browser/skin/weather/hot.svg');
    152    }
    153 
    154    &.iconId32 {
    155      content: url('chrome://browser/skin/weather/windy.svg');
    156    }
    157 
    158    &.iconId33 {
    159      content: url('chrome://browser/skin/weather/night-clear.svg');
    160    }
    161 
    162    &:is(.iconId34, .iconId35, .iconId36, .iconId38) {
    163      content: url('chrome://browser/skin/weather/night-mostly-clear.svg');
    164    }
    165 
    166    &.iconId37 {
    167      content: url('chrome://browser/skin/weather/night-hazy-moonlight.svg');
    168    }
    169 
    170    &:is(.iconId39, .iconId40) {
    171      content: url('chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg');
    172      height: var(--size-item-large);
    173    }
    174 
    175    &:is(.iconId41, .iconId42) {
    176      content: url('chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg');
    177    }
    178 
    179    &:is(.iconId43, .iconId44) {
    180      content: url('chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg');
    181    }
    182  }
    183 }
    184 
    185 .weather-info-column {
    186  display: flex;
    187  flex-direction: column;
    188  margin-inline: var(--space-medium);
    189 
    190  .temperature-unit {
    191    text-transform: uppercase;
    192    font-weight: var(--font-weight-semibold);
    193  }
    194 
    195  .temperature-description {
    196    font-size: var(--font-size-small);
    197    color: var(--text-color-deemphasized);
    198  }
    199 }
    200 
    201 .high-low-column {
    202  display: flex;
    203  align-items: flex-end;
    204  align-self: flex-start;
    205  margin-inline-start: auto;
    206  color: var(--text-color-deemphasized);
    207 
    208  .high-temperature {
    209    margin-inline-end: var(--space-small);
    210  }
    211 
    212  .arrow-icon {
    213    display: inline-block;
    214    width: var(--size-item-xsmall);
    215    height: var(--size-item-xsmall);
    216    background-size: contain;
    217    background-repeat: no-repeat;
    218    background-position: center;
    219    -moz-context-properties: fill, fill-opacity;
    220    fill: currentColor;
    221 
    222    &.arrow-up {
    223      background-image: url('chrome://global/skin/icons/shaft-arrow-up.svg');
    224    }
    225 
    226    &.arrow-down {
    227      background-image: url('chrome://global/skin/icons/shaft-arrow-down.svg');
    228    }
    229  }
    230 }
    231 
    232 hr {
    233  border: 0;
    234  border-block-start: 1px solid var(--border-color);
    235  width: 100%;
    236 }
    237 
    238 .forecast-row {
    239  .today-forecast {
    240    margin-block-start: 0;
    241    font-weight: var(--font-weight-semibold);
    242  }
    243 
    244  .forecast-row-items {
    245    list-style: none;
    246    display: flex;
    247    justify-content: center;
    248    padding: 0;
    249    margin-block-start: var(--space-small);
    250 
    251    li {
    252      background: var(--newtab-background-color);
    253      border-radius: var(--border-radius-small);
    254      display: flex;
    255      flex-direction: column;
    256      align-items: center;
    257      margin-inline: var(--space-xsmall);
    258      padding-inline: var(--space-small);
    259      padding-block: var(--space-xsmall);
    260      font-size: var(--font-size-small);
    261    }
    262  }
    263 }
    264 
    265 .weather-forecast-footer {
    266  display: flex;
    267  align-items: center;
    268  justify-content: space-between;
    269  margin-block-start: auto;
    270 
    271  a {
    272    font-size: var(--font-size-small);
    273  }
    274 
    275  span {
    276    font-size: var(--font-size-xsmall);
    277  }
    278 }