client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_miniature' as *;
   4
   5 $thumbnail-width: 130px;
   6 $thumbnail-height: 72px;
   7
   8 my-video-thumbnail {
   9   @include thumbnail-size-component($thumbnail-width, $thumbnail-height);
  10 }
  11
  12 .fake-thumbnail {
  13   width: $thumbnail-width;
  14   height: $thumbnail-height;
  15   background-color: #ececec;
  16 }
  17
  18 my-video-thumbnail,
  19 .fake-thumbnail {
  20   @include margin-right(10px);
  21
  22   display: flex; // Avoids an issue with line-height that adds space below the element
  23 }
  24
  25 .video {
  26   display: grid;
  27   grid-template-columns: 1fr auto;
  28   background-color: pvar(--mainBackgroundColor);
  29   padding: 10px;
  30   border-bottom: 1px solid $separator-border-color;
  31
  32   .more {
  33     display: flex;
  34   }
  35
  36   &:hover {
  37     background-color: rgba(0, 0, 0, 0.05);
  38
  39     .more {
  40       opacity: 1;
  41     }
  42   }
  43
  44   @media not all and (hover: hover) and (pointer: fine) {
  45     .more {
  46       opacity: 1 !important;
  47     }
  48   }
  49
  50   &.playing {
  51     background-color: rgba(0, 0, 0, 0.02);
  52   }
  53
  54   a {
  55     @include disable-default-a-behaviour;
  56
  57     color: pvar(--mainForegroundColor);
  58     display: flex;
  59     min-width: 0;
  60     align-items: center;
  61     cursor: pointer;
  62
  63     .position {
  64       @include margin-right(10px);
  65
  66       font-weight: $font-semibold;
  67       color: pvar(--greyForegroundColor);
  68       min-width: 25px;
  69
  70       my-global-icon {
  71         @include apply-svg-color(pvar(--greyForegroundColor));
  72
  73         width: 17px;
  74         position: relative;
  75         left: -2px;
  76       }
  77     }
  78
  79     .video-info {
  80       display: flex;
  81       flex-direction: column;
  82       align-self: flex-start;
  83       min-width: 0;
  84
  85       .video-info-header {
  86         display: flex;
  87         align-items: baseline;
  88
  89         a {
  90           width: auto;
  91           padding-right: 5px;
  92         }
  93
  94         .badge {
  95           @include peertube-badge;
  96           margin-right: 5px;
  97         }
  98       }
  99
 100       .video-info-account,
 101       .video-info-timestamp {
 102         color: pvar(--greyForegroundColor);
 103       }
 104     }
 105   }
 106
 107   .video-info-name {
 108     @include ellipsis;
 109
 110     font-size: 18px;
 111     font-weight: $font-semibold;
 112     display: inline-block;
 113   }
 114
 115   .more,
 116   my-edit-button {
 117     @include margin-left(auto);
 118
 119     justify-self: flex-end;
 120     cursor: pointer;
 121     min-width: 24px;
 122   }
 123
 124   .more {
 125     opacity: 0;
 126
 127     &.show {
 128       opacity: 1;
 129     }
 130
 131     .icon-more {
 132       @include apply-svg-color(pvar(--greyForegroundColor));
 133
 134       display: flex;
 135
 136       &::after {
 137         border: 0;
 138       }
 139     }
 140   }
 141 }
 142
 143 .dropdown-menu {
 144
 145   .dropdown-item {
 146     @include dropdown-with-icon-item;
 147
 148     cursor: pointer;
 149   }
 150
 151   .timestamp-options {
 152     @include padding-left(35px);
 153
 154     padding-top: 0;
 155     margin-bottom: 15px;
 156
 157     > div {
 158       display: flex;
 159       align-items: center;
 160       margin-bottom: 5px;
 161     }
 162
 163     my-peertube-checkbox {
 164       @include margin-right(5px);
 165     }
 166
 167     input {
 168       @include peertube-button;
 169       @include orange-button;
 170
 171       margin-top: 10px;
 172     }
 173   }
 174 }
 175
 176 @mixin more-dropdown-control {
 177   .video {
 178     my-edit-button {
 179       display: none;
 180
 181       + .more {
 182         display: inline-flex;
 183       }
 184     }
 185   }
 186 }
 187
 188 @mixin edit-button-control {
 189   .video {
 190     my-edit-button {
 191       display: none;
 192     }
 193
 194     &.playing {
 195       my-edit-button {
 196         display: inline-flex;
 197         height: max-content;
 198         margin: auto;
 199       }
 200     }
 201
 202     my-edit-button + .more {
 203       display: none;
 204     }
 205   }
 206 }
 207
 208 @mixin edit-button-in-mobile-view {
 209   .video {
 210     my-edit-button {
 211       ::ng-deep .action-button-edit {
 212         padding: 0 13px;
 213
 214         .button-label {
 215           display: none;
 216         }
 217       }
 218     }
 219   }
 220 }
 221
 222 @media screen and (min-width: $small-view) {
 223   :host-context(.expanded) {
 224     @include more-dropdown-control();
 225   }
 226 }
 227
 228 @media screen and (max-width: $small-view) {
 229   :host-context(.expanded) {
 230     @include edit-button-control();
 231   }
 232 }
 233
 234 @media screen and (max-width: $mobile-view) {
 235   :host-context(.expanded) {
 236     @include edit-button-in-mobile-view();
 237   }
 238 }
 239
 240 @media screen and (min-width: #{$small-view + $menu-width}) {
 241   :host-context(.main-col:not(.expanded)) {
 242     @include more-dropdown-control();
 243   }
 244 }
 245
 246 @media screen and (max-width: #{$small-view + $menu-width}) {
 247   :host-context(.main-col:not(.expanded)) {
 248     @include edit-button-control();
 249   }
 250 }
 251
 252 @media screen and (max-width: #{$mobile-view + $menu-width}) {
 253   :host-context(.main-col:not(.expanded)) {
 254     @include edit-button-in-mobile-view();
 255   }
 256 }