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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $play-overlay-transition: 0.2s ease;
   5 $play-overlay-height: 26px;
   6 $play-overlay-width: 18px;
   7
   8 .video-thumbnail {
   9   @include disable-outline;
  10
  11   display: inline-block;
  12   position: relative;
  13   border-radius: 3px;
  14   overflow: hidden;
  15   width: $video-thumbnail-width;
  16   height: $video-thumbnail-height;
  17   background-color: #ececec;
  18   transition: filter $play-overlay-transition;
  19
  20   &:hover {
  21     text-decoration: none !important;
  22
  23     filter: brightness(85%);
  24
  25     .play-overlay {
  26       opacity: 1;
  27
  28       transform: translate(-50%, -50%) scale(1);
  29     }
  30   }
  31
  32   &.focus-visible {
  33     box-shadow: 0 0 0 2px var(--mainColor);
  34   }
  35
  36   img {
  37     width: $video-thumbnail-width;
  38     height: $video-thumbnail-height;
  39
  40     &.blur-filter {
  41       filter: blur(5px);
  42       transform : scale(1.03);
  43     }
  44   }
  45
  46   .play-overlay {
  47     width: 0;
  48     height: 0;
  49
  50     position: absolute;
  51     left: 50%;
  52     top: 50%;
  53     transform: translate(-50%, -50%) scale(0.5);
  54
  55     transition: all $play-overlay-transition;
  56
  57     border-top: ($play-overlay-height / 2) solid transparent;
  58     border-bottom: ($play-overlay-height / 2) solid transparent;
  59
  60     border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
  61
  62     opacity: 0;
  63   }
  64
  65   .progress-bar {
  66     height: 3px;
  67     width: 100%;
  68     position: relative;
  69     top: -3px;
  70     background-color: rgba(0, 0, 0, 0.20);
  71
  72     div {
  73       height: 100%;
  74       background-color: var(--mainColor);
  75     }
  76   }
  77
  78   .video-thumbnail-overlay {
  79     position: absolute;
  80     right: 5px;
  81     bottom: 5px;
  82     display: inline-block;
  83     background-color: rgba(0, 0, 0, 0.7);
  84     color: #fff;
  85     font-size: 12px;
  86     font-weight: $font-bold;
  87     border-radius: 3px;
  88     padding: 0 5px;
  89   }
  90 }