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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 input[type=text] {
   5   @include peertube-input-text(300px);
   6 }
   7
   8 .peertube-select-container {
   9   @include peertube-select-container(auto);
  10   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       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   display: flex;
  42   margin-left: 10px;
  43   align-self: flex-end;
  44 }
  45
  46 my-edit-button {
  47   margin-right: 10px;
  48 }
  49
  50 @include on-small-main-col {
  51   h1 {
  52     flex-direction: column;
  53
  54     > span,
  55     .button-link {
  56       margin-bottom: 10px;
  57     }
  58   }
  59
  60   .action-button {
  61     margin-top: 10px;
  62     margin-left: auto;
  63   }
  64 }
  65
  66 @include on-mobile-main-col {
  67   .videos-header {
  68     flex-direction: column;
  69
  70     input[type=text] {
  71       width: 100%;
  72       margin-bottom: 12px;
  73     }
  74     .peertube-select-container {
  75       margin-left: 0;
  76     }
  77   }
  78
  79   .action-button {
  80     margin-left: 0;
  81   }
  82 }