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

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