client/src/app/shared/video-playlist/video-add-to-playlist.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .header {
   5   min-width: 240px;
   6   padding: 6px 24px 10px 24px;
   7
   8   margin-bottom: 10px;
   9   border-bottom: 1px solid $separator-border-color;
  10
  11   .first-row {
  12     display: flex;
  13     align-items: center;
  14
  15     .title {
  16       font-size: 18px;
  17       flex-grow: 1;
  18     }
  19
  20     .options {
  21       display: flex;
  22       align-items: center;
  23       font-size: 14px;
  24       cursor: pointer;
  25
  26       my-global-icon {
  27         @include apply-svg-color(#333);
  28
  29         width: 16px;
  30         height: 23px;
  31         margin-right: 3px;
  32       }
  33     }
  34   }
  35
  36   .options-row {
  37     margin-top: 10px;
  38     padding-left: 10px;
  39
  40     > div {
  41       display: flex;
  42       align-items: center;
  43     }
  44   }
  45 }
  46
  47 .dropdown-item {
  48   padding: 6px 24px;
  49 }
  50
  51 .playlists {
  52   max-height: 180px;
  53   overflow-y: auto;
  54 }
  55
  56 .input-container {
  57   display: flex;
  58
  59   input {
  60     flex-grow: 1;
  61     margin: 0 15px 10px 15px;
  62   }
  63 }
  64
  65 .playlist {
  66   display: flex;
  67   cursor: pointer;
  68
  69   my-peertube-checkbox {
  70     margin-right: 10px;
  71   }
  72
  73   .display-name {
  74     display: flex;
  75     align-items: flex-end;
  76
  77     .timestamp-info {
  78       font-size: 0.9em;
  79       color: $grey-foreground-color;
  80       margin-left: 5px;
  81     }
  82   }
  83 }
  84
  85 .new-playlist-button,
  86 .new-playlist-block {
  87   padding-top: 10px;
  88   border-top: 1px solid $separator-border-color;
  89 }
  90
  91 .new-playlist-button  {
  92   cursor: pointer;
  93
  94   my-global-icon {
  95     @include apply-svg-color(#333);
  96
  97     position: relative;
  98     left: -1px;
  99     top: -1px;
 100     margin-right: 4px;
 101     width: 21px;
 102     height: 21px;
 103   }
 104 }
 105
 106 input[type=text] {
 107   @include peertube-input-text(200px);
 108
 109   display: block;
 110 }
 111
 112 input[type=submit] {
 113   @include peertube-button;
 114   @include orange-button;
 115 }