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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .video-thumbnail {
   5   display: inline-block;
   6   position: relative;
   7   border-radius: 4px;
   8   overflow: hidden;
   9   width: $video-thumbnail-width;
  10   height: $video-thumbnail-height;
  11   background-color: #ececec;
  12
  13   &:hover {
  14     text-decoration: none !important;
  15   }
  16
  17   @include disable-outline;
  18   &.focus-visible {
  19     box-shadow: 0 0 0 2px var(--mainColor);
  20   }
  21
  22   img {
  23     width: $video-thumbnail-width;
  24     height: $video-thumbnail-height;
  25
  26     &.blur-filter {
  27       filter: blur(5px);
  28       transform : scale(1.03);
  29     }
  30   }
  31
  32   .progress-bar {
  33     height: 3px;
  34     width: 100%;
  35     position: relative;
  36     top: -3px;
  37     background-color: rgba(0, 0, 0, 0.20);
  38
  39     div {
  40       height: 100%;
  41       background-color: var(--mainColor);
  42     }
  43   }
  44
  45   .video-thumbnail-overlay {
  46     position: absolute;
  47     right: 5px;
  48     bottom: 5px;
  49     display: inline-block;
  50     background-color: rgba(0, 0, 0, 0.7);
  51     color: #fff;
  52     font-size: 12px;
  53     font-weight: $font-bold;
  54     border-radius: 3px;
  55     padding: 0 5px;
  56   }
  57 }