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