tor-browser

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

_TopicSelection.scss (4358B)

      1 /* stylelint-disable max-nesting-depth */
      2 
      3 .modalOverlayOuter.active:has(.topic-selection-container) {
      4  background-color: rgba(21, 20, 26, 50%);
      5 }
      6 
      7 .topic-selection-container {
      8  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
      9 
     10  position: relative;
     11  border-radius: var(--border-radius-medium);
     12  box-shadow: $shadow-large;
     13  padding: var(--space-xxlarge);
     14  max-width: 745px;
     15  height: auto;
     16 
     17  .dismiss-button {
     18    position: absolute;
     19    appearance: none;
     20    border: none;
     21    z-index: 2;
     22    inset-block-start: 0;
     23    inset-inline: auto 0;
     24    border-radius: var(--border-radius-small);
     25    padding: 0;
     26    margin: var(--space-small);
     27    display: block;
     28    float: inline-end;
     29    background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px;
     30    height: var(--size-item-large);
     31    width: var(--size-item-large);
     32    align-self: end;
     33    // override default min-height and min-width for buttons
     34    min-height: var(--size-item-large);
     35    min-width: var(--size-item-large);
     36    -moz-context-properties: fill;
     37    fill: currentColor;
     38    transition: var(--transition);
     39 
     40    &:hover {
     41      background-color: var(--button-background-color-hover);
     42 
     43      &:active {
     44        background-color: var(--button-background-color-active)
     45      }
     46    }
     47 
     48  }
     49 
     50  .title {
     51    text-align: center;
     52    font-size: var(--font-size-xlarge);
     53    font-weight: var(--heading-font-weight);
     54    margin-block-end: var(--space-small);
     55  }
     56 
     57  .subtitle {
     58    text-align: center;
     59    margin-block: 0 var(--space-xlarge);
     60  }
     61 
     62  .modal-footer {
     63    display: flex;
     64    justify-content: space-between;
     65    align-items: center;
     66 
     67    > a {
     68      color: var(--link-color);
     69 
     70      &:hover {
     71        color: var(--link-color-hover);
     72      }
     73 
     74      &:hover:active {
     75        color: var(--link-color-active);
     76      }
     77 
     78      &:visited {
     79        color: var(--link-color-visited);
     80      }
     81    }
     82 
     83    .button-group {
     84      gap: var(--space-medium);
     85      display: flex;
     86    }
     87  }
     88 }
     89 
     90 .topic-list {
     91  list-style: none;
     92  display: flex;
     93  flex-wrap: wrap;
     94  gap: var(--space-large);
     95  margin: var(--space-xxlarge) auto;
     96  justify-content: center;
     97  width: fit-content;
     98 
     99  .topic-item {
    100    align-items: center;
    101    border-radius: var(--border-radius-circle);
    102    border: var(--border-width) solid var(--border-color-interactive);
    103    display: flex;
    104    justify-self: center;
    105    max-width: fit-content;
    106    padding-block: var(--space-xsmall);
    107    padding-inline: var(--space-xsmall) var(--space-large);
    108    position: relative;
    109 
    110    &:hover {
    111      cursor: pointer;
    112      background-color: var(--button-background-color-hover);
    113    }
    114 
    115    &:active {
    116      background-color: var(--button-background-color-active);
    117    }
    118 
    119    &:has(input:checked) {
    120      /**
    121       * @backward-compat { version 147 }
    122       *
    123       * Replace this with `--border-color-selected` once 147 hits release.
    124       */
    125      border-color: var(--color-accent-primary);
    126    }
    127 
    128    &:focus-within {
    129      outline-offset: 2px;
    130 
    131      /**
    132       * @backward-compat { version 147 }
    133       *
    134       * Replace this with `--border-color-selected` once 147 hits release.
    135       */
    136      outline: 2px solid var(--color-accent-primary);
    137    }
    138 
    139    .topic-item-label {
    140      margin-inline-end: var(--space-small);
    141    }
    142 
    143    .topic-custom-checkbox {
    144      display: flex;
    145      justify-content: center;
    146      align-items: center;
    147      width: 42px;
    148      height: 42px;
    149      border-radius: var(--border-radius-circle);
    150      background-color: var(--newtab-button-static-background);
    151      margin-inline-end: var(--space-large);
    152 
    153      .topic-icon {
    154        font-size: var(--font-size-xlarge);
    155      }
    156 
    157      .topic-checked {
    158        display: none;
    159      }
    160    }
    161 
    162    input[type='checkbox'] {
    163      height: 100%;
    164      opacity: 0;
    165      position: absolute;
    166      width: 90%;
    167 
    168      &:checked~.topic-custom-checkbox {
    169        background-color: var(--color-accent-primary);
    170        position: relative;
    171 
    172        .topic-icon {
    173          display: none;
    174        }
    175 
    176        .topic-checked {
    177          color: var(--color-white);
    178          -moz-context-properties: fill;
    179          display: block;
    180          fill: currentColor;
    181          background: url('chrome://global/skin/icons/check.svg');
    182          background-size: cover;
    183          width: 26px;
    184          height: 26px;
    185        }
    186      }
    187    }
    188  }
    189 }