tor-browser

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

_InterestPicker.scss (2844B)

      1 .inline-selection-wrapper.ds-section {
      2  // Maintain the gap between the inline topic picker and the next section
      3  // in line with how sections are spaced from each other.
      4 
      5  .section-heading {
      6    margin-block: var(--space-medium);
      7  }
      8 
      9  .section-subtitle {
     10    color: var(--newtab-contextual-text-primary-color);
     11  }
     12 
     13  // Make sure the "Learn how..." link at the bottom of the block
     14  // doesn't push the next section down too much.
     15  .learn-more-copy {
     16    @include wallpaper-contrast-fix;
     17 
     18    margin-block-end: 0;
     19 
     20    a:focus-visible {
     21      outline: var(--focus-outline);
     22      outline-offset: var(--focus-outline-offset);
     23    }
     24  }
     25 
     26  // A flat list of topics
     27  .topic-list {
     28    list-style: none;
     29    display: flex;
     30    flex-wrap: wrap;
     31    row-gap: calc(1.25 * var(--space-small));
     32    column-gap: var(--space-small);
     33    justify-content: flex-start;
     34    margin: var(--space-small) 0;
     35    padding-inline-start: 0;
     36    width: fit-content;
     37 
     38    li {
     39      align-items: center;
     40      display: flex;
     41      justify-self: flex-start;
     42      max-width: fit-content;
     43      position: relative;
     44    }
     45 
     46    // Labels play the role of visible button-like elements with topic names.
     47    // The colours deviate slightly from New Tab theme colours:
     48    // there is a sharper contrast between background and text colors.
     49    li>label {
     50      background-color: var(--newtab-background-card);
     51      border: var(--border-width) solid var(--border-color-interactive);
     52      border-radius: var(--border-radius-circle);
     53      color: var(--newtab-text-primary-color);
     54      padding: var(--space-small) calc(1.25 * var(--space-small)) var(--space-small) var(--space-xsmall);
     55 
     56      input[type='checkbox'] {
     57        outline: none;
     58        appearance: none;
     59      }
     60 
     61      .topic-item-icon {
     62        -moz-context-properties: fill;
     63        color: var(--newtab-text-primary-color);
     64        fill: currentColor;
     65        margin-inline-start: var(--space-small);
     66        margin-block-start: calc(-0.75 * var(--space-xsmall));
     67      }
     68 
     69      &:hover {
     70        background-color: var(--newtab-button-static-hover-background);
     71        cursor: pointer;
     72      }
     73 
     74      &:hover:active {
     75        background-color: var(--newtab-button-static-active-background);
     76      }
     77 
     78      &:has(input:checked) {
     79        background-color: var(--color-accent-primary);
     80 
     81        /**
     82         * @backward-compat { version 147 }
     83         *
     84         * Replace this with `--border-color-selected` once 147 hits release.
     85         */
     86        border-color: var(--color-accent-primary);
     87        color: var(--button-text-color-primary);
     88      }
     89 
     90      &:has(input:checked) .topic-item-icon {
     91        color: var(--button-text-color-primary);
     92      }
     93 
     94      &:has(input:focus-visible) {
     95        outline-offset: var(--focus-outline-offset);
     96        outline: var(--focus-outline);
     97      }
     98    }
     99  }
    100 }