client/src/app/+my-library/my-history/my-history.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .no-history {
   5   display: flex;
   6   justify-content: center;
   7   margin-top: 50px;
   8   font-weight: $font-semibold;
   9   font-size: 16px;
  10 }
  11
  12 .top-buttons {
  13   margin-bottom: 30px;
  14   display: grid;
  15   grid-template-columns: 250px 1fr auto auto;
  16   align-items: center;
  17
  18   .search-wrapper {
  19     grid-column: 1;
  20
  21     input {
  22       @include peertube-input-text(250px);
  23     }
  24   }
  25
  26   .history-switch {
  27     @include margin-left(auto);
  28     @include margin-right(15px);
  29
  30     grid-column: 3;
  31     display: flex;
  32
  33     label {
  34       margin: 0 0 0 5px;
  35       color: var(--greyForegroundColor);
  36       font-size: 15px;
  37       font-weight: $font-semibold;
  38     }
  39   }
  40
  41   .delete-history {
  42     @include peertube-button;
  43     @include grey-button;
  44     @include button-with-icon;
  45
  46     grid-column: 4;
  47
  48     font-size: 15px;
  49   }
  50 }
  51
  52 .video {
  53   @include row-blocks($column-responsive: false);
  54 }
  55
  56 @media screen and (max-width: $small-view) {
  57   .top-buttons {
  58     grid-template-columns: auto 1fr auto;
  59     row-gap: 20px;
  60
  61     .history-switch {
  62       grid-row: 1;
  63       grid-column: 1;
  64       margin: 0;
  65     }
  66
  67     .delete-history {
  68       grid-row: 1;
  69       grid-column: 3;
  70     }
  71
  72     .search-wrapper {
  73       grid-column: 1 / 4;
  74     }
  75   }
  76 }