client/src/app/shared/shared-video-miniature/videos-list.component.scss

   1 @use '_bootstrap-variables';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use '_miniature' as *;
   5
   6 .videos-header {
   7   display: grid;
   8   grid-template-columns: auto 1fr auto;
   9   margin-bottom: 30px;
  10
  11   .title,
  12   .title-subscription {
  13     grid-column: 1;
  14   }
  15
  16   .title {
  17     font-size: 18px;
  18     color: pvar(--mainForegroundColor);
  19     display: inline-block;
  20     font-weight: $font-semibold;
  21
  22     margin-top: 30px;
  23     margin-bottom: 0;
  24   }
  25
  26   .title-subscription {
  27     grid-row: 2;
  28     font-size: 14px;
  29     color: pvar(--greyForegroundColor);
  30
  31     &.no-title {
  32       margin-top: 10px;
  33     }
  34   }
  35
  36   .action-block {
  37     grid-column: 3;
  38   }
  39
  40   my-feed {
  41     @include margin-left(5px);
  42
  43     display: inline-block;
  44     width: 16px;
  45     color: pvar(--mainColor);
  46     position: relative;
  47     top: -2px;
  48   }
  49 }
  50
  51 .date-title {
  52   font-size: 16px;
  53   font-weight: $font-semibold;
  54   margin-bottom: 20px;
  55
  56   // Make the element span a full grid row within .videos grid
  57   grid-column: 1 / -1;
  58
  59   &:not(:first-child) {
  60     margin-top: .5rem;
  61     padding-top: 20px;
  62     border-top: 1px solid $separator-border-color;
  63   }
  64 }
  65
  66 .margin-content {
  67   @include grid-videos-miniature-layout-with-margins;
  68 }
  69
  70 .display-as-row.videos {
  71   @include margin-left(pvar(--horizontalMarginContent));
  72   @include margin-right(pvar(--horizontalMarginContent));
  73
  74   .video-wrapper {
  75     margin-bottom: 15px;
  76   }
  77 }
  78
  79 @media screen and (max-width: $mobile-view) {
  80   .videos-header,
  81   my-video-filters-header {
  82     @include margin-left(15px);
  83     @include margin-right(15px);
  84
  85     display: inline-block;
  86   }
  87
  88   .date-title {
  89     text-align: center;
  90   }
  91
  92   .videos-header {
  93     flex-direction: column;
  94     align-items: center;
  95     height: auto;
  96     margin-bottom: 10px;
  97
  98     .title-page {
  99       @include margin-right(0);
 100
 101       margin-bottom: 10px;
 102     }
 103   }
 104 }