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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   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 }
  29
  30 .playlists {
  31   max-height: 180px;
  32   overflow-y: auto;
  33 }
  34
  35 .playlist {
  36   padding: 0;
  37
  38   > .primary-row {
  39     padding: 8px 10px 8px 24px;
  40   }
  41
  42   > .optional-rows {
  43     @include padding-left(24px);
  44   }
  45
  46   &.has-optional-row:hover {
  47     background-color: inherit;
  48   }
  49 }
  50
  51 .primary-row {
  52   display: flex;
  53
  54   my-peertube-checkbox {
  55     @include margin-right(10px);
  56
  57     align-self: center;
  58   }
  59
  60   .display-name {
  61     display: flex;
  62     align-items: flex-end;
  63     flex-grow: 1;
  64     margin: 0;
  65     font-weight: $font-regular;
  66     cursor: pointer;
  67   }
  68
  69   .optional-row-icon {
  70     display: flex;
  71     align-items: center;
  72     font-size: 14px;
  73     cursor: pointer;
  74
  75     my-global-icon {
  76       @include apply-svg-color(#333);
  77       @include margin-right(0);
  78
  79       width: 19px;
  80       height: 19px;
  81     }
  82   }
  83 }
  84
  85 .optional-rows {
  86   display: grid;
  87   grid-template-columns: 35px 80px 80px;
  88   row-gap: 3px;
  89   column-gap: 10px;
  90   align-items: center;
  91
  92   my-peertube-checkbox {
  93     @include margin-left(auto);
  94   }
  95
  96   .header-label {
  97     font-size: 13px;
  98     color: pvar(--greyForegroundColor);
  99     padding-left: 2px;
 100
 101     &:nth-child(1) {
 102       grid-column: 2;
 103     }
 104
 105     &:nth-child(2) {
 106       grid-column: 3;
 107     }
 108   }
 109 }
 110
 111 .new-playlist-button,
 112 .new-playlist-block {
 113   padding-top: 10px;
 114   border-top: 1px solid $separator-border-color;
 115 }
 116
 117 .new-playlist-button {
 118   cursor: pointer;
 119
 120   my-global-icon {
 121     @include apply-svg-color(#333);
 122     @include margin-right(4px);
 123
 124     position: relative;
 125     left: -1px;
 126     top: -1px;
 127     width: 21px;
 128     height: 21px;
 129   }
 130 }
 131
 132 input[type=text] {
 133   @include peertube-input-text(200px);
 134
 135   display: block;
 136 }
 137
 138 input[type=submit] {
 139   @include peertube-button;
 140   @include orange-button;
 141 }