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: 8px 10px 8px 24px;
  41
  42   &.has-optional-row:hover {
  43     background-color: inherit;
  44   }
  45 }
  46
  47 .primary-row,
  48 .optional-rows > div {
  49   display: flex;
  50
  51   my-peertube-checkbox {
  52     margin-right: 10px;
  53     align-self: center;
  54   }
  55
  56   .display-name {
  57     display: flex;
  58     align-items: flex-end;
  59     flex-grow: 1;
  60     margin: 0;
  61     font-weight: $font-regular;
  62     cursor: pointer;
  63   }
  64
  65   .optional-row-icon {
  66     display: flex;
  67     align-items: center;
  68     font-size: 14px;
  69     cursor: pointer;
  70
  71     my-global-icon {
  72       @include apply-svg-color(#333);
  73
  74       width: 19px;
  75       height: 19px;
  76       margin-right: 0;
  77     }
  78   }
  79
  80   my-timestamp-input {
  81     margin-right: $timestamp-margin-right;
  82
  83     ::ng-deep .ui-inputtext {
  84       padding: 0;
  85       width: $timestamp-width;
  86     }
  87   }
  88 }
  89
  90 .optional-rows {
  91   > div {
  92     padding: 8px 5px 5px 10px;
  93   }
  94
  95   my-peertube-checkbox {
  96     display: block;
  97     width: $optional-rows-checkbox-width;
  98     margin-right: 0 !important;
  99   }
 100
 101   .labels {
 102     margin-left: $optional-rows-checkbox-width;
 103     font-size: 13px;
 104     color: pvar(--greyForegroundColor);
 105     padding-top: 5px;
 106     padding-bottom: 0;
 107
 108     div {
 109       margin-right: $timestamp-margin-right;
 110       width: $timestamp-width;
 111     }
 112   }
 113 }
 114
 115 .new-playlist-button,
 116 .new-playlist-block {
 117   padding-top: 10px;
 118   border-top: 1px solid $separator-border-color;
 119 }
 120
 121 .new-playlist-button  {
 122   cursor: pointer;
 123
 124   my-global-icon {
 125     @include apply-svg-color(#333);
 126
 127     position: relative;
 128     left: -1px;
 129     top: -1px;
 130     margin-right: 4px;
 131     width: 21px;
 132     height: 21px;
 133   }
 134 }
 135
 136 input[type=text] {
 137   @include peertube-input-text(200px);
 138
 139   display: block;
 140 }
 141
 142 input[type=submit] {
 143   @include peertube-button;
 144   @include orange-button;
 145 }