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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .root {
   5   max-height: 300px;
   6   overflow-y: auto;
   7 }
   8
   9 .header {
  10   min-width: 240px;
  11   padding: 6px 24px 10px 24px;
  12
  13   margin-bottom: 10px;
  14   border-bottom: 1px solid $separator-border-color;
  15
  16   .first-row {
  17     display: flex;
  18     align-items: center;
  19
  20     .title {
  21       font-size: 18px;
  22       flex-grow: 1;
  23     }
  24
  25     .options {
  26       display: flex;
  27       align-items: center;
  28       font-size: 14px;
  29       cursor: pointer;
  30
  31       my-global-icon {
  32         @include apply-svg-color(#333);
  33
  34         width: 16px;
  35         height: 23px;
  36         margin-right: 3px;
  37       }
  38     }
  39   }
  40
  41   .options-row {
  42     margin-top: 10px;
  43     padding-left: 10px;
  44
  45     > div {
  46       display: flex;
  47       align-items: center;
  48     }
  49   }
  50 }
  51
  52 .dropdown-item {
  53   padding: 6px 24px;
  54 }
  55
  56 .playlist {
  57   display: flex;
  58   cursor: pointer;
  59
  60   my-peertube-checkbox {
  61     margin-right: 10px;
  62   }
  63
  64   .display-name {
  65     display: flex;
  66     align-items: flex-end;
  67
  68     .timestamp-info {
  69       font-size: 0.9em;
  70       color: $grey-foreground-color;
  71       margin-left: 5px;
  72     }
  73   }
  74 }
  75
  76 .new-playlist-button,
  77 .new-playlist-block {
  78   padding-top: 10px;
  79   margin-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 }