aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-09 09:33:28 +0200
committerGitHub <noreply@github.com>2020-06-09 09:33:28 +0200
commite66883b37ae0796256b3aba550670a2d76cfc98a (patch)
tree3cce3c78e9f9f327470f0370a1b4065fe7e0009e /client/src/sass
parent6ad971d5f5e9ea2adfc58bd83ba1790efa4a8d12 (diff)
downloadPeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.gz
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.tar.zst
PeerTube-e66883b37ae0796256b3aba550670a2d76cfc98a.zip
`fitWidth` for `video-miniature`, fluid grid (#2830)
* Fluid abstract video list * normalize timestamp display on miniatures * use grid for abstract-video-list - refactor scss function var to pvar to avoid overriding css variables - move fluid-grid margins to adapt-margin-content-width mixin for maintainability - fix video-miniature-name margin-top on small screen * move sceenratio function in a mixin * display no miniature avatar in channel videos view
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss24
-rw-r--r--client/src/sass/bootstrap.scss30
-rw-r--r--client/src/sass/include/_miniature.scss55
-rw-r--r--client/src/sass/include/_mixins.scss86
-rw-r--r--client/src/sass/include/_variables.scss2
-rw-r--r--client/src/sass/loading-bar.scss4
-rw-r--r--client/src/sass/player/context-menu.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss10
-rw-r--r--client/src/sass/player/settings-menu.scss2
-rw-r--r--client/src/sass/primeng-custom.scss70
10 files changed, 154 insertions, 131 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 16e7ea5ca..d5763527e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,21 +47,21 @@ body {
47 47
48 --actionButtonColor: #{$grey-foreground-color}; 48 --actionButtonColor: #{$grey-foreground-color};
49 --supportButtonBackgroundColor: #{transparent}; 49 --supportButtonBackgroundColor: #{transparent};
50 --supportButtonColor: #{var(--actionButtonColor)}; 50 --supportButtonColor: #{pvar(--actionButtonColor)};
51 --supportButtonHeartColor: #{$support-button-heart}; 51 --supportButtonHeartColor: #{$support-button-heart};
52 52
53 --activatedActionButtonColor: #{$activated-action-button-color}; 53 --activatedActionButtonColor: #{$activated-action-button-color};
54 54
55 font-family: $main-fonts; 55 font-family: $main-fonts;
56 font-weight: $font-regular; 56 font-weight: $font-regular;
57 color: var(--mainForegroundColor); 57 color: pvar(--mainForegroundColor);
58 background-color: var(--mainBackgroundColor); 58 background-color: pvar(--mainBackgroundColor);
59 font-size: 14px; 59 font-size: 14px;
60} 60}
61 61
62::selection { 62::selection {
63 color: var(--mainBackgroundColor); 63 color: pvar(--mainBackgroundColor);
64 background-color: var(--mainHoverColor); 64 background-color: pvar(--mainHoverColor);
65} 65}
66 66
67#incompatible-browser { 67#incompatible-browser {
@@ -78,12 +78,12 @@ strong {
78 78
79input.readonly { 79input.readonly {
80 /* Force blank on readonly inputs */ 80 /* Force blank on readonly inputs */
81 background-color: var(--inputBackgroundColor) !important; 81 background-color: pvar(--inputBackgroundColor) !important;
82} 82}
83 83
84input, textarea { 84input, textarea {
85 outline: none; 85 outline: none;
86 color: var(--mainForegroundColor); 86 color: pvar(--mainForegroundColor);
87} 87}
88 88
89label { 89label {
@@ -128,7 +128,7 @@ label {
128 } 128 }
129 129
130 .sub-menu { 130 .sub-menu {
131 background-color: var(--submenuColor); 131 background-color: pvar(--submenuColor);
132 width: 100%; 132 width: 100%;
133 height: 81px; 133 height: 81px;
134 margin-bottom: $sub-menu-margin-bottom; 134 margin-bottom: $sub-menu-margin-bottom;
@@ -166,7 +166,7 @@ label {
166} 166}
167 167
168.title-page { 168.title-page {
169 color: var(--mainForegroundColor); 169 color: pvar(--mainForegroundColor);
170 font-size: 16px; 170 font-size: 16px;
171 display: inline-block; 171 display: inline-block;
172 margin-right: 55px; 172 margin-right: 55px;
@@ -180,7 +180,7 @@ label {
180 180
181 &.active { 181 &.active {
182 font-weight: $font-bold; 182 font-weight: $font-bold;
183 border-bottom: 2px solid var(--mainColor); 183 border-bottom: 2px solid pvar(--mainColor);
184 } 184 }
185 185
186 &.title-page-single { 186 &.title-page-single {
@@ -188,7 +188,7 @@ label {
188 } 188 }
189 189
190 &:hover, &:active, &:focus { 190 &:hover, &:active, &:focus {
191 color: var(--mainForegroundColor); 191 color: pvar(--mainForegroundColor);
192 } 192 }
193 193
194 @media screen and (max-width: $mobile-view) { 194 @media screen and (max-width: $mobile-view) {
@@ -220,7 +220,7 @@ label {
220 @include disable-default-a-behaviour; 220 @include disable-default-a-behaviour;
221 221
222 font-size: 16px; 222 font-size: 16px;
223 color: var(--mainForegroundColor); 223 color: pvar(--mainForegroundColor);
224 padding: 5px 15px; 224 padding: 5px 15px;
225 border-radius: 0.25rem; 225 border-radius: 0.25rem;
226 226
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 7985472ed..0dc58a7c9 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
51 padding: 3px 15px; 51 padding: 3px 15px;
52 52
53 &.active { 53 &.active {
54 color: var(--mainBackgroundColor) !important; 54 color: pvar(--mainBackgroundColor) !important;
55 background-color: var(--mainHoverColor); 55 background-color: pvar(--mainHoverColor);
56 opacity: .9; 56 opacity: .9;
57 } 57 }
58 58
@@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
94 text-align: center; 94 text-align: center;
95 95
96 .modal-content { 96 .modal-content {
97 background-color: var(--mainBackgroundColor); 97 background-color: pvar(--mainBackgroundColor);
98 } 98 }
99 99
100 .modal-header { 100 .modal-header {
@@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
161 a { 161 a {
162 @include disable-default-a-behaviour; 162 @include disable-default-a-behaviour;
163 163
164 color: var(--mainForegroundColor); 164 color: pvar(--mainForegroundColor);
165 } 165 }
166} 166}
167 167
@@ -170,7 +170,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
170 .nav-link { 170 .nav-link {
171 @include disable-default-a-behaviour; 171 @include disable-default-a-behaviour;
172 172
173 color: var(--mainForegroundColor) !important; 173 color: pvar(--mainForegroundColor) !important;
174 } 174 }
175} 175}
176 176
@@ -180,9 +180,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
180 } 180 }
181 &.active { 181 &.active {
182 font-weight: $font-semibold; 182 font-weight: $font-semibold;
183 background-color: var(--mainBackgroundColor) !important; 183 background-color: pvar(--mainBackgroundColor) !important;
184 border: none; 184 border: none;
185 border-bottom: 2px solid var(--mainColor); 185 border-bottom: 2px solid pvar(--mainColor);
186 } 186 }
187 &:hover { 187 &:hover {
188 border-top-color: transparent; 188 border-top-color: transparent;
@@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
192} 192}
193 193
194.card { 194.card {
195 background-color: var(--mainBackgroundColor); 195 background-color: pvar(--mainBackgroundColor);
196 border-color: #dee2e6; 196 border-color: #dee2e6;
197} 197}
198 198
@@ -240,27 +240,27 @@ ngb-tooltip-window {
240} 240}
241 241
242.btn-outline-tertiary { 242.btn-outline-tertiary {
243 color: var(--secondaryColor); 243 color: pvar(--secondaryColor);
244 border-color: var(--secondaryColor); 244 border-color: pvar(--secondaryColor);
245 245
246 &:focus-within, 246 &:focus-within,
247 &:focus, 247 &:focus,
248 &:hover { 248 &:hover {
249 color: var(--mainBackgroundColor); 249 color: pvar(--mainBackgroundColor);
250 background-color: var(--secondaryColor); 250 background-color: pvar(--secondaryColor);
251 } 251 }
252} 252}
253 253
254// input box-shadow on focus 254// input box-shadow on focus
255.form-control { 255.form-control {
256 font-size: 15px; 256 font-size: 15px;
257 color: var(--mainForegroundColor); 257 color: pvar(--mainForegroundColor);
258 background-color: var(--inputBackgroundColor); 258 background-color: pvar(--inputBackgroundColor);
259 outline: none; 259 outline: none;
260 260
261 &:focus-within, 261 &:focus-within,
262 &:focus { 262 &:focus {
263 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 263 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
264 264
265 &.input-error { 265 &.input-error {
266 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)}; 266 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d0ee1e2f0..d89d6f9ff 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -6,7 +6,7 @@
6 6
7 transition: color 0.2s; 7 transition: color 0.2s;
8 font-weight: $font-semibold; 8 font-weight: $font-semibold;
9 color: var(--mainForegroundColor); 9 color: pvar(--mainForegroundColor);
10 margin-top: 10px; 10 margin-top: 10px;
11 margin-bottom: 5px; 11 margin-bottom: 5px;
12 12
@@ -80,7 +80,7 @@ $play-overlay-width: 18px;
80 } 80 }
81 81
82 &.focus-visible { 82 &.focus-visible {
83 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 83 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
84 outline: none; 84 outline: none;
85 } 85 }
86 86
@@ -168,7 +168,7 @@ $play-overlay-width: 18px;
168 outline: none; 168 outline: none;
169 } 169 }
170 170
171 color: var(--mainForegroundColor); 171 color: pvar(--mainForegroundColor);
172 } 172 }
173 } 173 }
174 174
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
187 } 187 }
188 188
189 .followers { 189 .followers {
190 color: var(--greyForegroundColor); 190 color: pvar(--greyForegroundColor);
191 font-weight: normal; 191 font-weight: normal;
192 font-size: 14px; 192 font-size: 14px;
193 margin-left: 10px; 193 margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
203 display: inline-block; 203 display: inline-block;
204 font-size: 16px; 204 font-size: 16px;
205 text-transform: uppercase; 205 text-transform: uppercase;
206 color: var(--greyForegroundColor); 206 color: pvar(--greyForegroundColor);
207 margin-bottom: 10px; 207 margin-bottom: 10px;
208 font-weight: $font-semibold; 208 font-weight: $font-semibold;
209 text-decoration: none; 209 text-decoration: none;
@@ -221,32 +221,37 @@ $play-overlay-width: 18px;
221 } 221 }
222} 222}
223 223
224@mixin adapt-margin-content-width { 224@mixin adapt-margin-content-width($fluid: false) {
225 width: $video-miniature-width * 6; 225 @if $fluid {
226 margin: auto !important; 226 margin-left: 3vw !important;
227 margin-right: 3vw !important;
228 } @else {
229 width: $video-miniature-width * 6;
230 margin: auto !important;
227 231
228 @media screen and (max-width: 1800px) { 232 @media screen and (max-width: 1800px) {
229 width: $video-miniature-width * 5; 233 width: $video-miniature-width * 5;
230 } 234 }
231 235
232 @media screen and (max-width: 1800px - $video-miniature-width) { 236 @media screen and (max-width: 1800px - $video-miniature-width) {
233 width: $video-miniature-width * 4; 237 width: $video-miniature-width * 4;
234 } 238 }
235 239
236 @media screen and (max-width: 1800px - (2* $video-miniature-width)) { 240 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
237 width: $video-miniature-width * 3; 241 width: $video-miniature-width * 3;
238 } 242 }
239 243
240 @media screen and (max-width: 1800px - (3* $video-miniature-width)) { 244 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
241 width: $video-miniature-width * 2; 245 width: $video-miniature-width * 2;
242 } 246 }
243 247
244 @media screen and (max-width: $mobile-view) { 248 @media screen and (max-width: $mobile-view) {
245 width: auto; 249 width: auto;
246 margin: 0 !important; 250 margin: 0 !important;
247 251
248 .videos { 252 .videos {
249 @include video-miniature-small-screen; 253 @include video-miniature-small-screen;
254 }
250 } 255 }
251 } 256 }
252} 257}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0b558a3f5..5971bb72a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -90,8 +90,8 @@
90 display: inline-block; 90 display: inline-block;
91 height: $button-height; 91 height: $button-height;
92 width: $width; 92 width: $width;
93 color: var(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
94 background-color: var(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid #C6C6C6; 95 border: 1px solid #C6C6C6;
96 border-radius: 3px; 96 border-radius: 3px;
97 padding-left: 15px; 97 padding-left: 15px;
@@ -99,7 +99,7 @@
99 font-size: 15px; 99 font-size: 15px;
100 100
101 &::placeholder { 101 &::placeholder {
102 color: var(--inputPlaceholderColor); 102 color: pvar(--inputPlaceholderColor);
103 } 103 }
104 104
105 @media screen and (max-width: $width) { 105 @media screen and (max-width: $width) {
@@ -122,24 +122,24 @@
122@mixin peertube-textarea ($width, $height) { 122@mixin peertube-textarea ($width, $height) {
123 @include peertube-input-text($width); 123 @include peertube-input-text($width);
124 124
125 color: var(--textareaForegroundColor); 125 color: pvar(--textareaForegroundColor);
126 background-color: var(--textareaBackgroundColor); 126 background-color: pvar(--textareaBackgroundColor);
127 height: $height; 127 height: $height;
128 padding: 5px 15px; 128 padding: 5px 15px;
129 font-size: 15px; 129 font-size: 15px;
130} 130}
131 131
132@mixin orange-button { 132@mixin orange-button {
133 @include button-focus(var(--mainColorLightest)); 133 @include button-focus(pvar(--mainColorLightest));
134 134
135 &, &:active, &:focus { 135 &, &:active, &:focus {
136 color: #fff; 136 color: #fff;
137 background-color: var(--mainColor); 137 background-color: pvar(--mainColor);
138 } 138 }
139 139
140 &:hover { 140 &:hover {
141 color: #fff; 141 color: #fff;
142 background-color: var(--mainHoverColor); 142 background-color: pvar(--mainHoverColor);
143 } 143 }
144 144
145 &[disabled], &.disabled { 145 &[disabled], &.disabled {
@@ -156,7 +156,7 @@
156@mixin tertiary-button { 156@mixin tertiary-button {
157 @include button-focus($grey-button-outline-color); 157 @include button-focus($grey-button-outline-color);
158 158
159 color: var(--greyForegroundColor); 159 color: pvar(--greyForegroundColor);
160 background-color: transparent; 160 background-color: transparent;
161 161
162 &[disabled], &.disabled { 162 &[disabled], &.disabled {
@@ -173,11 +173,11 @@
173 173
174 &, &:active, &:focus { 174 &, &:active, &:focus {
175 background-color: $grey-background-color; 175 background-color: $grey-background-color;
176 color: var(--greyForegroundColor); 176 color: pvar(--greyForegroundColor);
177 } 177 }
178 178
179 &:hover, &:active, &:focus, &[disabled], &.disabled { 179 &:hover, &:active, &:focus, &[disabled], &.disabled {
180 color: var(--greyForegroundColor); 180 color: pvar(--greyForegroundColor);
181 background-color: $grey-background-hover-color; 181 background-color: $grey-background-hover-color;
182 } 182 }
183 183
@@ -186,7 +186,7 @@
186 } 186 }
187 187
188 my-global-icon { 188 my-global-icon {
189 @include apply-svg-color(var(--greyForegroundColor)) 189 @include apply-svg-color(pvar(--greyForegroundColor))
190 } 190 }
191} 191}
192 192
@@ -283,8 +283,8 @@
283 margin: 0; 283 margin: 0;
284 width: $width; 284 width: $width;
285 border-radius: 3px; 285 border-radius: 3px;
286 color: var(--inputForegroundColor); 286 color: pvar(--inputForegroundColor);
287 background: var(--inputBackgroundColor); 287 background: pvar(--inputBackgroundColor);
288 position: relative; 288 position: relative;
289 font-size: 15px; 289 font-size: 15px;
290 290
@@ -315,7 +315,7 @@
315 cursor: pointer; 315 cursor: pointer;
316 height: $button-height; 316 height: $button-height;
317 text-overflow: ellipsis; 317 text-overflow: ellipsis;
318 color: var(--mainForegroundColor); 318 color: pvar(--mainForegroundColor);
319 319
320 &:focus { 320 &:focus {
321 outline: none; 321 outline: none;
@@ -375,7 +375,7 @@
375 position: absolute; 375 position: absolute;
376 376
377 &:focus + span { 377 &:focus + span {
378 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 378 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
379 } 379 }
380 380
381 & + span { 381 & + span {
@@ -404,7 +404,7 @@
404 404
405 &:checked + span { 405 &:checked + span {
406 border-color: transparent; 406 border-color: transparent;
407 background: var(--mainColor); 407 background: pvar(--mainColor);
408 animation: jelly 0.6s ease; 408 animation: jelly 0.6s ease;
409 409
410 &:after { 410 &:after {
@@ -464,14 +464,14 @@
464 464
465@mixin in-content-small-title { 465@mixin in-content-small-title {
466 text-transform: uppercase; 466 text-transform: uppercase;
467 color: var(--mainColor); 467 color: pvar(--mainColor);
468 font-weight: $font-bold; 468 font-weight: $font-bold;
469 font-size: 13px; 469 font-size: 13px;
470} 470}
471 471
472@mixin settings-big-title { 472@mixin settings-big-title {
473 text-transform: uppercase; 473 text-transform: uppercase;
474 color: var(--mainColor); 474 color: pvar(--mainColor);
475 font-weight: $font-bold; 475 font-weight: $font-bold;
476 font-size: 110%; 476 font-size: 110%;
477 margin-bottom: 10px; 477 margin-bottom: 10px;
@@ -482,7 +482,7 @@
482 482
483 font-size: 13px; 483 font-size: 13px;
484 margin-top: 4px; 484 margin-top: 4px;
485 color: var(--mainForegroundColor); 485 color: pvar(--mainForegroundColor);
486 486
487 span:hover { 487 span:hover {
488 opacity: 0.8; 488 opacity: 0.8;
@@ -612,8 +612,8 @@
612 border-radius: 0.25rem; 612 border-radius: 0.25rem;
613 613
614 .progress-bar { 614 .progress-bar {
615 color: var(--mainBackgroundColor); 615 color: pvar(--mainBackgroundColor);
616 background-color: var(--mainColor); 616 background-color: pvar(--mainColor);
617 display: flex; 617 display: flex;
618 flex-direction: column; 618 flex-direction: column;
619 justify-content: center; 619 justify-content: center;
@@ -622,7 +622,7 @@
622 transition: width 0.6s ease; 622 transition: width 0.6s ease;
623 623
624 &.secondary { 624 &.secondary {
625 background-color: var(--secondaryColor); 625 background-color: pvar(--secondaryColor);
626 } 626 }
627 } 627 }
628} 628}
@@ -633,14 +633,14 @@
633 padding: 0.75rem 1rem; 633 padding: 0.75rem 1rem;
634 margin-bottom: 1rem; 634 margin-bottom: 1rem;
635 list-style: none; 635 list-style: none;
636 background-color: var(--submenuColor); 636 background-color: pvar(--submenuColor);
637 border-radius: 0.25rem; 637 border-radius: 0.25rem;
638 638
639 .breadcrumb-item { 639 .breadcrumb-item {
640 display: flex; 640 display: flex;
641 641
642 a { 642 a {
643 color: var(--mainColor); 643 color: pvar(--mainColor);
644 } 644 }
645 645
646 & + .breadcrumb-item { 646 & + .breadcrumb-item {
@@ -688,7 +688,7 @@
688 & > a, 688 & > a,
689 & > div { 689 & > div {
690 padding: 20px; 690 padding: 20px;
691 background: var(--submenuColor); 691 background: pvar(--submenuColor);
692 border-radius: 4px; 692 border-radius: 4px;
693 box-sizing: border-box; 693 box-sizing: border-box;
694 height: 100%; 694 height: 100%;
@@ -699,14 +699,14 @@
699 text-align: center; 699 text-align: center;
700 font-size: 130%; 700 font-size: 130%;
701 line-height: 21px; 701 line-height: 21px;
702 color: var(--mainForegroundColor); 702 color: pvar(--mainForegroundColor);
703 line-height: 30px; 703 line-height: 30px;
704 margin-bottom: 20px; 704 margin-bottom: 20px;
705 } 705 }
706 706
707 .dashboard-label { 707 .dashboard-label {
708 font-size: 90%; 708 font-size: 90%;
709 color: var(--inputPlaceholderColor); 709 color: pvar(--inputPlaceholderColor);
710 text-align: center; 710 text-align: center;
711 } 711 }
712} 712}
@@ -726,7 +726,7 @@
726 height: max-content; 726 height: max-content;
727 727
728 &:focus-within { 728 &:focus-within {
729 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 729 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
730 } 730 }
731 } 731 }
732 732
@@ -735,8 +735,8 @@
735 height: 30px !important; 735 height: 30px !important;
736 font-size: 12px !important; 736 font-size: 12px !important;
737 737
738 background-color: var(--mainBackgroundColor) !important; 738 background-color: pvar(--mainBackgroundColor) !important;
739 color: var(--mainForegroundColor) !important; 739 color: pvar(--mainForegroundColor) !important;
740 } 740 }
741 } 741 }
742 742
@@ -769,7 +769,7 @@
769 vertical-align: middle !important; 769 vertical-align: middle !important;
770 770
771 path { 771 path {
772 fill: var(--greyForegroundColor) !important; 772 fill: pvar(--greyForegroundColor) !important;
773 } 773 }
774 } 774 }
775 775
@@ -780,7 +780,7 @@
780 } 780 }
781} 781}
782 782
783@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) { 783@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
784 width: 95%; 784 width: 95%;
785 border-top: .05rem solid $color; 785 border-top: .05rem solid $color;
786 height: .05rem; 786 height: .05rem;
@@ -810,7 +810,7 @@
810 border-radius: 5rem; 810 border-radius: 5rem;
811 display: inline-flex; 811 display: inline-flex;
812 font-size: 90%; 812 font-size: 90%;
813 color: var(--mainForegroundColor); 813 color: pvar(--mainForegroundColor);
814 height: $avatar-height; 814 height: $avatar-height;
815 line-height: 1rem; 815 line-height: 1rem;
816 margin: .1rem; 816 margin: .1rem;
@@ -887,3 +887,21 @@
887 } 887 }
888 } 888 }
889} 889}
890
891// applies 16:9 ratio to a child element (using $selector) only using
892// an immediate's parent size. This allows 16:9 ratio without explicit
893// dimensions, as width/height cannot be computed from each other.
894@mixin large-screen-ratio ($selector: 'div') {
895 position: relative;
896 height: 0;
897 width: 100%;
898 padding-top: 56%;
899
900 #{$selector} {
901 position: absolute;
902 width: 100%;
903 height: 100%;
904 top: 0;
905 @content;
906 }
907}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 11561e268..14f1ae76c 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -116,7 +116,7 @@ $variables: (
116 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 116 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
117); 117);
118 118
119@function var($variable) { 119@function pvar($variable) {
120 @return map-get($variables, $variable); 120 @return map-get($variables, $variable);
121} 121}
122 122
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index d584b7c67..d7c308911 100644
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -10,7 +10,7 @@
10 -moz-transition: 350ms linear all; 10 -moz-transition: 350ms linear all;
11 -o-transition: 350ms linear all; 11 -o-transition: 350ms linear all;
12 transition: 350ms linear all; 12 transition: 350ms linear all;
13 color: var(--mainColor); 13 color: pvar(--mainColor);
14} 14}
15 15
16#loading-bar .bar { 16#loading-bar .bar {
@@ -19,7 +19,7 @@
19 -o-transition: width 350ms; 19 -o-transition: width 350ms;
20 transition: width 350ms; 20 transition: width 350ms;
21 21
22 background: var(--mainColor); 22 background: pvar(--mainColor);
23 position: fixed; 23 position: fixed;
24 z-index: z(loadbar); 24 z-index: z(loadbar);
25 top: 0; 25 top: 0;
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index eeab0ccdf..f3a28ead0 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -14,7 +14,7 @@ $context-menu-width: 350px;
14 14
15 .vjs-menu-content { 15 .vjs-menu-content {
16 opacity: $primary-foreground-opacity; 16 opacity: $primary-foreground-opacity;
17 color: var(--embedForegroundCsolor); 17 color: pvar(--embedForegroundCsolor);
18 font-size: $font-size !important; 18 font-size: $font-size !important;
19 font-weight: $font-semibold; 19 font-weight: $font-semibold;
20 } 20 }
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 836be23cc..92923a129 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -17,7 +17,7 @@ body {
17 17
18.video-js.vjs-peertube-skin { 18.video-js.vjs-peertube-skin {
19 font-size: $font-size; 19 font-size: $font-size;
20 color: var(--embedForegroundColor); 20 color: pvar(--embedForegroundColor);
21 21
22 .vjs-dock-text { 22 .vjs-dock-text {
23 padding-right: 10px; 23 padding-right: 10px;
@@ -132,7 +132,7 @@ body {
132 .vjs-control-bar, 132 .vjs-control-bar,
133 .vjs-big-play-button, 133 .vjs-big-play-button,
134 .vjs-settings-dialog { 134 .vjs-settings-dialog {
135 background-color: var(--embedBigPlayBackgroundColor); 135 background-color: pvar(--embedBigPlayBackgroundColor);
136 } 136 }
137 137
138 .vjs-poster { 138 .vjs-poster {
@@ -157,7 +157,7 @@ body {
157 .vjs-theater-control, 157 .vjs-theater-control,
158 .vjs-settings 158 .vjs-settings
159 { 159 {
160 color: var(--embedForegroundColor) !important; 160 color: pvar(--embedForegroundColor) !important;
161 161
162 opacity: $primary-foreground-opacity; 162 opacity: $primary-foreground-opacity;
163 transition: opacity .1s; 163 transition: opacity .1s;
@@ -170,7 +170,7 @@ body {
170 .vjs-current-time, 170 .vjs-current-time,
171 .vjs-duration, 171 .vjs-duration,
172 .vjs-peertube { 172 .vjs-peertube {
173 color: var(--embedForegroundColor); 173 color: pvar(--embedForegroundColor);
174 opacity: $primary-foreground-opacity; 174 opacity: $primary-foreground-opacity;
175 } 175 }
176 176
@@ -190,7 +190,7 @@ body {
190 transition: none; 190 transition: none;
191 191
192 .vjs-play-progress { 192 .vjs-play-progress {
193 background: var(--embedForegroundColor); 193 background: pvar(--embedForegroundColor);
194 194
195 // Not display the circle if the progress is not hovered 195 // Not display the circle if the progress is not hovered
196 &::before { 196 &::before {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 83407b445..09c872ef7 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
38 position: absolute; 38 position: absolute;
39 right: .5em; 39 right: .5em;
40 bottom: 3.5em; 40 bottom: 3.5em;
41 color: var(--embedForegroundColor); 41 color: pvar(--embedForegroundColor);
42 opacity: $primary-foreground-opacity; 42 opacity: $primary-foreground-opacity;
43 margin: 0 auto; 43 margin: 0 auto;
44 font-size: $font-size !important; 44 font-size: $font-size !important;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 056b88fc1..a9a950dc0 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -7,7 +7,7 @@
7@mixin glyphicon-light { 7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings'; 8 font-family: 'Glyphicons Halflings';
9 text-decoration: none !important; 9 text-decoration: none !important;
10 color: var(--mainForegroundColor) !important; 10 color: pvar(--mainForegroundColor) !important;
11 font-display: swap; 11 font-display: swap;
12} 12}
13 13
@@ -19,14 +19,14 @@ my-button {
19 19
20// focus box-shadow for primeng 20// focus box-shadow for primeng
21.ui-inputtext:enabled:focus:not(.ui-state-error) { 21.ui-inputtext:enabled:focus:not(.ui-state-error) {
22 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 22 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
23} 23}
24 24
25// data table customizations 25// data table customizations
26p-table { 26p-table {
27 .ui-table-caption { 27 .ui-table-caption {
28 border: none !important; 28 border: none !important;
29 background-color: var(--mainBackgroundColor) !important; 29 background-color: pvar(--mainBackgroundColor) !important;
30 30
31 .caption { 31 .caption {
32 height: 40px; 32 height: 40px;
@@ -41,14 +41,14 @@ p-table {
41 } 41 }
42 42
43 th { 43 th {
44 background-color: var(--mainBackgroundColor) !important; 44 background-color: pvar(--mainBackgroundColor) !important;
45 outline: 0; 45 outline: 0;
46 } 46 }
47 47
48 td, th { 48 td, th {
49 font-family: $main-fonts; 49 font-family: $main-fonts;
50 font-size: 15px !important; 50 font-size: 15px !important;
51 color: var(--mainForegroundColor) !important; 51 color: pvar(--mainForegroundColor) !important;
52 } 52 }
53 53
54 td { 54 td {
@@ -63,14 +63,14 @@ p-table {
63 63
64 tr { 64 tr {
65 outline: 0; 65 outline: 0;
66 background-color: var(--mainBackgroundColor) !important; 66 background-color: pvar(--mainBackgroundColor) !important;
67 height: 46px; 67 height: 46px;
68 68
69 &.ui-state-highlight { 69 &.ui-state-highlight {
70 background-color: var(--submenuColor) !important; 70 background-color: pvar(--submenuColor) !important;
71 71
72 td, td > a { 72 td, td > a {
73 color: var(--mainForegroundColor) !important; 73 color: pvar(--mainForegroundColor) !important;
74 } 74 }
75 } 75 }
76 } 76 }
@@ -78,7 +78,7 @@ p-table {
78 .ui-table-tbody { 78 .ui-table-tbody {
79 tr { 79 tr {
80 &:hover { 80 &:hover {
81 background-color: var(--submenuColor) !important; 81 background-color: pvar(--submenuColor) !important;
82 82
83 .action-cell { 83 .action-cell {
84 .dropdown-root, 84 .dropdown-root,
@@ -113,16 +113,16 @@ p-table {
113 th { 113 th {
114 border: none !important; 114 border: none !important;
115 border-bottom: 1px solid !important; 115 border-bottom: 1px solid !important;
116 border-color: var(--submenuColor) !important; 116 border-color: pvar(--submenuColor) !important;
117 text-align: left !important; 117 text-align: left !important;
118 padding: 5px 0 5px 15px !important; 118 padding: 5px 0 5px 15px !important;
119 font-weight: $font-semibold !important; 119 font-weight: $font-semibold !important;
120 color: var(--mainForegroundColor) !important; 120 color: pvar(--mainForegroundColor) !important;
121 121
122 &.ui-sortable-column:hover { 122 &.ui-sortable-column:hover {
123 background-color: var(--submenuColor) !important; 123 background-color: pvar(--submenuColor) !important;
124 border: 1px solid !important; 124 border: 1px solid !important;
125 border-color: var(--submenuColor) !important; 125 border-color: pvar(--submenuColor) !important;
126 border-width: 0 1px !important; 126 border-width: 0 1px !important;
127 127
128 &:first-child { 128 &:first-child {
@@ -131,7 +131,7 @@ p-table {
131 } 131 }
132 132
133 &.ui-state-highlight { 133 &.ui-state-highlight {
134 background-color: var(--submenuColor) !important; 134 background-color: pvar(--submenuColor) !important;
135 135
136 .pi { 136 .pi {
137 @extend .glyphicon; 137 @extend .glyphicon;
@@ -143,13 +143,13 @@ p-table {
143 &.pi-sort-amount-up-alt { 143 &.pi-sort-amount-up-alt {
144 @extend .glyphicon-triangle-top; 144 @extend .glyphicon-triangle-top;
145 145
146 color: var(--mainForegroundColor) !important; 146 color: pvar(--mainForegroundColor) !important;
147 } 147 }
148 148
149 &.pi-sort-amount-down { 149 &.pi-sort-amount-down {
150 @extend .glyphicon-triangle-bottom; 150 @extend .glyphicon-triangle-bottom;
151 151
152 color: var(--mainForegroundColor) !important; 152 color: pvar(--mainForegroundColor) !important;
153 } 153 }
154 } 154 }
155 } 155 }
@@ -184,11 +184,11 @@ p-table {
184 184
185 p-paginator { 185 p-paginator {
186 .ui-paginator-bottom { 186 .ui-paginator-bottom {
187 background-color: var(--mainBackgroundColor) !important; 187 background-color: pvar(--mainBackgroundColor) !important;
188 position: relative; 188 position: relative;
189 border: none; 189 border: none;
190 border-top: 1px solid !important; 190 border-top: 1px solid !important;
191 border-color: var(--submenuColor) !important; 191 border-color: pvar(--submenuColor) !important;
192 height: 40px; 192 height: 40px;
193 display: flex; 193 display: flex;
194 justify-content: center; 194 justify-content: center;
@@ -200,18 +200,18 @@ p-table {
200 left: 0; 200 left: 0;
201 201
202 &.ui-state-focus { 202 &.ui-state-focus {
203 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 203 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
204 } 204 }
205 205
206 .ui-dropdown-label { 206 .ui-dropdown-label {
207 color: var(--inputPlaceholderColor); 207 color: pvar(--inputPlaceholderColor);
208 } 208 }
209 } 209 }
210 210
211 .ui-paginator-current { 211 .ui-paginator-current {
212 position: absolute; 212 position: absolute;
213 right: 0; 213 right: 0;
214 color: var(--inputPlaceholderColor); 214 color: pvar(--inputPlaceholderColor);
215 } 215 }
216 216
217 .ui-paginator-first, 217 .ui-paginator-first,
@@ -227,7 +227,7 @@ p-table {
227 227
228 &.focus-within, 228 &.focus-within,
229 &:focus { 229 &:focus {
230 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 230 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
231 } 231 }
232 232
233 &.ui-state-disabled:hover { 233 &.ui-state-disabled:hover {
@@ -261,12 +261,12 @@ p-table {
261 .ui-paginator-page { 261 .ui-paginator-page {
262 &.focus-within, 262 &.focus-within,
263 &:focus { 263 &:focus {
264 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important; 264 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
265 } 265 }
266 } 266 }
267 267
268 a { 268 a {
269 color: var(--mainForegroundColor) !important; 269 color: pvar(--mainForegroundColor) !important;
270 font-weight: $font-semibold !important; 270 font-weight: $font-semibold !important;
271 margin: 0 5px !important; 271 margin: 0 5px !important;
272 outline: 0 !important; 272 outline: 0 !important;
@@ -278,7 +278,7 @@ p-table {
278 &.ui-state-active { 278 &.ui-state-active {
279 &, &:hover, &:active, &:focus { 279 &, &:hover, &:active, &:focus {
280 color: #fff !important; 280 color: #fff !important;
281 background-color: var(--mainColor) !important; 281 background-color: pvar(--mainColor) !important;
282 } 282 }
283 } 283 }
284 } 284 }
@@ -328,7 +328,7 @@ p-multiselect {
328 328
329 &:focus, 329 &:focus,
330 &.ui-state-focus { 330 &.ui-state-focus {
331 box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest); 331 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
332 } 332 }
333 } 333 }
334 } 334 }
@@ -368,11 +368,11 @@ p-multiselect {
368 } 368 }
369 369
370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight { 370 .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
371 background-color: var(--mainColorLighter); 371 background-color: pvar(--mainColorLighter);
372 } 372 }
373 373
374 .ui-inputtext:enabled:focus:not(.ui-state-error) { 374 .ui-inputtext:enabled:focus:not(.ui-state-error) {
375 border-color: var(--mainColorLighter) !important; 375 border-color: pvar(--mainColorLighter) !important;
376 box-shadow: none; 376 box-shadow: none;
377 } 377 }
378} 378}
@@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
445 445
446 .ui-chkbox-box { 446 .ui-chkbox-box {
447 &.ui-state-active { 447 &.ui-state-active {
448 border-color: var(--mainColor) !important; 448 border-color: pvar(--mainColor) !important;
449 background-color: var(--mainColor) !important; 449 background-color: pvar(--mainColor) !important;
450 } 450 }
451 451
452 .ui-chkbox-icon { 452 .ui-chkbox-icon {
@@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
462 height: 12px; 462 height: 12px;
463 opacity: 0; 463 opacity: 0;
464 transform: rotate(45deg) scale(0); 464 transform: rotate(45deg) scale(0);
465 border-right: 2px solid var(--mainBackgroundColor); 465 border-right: 2px solid pvar(--mainBackgroundColor);
466 border-bottom: 2px solid var(--mainBackgroundColor); 466 border-bottom: 2px solid pvar(--mainBackgroundColor);
467 } 467 }
468 468
469 &.pi-check:after { 469 &.pi-check:after {
@@ -478,7 +478,7 @@ p-inputswitch {
478 height: 26px; 478 height: 26px;
479 479
480 .ui-inputswitch-checked .ui-inputswitch-slider { 480 .ui-inputswitch-checked .ui-inputswitch-slider {
481 background-color: var(--mainColor) !important; 481 background-color: pvar(--mainColor) !important;
482 } 482 }
483 483
484 &.small { 484 &.small {
@@ -520,8 +520,8 @@ p-toast {
520 520
521 .ui-toast-message { 521 .ui-toast-message {
522 font-family: $main-fonts; 522 font-family: $main-fonts;
523 background-color: var(--mainBackgroundColor) !important; 523 background-color: pvar(--mainBackgroundColor) !important;
524 color: var(--mainForegroundColor) !important; 524 color: pvar(--mainForegroundColor) !important;
525 border-radius: 5px; 525 border-radius: 5px;
526 box-sizing: border-box; 526 box-sizing: border-box;
527 border: 1px solid #EBEEF5 !important; 527 border: 1px solid #EBEEF5 !important;