client/src/app/shared/shared-thumbnail/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: pvar(--mainColor);
  18     }
  19   }
  20
  21   .video-thumbnail-watch-later-overlay,
  22   .video-thumbnail-label-overlay,
  23   .video-thumbnail-duration-overlay,
  24   .video-thumbnail-live-overlay {
  25     @include static-thumbnail-overlay;
  26
  27     border-radius: 3px;
  28     font-size: 12px;
  29     font-weight: $font-semibold;
  30     line-height: 1.2;
  31     z-index: z(miniature);
  32   }
  33
  34   .video-thumbnail-label-overlay {
  35     position: absolute;
  36     padding: 0 5px;
  37     left: 5px;
  38     top: 5px;
  39     font-weight: $font-bold;
  40
  41     &.warning { background-color: orange; }
  42     &.danger { background-color: red; }
  43   }
  44
  45   .video-thumbnail-duration-overlay,
  46   .video-thumbnail-live-overlay {
  47     position: absolute;
  48     padding: 0 3px;
  49     right: 5px;
  50     bottom: 5px;
  51   }
  52
  53   .video-thumbnail-live-overlay {
  54     font-weight: $font-semibold;
  55     color: #fff;
  56
  57     &:not(.live-ended) {
  58       background-color: rgba(224, 8, 8, 0.7);
  59     }
  60   }
  61
  62   .video-thumbnail-actions-overlay {
  63     position: absolute;
  64     display: flex;
  65     flex-direction: column;
  66     right: 5px;
  67     top: 5px;
  68     opacity: 0;
  69
  70     div:not(:first-child) {
  71       margin-top: 2px;
  72     }
  73
  74     .video-thumbnail-watch-later-overlay {
  75       padding: 3px;
  76
  77       my-global-icon {
  78         width: 22px;
  79         height: 22px;
  80
  81         @include apply-svg-color(#fff);
  82       }
  83     }
  84   }
  85 }