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

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