aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player/peertube-skin.scss
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-07 17:38:31 +0200
committerChocobozzz <me@florianbigard.com>2021-06-07 18:14:05 +0200
commit27bc95867442c772841fb183a625bbda61dede51 (patch)
tree6fe20951f1109c1f5388d9a681f0df0758d463e0 /client/src/sass/player/peertube-skin.scss
parent8beea2d37d90e9a12d895f4a9eebc1e532313d8c (diff)
downloadPeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.gz
PeerTube-27bc95867442c772841fb183a625bbda61dede51.tar.zst
PeerTube-27bc95867442c772841fb183a625bbda61dede51.zip
Bidi support
Diffstat (limited to 'client/src/sass/player/peertube-skin.scss')
-rw-r--r--client/src/sass/player/peertube-skin.scss41
1 files changed, 24 insertions, 17 deletions
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index c010f7297..148992089 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -20,8 +20,9 @@ body {
20 color: pvar(--embedForegroundColor); 20 color: pvar(--embedForegroundColor);
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 @include padding-right(60px);
24
23 padding: $dock-padding; 25 padding: $dock-padding;
24 padding-right: 60px;
25 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); 26 background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
26 } 27 }
27 28
@@ -34,11 +35,11 @@ body {
34 font-size: 11px; 35 font-size: 11px;
35 36
36 .text::before { 37 .text::before {
37 margin-right: 4px; 38 @include margin-right(4px);
38 } 39 }
39 40
40 .text::after { 41 .text::after {
41 margin-left: 4px; 42 @include margin-left(4px);
42 transform: scale(-1, 1); 43 transform: scale(-1, 1);
43 } 44 }
44 } 45 }
@@ -55,6 +56,8 @@ body {
55 $big-play-width: 1.2em; 56 $big-play-width: 1.2em;
56 $big-play-height: 1.2em; 57 $big-play-height: 1.2em;
57 58
59 @include margin-left(-($big-play-width / 2));
60
58 outline: 0; 61 outline: 0;
59 font-size: 6em; 62 font-size: 6em;
60 63
@@ -66,7 +69,6 @@ body {
66 width: $big-play-width; 69 width: $big-play-width;
67 height: $big-play-height; 70 height: $big-play-height;
68 line-height: $big-play-height; 71 line-height: $big-play-height;
69 margin-left: -($big-play-width / 2);
70 margin-top: -($big-play-height / 2); 72 margin-top: -($big-play-height / 2);
71 transition: 0.4s opacity; 73 transition: 0.4s opacity;
72 74
@@ -157,7 +159,7 @@ body {
157 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); 159 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
158 160
159 > button:first-child { 161 > button:first-child {
160 margin-left: $first-control-bar-element-margin-left; 162 @include margin-left($first-control-bar-element-margin-left);
161 } 163 }
162 164
163 .vjs-progress-control, 165 .vjs-progress-control,
@@ -188,11 +190,12 @@ body {
188 } 190 }
189 191
190 .vjs-progress-control { 192 .vjs-progress-control {
193 @include margin-left($progress-margin);
194
191 position: absolute; 195 position: absolute;
192 z-index: 100; // On top of the progress bar 196 z-index: 100; // On top of the progress bar
193 bottom: 29px; 197 bottom: 29px;
194 width: calc(100% - (2 * #{$progress-margin})); 198 width: calc(100% - (2 * #{$progress-margin}));
195 margin-left: $progress-margin;
196 height: 14px; 199 height: 14px;
197 200
198 .vjs-slider { 201 .vjs-slider {
@@ -261,17 +264,19 @@ body {
261 line-height: inherit; 264 line-height: inherit;
262 265
263 &.vjs-current-time { 266 &.vjs-current-time {
267 @include margin-left(.5em);
268
264 font-size: $font-size; 269 font-size: $font-size;
265 display: inline-block; 270 display: inline-block;
266 padding: 0; 271 padding: 0;
267 margin-left: .5em;
268 272
269 .vjs-current-time-display { 273 .vjs-current-time-display {
270 line-height: calc(#{$control-bar-height} - 1px); 274 line-height: calc(#{$control-bar-height} - 1px);
271 275
272 &::after { 276 &::after {
277 @include margin(0, 1px, 0, 2px);
278
273 content: '/'; 279 content: '/';
274 margin: 0 1px 0 2px;
275 } 280 }
276 } 281 }
277 } 282 }
@@ -298,10 +303,11 @@ body {
298 } 303 }
299 304
300 .vjs-peertube { 305 .vjs-peertube {
306 @include margin-right(6px);
307
301 width: 100%; 308 width: 100%;
302 line-height: $control-bar-height; 309 line-height: $control-bar-height;
303 text-align: right; 310 text-align: end;
304 margin-right: 6px;
305 overflow: hidden; 311 overflow: hidden;
306 312
307 .vjs-peertube-displayed { 313 .vjs-peertube-displayed {
@@ -323,7 +329,7 @@ body {
323 .upload-speed-text, 329 .upload-speed-text,
324 .peers-text, 330 .peers-text,
325 .http-fallback { 331 .http-fallback {
326 margin-right: 15px; 332 @include margin-right(15px);
327 } 333 }
328 334
329 .icon { 335 .icon {
@@ -340,7 +346,7 @@ body {
340 .vjs-next-video, 346 .vjs-next-video,
341 .vjs-previous-video { 347 .vjs-previous-video {
342 line-height: $control-bar-height; 348 line-height: $control-bar-height;
343 text-align: right; 349 text-align: end;
344 350
345 .icon { 351 .icon {
346 &.icon-next, 352 &.icon-next,
@@ -415,8 +421,9 @@ body {
415 } 421 }
416 422
417 .vjs-volume-control { 423 .vjs-volume-control {
424 @include margin(0, 5px, 0, 0);
425
418 width: 30px; 426 width: 30px;
419 margin: 0 5px 0 0;
420 } 427 }
421 428
422 .vjs-volume-bar { 429 .vjs-volume-bar {
@@ -490,9 +497,9 @@ body {
490 497
491 .vjs-theater-control { 498 .vjs-theater-control {
492 @include disable-outline; 499 @include disable-outline;
500 @include margin-right(1px);
493 501
494 width: 37px; 502 width: 37px;
495 margin-right: 1px;
496 cursor: pointer; 503 cursor: pointer;
497 504
498 .vjs-icon-placeholder { 505 .vjs-icon-placeholder {
@@ -512,9 +519,9 @@ body {
512 519
513 .vjs-fullscreen-control { 520 .vjs-fullscreen-control {
514 @include disable-outline; 521 @include disable-outline;
522 @include margin-left($first-control-bar-element-margin-left);
515 523
516 width: 37px; 524 width: 37px;
517 margin-right: $first-control-bar-element-margin-left;
518 525
519 .vjs-icon-placeholder { 526 .vjs-icon-placeholder {
520 display: inline-block; 527 display: inline-block;
@@ -641,12 +648,12 @@ body {
641 648
642 .vjs-control-bar { 649 .vjs-control-bar {
643 > button:first-child { 650 > button:first-child {
644 margin-left: $first-control-bar-element-margin-left-small-width; 651 @include margin-left($first-control-bar-element-margin-left-small-width);
645 } 652 }
646 } 653 }
647 654
648 .vjs-fullscreen-control { 655 .vjs-fullscreen-control {
649 margin-right: $first-control-bar-element-margin-left-small-width; 656 @include margin-right($first-control-bar-element-margin-left-small-width);
650 } 657 }
651 658
652 &.vjs-live { 659 &.vjs-live {