aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/player')
-rw-r--r--client/src/sass/player/bezels.scss3
-rw-r--r--client/src/sass/player/context-menu.scss5
-rw-r--r--client/src/sass/player/peertube-skin.scss41
-rw-r--r--client/src/sass/player/settings-menu.scss16
-rw-r--r--client/src/sass/player/stats.scss2
-rw-r--r--client/src/sass/player/upnext.scss6
6 files changed, 40 insertions, 33 deletions
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index 853a030a3..b8c3325d0 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -9,13 +9,14 @@
9} 9}
10 10
11.vjs-bezel { 11.vjs-bezel {
12 @include margin-left(-26px);
13
12 position: absolute; 14 position: absolute;
13 left: 50%; 15 left: 50%;
14 top: 50%; 16 top: 50%;
15 width: 52px; 17 width: 52px;
16 height: 52px; 18 height: 52px;
17 z-index: 19; 19 z-index: 19;
18 margin-left: -26px;
19 margin-top: -26px; 20 margin-top: -26px;
20 background: rgba(0, 0, 0, .5); 21 background: rgba(0, 0, 0, .5);
21 border-radius: 26px; 22 border-radius: 26px;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 1653dd2c4..501c68ffd 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -25,7 +25,7 @@ $context-menu-width: 350px;
25 cursor: pointer; 25 cursor: pointer;
26 font-size: 1em; 26 font-size: 1em;
27 padding: 8px 16px; 27 padding: 8px 16px;
28 text-align: left; 28 text-align: start;
29 text-transform: none; 29 text-transform: none;
30 30
31 &:hover { 31 &:hover {
@@ -35,6 +35,8 @@ $context-menu-width: 350px;
35 [class^='vjs-icon-'] { 35 [class^='vjs-icon-'] {
36 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info'; 36 $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
37 37
38 @include margin-right(0.8rem !important);
39
38 display: inline-flex; 40 display: inline-flex;
39 position: relative; 41 position: relative;
40 top: 2px; 42 top: 2px;
@@ -43,7 +45,6 @@ $context-menu-width: 350px;
43 height: 14px; 45 height: 14px;
44 background-color: #fff; 46 background-color: #fff;
45 mask-size: cover; 47 mask-size: cover;
46 margin-right: 0.8rem !important;
47 48
48 @each $icon in $icons { 49 @each $icon in $icons {
49 &[class$="-#{$icon}"] { 50 &[class$="-#{$icon}"] {
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 {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 74eee7d64..2183a7dbc 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -56,13 +56,13 @@ $setting-transition-easing: ease-out;
56 } 56 }
57 57
58 .vjs-settings-sub-menu-title { 58 .vjs-settings-sub-menu-title {
59 text-align: left; 59 text-align: start;
60 font-weight: $font-semibold; 60 font-weight: $font-semibold;
61 } 61 }
62 62
63 .vjs-settings-sub-menu-value { 63 .vjs-settings-sub-menu-value {
64 width: 100%; 64 width: 100%;
65 text-align: right; 65 text-align: end;
66 66
67 small { 67 small {
68 font-size: 0.85em; 68 font-size: 0.85em;
@@ -132,7 +132,7 @@ $setting-transition-easing: ease-out;
132 .vjs-settings-sub-menu-value::after { 132 .vjs-settings-sub-menu-value::after {
133 @include chevron-right(9px, 2px); 133 @include chevron-right(9px, 2px);
134 134
135 margin-left: 5px; 135 @include margin-left(5px);
136 } 136 }
137 } 137 }
138 138
@@ -142,7 +142,7 @@ $setting-transition-easing: ease-out;
142 .vjs-menu-item { 142 .vjs-menu-item {
143 outline: 0; 143 outline: 0;
144 font-weight: $font-semibold; 144 font-weight: $font-semibold;
145 text-align: right; 145 text-align: end;
146 padding: 5px 8px; 146 padding: 5px 8px;
147 147
148 &.vjs-back-button { 148 &.vjs-back-button {
@@ -150,12 +150,12 @@ $setting-transition-easing: ease-out;
150 padding: 8px 8px 13px 12px; 150 padding: 8px 8px 13px 12px;
151 margin-bottom: 5px; 151 margin-bottom: 5px;
152 border-bottom: 1px solid #808080; 152 border-bottom: 1px solid #808080;
153 text-align: left; 153 text-align: start;
154 154
155 &::before { 155 &::before {
156 @include chevron-left(9px, 2px); 156 @include chevron-left(9px, 2px);
157 157
158 margin-right: 5px; 158 @include margin-right(5px);
159 } 159 }
160 } 160 }
161 161
@@ -182,10 +182,10 @@ $setting-transition-easing: ease-out;
182 width: 200px; 182 width: 200px;
183 183
184 .vjs-menu-item { 184 .vjs-menu-item {
185 text-align: left; 185 text-align: start;
186 186
187 .vjs-menu-item-text { 187 .vjs-menu-item-text {
188 margin-left: 25px; 188 @include margin-left(25px);
189 text-transform: capitalize; 189 text-transform: capitalize;
190 } 190 }
191 } 191 }
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index 6fcbcd969..c6388ed13 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
34 display: inline-block; 34 display: inline-block;
35 font-weight: 600; 35 font-weight: 600;
36 padding: 0 .5em; 36 padding: 0 .5em;
37 text-align: right; 37 text-align: end;
38 width: 11.5em; 38 width: 11.5em;
39 white-space: nowrap; 39 white-space: nowrap;
40 } 40 }
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index 8c9a6f784..922a9674d 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -23,19 +23,17 @@ $browser-context: 16;
23 } 23 }
24 24
25 .vjs-upnext-top { 25 .vjs-upnext-top {
26 margin: 0 auto;
26 width: 100%; 27 width: 100%;
27 position: absolute; 28 position: absolute;
28 margin-left: auto;
29 margin-right: auto;
30 bottom: 50%; 29 bottom: 50%;
31 margin-bottom: 60px; 30 margin-bottom: 60px;
32 } 31 }
33 32
34 .vjs-upnext-bottom { 33 .vjs-upnext-bottom {
34 margin: 0 auto;
35 width: 100%; 35 width: 100%;
36 position: absolute; 36 position: absolute;
37 margin-left: auto;
38 margin-right: auto;
39 top: 50%; 37 top: 50%;
40 margin-top: 52px; 38 margin-top: 52px;
41 } 39 }