client/src/app/shared/shared-video-miniature/abstract-video-list.scss

   1 @use '_bootstrap-variables';
   2 @use '_variables';
   3 @use '_mixins';
   4 @use '_miniature';
   5
   6 $icon-size: 16px;
   7
   8 ::ng-deep my-video-list-header {
   9   display: flex;
  10   flex-grow: 1;
  11 }
  12
  13 .videos-header {
  14   display: flex;
  15   justify-content: space-between;
  16   align-items: center;
  17
  18   my-feed {
  19     display: inline-block;
  20     width: calc(#{$icon-size} - 2px);
  21   }
  22
  23   .moderation-block {
  24     @include margin-left(.4rem);
  25
  26     display: flex;
  27     justify-content: flex-end;
  28     align-items: center;
  29
  30     my-global-icon {
  31       position: relative;
  32       width: $icon-size;
  33     }
  34   }
  35 }
  36
  37 .date-title {
  38   font-size: 16px;
  39   font-weight: $font-semibold;
  40   margin-bottom: 20px;
  41   margin-top: -10px;
  42
  43   // make the element span a full grid row within .videos grid
  44   grid-column: 1 / -1;
  45
  46   &:not(:first-child) {
  47     margin-top: .5rem;
  48     padding-top: 20px;
  49     border-top: 1px solid $separator-border-color;
  50   }
  51 }
  52
  53 .margin-content {
  54   @include grid-videos-miniature-layout-with-margins;
  55 }
  56
  57 .display-as-row.videos {
  58   @include margin-left(pvar(--horizontalMarginContent));
  59   @include margin-right(pvar(--horizontalMarginContent));
  60
  61   .video-wrapper {
  62     margin-bottom: 15px;
  63   }
  64 }
  65
  66 @media screen and (max-width: $mobile-view) {
  67   .videos-header {
  68     flex-direction: column;
  69     align-items: center;
  70     height: auto;
  71     margin-bottom: 10px;
  72
  73     .title-page {
  74       @include margin-right(0);
  75
  76       margin-bottom: 10px;
  77     }
  78   }
  79 }