]>
Commit | Line | Data |
---|---|---|
f1a0555a | 1 | @use 'sass:math'; |
8cbc40b2 C |
2 | @use '_variables' as *; |
3 | @use '_mixins' as *; | |
f1a0555a | 4 | @use './_player-variables' as *; |
2a19a1e4 C |
5 | |
6 | /* Special mobile style */ | |
7 | ||
8 | .video-js.vjs-peertube-skin.vjs-is-mobile { | |
9 | .vjs-control-bar { | |
10 | .vjs-progress-control .vjs-slider .vjs-play-progress { | |
11 | // Always display the circle on mobile | |
12 | &::before { | |
13 | margin-top: -1px; | |
14 | opacity: 1; | |
15 | } | |
16 | } | |
17 | } | |
931d3430 | 18 | } |
f1a0555a C |
19 | |
20 | .vjs-mobile-buttons-overlay { | |
21 | display: none; | |
22 | ||
23 | position: absolute; | |
24 | background-color: rgba(0, 0, 0, 0.4); | |
25 | width: 100%; | |
26 | height: 100%; | |
27 | top: 0; | |
28 | ||
29 | .vjs-user-active, | |
30 | .vjs-paused { | |
31 | display: block; | |
32 | } | |
33 | ||
34 | .main-button { | |
35 | font-family: VideoJS; | |
36 | font-weight: normal; | |
37 | font-style: normal; | |
38 | font-size: 5em; | |
39 | width: fit-content; | |
40 | margin: auto; | |
41 | position: relative; | |
42 | top: calc(50% - 10px); | |
43 | transform: translateY(-50%); | |
44 | } | |
45 | } | |
46 | ||
47 | .vjs-paused { | |
48 | .main-button { | |
49 | &:before { | |
50 | content: '\f101'; | |
51 | } | |
52 | } | |
53 | } | |
54 | ||
55 | .vjs-playing { | |
56 | .main-button { | |
57 | &:before { | |
58 | content: '\f103'; | |
59 | } | |
60 | } | |
61 | } | |
62 | ||
63 | .vjs-ended { | |
64 | .main-button { | |
65 | &:before { | |
66 | content: '\f116'; | |
67 | } | |
68 | } | |
69 | } | |
70 | ||
71 | .vjs-has-started { | |
72 | ||
73 | &.vjs-user-active, | |
74 | &.vjs-paused { | |
75 | .vjs-mobile-buttons-overlay { | |
76 | display: block; | |
77 | } | |
78 | } | |
79 | ||
80 | &.vjs-seeking, | |
81 | &.vjs-scrubbing, | |
82 | &.vjs-waiting { | |
83 | .vjs-mobile-buttons-overlay { | |
84 | display: none; | |
85 | } | |
86 | } | |
87 | } |