client/src/app/shared/video/video-thumbnail.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 .video-thumbnail {
   6   @include miniature-thumbnail;
   7
   8   .progress-bar {
   9     height: 3px;
  10     width: 100%;
  11     position: absolute;
  12     bottom: 0;
  13     background-color: rgba(0, 0, 0, 0.20);
  14
  15     div {
  16       height: 100%;
  17       background-color: var(--mainColor);
  18     }
  19   }
  20
  21   .video-thumbnail-watch-later-overlay,
  22   .video-thumbnail-label-overlay,
  23   .video-thumbnail-duration-overlay {
  24     @include static-thumbnail-overlay;
  25
  26     border-radius: 3px;
  27     font-size: 12px;
  28     font-weight: $font-bold;
  29     z-index: z(miniature);
  30   }
  31
  32   .video-thumbnail-label-overlay {
  33     position: absolute;
  34     padding: 0 5px;
  35     left: 5px;
  36     top: 5px;
  37
  38     &.warning { background-color: orange; }
  39     &.danger { background-color: red; }
  40   }
  41
  42   .video-thumbnail-duration-overlay {
  43     position: absolute;
  44     padding: 0 5px;
  45     right: 5px;
  46     bottom: 5px;
  47   }
  48
  49   .video-thumbnail-actions-overlay {
  50     position: absolute;
  51     display: flex;
  52     flex-direction: column;
  53     right: 5px;
  54     top: 5px;
  55     opacity: 0;
  56
  57     div:not(:first-child) {
  58       margin-top: 2px;
  59     }
  60
  61     .video-thumbnail-watch-later-overlay {
  62       padding: 3px;
  63
  64       my-global-icon {
  65         width: 22px;
  66         height: 22px;
  67
  68         @include apply-svg-color(#fff);
  69       }
  70     }
  71   }
  72 }