client/src/app/shared/video/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       margin-left: 5px;
  18       width: max-content;
  19       opacity: 0;
  20       transition: ease-in .2s opacity;
  21     }
  22     &:hover my-feed {
  23       opacity: 1;
  24     }
  25   }
  26
  27   .action-block {
  28     a button {
  29       @include peertube-button;
  30       @include grey-button;
  31       @include button-with-icon(18px, 3px, -1px);
  32     }
  33   }
  34
  35   .moderation-block {
  36     display: flex;
  37     flex-grow: 1;
  38     justify-content: flex-end;
  39     align-items: center;
  40   }
  41 }
  42
  43 .date-title {
  44   font-size: 16px;
  45   font-weight: $font-semibold;
  46   margin-bottom: 20px;
  47   margin-top: -10px;
  48
  49   // make the element span a full grid row within .videos grid
  50   grid-column: 1 / -1;
  51
  52   &:not(:first-child) {
  53     margin-top: .5rem;
  54     padding-top: 20px;
  55     border-top: 1px solid $separator-border-color;
  56   }
  57 }
  58
  59 .margin-content {
  60   @include fluid-videos-miniature-layout;
  61 }
  62
  63 @media screen and (max-width: $mobile-view) {
  64   .videos-header {
  65     flex-direction: column;
  66     align-items: center;
  67     height: auto;
  68     margin-bottom: 10px;
  69
  70     .title-page {
  71       margin-bottom: 10px;
  72       margin-right: 0px;
  73     }
  74   }
  75 }