tor-browser

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

_ModalOverlay.scss (2156B)

      1 // Variable for the about:welcome modal scrollbars
      2 $modal-scrollbar-z-index: 1100;
      3 
      4 .activity-stream {
      5  &.modal-open {
      6    overflow: hidden;
      7  }
      8 }
      9 
     10 .modalOverlayOuter {
     11  background: var(--newtab-overlay-color);
     12  height: 100%;
     13  position: fixed;
     14  inset-block-start: 0;
     15  inset-inline-start: 0;
     16  width: 100%;
     17  display: none;
     18  z-index: $modal-scrollbar-z-index;
     19  overflow: auto;
     20 
     21  &.active {
     22    display: flex;
     23  }
     24 }
     25 
     26 .modalOverlayInner {
     27  min-width: min-content;
     28  width: 100%;
     29  max-width: 960px;
     30  position: relative;
     31  margin: auto;
     32  background: var(--newtab-background-color-secondary);
     33  box-shadow: $shadow-large;
     34  border-radius: var(--border-radius-small);
     35  display: none;
     36  z-index: $modal-scrollbar-z-index;
     37 
     38  // modal takes over entire screen
     39  @media(width <= 960px) {
     40    height: 100%;
     41    inset-block-start: 0;
     42    inset-inline-start: 0;
     43    box-shadow: none;
     44    border-radius: 0;
     45  }
     46 
     47  &.active {
     48    display: block;
     49  }
     50 
     51  h2 {
     52    color: var(--newtab-text-primary-color);
     53    text-align: center;
     54    margin-block-start: var(--space-xxlarge);
     55    font-size: var(--font-size-xxlarge);
     56 
     57    @media(width <= 960px) {
     58      // Bug 1967304 - Large number (96px)
     59      margin-block-start: calc(var(--space-xlarge) * 4);
     60    }
     61 
     62    @media(width <= 850px) {
     63      margin-block-start: var(--space-xxlarge);
     64    }
     65  }
     66 
     67  .footer {
     68    border-block-start: 1px solid var(--border-color);
     69    border-radius: var(--border-radius-small);
     70    height: 70px;
     71    width: 100%;
     72    position: absolute;
     73    inset-block-end: 0;
     74    text-align: center;
     75    background-color: $white;
     76 
     77    // if modal is short enough, footer becomes sticky
     78    @media(width <= 850px) and (height <= 730px) {
     79      position: sticky;
     80    }
     81 
     82    // if modal is narrow enough, footer becomes sticky
     83    @media(width <= 650px) and (height <= 600px) {
     84      position: sticky;
     85    }
     86 
     87    .modalButton {
     88      margin-block-start: var(--space-large);
     89      min-width: 150px;
     90      height: 30px;
     91      padding: var(--space-xsmall) var(--space-xxlarge);
     92      font-size: inherit;
     93 
     94      &:focus,
     95      &.active,
     96      &:hover {
     97        @include fade-in-card;
     98      }
     99    }
    100  }
    101 }