client/src/sass/include/_miniature.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 @mixin miniature-name {
   5   @include ellipsis-multiline(1.1em, 2);
   6
   7   transition: color 0.2s;
   8   font-weight: $font-semibold;
   9   color: var(--mainForegroundColor);
  10   margin-top: 10px;
  11   margin-bottom: 5px;
  12
  13   &:hover {
  14     text-decoration: none;
  15   }
  16
  17   &.blur-filter {
  18     filter: blur(3px);
  19     padding-left: 4px;
  20   }
  21 }
  22
  23 $play-overlay-transition: 0.2s ease;
  24 $play-overlay-height: 26px;
  25 $play-overlay-width: 18px;
  26
  27 @mixin miniature-thumbnail {
  28   @include disable-outline;
  29
  30   display: flex;
  31   flex-direction: column;
  32   position: relative;
  33   border-radius: 3px;
  34   overflow: hidden;
  35   width: $video-thumbnail-width;
  36   height: $video-thumbnail-height;
  37   background-color: #ececec;
  38   transition: filter $play-overlay-transition;
  39
  40   .play-overlay {
  41     position: absolute;
  42     right: 0;
  43     bottom: 0;
  44
  45     width: inherit;
  46     height: inherit;
  47     opacity: 0;
  48     background-color: rgba(0, 0, 0, 0.7);
  49
  50     &, .icon {
  51       transition: all $play-overlay-transition;
  52     }
  53
  54     .icon {
  55       width: 0;
  56       height: 0;
  57
  58       position: absolute;
  59       left: 50%;
  60       top: 50%;
  61       transform: translate(-50%, -50%) scale(0.5);
  62
  63       border-top: ($play-overlay-height / 2) solid transparent;
  64       border-bottom: ($play-overlay-height / 2) solid transparent;
  65
  66       border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
  67     }
  68   }
  69
  70   &:hover {
  71     text-decoration: none !important;
  72
  73     .play-overlay {
  74       opacity: 1;
  75
  76       .icon {
  77         transform: translate(-50%, -50%) scale(1);
  78       }
  79     }
  80   }
  81
  82   &.focus-visible {
  83     box-shadow: 0 0 0 2px var(--mainColor);
  84   }
  85
  86   img {
  87     width: inherit;
  88     height: inherit;
  89
  90     &.blur-filter {
  91       filter: blur(20px);
  92       transform : scale(1.03);
  93     }
  94   }
  95 }
  96
  97 @mixin thumbnail-size-component ($width, $height) {
  98   /deep/ .video-thumbnail {
  99     width: $width;
 100     height: $height;
 101   }
 102 }
 103
 104 @mixin static-thumbnail-overlay {
 105   display: inline-block;
 106   background-color: rgba(0, 0, 0, 0.7);
 107   color: #fff;
 108 }
 109
 110 @mixin video-miniature-small-screen {
 111   text-align: center;
 112
 113   /deep/ .video-miniature {
 114     padding-right: 0;
 115     height: auto;
 116     width: 100%;
 117     margin-bottom: 20px;
 118
 119     .video-miniature-information {
 120       width: 100% !important;
 121       text-align: left;
 122
 123       span {
 124         width: 100%;
 125       }
 126     }
 127
 128     .video-thumbnail {
 129       margin: 0 -15px 10px -15px;
 130       width: 100vw;
 131       height: calc(100vw / #{$video-thumbnail-ratio});
 132       border-radius: 0;
 133
 134       img {
 135         width: 100%;
 136         height: 100%;
 137       }
 138     }
 139   }
 140 }