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

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