aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player/peertube-skin.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-01-07 14:25:23 +0100
committerChocobozzz <me@florianbigard.com>2022-01-10 10:08:14 +0100
commita5a79d15427372b581e34ac3999c73fc316699d5 (patch)
treead457a2105825462a7dc4e5505bdfdd5aaa82756 /client/src/sass/player/peertube-skin.scss
parent22c777863088f90c7f3f9df613b42952abab856d (diff)
downloadPeerTube-a5a79d15427372b581e34ac3999c73fc316699d5.tar.gz
PeerTube-a5a79d15427372b581e34ac3999c73fc316699d5.tar.zst
PeerTube-a5a79d15427372b581e34ac3999c73fc316699d5.zip
Increase player control bar size
Diffstat (limited to 'client/src/sass/player/peertube-skin.scss')
-rw-r--r--client/src/sass/player/peertube-skin.scss521
1 files changed, 3 insertions, 518 deletions
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 332a0e17d..5f873d495 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,31 +20,6 @@ body {
20 font-size: $font-size; 20 font-size: $font-size;
21 color: pvar(--embedForegroundColor); 21 color: pvar(--embedForegroundColor);
22 22
23 .vjs-dock-text {
24 @include padding-right(60px);
25
26 padding: $dock-padding;
27 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
28 }
29
30 .vjs-dock-title,
31 .vjs-dock-description {
32 text-shadow: 0 0 2px rgba(0, 0, 0, .5);
33 }
34
35 .vjs-dock-description {
36 font-size: 11px;
37
38 .text::before {
39 @include margin-right(4px);
40 }
41
42 .text::after {
43 @include margin-left(4px);
44 transform: scale(-1, 1);
45 }
46 }
47
48 .vjs-volume-level::before { 23 .vjs-volume-level::before {
49 content: ''; /* Remove Circle From Progress Bar */ 24 content: ''; /* Remove Circle From Progress Bar */
50 } 25 }
@@ -129,431 +104,7 @@ body {
129 outline: 0; 104 outline: 0;
130 } 105 }
131 106
132 .vjs-control-bar { 107 @media screen and (max-width: $screen-width-750) {
133 height: $control-bar-height;
134 background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
135 box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
136 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
137 transition: visibility 0.3s, opacity 0.3s !important;
138
139 > button:first-child {
140 @include margin-left($first-control-bar-element-margin-left);
141 }
142
143 .vjs-progress-control,
144 .vjs-play-control,
145 .vjs-playback-rate,
146 .vjs-mute-control,
147 .vjs-volume-control,
148 .vjs-resolution-control,
149 .vjs-fullscreen-control,
150 .vjs-peertube-link,
151 .vjs-theater-control,
152 .vjs-settings {
153 color: pvar(--embedForegroundColor) !important;
154
155 opacity: $primary-foreground-opacity;
156 transition: opacity .1s;
157
158 &:hover {
159 opacity: $primary-foreground-opacity-hover;
160 }
161 }
162
163 .vjs-current-time,
164 .vjs-duration,
165 .vjs-peertube {
166 color: pvar(--embedForegroundColor);
167 opacity: $primary-foreground-opacity;
168 }
169
170 .vjs-progress-control {
171 @include margin-left($progress-margin);
172
173 position: absolute;
174 z-index: 100; // On top of the progress bar
175 bottom: 29px;
176 width: calc(100% - (2 * #{$progress-margin}));
177 height: 14px;
178
179 .vjs-slider {
180 margin: 0;
181 border-radius: 0;
182 background-color: rgba(255, 255, 255, .2);
183 height: 3px;
184 transition: none;
185
186 .vjs-play-progress {
187 background: pvar(--embedForegroundColor);
188
189 // Not display the circle if the progress is not hovered
190 &::before {
191 opacity: 0;
192 transition: opacity 0.1s ease;
193 font-size: 14px;
194
195 top: -0.3em;
196 }
197
198 .vjs-time-tooltip {
199 display: none;
200 }
201 }
202
203 .vjs-load-progress {
204 &,
205 div {
206 background: rgba(255, 255, 255, .2);
207 }
208 }
209 }
210 }
211
212 .vjs-progress-control:hover .vjs-slider,
213 .vjs-progress-control .vjs-slider.vjs-sliding {
214 height: 5px;
215
216 .vjs-play-progress::before {
217 opacity: 1;
218 }
219 }
220
221
222 .vjs-play-control {
223 @include disable-outline;
224
225 cursor: pointer;
226 width: 2em;
227
228 .vjs-icon-placeholder {
229 line-height: $control-bar-height;
230 position: relative;
231 top: -1px;
232
233 &::before {
234 font-size: 28px;
235 line-height: unset;
236 position: relative;
237 }
238 }
239 }
240
241 .vjs-time-control {
242 line-height: inherit;
243
244 &.vjs-current-time {
245 @include margin-left(.5em);
246
247 font-size: $font-size;
248 display: inline-block;
249 padding: 0;
250
251 .vjs-current-time-display {
252 line-height: calc(#{$control-bar-height} - 1px);
253
254 &::after {
255 @include margin(0, 1px, 0, 2px);
256
257 content: '/';
258 }
259 }
260 }
261
262 &.vjs-duration {
263 font-size: $font-size;
264 display: inline-block;
265 padding: 0;
266
267 .vjs-duration-display {
268 line-height: calc(#{$control-bar-height} - 1px);
269 }
270 }
271
272 &.vjs-remaining-time {
273 display: none;
274 }
275 }
276
277 .vjs-live-control {
278 line-height: $control-bar-height;
279 min-width: 4em;
280 width: inherit;
281 }
282
283 .vjs-peertube {
284 @include margin-right(6px);
285
286 width: 100%;
287 line-height: $control-bar-height;
288 text-align: end;
289 overflow: hidden;
290
291 .vjs-peertube-displayed {
292 display: block;
293 }
294
295 .vjs-peertube-hidden {
296 display: none;
297 }
298
299 .download-speed-number,
300 .upload-speed-number,
301 .peers-number,
302 .http-fallback {
303 font-weight: $font-semibold;
304 }
305
306 .download-speed-text,
307 .upload-speed-text,
308 .peers-text,
309 .http-fallback {
310 @include margin-right(15px);
311 }
312
313 .icon {
314 &.icon-download {
315 background-image: url('#{$assets-path}/player/images/arrow-down.svg');
316 }
317
318 &.icon-upload {
319 background-image: url('#{$assets-path}/player/images/arrow-up.svg');
320 }
321 }
322 }
323
324 .vjs-next-video,
325 .vjs-previous-video {
326 line-height: $control-bar-height;
327 text-align: end;
328
329 .icon {
330 &.icon-next,
331 &.icon-previous {
332 mask-image: url('#{$assets-path}/player/images/next.svg');
333 -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
334 mask-size: cover;
335 -webkit-mask-size: cover;
336
337 background-color: #fff;
338 width: 11px;
339 height: 11px;
340 margin-top: -2px;
341 display: inline-block;
342 }
343
344 &.icon-previous {
345 transform: rotate(180deg);
346 }
347 }
348 }
349
350 .vjs-peertube {
351 .icon {
352 display: inline-block;
353 width: 15px;
354 height: 15px;
355 background-size: contain;
356 vertical-align: middle;
357 background-repeat: no-repeat;
358 position: relative;
359 top: -1px;
360 }
361 }
362
363 .vjs-playback-rate {
364 font-size: 10px;
365 width: 37px !important;
366
367 .vjs-playback-rate-value {
368 font-size: 13px;
369 line-height: $control-bar-height;
370 }
371
372 .vjs-menu .vjs-menu-content {
373 width: 37px !important;
374 }
375 }
376
377 .vjs-mute-control {
378 @include disable-outline;
379
380 padding: 0;
381 width: 30px;
382
383 .vjs-icon-placeholder {
384 display: inline-block;
385 width: 22px;
386 height: 22px;
387 vertical-align: middle;
388 background: url('#{$assets-path}/player/images/volume.svg') no-repeat;
389 background-size: contain;
390
391 &::before {
392 content: '';
393 }
394 }
395
396 &.vjs-vol-0 .vjs-icon-placeholder {
397 background: url('#{$assets-path}/player/images/volume-mute.svg') no-repeat;
398 background-size: contain;
399 }
400 }
401
402 .vjs-volume-control {
403 @include margin(0, 5px, 0, 0);
404
405 width: 30px;
406 }
407
408 .vjs-volume-bar {
409 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcCAQAAACw95UnAAAAMElEQVRIx2NgoBL4n4YKGUYNHkEG4zJg1OCRYDCpBowaPJwMppbLRg0eNXjUYBLEAXWNUA6QNm1lAAAAAElFTkSuQmCC') no-repeat;
410 background-size: 22px 14px;
411 height: 100%;
412 width: 100%;
413 max-width: 22px;
414 max-height: 14px;
415 margin: 7px 4px;
416 border-radius: 0;
417 top: 3px;
418
419 .vjs-volume-level {
420 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAcAQAAAAAyhWABAAAAAnRSTlMAAHaTzTgAAAAZSURBVHgBYwAB/g9EUv+JokCqiaT+U4MCAPKPS7WUUOc1AAAAAElFTkSuQmCC') no-repeat;
421 background-size: 22px 14px;
422 max-width: 22px;
423 max-height: 14px;
424 height: 100%;
425 }
426
427 &:focus {
428 text-shadow: none;
429 box-shadow: none;
430 }
431 }
432
433 .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
434 .vjs-volume-panel.vjs-volume-panel-horizontal:active,
435 .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
436 .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
437 width: 6em;
438 transition-property: none;
439 }
440
441 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
442 width: 3em;
443 height: auto;
444 }
445
446 .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
447 transition-property: none;
448 }
449
450 .vjs-volume-panel {
451 .vjs-mute-control {
452 width: 2em;
453 z-index: 1;
454 padding: 0;
455 }
456
457 .vjs-volume-control {
458 display: inline-block;
459 position: relative;
460 left: 5px;
461 opacity: 1;
462 width: 3em;
463 height: auto;
464 }
465 }
466
467 .vjs-peertube-link {
468 @include disable-outline;
469 @include disable-default-a-behaviour;
470
471 text-decoration: none;
472 line-height: $control-bar-height;
473 font-weight: $font-semibold;
474 padding: 0 5px;
475 }
476
477 .vjs-theater-control {
478 @include disable-outline;
479 @include margin-right(1px);
480
481 width: 37px;
482 cursor: pointer;
483
484 .vjs-icon-placeholder {
485 transition: transform 0.2s ease;
486 display: inline-block;
487 width: 22px;
488 height: 22px;
489 vertical-align: middle;
490 background: url('#{$assets-path}/player/images/theater.svg') no-repeat;
491 background-size: contain;
492
493 &::before {
494 content: '';
495 }
496 }
497 }
498
499 .vjs-fullscreen-control {
500 @include disable-outline;
501 @include margin-left($first-control-bar-element-margin-left);
502
503 width: 37px;
504
505 .vjs-icon-placeholder {
506 display: inline-block;
507 width: 22px;
508 height: 22px;
509 vertical-align: middle;
510 background: url('#{$assets-path}/player/images/fullscreen.svg') no-repeat;
511 background-size: contain;
512
513 &::before {
514 content: '';
515 }
516 }
517 }
518
519 .vjs-menu-button-popup {
520 font-weight: $font-semibold;
521 width: 50px;
522
523 .vjs-resolution-button {
524 @include disable-outline;
525 }
526
527 .vjs-menu {
528 top: 20px;
529 left: 0;
530
531 .vjs-menu-content {
532 width: 50px;
533 bottom: 20px;
534 }
535
536 li {
537 text-transform: none;
538 font-size: 13px;
539 }
540 }
541 }
542 }
543
544 @media screen and (max-width: 750px) {
545 .vjs-theater-control {
546 display: none;
547 }
548
549 .vjs-dock-text {
550 font-size: 16px;
551 }
552
553 .vjs-dock-description {
554 font-size: 9px;
555 }
556
557 .vjs-big-play-button { 108 .vjs-big-play-button {
558 font-size: 5em; 109 font-size: 5em;
559 border-width: 3px; 110 border-width: 3px;
@@ -564,11 +115,7 @@ body {
564 } 115 }
565 } 116 }
566 117
567 @media screen and (max-width: 570px) { 118 @media screen and (max-width: $screen-width-570) {
568 .vjs-dock-text {
569 font-size: 14px;
570 }
571
572 .vjs-big-play-button { 119 .vjs-big-play-button {
573 font-size: 4.5em; 120 font-size: 4.5em;
574 border-width: 2.5px; 121 border-width: 2.5px;
@@ -577,31 +124,9 @@ body {
577 @include big-play-button-triangle-size(27px); 124 @include big-play-button-triangle-size(27px);
578 } 125 }
579 } 126 }
580
581 .vjs-peertube {
582 padding: 0 !important;
583
584 .vjs-peertube-displayed {
585 display: none !important;
586 }
587 }
588
589 &.vjs-live {
590 .vjs-duration {
591 display: none !important;
592 }
593
594 .vjs-peertube {
595 display: none !important;
596 }
597 }
598 } 127 }
599 128
600 @media screen and (max-width: 350px) { 129 @media screen and (max-width: $screen-width-350) {
601 .vjs-dock-text {
602 font-size: 13px;
603 }
604
605 .vjs-big-play-button { 130 .vjs-big-play-button {
606 font-size: 3em; 131 font-size: 3em;
607 border-width: 2px; 132 border-width: 2px;
@@ -610,36 +135,6 @@ body {
610 @include big-play-button-triangle-size(20px); 135 @include big-play-button-triangle-size(20px);
611 } 136 }
612 } 137 }
613
614 .vjs-volume-control,
615 .vjs-next-video,
616 .vjs-previous-video {
617 display: none !important;
618 }
619
620 .vjs-peertube-link {
621 padding: 0 !important;
622 }
623
624 .vjs-settings {
625 width: 33px;
626 }
627
628 .vjs-control-bar {
629 > button:first-child {
630 @include margin-left($first-control-bar-element-margin-left-small-width);
631 }
632 }
633
634 .vjs-fullscreen-control {
635 @include margin-right($first-control-bar-element-margin-left-small-width);
636 }
637
638 &.vjs-live {
639 .vjs-current-time {
640 display: none !important;
641 }
642 }
643 } 138 }
644 139
645 // Theater mode is enabled 140 // Theater mode is enabled
@@ -707,13 +202,3 @@ body {
707 display: block; 202 display: block;
708 } 203 }
709} 204}
710
711.vjs-no-next-in-playlist {
712 .vjs-next-video {
713 cursor: default;
714
715 .icon {
716 background-color: rgba(255, 255, 255, 0.5);
717 }
718 }
719}