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