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

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 $optional-rows-checkbox-width: 34px;
   5 $timestamp-width: 50px;
   6 $timestamp-margin-right: 10px;
   7
   8 .header,
   9 .dropdown-item,
  10 .input-container {
  11   padding: 8px 24px;
  12 }
  13
  14 .dropdown-item:active {
  15   color: inherit;
  16 }
  17
  18 .header {
  19   min-width: 240px;
  20   margin-bottom: 10px;
  21   border-bottom: 1px solid $separator-border-color;
  22
  23   .first-row {
  24     display: flex;
  25     align-items: center;
  26
  27     .title {
  28       font-size: 18px;
  29       flex-grow: 1;
  30     }
  31   }
  32 }
  33
  34 .playlists {
  35   max-height: 180px;
  36   overflow-y: auto;
  37 }
  38
  39 .playlist {
  40   padding: 0;
  41
  42   > .primary-row {
  43     padding: 8px 10px 8px 24px;
  44   }
  45
  46   > .optional-rows {
  47     @include padding-left(24px);
  48   }
  49
  50   &.has-optional-row:hover {
  51     background-color: inherit;
  52   }
  53 }
  54
  55 .primary-row,
  56 .optional-rows > div {
  57   display: flex;
  58
  59   my-peertube-checkbox {
  60     @include margin-right(10px);
  61     align-self: center;
  62   }
  63
  64   .display-name {
  65     display: flex;
  66     align-items: flex-end;
  67     flex-grow: 1;
  68     margin: 0;
  69     font-weight: $font-regular;
  70     cursor: pointer;
  71   }
  72
  73   .optional-row-icon {
  74     display: flex;
  75     align-items: center;
  76     font-size: 14px;
  77     cursor: pointer;
  78
  79     my-global-icon {
  80       @include apply-svg-color(#333);
  81       @include margin-right(0);
  82
  83       width: 19px;
  84       height: 19px;
  85     }
  86   }
  87
  88   my-timestamp-input {
  89     @include margin-right($timestamp-margin-right);
  90
  91     ::ng-deep .ui-inputtext {
  92       padding: 0;
  93       width: $timestamp-width;
  94     }
  95   }
  96 }
  97
  98 .optional-rows {
  99   > div {
 100     padding: 8px 5px 5px 10px;
 101   }
 102
 103   my-peertube-checkbox {
 104     @include margin-right(0 !important);
 105
 106     display: block;
 107     width: $optional-rows-checkbox-width;
 108   }
 109
 110   .labels {
 111     @include margin-left($optional-rows-checkbox-width);
 112
 113     font-size: 13px;
 114     color: pvar(--greyForegroundColor);
 115     padding-top: 5px;
 116     padding-bottom: 0;
 117
 118     div {
 119       @include margin-right($timestamp-margin-right);
 120
 121       width: $timestamp-width;
 122     }
 123   }
 124 }
 125
 126 .new-playlist-button,
 127 .new-playlist-block {
 128   padding-top: 10px;
 129   border-top: 1px solid $separator-border-color;
 130 }
 131
 132 .new-playlist-button {
 133   cursor: pointer;
 134
 135   my-global-icon {
 136     @include apply-svg-color(#333);
 137     @include margin-right(4px);
 138
 139     position: relative;
 140     left: -1px;
 141     top: -1px;
 142     width: 21px;
 143     height: 21px;
 144   }
 145 }
 146
 147 input[type=text] {
 148   @include peertube-input-text(200px);
 149
 150   display: block;
 151 }
 152
 153 input[type=submit] {
 154   @include peertube-button;
 155   @include orange-button;
 156 }