client/src/app/+videos/+video-watch/shared/recommendations/recommended-videos.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .title-page-container {
   5   display: flex;
   6   justify-content: space-between;
   7   align-items: baseline;
   8   margin-bottom: 25px;
   9   flex-wrap: wrap-reverse;
  10
  11   .title-page.active,
  12   .title-page.title-page-single {
  13     @include margin-right(.5rem !important);
  14
  15     margin-bottom: unset;
  16   }
  17 }
  18
  19 .title-page {
  20   margin-top: 0;
  21 }
  22
  23 .title-page-autoplay {
  24   @include margin-left(auto);
  25
  26   display: flex;
  27   width: max-content;
  28   height: max-content;
  29   align-items: center;
  30
  31   span {
  32     @include margin-right(0.3rem);
  33
  34     text-transform: uppercase;
  35     font-size: 85%;
  36     font-weight: 600;
  37   }
  38 }
  39
  40 .title-page-next-video-label {
  41   display: block;
  42   margin-bottom: 5px;
  43   font-weight: $font-semibold;
  44 }
  45
  46 hr {
  47   margin-top: 0;
  48 }
  49
  50 my-video-miniature {
  51   display: block;
  52 }
  53
  54 .other-videos:not(.display-as-row) my-video-miniature {
  55   min-width: $video-thumbnail-medium-width;
  56   max-width: $video-thumbnail-medium-width;
  57 }
  58
  59 .display-as-row {
  60   my-video-miniature {
  61     margin-bottom: 20px;
  62   }
  63
  64   hr {
  65     display: none;
  66   }
  67
  68   @media screen and (max-width: $mobile-view) {
  69     my-video-miniature {
  70       margin-bottom: 10px;
  71     }
  72   }
  73 }
  74