tor-browser

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

_TopSites.scss (1655B)

      1 /* stylelint-disable max-nesting-depth */
      2 
      3 .outer-wrapper {
      4  .ds-top-sites {
      5    .collapsible-section {
      6      margin-block-end: var(--space-large);
      7    }
      8 
      9    .top-sites {
     10      .top-site-outer {
     11        .top-site-inner > a:is(.active, :focus) {
     12          .tile {
     13            @include ds-focus;
     14          }
     15 
     16          .icon-pin-small {
     17            opacity: 1;
     18          }
     19        }
     20 
     21        .top-site-inner > a:is(:hover) .top-site-inner {
     22          @include ds-fade-in(var(--newtab-background-color-secondary));
     23        }
     24      }
     25 
     26      .top-sites-list {
     27        width: fit-content;
     28        margin: 0 auto;
     29      }
     30    }
     31  }
     32 }
     33 
     34 // Size overrides for topsites in the 2/3 view.
     35 .ds-column-5,
     36 .ds-column-6,
     37 .ds-column-7,
     38 .ds-column-8 {
     39  .ds-top-sites {
     40    .top-site-outer {
     41      padding: 0 var(--space-small);
     42    }
     43 
     44    .top-sites-list {
     45      margin: 0 calc(var(--space-small) * -1);
     46    }
     47 
     48    .top-site-inner {
     49      --leftPanelIconWidth: 84.67px;
     50 
     51      .tile {
     52        width: var(--leftPanelIconWidth);
     53        height: var(--leftPanelIconWidth);
     54      }
     55 
     56      .title {
     57        width: var(--leftPanelIconWidth);
     58      }
     59    }
     60  }
     61 }
     62 
     63 // Size overrides for topsites in the 1/3 view.
     64 .ds-column-1,
     65 .ds-column-2,
     66 .ds-column-3,
     67 .ds-column-4 {
     68  .ds-top-sites {
     69    .top-site-outer {
     70      padding: 0 var(--space-small);
     71    }
     72 
     73    .top-sites-list {
     74      margin: 0 calc(var(--space-small) * -1);
     75    }
     76 
     77    .top-site-inner {
     78      --rightPanelIconWidth: 82.67px;
     79 
     80      .tile {
     81        width: var(--rightPanelIconWidth);
     82        height: var(--rightPanelIconWidth);
     83      }
     84 
     85      .title {
     86        width: var(--rightPanelIconWidth);
     87      }
     88    }
     89  }
     90 }