tor-browser

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

password-rules-tooltip.css (2209B)


      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 https://mozilla.org/MPL/2.0/. */
      4 
      5 #password-rules-wrapper[popover] {
      6  margin: 0;
      7  padding: var(--space-large) var(--space-xlarge);
      8  background-color: var(--background-color-box);
      9  border: var(--border-width) solid var(--border-color-interactive);
     10  border-radius: var(--border-radius-small);
     11  overflow: visible;
     12 
     13  ul {
     14    margin: 0;
     15    padding: 0;
     16    text-align: start;
     17  }
     18 
     19  li {
     20    list-style-image: url(chrome://global/skin/icons/check.svg);
     21    list-style-position: inside;
     22    -moz-context-properties: fill;
     23    fill: currentColor;
     24 
     25    &:last-child {
     26      margin-block-start: 0.5rem;
     27      margin-block-end: 0.5rem;
     28    }
     29 
     30    span {
     31      position: relative;
     32      top: -3px;
     33    }
     34  }
     35 
     36  .warning {
     37    -moz-context-properties: fill, stroke;
     38    color: var(--icon-color-critical);
     39    fill: var(--icon-color-critical);
     40    stroke: var(--icon-color-critical);
     41    list-style-image: url(chrome://global/skin/icons/warning.svg);
     42  }
     43 
     44  /* Arrow */
     45  &::before {
     46    width: 0.75rem;
     47    height: 0.75rem;
     48    position: absolute;
     49    content: "";
     50    background-color: var(--background-color-box);
     51    border-block-start: var(--border-width) solid var(--border-color-interactive);
     52    border-inline-start: var(--border-width) solid var(--border-color-interactive);
     53  }
     54 
     55  /* Default, not zoomed in */
     56  @media (min-width: 1200px) {
     57    &::before {
     58      inset-inline-start: -0.4rem;
     59      inset-block-start: 1.25rem;
     60      rotate: -45deg;
     61    }
     62 
     63    &:dir(rtl)::before {
     64      rotate: 45deg;
     65    }
     66  }
     67 
     68  /* Zoomed in */
     69  @media (max-width: 1200px) {
     70    &::before {
     71      inset-inline-start: 1.25rem;
     72      inset-block-start: -0.46rem;
     73      rotate: 45deg;
     74    }
     75 
     76    &:dir(rtl)::before {
     77      rotate: -45deg;
     78    }
     79  }
     80 }
     81 
     82 #password-rules-header {
     83  margin-block-start: 0;
     84  font-size: 14px;
     85  font-weight: var(--heading-font-weight);
     86 }
     87 
     88 .rule-description {
     89  font-size: 12px;
     90 }
     91 
     92 @media (min-width: 1200px) {
     93  :host([embedded-fx-backup-opt-in]) {
     94    #password-rules-wrapper {
     95      margin: 0.5rem -100px;
     96    }
     97  }
     98 }