tor-browser

_Base.scss (4653B)

---

.outer-wrapper {
 color: var(--newtab-text-primary-color);
 display: flex;
 flex-grow: 1;
 min-height: 100vh;
 padding: var(--space-xxlarge);

 &.ds-outer-wrapper-breakpoint-override {
   padding: var(--space-xxlarge) 0;

   @media(min-width: $break-point-medium) {
     padding: var(--space-xxlarge);
   }
 }

 &.only-search {
   display: block;
   // Bug 1967304 - Large number (128px)
   padding-block-start: calc(var(--space-xxlarge) * 4);
 }

 a {
   color: var(--newtab-primary-action-background);
 }
}

main {
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 justify-content: center;
 width: $wrapper-default-width;
 padding: 0;

 &.newtab-main {
   min-width: min-content;
 }

 .vertical-center-wrapper {
   margin: auto 0;
 }

 section {
   margin-block-end: var(--space-medium);
   position: relative;
 }

 .hide-main & {
   visibility: hidden;
 }

 @media (min-width: $break-point-medium) {
   width: $wrapper-max-width-medium;
 }

 @media (min-width: $break-point-large) {
   width: $wrapper-max-width-large;
 }

 @media (min-width: $break-point-widest) {
   width: $wrapper-max-width-widest;
 }
}

// Edge case for if search is turned off (compact layout)
.no-search main {
 margin-block-start: var(--space-xxlarge);
}

.ds-outer-wrapper-search-alignment {
 main {
   // This override is to ensure while Discovery Stream loads,
   // the search bar does not jump around. (it sticks to the top)
   margin: 0 auto;
 }
}

.ds-outer-wrapper-breakpoint-override {
 main {
   width: auto;
   padding-block-end: 0;

   .ds-card {
     // Note: This differs when the Sections layout is enabled
     width: var(--newtab-card-grid-layout-width);
   }

   .ds-card-grid:not(.ds-section-grid) {
     grid-gap: var(--space-large);

     &.empty {
       grid-template-columns: auto;
     }
   }

   .body-wrapper {
     width: 346px;
     margin: 0 auto;
   }

   @media (min-width: $break-point-medium) {
     width: auto;

     .ds-card-grid:not(.ds-section-grid) {
       grid-template-columns: repeat(1, 1fr);
     }

     .body-wrapper {
       width: 346px;
     }
   }

   @media (min-width: $break-point-layout-variant) {
     width: auto;

     .ds-card-grid:not(.ds-section-grid) {
       grid-template-columns: repeat(2, 1fr);
     }

     .body-wrapper {
       width: 659px;
     }
   }

   @media (min-width: $break-point-widest) {
     width: auto;

     .ds-card-grid:not(.ds-section-grid) {
       grid-template-columns: repeat(3, 1fr);
       grid-gap: var(--space-xlarge);
     }

     .body-wrapper {
       width: 989px;
     }
   }

   @media (min-width: $break-point-ultra-wide) {
     width: auto;

     .body-wrapper {
       display: flex;
       flex-direction: column;
       width: 1311px;
     }

     .ds-highlights .card-outer {
       min-width: 216px;
     }

     .ds-card-grid:not(.ds-section-grid) {
       grid-template-columns: repeat(4, 1fr);
     }
   }

 }
}

.base-content-fallback {
 // Make the error message be centered against the viewport
 height: 100vh;
}

.body-wrapper {
 // Hide certain elements so the page structure is fixed, e.g., placeholders,
 // while avoiding flashes of changing content, e.g., icons and text
 $selectors-to-hide: '.section-title, .sections-list .section:last-of-type, .topics';

 #{$selectors-to-hide} {
   opacity: 0;
 }

 &.on {
   #{$selectors-to-hide} {
     opacity: 1;
   }
 }
}

.non-collapsible-section {
 padding: 0;
}

.prefs-button {
 button {
   background-color: transparent;
   border: 0;
   border-radius: var(--button-border-radius);
   cursor: pointer;
   padding: var(--space-large);
   position: fixed;
   inset-inline-end: var(--space-large);
   inset-block-start: var(--space-large);
   z-index: 1000;

   &:hover,
   &:focus {
     background-color: var(--newtab-element-hover-color);
   }

   &:active {
     background-color: var(--newtab-element-active-color);
   }
 }
}

.wallpaper-attribution {
 padding: 0 var(--space-xlarge);
 font-size: var(--font-size-small);
 color: var(--newtab-contextual-text-primary-color);
 position: absolute;
 inset-block-end: var(--space-large);
 inset-inline-start: 0;

 // Contrast fix for users who have wallpapers set
 @include wallpaper-contrast-fix;

 &.theme-light {
   display: inline-block;

   @include dark-theme-only {
     display: none;
   }
 }

 &.theme-dark {
   display: none;

   @include dark-theme-only {
     display: inline-block;
   }
 }

 a {
   color: inherit;

   &:hover {
     text-decoration: none;
   }
 }
}