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 .videos-header {
   7   display: flex;
   8   justify-content: space-between;
   9   align-items: baseline;
  10
  11   .title-page.title-page-single {
  12     display: flex;
  13
  14     my-feed {
  15       display: inline-block;
  16       top: 1px;
  17       width: max-content;
  18     }
  19   }
  20
  21   .action-block {
  22     a button {
  23       @include peertube-button;
  24       @include grey-button;
  25       @include button-with-icon(18px, 3px, -1px);
  26     }
  27   }
  28
  29   .moderation-block {
  30     display: flex;
  31     flex-grow: 1;
  32     justify-content: flex-end;
  33     align-items: center;
  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 fluid-videos-miniature-layout;
  55 }
  56
  57 @media screen and (max-width: $mobile-view) {
  58   .videos-header {
  59     flex-direction: column;
  60     align-items: center;
  61     height: auto;
  62     margin-bottom: 10px;
  63
  64     .title-page {
  65       margin-bottom: 10px;
  66       margin-right: 0px;
  67     }
  68   }
  69 }