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

   1 @import '_variables';
   2 @import '_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     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     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
  82       width: 19px;
  83       height: 19px;
  84       margin-right: 0;
  85     }
  86   }
  87
  88   my-timestamp-input {
  89     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     display: block;
 105     width: $optional-rows-checkbox-width;
 106     margin-right: 0 !important;
 107   }
 108
 109   .labels {
 110     margin-left: $optional-rows-checkbox-width;
 111     font-size: 13px;
 112     color: pvar(--greyForegroundColor);
 113     padding-top: 5px;
 114     padding-bottom: 0;
 115
 116     div {
 117       margin-right: $timestamp-margin-right;
 118       width: $timestamp-width;
 119     }
 120   }
 121 }
 122
 123 .new-playlist-button,
 124 .new-playlist-block {
 125   padding-top: 10px;
 126   border-top: 1px solid $separator-border-color;
 127 }
 128
 129 .new-playlist-button  {
 130   cursor: pointer;
 131
 132   my-global-icon {
 133     @include apply-svg-color(#333);
 134
 135     position: relative;
 136     left: -1px;
 137     top: -1px;
 138     margin-right: 4px;
 139     width: 21px;
 140     height: 21px;
 141   }
 142 }
 143
 144 input[type=text] {
 145   @include peertube-input-text(200px);
 146
 147   display: block;
 148 }
 149
 150 input[type=submit] {
 151   @include peertube-button;
 152   @include orange-button;
 153 }