]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/sass/player/control-bar.scss
Increase player progress bar hitbox height
[github/Chocobozzz/PeerTube.git] / client / src / sass / player / control-bar.scss
CommitLineData
a5a79d15
C
1@use 'sass:math';
2@use '_variables' as *;
3@use '_mixins' as *;
4@use './_player-variables' as *;
5
6.video-js.vjs-peertube-skin .vjs-control-bar {
f1a0555a
C
7 z-index: 100;
8
a5a79d15
C
9 height: $control-bar-height;
10 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
11 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
12 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
13 transition: visibility 0.3s, opacity 0.3s !important;
14
15 > button:first-child {
16 @include margin-left($first-control-bar-element-margin-left);
17 }
18
19 > button:last-child {
20 @include margin-right($first-control-bar-element-margin-left);
21 }
22
23 .vjs-progress-control,
24 .vjs-play-control,
25 .vjs-playback-rate,
26 .vjs-mute-control,
27 .vjs-volume-control,
28 .vjs-resolution-control,
29 .vjs-fullscreen-control,
30 .vjs-peertube-link,
31 .vjs-theater-control,
32 .vjs-settings {
33 color: pvar(--embedForegroundColor) !important;
34
35 opacity: $primary-foreground-opacity;
36 transition: opacity .1s;
37
38 &:hover {
39 opacity: $primary-foreground-opacity-hover;
40 }
41 }
42
43 .vjs-current-time,
44 .vjs-duration,
45 .vjs-peertube {
46 color: pvar(--embedForegroundColor);
47 opacity: $primary-foreground-opacity;
48 }
49
50 .vjs-progress-control {
51 @include margin-left($progress-margin);
52
53 position: absolute;
f1a0555a 54 top: $control-bar-slider-top;
a5a79d15
C
55 z-index: 100; // On top of the progress bar
56 width: calc(100% - (2 * #{$progress-margin}));
5bca1d06 57 height: 20px;
a5a79d15
C
58
59 .vjs-slider {
60 margin: 0;
61 border-radius: 0;
62 background-color: rgba(255, 255, 255, .2);
63 height: 3px;
64 transition: none;
65
66 .vjs-play-progress {
67 background: pvar(--embedForegroundColor);
68
69 // Not display the circle if the progress is not hovered
70 &::before {
71 opacity: 0;
72 transition: opacity 0.1s ease;
73 font-size: 14px;
74
75 top: -0.3em;
76 }
77
78 .vjs-time-tooltip {
79 display: none;
80 }
81 }
82
83 .vjs-load-progress {
84 &,
85 div {
86 background: rgba(255, 255, 255, .2);
87 }
88 }
89 }
90 }
91
92 .vjs-progress-control:hover .vjs-slider,
93 .vjs-progress-control .vjs-slider.vjs-sliding {
94 height: 5px;
95
96 .vjs-play-progress::before {
97 opacity: 1;
98 }
99 }
100
a5a79d15
C
101 .vjs-play-control {
102 @include disable-outline;
103
104 cursor: pointer;
105 width: $control-bar-button-width;
106
107 .vjs-icon-placeholder::before {
108 font-size: $control-bar-play-font-size;
c2e6ad30
C
109 line-height: unset;
110 position: relative;
111 top: -1px;
a5a79d15
C
112 }
113 }
114
115 .vjs-time-control {
116 line-height: inherit;
117
118 &.vjs-current-time {
119 @include margin-left(.5em);
120
121 font-size: $control-bar-font-size;
122 display: inline-block;
123 padding: 0;
124
125 .vjs-current-time-display {
126 line-height: calc(#{$control-bar-height} - 1px);
127
128 &::after {
129 @include margin(0, 1px, 0, 2px);
130
131 content: '/';
132 }
133 }
134 }
135
136 &.vjs-duration {
137 font-size: $control-bar-font-size;
138 display: inline-block;
139 padding: 0;
140
141 .vjs-duration-display {
142 line-height: calc(#{$control-bar-height} - 1px);
143 }
144 }
145
146 &.vjs-remaining-time {
147 display: none;
148 }
149 }
150
151 .vjs-live-control {
152 line-height: $control-bar-height;
153 min-width: 4em;
154 width: inherit;
155 }
156
157 .vjs-peertube {
158 @include margin-right(6px);
159
160 width: 100%;
161 line-height: $control-bar-height;
162 text-align: end;
163 overflow: hidden;
164 font-size: $control-bar-font-size;
165
166 .vjs-peertube-displayed {
167 display: block;
168 }
169
170 .vjs-peertube-hidden {
171 display: none;
172 }
173
174 .download-speed-number,
175 .upload-speed-number,
176 .peers-number,
177 .http-fallback {
178 font-weight: $font-semibold;
179 }
180
181 .download-speed-text,
182 .upload-speed-text,
183 .peers-text,
184 .http-fallback {
185 @include margin-right(15px);
186 }
187
188 .icon {
189 @include margin-right(2px);
190
191 display: inline-block;
192 width: 15px;
193 height: 15px;
194 background-size: contain;
195 vertical-align: middle;
196 background-repeat: no-repeat;
197 position: relative;
198 top: -1px;
199
200 &.icon-download {
201 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
202 }
203
204 &.icon-upload {
205 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
206 }
207 }
208 }
209
210 .vjs-next-video,
211 .vjs-previous-video {
212 width: $control-bar-button-width - 4px;
213
214 &.vjs-disabled {
215 cursor: default;
216 }
217
218 .icon {
219 &.icon-next,
220 &.icon-previous {
221 mask-image: url('#{$assets-path}/player/images/next.svg');
222 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
223 mask-size: cover;
224 -webkit-mask-size: cover;
225
226 background-color: #fff;
227 width: $control-bar-next-previous-play-font-size;
228 height: $control-bar-next-previous-play-font-size;
229 display: inline-block;
230 }
231
232 &.icon-previous {
233 transform: rotate(180deg);
234 }
235 }
236 }
237
238 .vjs-mute-control {
239 @include disable-outline;
240
241 padding: 0;
242 width: $control-bar-icon-size;
243
244 .vjs-icon-placeholder {
245 display: inline-block;
246 width: $control-bar-icon-size;
247 height: $control-bar-icon-size;
248 vertical-align: middle;
249 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
250 background-size: contain;
251
252 &::before {
253 content: '';
254 }
255 }
256
257 &.vjs-vol-0 .vjs-icon-placeholder {
258 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
259 background-size: contain;
260 }
261 }
262
263 .vjs-volume-control {
264 @include margin(0, 5px, 0, 5px);
265
266 width: $control-bar-icon-size;
267 display: flex;
268 align-items: center;
269 }
270
271 .vjs-volume-bar {
272 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
273 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
274 height: 100%;
275 width: 100%;
276 max-width: $control-bar-icon-size;
277 max-height: $control-bar-volume-slider-height;
278 margin: 0;
279 border-radius: 0;
280
281 .vjs-volume-level {
282 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
283 background-size: $control-bar-icon-size $control-bar-volume-slider-height;
284 max-width: $control-bar-icon-size;
285 height: 100%;
286 max-height: $control-bar-volume-slider-height;
5097cbda
C
287
288 &::before {
289 // Remove circle
290 content: '';
291 }
a5a79d15
C
292 }
293
294 &:focus {
295 text-shadow: none;
296 box-shadow: none;
297 }
298 }
299
300 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
301 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
302 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
303 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
304 width: 6em;
305 transition-property: none;
306 }
307
308 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
309 width: 3em;
310 height: auto;
311 }
312
313 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
314 transition-property: none;
315 }
316
317 .vjs-volume-panel {
318 .vjs-mute-control {
319 width: 2em;
320 z-index: 1;
321 padding: 0;
322 }
323
324 .vjs-volume-control {
325 display: inline-block;
326 position: relative;
327 left: 5px;
328 opacity: 1;
329 width: 3em;
330 height: auto;
331 }
332 }
333
334 .vjs-settings {
335 @include disable-outline;
336
337 cursor: pointer;
338 width: $control-bar-button-width;
339
340 .vjs-icon-placeholder {
341 display: inline-block;
342 height: $control-bar-icon-size - 5px;
343 width: $control-bar-icon-size - 5px;
344 vertical-align: middle;
345 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
346 background-size: contain;
347
348 &::before {
349 content: '';
350 }
351 }
352 }
353
354 .vjs-peertube-link {
355 @include disable-outline;
356 @include disable-default-a-behaviour;
357
358 text-decoration: none;
359 line-height: $control-bar-height;
360 font-weight: $font-semibold;
361 padding: 0 5px;
362 }
363
364 .vjs-theater-control {
365 @include disable-outline;
366
367 width: $control-bar-button-width;
368 cursor: pointer;
369
370 .vjs-icon-placeholder {
371 transition: transform 0.2s ease;
372 display: inline-block;
373 width: $control-bar-icon-size;
374 height: $control-bar-icon-size;
375 vertical-align: middle;
376 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
377 background-size: contain;
378
379 &::before {
380 content: '';
381 }
382 }
383 }
384
385 .vjs-fullscreen-control {
386 @include disable-outline;
387
388 width: $control-bar-button-width;
389
390 .vjs-icon-placeholder {
391 display: inline-block;
392 width: $control-bar-icon-size;
393 height: $control-bar-icon-size;
394 vertical-align: middle;
395 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
396 background-size: contain;
397
398 &::before {
399 content: '';
400 }
401 }
402 }
403
404 @media screen and (max-width: $screen-width-750) {
405 .vjs-theater-control {
406 display: none;
407 }
ba9eef5f
C
408
409 .vjs-peertube {
410 .icon,
411 .download-speed-text,
412 .upload-speed-text {
413 display: none !important;
414 }
415 }
a5a79d15
C
416 }
417
418 @media screen and (max-width: $screen-width-570) {
419 .vjs-peertube {
420 padding: 0 !important;
421
422 .vjs-peertube-displayed {
423 display: none !important;
424 }
425 }
426
427 &.vjs-live {
428 .vjs-duration {
429 display: none !important;
430 }
431
432 .vjs-peertube {
433 display: none !important;
434 }
435 }
436 }
437
438 @media screen and (max-width: $screen-width-350) {
439 .vjs-volume-control,
440 .vjs-next-video,
441 .vjs-previous-video {
442 display: none !important;
443 }
444
445 .vjs-peertube-link {
446 padding: 0 !important;
447 }
448
449 > button:first-child {
450 @include margin-left($first-control-bar-element-margin-left-small-width);
451 }
452
453 > button:last-child {
454 @include margin-right($first-control-bar-element-margin-left-small-width);
455 }
456
457 &.vjs-live {
458 .vjs-current-time {
459 display: none !important;
460 }
461 }
462 }
463}