]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
3 | ||
1aabcae7 C |
4 | $play-overlay-transition: 0.2s ease; |
5 | $play-overlay-height: 26px; | |
6 | $play-overlay-width: 18px; | |
7 | ||
202f6b6c | 8 | .video-thumbnail { |
1aabcae7 C |
9 | @include disable-outline; |
10 | ||
202f6b6c C |
11 | display: inline-block; |
12 | position: relative; | |
e5fc7811 | 13 | border-radius: 3px; |
202f6b6c | 14 | overflow: hidden; |
d6bd50ba C |
15 | width: $video-thumbnail-width; |
16 | height: $video-thumbnail-height; | |
17 | background-color: #ececec; | |
1aabcae7 | 18 | transition: filter $play-overlay-transition; |
202f6b6c C |
19 | |
20 | &:hover { | |
21 | text-decoration: none !important; | |
1aabcae7 C |
22 | |
23 | filter: brightness(85%); | |
24 | ||
25 | .play-overlay { | |
26 | opacity: 1; | |
27 | ||
28 | transform: translate(-50%, -50%) scale(1); | |
29 | } | |
202f6b6c C |
30 | } |
31 | ||
e78980eb RK |
32 | &.focus-visible { |
33 | box-shadow: 0 0 0 2px var(--mainColor); | |
34 | } | |
35 | ||
3290f37c C |
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 | } | |
202f6b6c C |
44 | } |
45 | ||
1aabcae7 C |
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 | ||
84c7cde6 C |
57 | border-top: ($play-overlay-height / 2) solid transparent; |
58 | border-bottom: ($play-overlay-height / 2) solid transparent; | |
1aabcae7 C |
59 | |
60 | border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95); | |
61 | ||
62 | opacity: 0; | |
63 | } | |
64 | ||
6e46de09 C |
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 | ||
202f6b6c C |
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 | } |