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, -2px);
  35     }
  36
  37     margin-left: .4rem;
  38     display: flex;
  39     justify-content: flex-end;
  40     align-items: center;
  41
  42     .dropdown-item {
  43       padding: 0;
  44
  45       ::ng-deep my-peertube-checkbox label {
  46         padding: 3px 15px;
  47       }
  48     }
  49   }
  50 }
  51
  52 .date-title {
  53   font-size: 16px;
  54   font-weight: $font-semibold;
  55   margin-bottom: 20px;
  56   margin-top: -10px;
  57
  58   // make the element span a full grid row within .videos grid
  59   grid-column: 1 / -1;
  60
  61   &:not(:first-child) {
  62     margin-top: .5rem;
  63     padding-top: 20px;
  64     border-top: 1px solid $separator-border-color;
  65   }
  66 }
  67
  68 .margin-content {
  69   @include fluid-videos-miniature-layout;
  70 }
  71
  72 @media screen and (max-width: $mobile-view) {
  73   .videos-header {
  74     flex-direction: column;
  75     align-items: center;
  76     height: auto;
  77     margin-bottom: 10px;
  78
  79     .title-page {
  80       margin-bottom: 10px;
  81       margin-right: 0px;
  82     }
  83   }
  84 }