tor-browser

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

_TopicsWidget.scss (2340B)

      1 /* stylelint-disable max-nesting-depth */
      2 
      3 .ds-topics-widget {
      4  display: flex;
      5  position: relative;
      6  flex-direction: column;
      7 
      8  .ds-topics-widget-header {
      9    font-size: var(--font-size-large);
     10  }
     11 
     12  hr {
     13    // Bug 2001446: We are incorrectly using a border color token as the background color, but the
     14    // intent of this element is to appear a 1px solid border line.
     15    background-color: var(--border-color-deemphasized);
     16    height: 1px;
     17    border: 0;
     18    margin: var(--space-small) 0 0;
     19  }
     20 
     21  .ds-topics-widget-list-container {
     22    flex-grow: 1;
     23 
     24    ul {
     25      margin: var(--space-large) 0 0;
     26      padding: 0;
     27      display: flex;
     28      align-items: center;
     29      grid-gap: var(--space-small);
     30      flex-wrap: wrap;
     31 
     32      li {
     33        display: flex;
     34 
     35        a {
     36          font-size: var(--font-size-small);
     37          text-decoration: none;
     38          padding: var(--space-small) var(--space-medium);
     39          background: var(--newtab-background-color-secondary);
     40          border: 1px solid var(--border-color-deemphasized);
     41          color: var(--newtab-text-primary-color);
     42          border-radius: var(--border-radius-medium);
     43 
     44          &:hover {
     45            background: var(--newtab-element-hover-color);
     46          }
     47 
     48          &:focus {
     49            outline: 0;
     50            box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
     51            transition: box-shadow 150ms;
     52          }
     53        }
     54      }
     55 
     56      .ds-topics-widget-list-overflow-item {
     57        display: flex;
     58 
     59        @media (min-width: $break-point-medium) {
     60          display: none;
     61        }
     62 
     63        @media (min-width: $break-point-widest) {
     64          display: flex;
     65        }
     66      }
     67    }
     68  }
     69 
     70  .ds-topics-widget-button {
     71    margin: var(--space-large) 0 0;
     72    font-size: inherit;
     73    text-align: center;
     74    padding: var(--space-small);
     75    border-radius: var(--border-radius-small);
     76    background-color: var(--newtab-primary-action-background-pocket);
     77    border: 0;
     78 
     79    &:hover {
     80      background: var(--newtab-primary-element-hover-pocket-color);
     81    }
     82 
     83    &:focus {
     84      outline: 0;
     85      box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket);
     86      transition: box-shadow 150ms;
     87    }
     88  }
     89 }