tor-browser

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

urlbar-dynamic-results.css (8018B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 /**
      6 * Firefox Suggest contextual opt-in
      7 */
      8 
      9 .urlbarView-row[dynamicType="quickSuggestContextualOptIn"] {
     10  background-color: color-mix(in srgb, currentColor 3%, transparent);
     11 
     12  > .urlbarView-row-inner {
     13    align-items: center;
     14 
     15    > .urlbarView-no-wrap {
     16      align-items: center;
     17 
     18      > .urlbarView-favicon {
     19        background-color: color-mix(in srgb, currentColor 3%, transparent);
     20        min-width: 32px;
     21        height: 32px;
     22        padding: 16px;
     23        margin-inline: 0 0.7em;
     24      }
     25    }
     26  }
     27 
     28  .urlbarView-results[wrap] > &,
     29  .search-one-offs[wrap] > .urlbarView-quickSuggestContextualOptIn-one-off-container > & {
     30    display: block;
     31    text-align: end;
     32    white-space: normal;
     33 
     34    > .urlbarView-row-inner {
     35      display: block;
     36      text-align: start;
     37    }
     38 
     39    > .urlbarView-button {
     40      margin-bottom: var(--urlbarView-item-block-padding);
     41    }
     42  }
     43 }
     44 
     45 .urlbarView-dynamic-quickSuggestContextualOptIn-text-container {
     46  display: flex;
     47  flex-direction: column;
     48  white-space: normal;
     49 }
     50 
     51 .urlbarView-dynamic-quickSuggestContextualOptIn-title {
     52  font-weight: var(--heading-font-weight);
     53 }
     54 
     55 .urlbarView-dynamic-quickSuggestContextualOptIn-description {
     56  margin-block-start: 2px;
     57  color: var(--urlbarView-secondary-text-color);
     58  font-size: var(--urlbarView-small-font-size);
     59 }
     60 
     61 .urlbarView-dynamic-quickSuggestContextualOptIn-learn_more {
     62  white-space: nowrap;
     63 
     64  &[selected] {
     65    border-radius: var(--border-radius-xsmall);
     66    outline: var(--focus-outline);
     67    outline-offset: var(--focus-outline-offset);
     68  }
     69 }
     70 
     71 .urlbarView-quickSuggestContextualOptIn-one-off-container {
     72  border-top: 1px solid var(--urlbarView-separator-color);
     73  margin-top: 10px;
     74  padding-top: 5px;
     75  width: 100%;
     76 }
     77 
     78 /**
     79 * Tab To Search onboarding
     80 */
     81 
     82 .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
     83  min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
     84  align-items: center;
     85 
     86  > .urlbarView-no-wrap {
     87    align-items: center;
     88 
     89    > .urlbarView-favicon {
     90      min-width: 32px;
     91      height: 32px;
     92      -moz-context-properties: fill;
     93    }
     94  }
     95 
     96  &:not([selected]) > .urlbarView-no-wrap {
     97    > .urlbarView-favicon {
     98      color: var(--link-color);
     99    }
    100 
    101    > .urlbarView-dynamic-onboardTabToSearch-text-container > .urlbarView-dynamic-onboardTabToSearch-description {
    102      color: var(--urlbarView-secondary-text-color);
    103    }
    104  }
    105 }
    106 
    107 .urlbarView-row[dynamicType="onboardTabToSearch"][selected] {
    108  fill-opacity: 1;
    109 }
    110 
    111 .urlbarView-dynamic-onboardTabToSearch-text-container {
    112  display: flex;
    113  flex-direction: column;
    114 }
    115 
    116 /* First row of text. */
    117 .urlbarView-dynamic-onboardTabToSearch-first-row-container {
    118  display: flex;
    119  align-items: baseline;
    120 }
    121 
    122 .urlbarView-dynamic-onboardTabToSearch-description {
    123  margin-block-start: 2px;
    124 }
    125 
    126 /* prettier-ignore */
    127 .urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container {
    128  > .urlbarView-dynamic-onboardTabToSearch-first-row-container {
    129    flex-wrap: wrap;
    130 
    131    > .urlbarView-action {
    132      max-width: 100%;
    133      flex-basis: 100%;
    134    }
    135 
    136    > .urlbarView-title-separator {
    137      visibility: collapse;
    138    }
    139  }
    140 
    141  > .urlbarView-dynamic-onboardTabToSearch-description {
    142    max-width: 100%;
    143    flex-basis: 100%;
    144  }
    145 }
    146 
    147 /**
    148 * Calculator & Unit Conversion
    149 */
    150 
    151 .urlbarView-dynamic-calculator-action,
    152 .urlbarView-dynamic-unitConversion-action {
    153  font-size: var(--urlbarView-small-font-size);
    154  font-weight: normal;
    155 
    156  .urlbarView-row:not(:hover, [selected]) & {
    157    visibility: collapse;
    158  }
    159 
    160  &::before {
    161    content: "\2014";
    162    margin: 0 0.4em;
    163    opacity: 0.6;
    164  }
    165 }
    166 
    167 /**
    168 * Actions
    169 */
    170 
    171 .urlbarView-row[dynamicType="actions"] > .urlbarView-row-inner {
    172  /* Reduce the padding to 2px so the outline does not get
    173     cropped and the actions + outline are aligned with the
    174     rest of the results */
    175  padding-inline: 2px;
    176 }
    177 
    178 .urlbarView-dynamic-actions-buttons {
    179  display: inline-flex;
    180 }
    181 
    182 .urlbarView-press-tab-label {
    183  margin-inline-end: var(--space-medium);
    184  font-size: var(--urlbarView-small-font-size);
    185  color: var(--urlbarView-secondary-text-color);
    186  align-self: center;
    187 }
    188 
    189 /**
    190 * Site-specific search
    191 */
    192 
    193 .urlbarView-title-separator.urlbarView-dynamic-contextualSearch-separator {
    194  display: block !important /* override .urlbarView-title-separator rules */;
    195 }
    196 
    197 .urlbarView-dynamic-contextualSearch-description {
    198  font-size: var(--urlbarView-small-font-size);
    199 
    200  .urlbarView-row:not([selected]) & {
    201    color: var(--urlbarView-action-color);
    202  }
    203 }
    204 
    205 /**
    206 * Weather
    207 */
    208 
    209 .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
    210  align-items: center;
    211 }
    212 
    213 .urlbarView-dynamic-weather-currentConditions {
    214  color: var(--urlbar-box-text-color);
    215  background-color: var(--urlbar-box-focus-bgcolor);
    216  padding: 0.61em 0.61em 0.84em;
    217  margin-inline-end: 0.92em;
    218  border-radius: var(--border-radius-xsmall);
    219  text-align: center;
    220 
    221  .urlbarView-row[dynamicType="weather"]:is([selected], :hover) > .urlbarView-row-inner > & {
    222    color: var(--urlbarView-result-button-selected-color);
    223    background-color: var(--urlbarView-result-button-selected-background-color);
    224  }
    225 }
    226 
    227 .urlbarView-dynamic-weather-currently {
    228  font-size: var(--urlbarView-small-font-size);
    229  margin-bottom: 0.53em;
    230 }
    231 
    232 .urlbarView-dynamic-weather-temperature {
    233  margin-inline-end: 0.3em;
    234  font-weight: var(--font-weight-semibold);
    235  font-size: 1.385em;
    236  vertical-align: middle;
    237 }
    238 
    239 .urlbarView-dynamic-weather-weatherIcon {
    240  width: 22px;
    241  height: 23px;
    242  vertical-align: middle;
    243 
    244  @media (prefers-contrast) {
    245    -moz-context-properties: fill, stroke;
    246    fill: currentColor;
    247    stroke: currentColor;
    248  }
    249 }
    250 
    251 .urlbarView-dynamic-weather-summary {
    252  flex-grow: 1;
    253  flex-shrink: 1;
    254  min-width: 0;
    255 }
    256 
    257 .urlbarView-dynamic-weather-top {
    258  display: flex;
    259  align-items: center;
    260 }
    261 
    262 .urlbarView-dynamic-weather-topNoWrap {
    263  display: inline-flex;
    264  align-items: center;
    265 }
    266 
    267 .urlbarView-results[wrap] > .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
    268  flex-wrap: nowrap;
    269 
    270  > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top {
    271    flex-wrap: wrap;
    272 
    273    > .urlbarView-dynamic-weather-topNoWrap > .urlbarView-dynamic-weather-titleSeparator {
    274      display: none;
    275    }
    276  }
    277 }
    278 
    279 .urlbarView-dynamic-weather-middle {
    280  font-size: var(--urlbarView-small-font-size);
    281  display: flex;
    282  align-items: center;
    283  flex-wrap: wrap;
    284 }
    285 
    286 .urlbarView-dynamic-weather-middleNoWrap {
    287  display: inline-flex;
    288  align-items: center;
    289 
    290  /* When middleNoWrap has overflowed, we want to hide the summaryTextSeparator.
    291     We also want to keep the overflow state stable without it going back to
    292     an underflow state. This is why we are using `visibility: hidden` so the
    293     space is allocated for the summaryTextSeparator and highLow but they are
    294     not visible on the page. Thus, keeping the middleNoWrap in an overflow
    295     state while hiding the summaryTextSeparator.
    296   */
    297  &[overflow] > :is(.urlbarView-dynamic-weather-summaryTextSeparator, .urlbarView-dynamic-weather-highLow) {
    298    visibility: hidden;
    299  }
    300 
    301  /* The highLowWrap remains hidden when middleNoWrap is not overflowed. Once it
    302     has overflowed, we display the highLowWrap element.
    303  */
    304  &:not([overflow]) + .urlbarView-dynamic-weather-highLowWrap {
    305    display: none;
    306  }
    307 }
    308 
    309 .urlbarView-dynamic-weather-summaryTextSeparator::before {
    310  content: "\00B7";
    311  margin: 0.25em;
    312 }
    313 
    314 .urlbarView-dynamic-weather-bottom {
    315  font-size: var(--urlbarView-small-font-size);
    316  margin-top: 0.4em;
    317 
    318  .urlbarView-row[dynamicType="weather"]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & {
    319    opacity: 0.6;
    320  }
    321 }