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         .pt-badge {
  95           @include margin-right(5px);
  96         }
  97       }
  98
  99       .video-info-account,
 100       .video-info-timestamp {
 101         color: pvar(--greyForegroundColor);
 102       }
 103     }
 104   }
 105
 106   .video-info-name {
 107     @include ellipsis;
 108
 109     font-size: 18px;
 110     font-weight: $font-semibold;
 111     display: inline-block;
 112   }
 113
 114   .more,
 115   my-edit-button {
 116     @include margin-left(auto);
 117
 118     justify-self: flex-end;
 119     cursor: pointer;
 120     min-width: 24px;
 121   }
 122
 123   .more {
 124     opacity: 0;
 125
 126     &.show {
 127       opacity: 1;
 128     }
 129
 130     .icon-more {
 131       @include apply-svg-color(pvar(--greyForegroundColor));
 132
 133       display: flex;
 134
 135       &::after {
 136         border: 0;
 137       }
 138     }
 139   }
 140 }
 141
 142 .dropdown-menu {
 143
 144   .dropdown-item {
 145     @include dropdown-with-icon-item;
 146
 147     cursor: pointer;
 148   }
 149
 150   .timestamp-options {
 151     @include padding-left(35px);
 152
 153     padding-top: 0;
 154     margin-bottom: 15px;
 155
 156     > div {
 157       display: flex;
 158       align-items: center;
 159       margin-bottom: 5px;
 160     }
 161
 162     my-peertube-checkbox {
 163       @include margin-right(5px);
 164     }
 165
 166     input {
 167       @include peertube-button;
 168       @include orange-button;
 169
 170       margin-top: 10px;
 171     }
 172   }
 173 }
 174
 175 @mixin more-dropdown-control {
 176   .video {
 177     my-edit-button {
 178       display: none;
 179
 180       + .more {
 181         display: inline-flex;
 182       }
 183     }
 184   }
 185 }
 186
 187 @mixin edit-button-control {
 188   .video {
 189     my-edit-button {
 190       display: none;
 191     }
 192
 193     &.playing {
 194       my-edit-button {
 195         display: inline-flex;
 196         height: max-content;
 197         margin: auto;
 198       }
 199     }
 200
 201     my-edit-button + .more {
 202       display: none;
 203     }
 204   }
 205 }
 206
 207 @mixin edit-button-in-mobile-view {
 208   .video {
 209     my-edit-button {
 210       ::ng-deep .action-button-edit {
 211         padding: 0 13px;
 212
 213         .button-label {
 214           display: none;
 215         }
 216       }
 217     }
 218   }
 219 }
 220
 221 @media screen and (min-width: $small-view) {
 222   :host-context(.expanded) {
 223     @include more-dropdown-control();
 224   }
 225 }
 226
 227 @media screen and (max-width: $small-view) {
 228   :host-context(.expanded) {
 229     @include edit-button-control();
 230   }
 231 }
 232
 233 @media screen and (max-width: $mobile-view) {
 234   :host-context(.expanded) {
 235     @include edit-button-in-mobile-view();
 236   }
 237 }
 238
 239 @media screen and (min-width: #{$small-view + $menu-width}) {
 240   :host-context(.main-col:not(.expanded)) {
 241     @include more-dropdown-control();
 242   }
 243 }
 244
 245 @media screen and (max-width: #{$small-view + $menu-width}) {
 246   :host-context(.main-col:not(.expanded)) {
 247     @include edit-button-control();
 248   }
 249 }
 250
 251 @media screen and (max-width: #{$mobile-view + $menu-width}) {
 252   :host-context(.main-col:not(.expanded)) {
 253     @include edit-button-in-mobile-view();
 254   }
 255 }