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

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