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