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 ::ng-deep .title-page.title-page-single {
   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   .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
  34     my-global-icon {
  35       position: relative;
  36       width: $iconSize;
  37       top: -2px;
  38     }
  39
  40     margin-left: .4rem;
  41     display: flex;
  42     justify-content: flex-end;
  43     align-items: center;
  44
  45     .dropdown-item {
  46       padding: 0;
  47
  48       ::ng-deep my-peertube-checkbox label {
  49         padding: 3px 15px;
  50       }
  51     }
  52   }
  53 }
  54
  55 .date-title {
  56   font-size: 16px;
  57   font-weight: $font-semibold;
  58   margin-bottom: 20px;
  59   margin-top: -10px;
  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 fluid-videos-miniature-layout;
  73 }
  74
  75 @media screen and (max-width: $mobile-view) {
  76   .videos-header {
  77     flex-direction: column;
  78     align-items: center;
  79     height: auto;
  80     margin-bottom: 10px;
  81
  82     .title-page {
  83       margin-bottom: 10px;
  84       margin-right: 0px;
  85     }
  86   }
  87 }