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

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