tor-browser

_CardSections.scss (13868B)

---

// Bug 1964453: Some styles here may appear duplicative — due to @includes and media queries, certain rules are intentionally overwritten rather than relying on cascade behavior.

@mixin section-card-small {
 grid-row: span 1;
 grid-column: span 1;
 padding: var(--space-large);

 &.refined-cards.ds-card.sections-card-ui {
   box-shadow: var(--box-shadow-card);

   &:hover {
     box-shadow: var(--box-shadow-card-hover);
   }
 }

 &.refined-cards {
   .ds-card-link {
     padding: var(--space-small);
     flex-grow: 0;
   }

   .img-wrapper {
     width: 110px;
     height: 117px;
   }

   .meta {
     padding: 0;
     min-height: 117px;

     .info-wrap {
       flex-grow: 1
     }

     .sections-card-footer {
       max-width: 114px;
       min-height: unset;
       position: initial;
       margin-block-start: auto;

       .source {
         word-break: normal;
         width: 114px;
       }
     }
   }

   .card-stp-button-hover-background {
     background: transparent;
   }

   .card-stp-button-position-wrapper {
     // context menu should match the padding for the parent
     inset-inline-end: var(--space-small);
     inset-block-end: var(--space-small);
   }

   .context-menu-position-container .context-menu-button {
     height: 32px;
     width: 32px;
   }
 }

 &.ds-card.sections-card-ui {
   padding: unset;
 }

 .ds-card-link {
   display: flex;
   flex-direction: row;
   position: relative;
   align-items: center;
   gap: var(--space-medium);
   padding: var(--space-large);
 }

 .img-wrapper {
   width: 100px;
   flex-shrink: 0;
   flex-grow: 0;
   aspect-ratio: 5/6;

   .ds-image.img {
     width: 100%;
     height: 100%;
     padding-block-start: 0;
     min-width: 100%;
   }

   .ds-image.img img {
     width: 100%;
     height: 100%;
     border-radius: var(--border-radius-medium) var(--border-radius-medium);
     object-fit: cover;
   }
 }

 &:not(.placeholder) {
   .img-wrapper > .ds-image.img > img {
     width: 100%;
     border-radius: var(--border-radius-medium) var(--border-radius-medium);
   }
 }

 .meta {
   padding: 0;
   align-self: flex-start;
   min-height: 125px;

   .info-wrap .title {
     font-size: var(--font-size-small);
     margin-block: 0;
     -webkit-line-clamp: 4;
   }

   .sections-card-footer {
     margin-block-start: var(--space-xxsmall);
   }
 }

 .card-stp-button-hover-background {
   padding-block-start: unset;
 }

 .card-stp-button-position-wrapper {
   inset-inline-end: var(--space-small);
 }
}

@mixin section-card-medium {
 grid-row: span 2;
 grid-column: span 1;
 flex-direction: column;
 padding: 0;
 align-items: initial;
 gap: initial;

 &.refined-cards.ds-card.sections-card-ui {
   height: unset;
   box-shadow: var(--box-shadow-card);

   &:hover {
     box-shadow: var(--box-shadow-card-hover);
   }
 }

 &.refined-cards {
   .ds-card-link {
     padding: unset;
     flex-grow: 1;
   }

   .img-wrapper {
     width: 100%;
     height: 160px;
   }

   &.ds-spoc-rectangle {
     .img-wrapper {
       height: 250px;
     }
   }

   .meta {
     padding: var(--space-large) var(--space-large) var(--space-small);
     min-height: unset;

     .info-wrap {
       flex-grow: initial;
     }

     .sections-card-footer {
       max-width: 225px;
       inset-inline-end: initial;
       inset-block-end: initial;
       min-height: 28px;

       .source-wrapper {
         max-width: 245px;
       }

       .source {
         width: 217px;
       }
     }

     &:has(.story-footer .story-sponsored-label) {
       .sections-card-footer {
         display: none;
       }

       .story-footer {
         margin-block: auto 0;

       }
     }
   }

   .context-menu-position-container .context-menu-button {
     height: 32px;
     width: 32px;
   }

   .card-stp-button-position-wrapper {
     // context menu should match the padding for the parent
     inset-inline-end: var(--space-large);
     inset-block-end: var(--space-small);
   }

   .card-stp-button-hover-background {
     background: transparent;
   }

   &:hover,
   &:active,
   &:focus-within,
   &.active {
     .meta {
       .source-wrapper {
         max-width: 175px;
       }

       .source-wrapper .source {
         display: block;
         width: unset;
       }
     }
   }

 }

 .card-stp-button-position-wrapper {
   inset-inline-end: var(--space-small);
 }

 .card-stp-button-hover-background {
   background: transparent;
 }

 .ds-card-link {
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: 0;
 }

 .img-wrapper {
   width: 100%;
   position: relative;
   // reset values inherited from small card mixin
   flex-grow: 0;
   flex-shrink: 0;
   aspect-ratio: initial;
 }

 &:not(.placeholder) {
   .img-wrapper > .ds-image.img > img {
     border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
   }
 }

 .meta {
   padding: var(--space-medium) var(--space-large);

   .info-wrap {
     flex-grow: initial;
     // flex-grow: 1;/

     .title {
       -webkit-line-clamp: 3;
       margin-block: 0 var(--space-small);
       font-size: var(--font-size-root);
     }

     .excerpt {
       display: block;
       -webkit-line-clamp: 3;
     }
   }

   .sections-card-footer {
     margin-block-start: auto;
   }
 }
}

@mixin section-card-large {
 grid-row: span 2;
 grid-column: span 2;

 &.refined-cards.ds-card.sections-card-ui {
   box-shadow: var(--box-shadow-card);

   @media ($break-point-layout-variant <=width < $break-point-widest),
     (min-width: $break-point-sections-variant) {
     .ds-card-link {
       gap: var(--space-large);
       padding: var(--space-large);
     }

     .meta {
       padding: 0;
       color: var(--newtab-text-primary-color);

       .info-wrap .excerpt {
         color: var(--text-color-deemphasized);
       }

       .sections-card-footer {
         max-width: 334px;

         .source-wrapper {
           max-width: 245px;
         }
       }
     }

     .card-stp-button-position-wrapper {
       inset-inline-end: var(--space-large);
       inset-block-end: var(--space-large);
     }

     &:hover,
     &:active,
     &:focus-visible,
     &.active {
       .meta .source-wrapper .source {
         display: block;
       }
     }
   }

   &:hover {
     box-shadow: var(--box-shadow-card-hover);
   }
 }

 &.ds-card.sections-card-ui {
   @media ($break-point-layout-variant <=width < $break-point-widest),
     (min-width: $break-point-sections-variant) {
     align-content: flex-start;
     justify-content: center;

     .ds-card-link {
       flex-direction: row;
       gap: var(--space-xlarge);
       padding: var(--space-xxlarge);
       flex-grow: 0;
     }

     .img-wrapper {
       width: 190px;
       height: 250px;
     }

     .ds-image.img {
       aspect-ratio: 1/1;
       width: 100%;
       height: 100%;

       img {
         border-radius: var(--border-radius-medium);
       }
     }

     .meta {
       padding: 0;
       min-height: 220px;

       .title {
         -webkit-line-clamp: 3;
         font-size: var(--font-size-large);
         font-weight: var(--heading-font-weight);
         margin-block: 0 var(--space-small);
       }

       .excerpt {
         -webkit-line-clamp: 4;
         font-size: var(--font-size-root);
       }

       .sections-card-footer {
         margin-block-start: auto;
       }
     }

     .card-stp-button-hover-background {
       background: transparent;
       inset-inline-start: 0;
     }
   }
 }
}

.has-sections-grid .ds-outer-wrapper-breakpoint-override {
 .ds-layout-topsites {
   position: relative;

   .top-sites-list-wrapper {
     margin-inline: auto;
     width: 100%;
   }

   .hide-for-narrow {
     display: none;

     @media (min-width: $break-point-large) {
       display: none;
     }

     @media (min-width: $break-point-widest) {
       display: inline-block;
     }
   }
 }
}

.has-sections-grid {
 .ds-outer-wrapper-breakpoint-override main {
   width: auto;

   .ds-card {
     // card should take up availible space in grid
     width: 100%;
     height: 100%;
   }

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

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

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

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

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

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

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

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

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

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

.ds-section-wrapper {
 padding-inline: 0;
 position: relative;

 .ds-section {
   padding-block-end: var(--space-medium);

   &:last-child {
     padding-block-end: 0;
   }

   .section-heading {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-block: var(--space-small) var(--space-medium);

     .section-heading-inline-start {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
     }
   }

   .section-title {
     @include wallpaper-contrast-fix;

     font-weight: var(--heading-font-weight);
     font-size: var(--font-size-xlarge);
     color: var(--newtab-contextual-text-primary-color);
     margin-block: 0;

     @media (min-width: $break-point-layout-variant) {
       font-size: var(--font-size-xxlarge);
     }
   }

   .section-subtitle {
     @include wallpaper-contrast-fix;

     color: var(--newtab-contextual-text-primary-color);
     margin-block: var(--space-xsmall) 0;
     font-size: var(--font-size-root);
   }
 }

 .section-context-wrapper {
   @include wallpaper-contrast-fix;

   display: flex;
   justify-content: space-between;
   align-items: center;
   column-gap: var(--space-small);
 }

 .section-follow {
   position: relative;

   .section-button-following-text {
     display: none;
   }

   .section-button-unfollow-text {
     display: none;
   }

   &.following {
     .section-button-follow-text {
       display: none;
     }

     .section-button-following-text {
       display: block;
     }
   }

   &.following:hover {
     .section-button-following-text {
       display: none;
     }

     .section-button-unfollow-text {
       display: block;
     }
   }
 }
}

.ds-section-grid.ds-card-grid {
 grid-gap: var(--space-large);
 grid-template-columns: repeat(1, 300px);

 .ds-image {
   &.image-2,
   &.image-3,
   &.image-4 {
     display: none;
   }

   &.image-1 {
     display: block;
   }
 }

 @media (min-width: $break-point-medium) {
   @for $i from 0 through 16 {
     .col-1-position-#{$i} {
       order: $i;
     }
   }

   .col-1-small {
     @include section-card-small;
   }

   .col-1-medium {
     @include section-card-medium;
   }

   .col-1-large {
     @include section-card-large;
   }

   .col-1-show-excerpt {
     .meta .info-wrap .excerpt {
       display: block;
     }
   }

   .col-1-hide-excerpt {
     .meta .info-wrap .excerpt {
       display: none;
     }
   }
 }

 @media (min-width: $break-point-layout-variant) {
   grid-template-columns: repeat(2, 300px);

   @for $i from 0 through 16 {
     .col-2-position-#{$i} {
       order: $i;
     }
   }

   .col-2-small {
     @include section-card-small;
   }

   .col-2-medium {
     @include section-card-medium;
   }

   .col-2-large {
     @include section-card-large;
   }

   .col-2-show-excerpt {
     .meta .info-wrap .excerpt {
       display: block;
     }
   }

   .col-2-hide-excerpt {
     .meta .info-wrap .excerpt {
       display: none;
     }
   }

   .ds-image {
     &.image-1,
     &.image-3,
     &.image-4 {
       display: none;
     }

     &.image-2 {
       display: block;
     }
   }
 }

 @media (min-width: $break-point-widest) {
   grid-template-columns: repeat(3, 300px);
   gap: var(--space-large);

   @for $i from 0 through 16 {
     .col-3-position-#{$i} {
       order: $i;
     }
   }

   .col-3-small {
     @include section-card-small;
   }

   .col-3-medium {
     @include section-card-medium;
   }

   .col-3-large {
     @include section-card-large;
   }

   .col-3-show-excerpt {
     .meta .info-wrap .excerpt {
       display: block;
     }
   }

   .col-3-hide-excerpt {
     .meta .info-wrap .excerpt {
       display: none;
     }
   }

   .ds-image {
     &.image-1,
     &.image-2,
     &.image-4 {
       display: none;
     }

     &.image-3 {
       display: block;
     }
   }
 }

 @media (min-width: $break-point-sections-variant) {
   grid-template-columns: repeat(4, 300px);

   @for $i from 0 through 16 {
     .col-4-position-#{$i} {
       order: $i;
     }
   }

   .col-4-small {
     @include section-card-small;
   }

   .col-4-medium {
     @include section-card-medium;
   }

   .col-4-large {
     @include section-card-large;
   }

   .col-4-show-excerpt {
     .meta .info-wrap .excerpt {
       display: block;
     }
   }

   .col-4-hide-excerpt {
     .meta .info-wrap .excerpt {
       display: none;
     }
   }

   .ds-image {
     &.image-1,
     &.image-2,
     &.image-3 {
       display: none;
     }

     &.image-4 {
       display: block;
     }
   }
 }
}