aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss34
-rw-r--r--client/src/sass/bootstrap.scss29
-rw-r--r--client/src/sass/include/_actor.scss3
-rw-r--r--client/src/sass/include/_miniature.scss11
-rw-r--r--client/src/sass/include/_mixins.scss95
-rw-r--r--client/src/sass/ng-select.scss6
-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
-rw-r--r--client/src/sass/primeng-custom.scss43
13 files changed, 193 insertions, 101 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ae511aa02..799b8c881 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -65,6 +65,9 @@ body {
65 // Allow to disable the scrollbar instead of hide it when the content fit the body 65 // Allow to disable the scrollbar instead of hide it when the content fit the body
66 // And not move the content and header horizontally sticked to right when the content is updating 66 // And not move the content and header horizontally sticked to right when the content is updating
67 overflow-y: scroll; 67 overflow-y: scroll;
68
69 // Fix "reboot" style that set text-align: left
70 text-align: start;
68} 71}
69 72
70::selection { 73::selection {
@@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
130 133
131.full-width { 134.full-width {
132 width: 100%; 135 width: 100%;
133 margin-left: auto; 136 margin: 0 auto;
134 margin-right: auto;
135 max-width: initial; 137 max-width: initial;
136} 138}
137 139
@@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
144} 146}
145 147
146.main-col { 148.main-col {
147 margin-left: $menu-width; 149 @include margin-left($menu-width);
150
148 width: calc(100% - #{$menu-width}); 151 width: calc(100% - #{$menu-width});
149 outline: none; 152 outline: none;
150 153
151 .margin-content { 154 .margin-content {
152 margin-left: pvar(--horizontalMarginContent); 155 margin: 0 pvar(--horizontalMarginContent);
153 margin-right: pvar(--horizontalMarginContent);
154 flex-grow: 1; 156 flex-grow: 1;
155 } 157 }
156 158
@@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
159 width: 100%; 161 width: 100%;
160 display: flex; 162 display: flex;
161 align-items: center; 163 align-items: center;
162 padding-left: pvar(--horizontalMarginContent); 164 padding: 0 pvar(--horizontalMarginContent);
163 padding-right: pvar(--horizontalMarginContent);
164 height: $sub-menu-height; 165 height: $sub-menu-height;
165 margin-bottom: $sub-menu-margin-bottom; 166 margin-bottom: $sub-menu-margin-bottom;
166 overflow-x: auto; 167 overflow-x: auto;
@@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
182 --horizontalMarginContent: #{$expanded-horizontal-margins}; 183 --horizontalMarginContent: #{$expanded-horizontal-margins};
183 --mainColWidth: 100vw; 184 --mainColWidth: 100vw;
184 185
185 margin-left: 0; 186 @include margin-left(0);
186 width: 100%; 187 width: 100%;
187 } 188 }
188 189
@@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
199 200
200.title-page { 201.title-page {
201 @include disable-default-a-behaviour; 202 @include disable-default-a-behaviour;
203 @include margin-right(55px);
202 204
203 opacity: 0.6; 205 opacity: 0.6;
204 color: pvar(--mainForegroundColor); 206 color: pvar(--mainForegroundColor);
205 font-size: 16px; 207 font-size: 16px;
206 display: inline-block; 208 display: inline-block;
207 margin-right: 55px;
208 font-weight: $font-semibold; 209 font-weight: $font-semibold;
209 border-bottom: 2px solid transparent; 210 border-bottom: 2px solid transparent;
210 211
@@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
237 } 238 }
238 239
239 @media screen and (max-width: $mobile-view) { 240 @media screen and (max-width: $mobile-view) {
240 margin-right: 15px; 241 @include margin-left(15px);
241 } 242 }
242} 243}
243 244
@@ -365,8 +366,7 @@ ngx-loading-bar {
365 --horizontalMarginContent: #{$expanded-horizontal-margins / 3}; 366 --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
366 367
367 .sub-menu { 368 .sub-menu {
368 padding-left: 50px; 369 padding: 0 50px;
369 padding-right: 50px;
370 370
371 .title-page { 371 .title-page {
372 font-size: 17px; 372 font-size: 17px;
@@ -386,12 +386,11 @@ ngx-loading-bar {
386 .main-col.expanded { 386 .main-col.expanded {
387 --horizontalMarginContent: 15px; 387 --horizontalMarginContent: 15px;
388 388
389 margin-left: 0; 389 @include margin-left(0);
390 390
391 .sub-menu { 391 .sub-menu {
392 width: 100vw; 392 width: 100vw;
393 padding-left: 15px; 393 padding: 0 15px;
394 padding-right: 15px;
395 margin-bottom: $sub-menu-margin-bottom-small-view; 394 margin-bottom: $sub-menu-margin-bottom-small-view;
396 overflow-x: auto; 395 overflow-x: auto;
397 } 396 }
@@ -405,7 +404,8 @@ ngx-loading-bar {
405 flex-direction: column; 404 flex-direction: column;
406 405
407 .form-sub-title { 406 .form-sub-title {
408 margin-right: 0 !important; 407 @include margin-right(0 !important);
408
409 margin-bottom: 10px; 409 margin-bottom: 10px;
410 text-align: center; 410 text-align: center;
411 } 411 }
@@ -419,7 +419,7 @@ ngx-loading-bar {
419 width: 100%; 419 width: 100%;
420 420
421 a { 421 a {
422 margin-left: 5px; 422 @include margin-left(5px);
423 } 423 }
424 } 424 }
425 } 425 }
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 548e55e1e..501587eb2 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
62 font-size: 15px; 62 font-size: 15px;
63 63
64 .dropdown-header { 64 .dropdown-header {
65 padding-left: 1rem; 65 @include padding-left(1rem);
66 } 66 }
67 67
68 .dropdown-item { 68 .dropdown-item {
@@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
105 } 105 }
106 106
107 .modal-dialog { 107 .modal-dialog {
108 text-align: left; 108 text-align: start;
109 109
110 &:not(.modal-lg):not(.modal-xl) { 110 &:not(.modal-lg):not(.modal-xl) {
111 min-width: 500px; 111 min-width: 500px;
@@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
153 153
154 .inputs { 154 .inputs {
155 margin-bottom: 0; 155 margin-bottom: 0;
156 text-align: right; 156 text-align: end;
157 157
158 > .peertube-button:not(:first-child) { 158 > .peertube-button:not(:first-child) {
159 margin-left: 10px; 159 @include margin-left(10px);
160 } 160 }
161 } 161 }
162} 162}
@@ -342,7 +342,7 @@ ngb-tooltip-window {
342 position: relative; 342 position: relative;
343 343
344 input { 344 input {
345 padding-right: 1.5rem !important; 345 @include padding-right(1.5rem !important);
346 } 346 }
347 347
348 .form-control-clear { 348 .form-control-clear {
@@ -392,3 +392,22 @@ ngb-tooltip-window {
392 border-left-color: pvar(--mainColor); 392 border-left-color: pvar(--mainColor);
393 } 393 }
394} 394}
395
396// Override these properties for Bidi support
397@each $size, $length in $spacers {
398 .ml-#{$size} {
399 @include margin-left($length);
400 }
401
402 .mr-#{$size} {
403 @include margin-right($length);
404 }
405
406 .pl-#{$size} {
407 @include padding-left($length);
408 }
409
410 .pr-#{$size} {
411 @include padding-right($length);
412 }
413}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index 372e7bd24..ab2038dde 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -30,7 +30,8 @@
30 } 30 }
31 31
32 > div { 32 > div {
33 margin-left: $img-margin; 33 @include margin-left($img-margin);
34
34 min-width: 1px; 35 min-width: 1px;
35 } 36 }
36 37
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 070aa3398..f782d374a 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -14,8 +14,9 @@
14 } 14 }
15 15
16 &.blur-filter { 16 &.blur-filter {
17 @include padding-left(4px);
18
17 filter: blur(3px); 19 filter: blur(3px);
18 padding-left: 4px;
19 } 20 }
20} 21}
21 22
@@ -102,11 +103,11 @@
102 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)}; 103 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
103 104
104 @if $margin { 105 @if $margin {
105 margin-left: var(--gridVideosMiniatureMargins) !important; 106 @include margin-left(var(--gridVideosMiniatureMargins) !important);
106 margin-right: var(--gridVideosMiniatureMargins) !important; 107 @include margin-right(var(--gridVideosMiniatureMargins) !important);
107 } @else { 108 } @else {
108 padding-left: var(--gridVideosMiniatureMargins) !important; 109 @include padding-left(var(--gridVideosMiniatureMargins) !important);
109 padding-right: var(--gridVideosMiniatureMargins) !important; 110 @include padding-right(var(--gridVideosMiniatureMargins) !important);
110 } 111 }
111 112
112 @media screen and (max-width: $mobile-view) { 113 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4f2421aea..19454cdb2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -84,6 +84,7 @@
84} 84}
85 85
86@mixin peertube-input-text($width) { 86@mixin peertube-input-text($width) {
87 padding: 0 15px;
87 display: inline-block; 88 display: inline-block;
88 height: $button-height; 89 height: $button-height;
89 width: $width; 90 width: $width;
@@ -91,8 +92,6 @@
91 background-color: pvar(--inputBackgroundColor); 92 background-color: pvar(--inputBackgroundColor);
92 border: 1px solid #C6C6C6; 93 border: 1px solid #C6C6C6;
93 border-radius: 3px; 94 border-radius: 3px;
94 padding-left: 15px;
95 padding-right: 15px;
96 font-size: 15px; 95 font-size: 15px;
97 96
98 &::placeholder { 97 &::placeholder {
@@ -257,6 +256,8 @@
257} 256}
258 257
259@mixin peertube-button { 258@mixin peertube-button {
259 @include padding(0, 17px, 0, 13px);
260
260 border: 0; 261 border: 0;
261 font-weight: $font-semibold; 262 font-weight: $font-semibold;
262 font-size: 15px; 263 font-size: 15px;
@@ -265,7 +266,6 @@
265 // FIXME: because of primeng that redefines border-radius of all input[type="..."] 266 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
266 border-radius: 3px !important; 267 border-radius: 3px !important;
267 text-align: center; 268 text-align: center;
268 padding: 0 17px 0 13px;
269 cursor: pointer; 269 cursor: pointer;
270} 270}
271 271
@@ -290,9 +290,10 @@
290 line-height: normal !important; 290 line-height: normal !important;
291 291
292 my-global-icon { 292 my-global-icon {
293 @include margin-right($margin-right);
294
293 position: relative; 295 position: relative;
294 width: $width; 296 width: $width;
295 margin-right: $margin-right;
296 top: $top; 297 top: $top;
297 } 298 }
298} 299}
@@ -310,7 +311,7 @@
310 width: 100%; 311 width: 100%;
311 height: 100%; 312 height: 100%;
312 font-size: 100px; 313 font-size: 100px;
313 text-align: right; 314 text-align: end;
314 filter: alpha(opacity=0); 315 filter: alpha(opacity=0);
315 opacity: 0; 316 opacity: 0;
316 outline: none; 317 outline: none;
@@ -428,6 +429,8 @@
428 cursor: pointer; 429 cursor: pointer;
429 430
430 &::before { 431 &::before {
432 @include margin-right(10px);
433
431 position: relative; 434 position: relative;
432 top: -2px; 435 top: -2px;
433 content: ''; 436 content: '';
@@ -440,7 +443,6 @@
440 vertical-align: middle; 443 vertical-align: middle;
441 cursor: pointer; 444 cursor: pointer;
442 text-align: center; 445 text-align: center;
443 margin-right: 10px;
444 } 446 }
445 } 447 }
446 448
@@ -500,9 +502,10 @@
500 } 502 }
501 503
502 + span + span { 504 + span + span {
505 @include margin-left(5px);
506
503 font-size: 15px; 507 font-size: 15px;
504 font-weight: $font-regular; 508 font-weight: $font-regular;
505 margin-left: 5px;
506 cursor: pointer; 509 cursor: pointer;
507 display: inline; 510 display: inline;
508 } 511 }
@@ -635,10 +638,10 @@
635 padding: 6px 15px; 638 padding: 6px 15px;
636 639
637 my-global-icon { 640 my-global-icon {
641 @include margin-right(10px);
642
638 width: 22px; 643 width: 22px;
639 opacity: .7; 644 opacity: .7;
640
641 margin-right: 10px;
642 position: relative; 645 position: relative;
643 top: -2px; 646 top: -2px;
644 } 647 }
@@ -705,10 +708,12 @@
705 } 708 }
706 709
707 + .breadcrumb-item { 710 + .breadcrumb-item {
708 padding-left: 0.5rem; 711 @include padding-left(0.5rem);
712
709 &::before { 713 &::before {
714 @include padding-right(0.5rem);
715
710 display: inline-block; 716 display: inline-block;
711 padding-right: 0.5rem;
712 color: #6c757d; 717 color: #6c757d;
713 content: '/'; 718 content: '/';
714 } 719 }
@@ -822,8 +827,8 @@
822 } 827 }
823 828
824 my-actor-avatar { 829 my-actor-avatar {
825 margin-left: -.4rem; 830 @include margin-left(-.4rem);
826 margin-right: .2rem; 831 @include margin-right(.2rem);
827 } 832 }
828 833
829 &.two-lines { 834 &.two-lines {
@@ -836,11 +841,11 @@
836 } 841 }
837 842
838 div { 843 div {
844 margin: 0 .1rem;
845
839 display: flex; 846 display: flex;
840 flex-direction: column; 847 flex-direction: column;
841 height: $avatar-height; 848 height: $avatar-height;
842 margin-left: .1rem;
843 margin-right: .1rem;
844 justify-content: center; 849 justify-content: center;
845 } 850 }
846 } 851 }
@@ -875,14 +880,14 @@
875 880
876 > span > my-global-icon, 881 > span > my-global-icon,
877 > my-global-icon { 882 > my-global-icon {
878 margin-right: 10px; 883 @include margin-right(10px);
879 width: 24px; 884 width: 24px;
880 height: 24px; 885 height: 24px;
881 vertical-align: top; 886 vertical-align: top;
882 } 887 }
883 888
884 .badge { 889 .badge {
885 margin-left: 7px; 890 @include margin-left(7px);
886 vertical-align: top; 891 vertical-align: top;
887 } 892 }
888 } 893 }
@@ -930,3 +935,59 @@
930 } 935 }
931 } 936 }
932} 937}
938
939@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
940 @include margin-left($inline-start);
941 @include margin-right($inline-end);
942
943 margin-top: $block-start;
944 margin-bottom: $block-end;
945}
946
947@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
948 @include padding-left($inline-start);
949 @include padding-right($inline-end);
950
951 padding-top: $block-start;
952 padding-bottom: $block-end;
953}
954
955@mixin margin-left ($value) {
956 @supports (margin-inline-start: $value) {
957 margin-inline-start: $value;
958 }
959
960 @supports not (margin-inline-start: $value) {
961 margin-left: $value;
962 }
963}
964
965@mixin margin-right ($value) {
966 @supports (margin-inline-end: $value) {
967 margin-inline-end: $value;
968 }
969
970 @supports not (margin-inline-end: $value) {
971 margin-right: $value;
972 }
973}
974
975@mixin padding-left ($value) {
976 @supports (padding-inline-start: $value) {
977 padding-inline-start: $value;
978 }
979
980 @supports not (padding-inline-start: $value) {
981 padding-left: $value;
982 }
983}
984
985@mixin padding-right ($value) {
986 @supports (padding-inline-end: $value) {
987 padding-inline-end: $value;
988 }
989
990 @supports not (padding-inline-end: $value) {
991 padding-right: $value;
992 }
993}
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 13b2012b2..ecd33babe 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
31 } 31 }
32 32
33 .ng-arrow-wrapper { 33 .ng-arrow-wrapper {
34 padding-right: 12px; 34 @include padding-right(12px);
35 } 35 }
36 36
37 &.ng-select-single .ng-value-container .ng-value { 37 &.ng-select-single .ng-value-container .ng-value {
@@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
44 } 44 }
45 45
46 &.ng-select-multiple .ng-select-container .ng-value-container { 46 &.ng-select-multiple .ng-select-container .ng-value-container {
47 padding-left: 12px; 47 @include padding-left(12px);
48 48
49 .ng-value { /* stylelint-disable-line */ 49 .ng-value { /* stylelint-disable-line */
50 margin-left: 3px; 50 @include margin-left(12px);
51 } 51 }
52 } 52 }
53} 53}
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 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 6a4d89dff..4cd27bea8 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus {
139 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest); 139 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
140} 140}
141body .p-paginator .p-dropdown { 141body .p-paginator .p-dropdown {
142 margin-left: 0.5em; 142 @include margin-left(0.5em);
143
143 height: 2.286em; 144 height: 2.286em;
144 min-width: auto; 145 min-width: auto;
145} 146}
@@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus {
161 border-color: pvar(--mainColor); 162 border-color: pvar(--mainColor);
162} 163}
163body .p-dropdown .p-dropdown-label { 164body .p-dropdown .p-dropdown-label {
164 padding-right: 2em; 165 @include padding-right(2em);
165} 166}
166body .p-dropdown .p-dropdown-trigger { 167body .p-dropdown .p-dropdown-trigger {
167 background-color: #ffffff; 168 background-color: #ffffff;
@@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon {
175 color: #848484; 176 color: #848484;
176} 177}
177body .p-dropdown.p-dropdown-clearable .p-dropdown-label { 178body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
178 padding-right: 4em; 179 @include padding-right(4em);
179} 180}
180body .p-dropdown-panel { 181body .p-dropdown-panel {
181 padding: 0; 182 padding: 0;
@@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container {
191 margin: 0; 192 margin: 0;
192} 193}
193body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter { 194body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
195 @include padding-right(2em);
196
194 width: 100%; 197 width: 100%;
195 padding-right: 2em;
196} 198}
197body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon { 199body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
198 top: 50%; 200 top: 50%;
@@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker {
368 border-top: 0 none; 370 border-top: 0 none;
369} 371}
370body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { 372body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
373 @include padding-right(0.857em);
374 @include padding-left(0.857em);
375
371 border-right: 1px solid #d8dae2; 376 border-right: 1px solid #d8dae2;
372 padding-right: 0.857em;
373 padding-left: 0.857em;
374 padding-top: 0; 377 padding-top: 0;
375 padding-bottom: 0; 378 padding-bottom: 0;
376} 379}
377body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { 380body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
378 padding-left: 0; 381 @include padding-left(0);
379} 382}
380body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { 383body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
381 padding-right: 0; 384 @include padding-right(0);
382 border-right: 0 none; 385 border-right: 0 none;
383} 386}
384body .p-calendar.p-calendar-w-btn .p-inputtext { 387body .p-calendar.p-calendar-w-btn .p-inputtext {
@@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
402 border: 1px solid #a80000; 405 border: 1px solid #a80000;
403} 406}
404body .p-timepicker .p-separator { 407body .p-timepicker .p-separator {
405 margin-left: 0; 408 @include margin-left(0);
406 min-width: 0.75rem; 409 min-width: 0.75rem;
407} 410}
408 411
@@ -514,7 +517,7 @@ p-table {
514 align-items: center; 517 align-items: center;
515 518
516 .left-buttons { 519 .left-buttons {
517 padding-left: 15px; 520 @include padding-left(15px);
518 } 521 }
519 } 522 }
520 } 523 }
@@ -534,7 +537,7 @@ p-table {
534 } 537 }
535 538
536 td { 539 td {
537 padding-left: 15px !important; 540 @include padding-left(15px !important);
538 541
539 &.expand-cell { 542 &.expand-cell {
540 padding: 10px 15px; 543 padding: 10px 15px;
@@ -646,10 +649,10 @@ p-table {
646 my-delete-button, 649 my-delete-button,
647 my-button { 650 my-button {
648 display: inline-block !important; 651 display: inline-block !important;
649 margin-left: 5px; 652 @include margin-left(5px);
650 653
651 &:first-child { 654 &:first-child {
652 margin-left: 0 655 @include margin-left(0)
653 } 656 }
654 } 657 }
655 } 658 }
@@ -714,13 +717,13 @@ p-table {
714 &.p-paginator-prev { 717 &.p-paginator-prev {
715 @extend .glyphicon-chevron-left; 718 @extend .glyphicon-chevron-left;
716 719
717 margin-right: 10px; 720 @include margin-right(10px);
718 } 721 }
719 722
720 &.p-paginator-next { 723 &.p-paginator-next {
721 @extend .glyphicon-chevron-right; 724 @extend .glyphicon-chevron-right;
722 725
723 margin-left: 10px; 726 @include margin-left(10px);
724 } 727 }
725 728
726 &.p-paginator-last { 729 &.p-paginator-last {
@@ -799,7 +802,7 @@ p-calendar .p-datepicker {
799 .p-datepicker-header { 802 .p-datepicker-header {
800 803
801 .p-datepicker-year { 804 .p-datepicker-year {
802 margin-left: 5px; 805 @include margin-left(5px);
803 } 806 }
804 807
805 .p-datepicker-next { 808 .p-datepicker-next {
@@ -807,7 +810,7 @@ p-calendar .p-datepicker {
807 @include glyphicon-light; 810 @include glyphicon-light;
808 811
809 color: #000 !important; 812 color: #000 !important;
810 text-align: right; 813 text-align: end;
811 814
812 .pi.pi-chevron-right { 815 .pi.pi-chevron-right {
813 display: none !important; 816 display: none !important;
@@ -819,7 +822,7 @@ p-calendar .p-datepicker {
819 @include glyphicon-light; 822 @include glyphicon-light;
820 823
821 color: #000 !important; 824 color: #000 !important;
822 text-align: left; 825 text-align: start;
823 826
824 .pi.pi-chevron-left { 827 .pi.pi-chevron-left {
825 display: none !important; 828 display: none !important;
@@ -945,7 +948,7 @@ p-toast {
945 948
946 .message { 949 .message {
947 flex-grow: 1; 950 flex-grow: 1;
948 margin-right: 20px; 951 @include margin-right(20px);
949 952
950 h3 { 953 h3 {
951 font-size: 21px; 954 font-size: 21px;
@@ -959,7 +962,7 @@ p-toast {
959 962
960 .glyphicon { 963 .glyphicon {
961 font-size: 32px; 964 font-size: 32px;
962 margin-right: 5px; 965 @include margin-right(5px);
963 } 966 }
964 } 967 }
965 } 968 }