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 {
   7   display: grid;
   8   column-gap: calc(10px + .2%);
   9   grid-template-columns: repeat(
  10     auto-fill,
  11     minmax(
  12       var(--miniature-min-width, #{$video-thumbnail-width}),
  13       1fr
  14     )
  15   );
  16
  17   @media screen and (min-width: #{breakpoint(xxl)}) {
  18     --miniature-min-width: 300px;
  19   }
  20 }
  21
  22 .videos-header {
  23   display: flex;
  24   justify-content: space-between;
  25   align-items: baseline;
  26
  27   .title-page.title-page-single {
  28     display: flex;
  29
  30     my-feed {
  31       display: inline-block;
  32       top: 1px;
  33       margin-left: 5px;
  34       width: max-content;
  35       opacity: 0;
  36       transition: ease-in .2s opacity;
  37     }
  38     &:hover my-feed {
  39       opacity: 1;
  40     }
  41   }
  42
  43   .action-block {
  44     a button {
  45       @include peertube-button;
  46       @include grey-button;
  47       @include button-with-icon(18px, 3px, -1px);
  48     }
  49   }
  50
  51   .moderation-block {
  52     display: flex;
  53     flex-grow: 1;
  54     justify-content: flex-end;
  55     align-items: center;
  56   }
  57 }
  58
  59 .date-title {
  60   font-size: 16px;
  61   font-weight: $font-semibold;
  62   margin-bottom: 20px;
  63   margin-top: -10px;
  64   padding-top: 20px;
  65
  66   // make the element span a full grid row within .videos grid
  67   grid-column: 1 / -1;
  68
  69   &:not(:first-child) {
  70     border-top: 1px solid $separator-border-color;
  71   }
  72 }
  73
  74 :host-context(.main-col:not(.expanded)) .margin-content {
  75   @include adapt-margin-content-width($fluid: true);
  76 }
  77
  78 @media screen and (max-width: $mobile-view) {
  79   .videos-header {
  80     flex-direction: column;
  81     align-items: center;
  82     height: auto;
  83
  84     .title-page {
  85       margin-bottom: 10px;
  86       margin-right: 0px;
  87     }
  88   }
  89 }