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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 input[type=text] {
   5   @include peertube-input-text(300px);
   6 }
   7
   8 .peertube-select-container {
   9   @include peertube-select-container(auto);
  10   @include margin-left(0.5rem);
  11 }
  12
  13 h1 {
  14   display: flex;
  15   justify-content: space-between;
  16
  17   .button-link {
  18     @include peertube-button-link;
  19     @include grey-button;
  20     @include button-with-icon(18px, 3px, -1px);
  21
  22     &:not(:last-child) {
  23       @include margin-right(10px);
  24     }
  25   }
  26 }
  27
  28 .action-button-delete-selection {
  29   @include peertube-button;
  30   @include orange-button;
  31   @include button-with-icon(21px);
  32
  33   display: inline-block;
  34
  35   my-global-icon {
  36     @include apply-svg-color(#fff);
  37   }
  38 }
  39
  40 .action-button {
  41   @include margin-left(10px);
  42
  43   display: flex;
  44   align-self: flex-end;
  45 }
  46
  47 my-edit-button {
  48   @include margin-right(10px);
  49 }
  50
  51 @include on-small-main-col {
  52   h1 {
  53     flex-direction: column;
  54
  55     > span,
  56     .button-link {
  57       margin-bottom: 10px;
  58     }
  59   }
  60
  61   .action-button {
  62     @include margin-left(auto);
  63
  64     margin-top: 10px;
  65   }
  66 }
  67
  68 @include on-mobile-main-col {
  69   .videos-header {
  70     flex-direction: column;
  71
  72     input[type=text] {
  73       width: 100%;
  74       margin-bottom: 12px;
  75     }
  76     .peertube-select-container {
  77       @include margin-left(0);
  78     }
  79   }
  80
  81   .action-button {
  82     @include margin-left(0);
  83   }
  84 }