]>
Commit | Line | Data |
---|---|---|
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: calc(#{$play-overlay-height} / 2) solid transparent; | |
58 | border-bottom: calc(#{$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 | } |