aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss183
-rw-r--r--client/src/sass/bootstrap.scss4
-rw-r--r--client/src/sass/classes.scss22
-rw-r--r--client/src/sass/include/_actor.scss92
-rw-r--r--client/src/sass/include/_miniature.scss172
-rw-r--r--client/src/sass/include/_mixins.scss223
-rw-r--r--client/src/sass/include/_variables.scss44
-rw-r--r--client/src/sass/ng-select.scss14
-rw-r--r--client/src/sass/player/context-menu.scss2
-rw-r--r--client/src/sass/player/peertube-skin.scss18
-rw-r--r--client/src/sass/primeng-custom.scss57
11 files changed, 412 insertions, 419 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a0009eecc..c01938147 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -15,6 +15,8 @@ $assets-path: '../../assets/';
15@import './primeng-custom'; 15@import './primeng-custom';
16@import './ng-select.scss'; 16@import './ng-select.scss';
17 17
18@import './classes.scss';
19
18[hidden] { 20[hidden] {
19 display: none !important; 21 display: none !important;
20} 22}
@@ -36,7 +38,9 @@ body {
36 38
37 --menuBackgroundColor: #{$menu-background}; 39 --menuBackgroundColor: #{$menu-background};
38 --menuForegroundColor: #{$menu-color}; 40 --menuForegroundColor: #{$menu-color};
39 --submenuColor: #{$sub-menu-color}; 41
42 --submenuBackgroundColor: #{$sub-menu-background-color};
43 --channelBackgroundColor: #{$channel-background-color};
40 44
41 --inputForegroundColor: #{$input-foreground-color}; 45 --inputForegroundColor: #{$input-foreground-color};
42 --inputBackgroundColor: #{$input-background-color}; 46 --inputBackgroundColor: #{$input-background-color};
@@ -53,7 +57,9 @@ body {
53 57
54 --activatedActionButtonColor: #{$activated-action-button-color}; 58 --activatedActionButtonColor: #{$activated-action-button-color};
55 59
56 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins}; 60 --horizontalMarginContent: #{$not-expanded-horizontal-margins};
61 --videosHorizontalMarginContent: 6vw;
62 --mainColWidth: calc(100vw - #{$menu-width});
57 63
58 font-family: $main-fonts; 64 font-family: $main-fonts;
59 font-weight: $font-regular; 65 font-weight: $font-regular;
@@ -146,24 +152,26 @@ my-input-toggle-hidden ::ng-deep input {
146 outline: none; 152 outline: none;
147 153
148 .margin-content { 154 .margin-content {
149 margin-left: $not-expanded-horizontal-margins; 155 margin-left: pvar(--horizontalMarginContent);
150 margin-right: $not-expanded-horizontal-margins; 156 margin-right: pvar(--horizontalMarginContent);
151 flex-grow: 1; 157 flex-grow: 1;
152 } 158 }
153 159
154 .sub-menu { 160 .sub-menu {
155 background-color: pvar(--submenuColor); 161 background-color: pvar(--submenuBackgroundColor);
156 width: 100%; 162 width: 100%;
157 display: flex; 163 display: flex;
158 align-items: center; 164 align-items: center;
159 padding-left: $not-expanded-horizontal-margins; 165 padding-left: pvar(--horizontalMarginContent);
160 padding-right: $not-expanded-horizontal-margins; 166 padding-right: pvar(--horizontalMarginContent);
161 height: $sub-menu-height; 167 height: $sub-menu-height;
162 margin-bottom: $sub-menu-margin-bottom; 168 margin-bottom: $sub-menu-margin-bottom;
169 overflow-x: auto;
163 170
164 &.sub-menu-fixed { 171 &.sub-menu-fixed {
165 position: fixed; 172 position: fixed;
166 z-index: #{z('sub-menu') - 1}; 173 z-index: #{z('sub-menu') - 1};
174 max-width: pvar(--mainColWidth);
167 } 175 }
168 } 176 }
169 177
@@ -174,18 +182,11 @@ my-input-toggle-hidden ::ng-deep input {
174 182
175 // Override some properties if the main content is expanded (no menu on the left) 183 // Override some properties if the main content is expanded (no menu on the left)
176 &.expanded { 184 &.expanded {
185 --horizontalMarginContent: #{$expanded-horizontal-margins};
186 --mainColWidth: 100vw;
187
177 margin-left: 0; 188 margin-left: 0;
178 width: 100%; 189 width: 100%;
179
180 .margin-content {
181 margin-left: var(--expanded-horizontal-margin-content);
182 margin-right: var(--expanded-horizontal-margin-content);
183 }
184
185 .sub-menu {
186 padding-left: var(--expanded-horizontal-margin-content);
187 padding-right: var(--expanded-horizontal-margin-content);
188 }
189 } 190 }
190 191
191 &.lock-scroll .main-row > router-outlet + * { 192 &.lock-scroll .main-row > router-outlet + * {
@@ -263,7 +264,7 @@ my-input-toggle-hidden ::ng-deep input {
263 opacity: 0.6; 264 opacity: 0.6;
264 265
265 &.active { 266 &.active {
266 background-color: pvar(--submenuColor); 267 background-color: pvar(--submenuBackgroundColor);
267 } 268 }
268 269
269 &.active, &:hover, &:active, &:focus { 270 &.active, &:hover, &:active, &:focus {
@@ -277,11 +278,6 @@ my-input-toggle-hidden ::ng-deep input {
277 font-weight: bold; 278 font-weight: bold;
278} 279}
279 280
280@keyframes spin {
281 from { transform: scale(1) rotate(0deg);}
282 to { transform: scale(1) rotate(360deg);}
283}
284
285// In tables, don't have a hover different background 281// In tables, don't have a hover different background
286table { 282table {
287 .action-button-edit, .action-button-delete { 283 .action-button-edit, .action-button-delete {
@@ -338,29 +334,34 @@ ngx-loading-bar {
338 334
339@media screen and (max-width: #{breakpoint(xxl)}) { 335@media screen and (max-width: #{breakpoint(xxl)}) {
340 .main-col { 336 .main-col {
337 & {
338 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
339 }
340
341 &.expanded { 341 &.expanded {
342 .margin-content { 342 --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
343 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
344 }
345 } 343 }
344
345 --videosHorizontalMarginContent: 30px;
346 } 346 }
347} 347}
348 348
349@media screen and (max-width: #{breakpoint(lg)}) { 349@media screen and (max-width: #{breakpoint(lg)}) {
350 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
351 .main-col { 350 .main-col {
352 &, &.expanded { 351 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
353 .margin-content { 352 }
354 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3}; 353
355 } 354 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
355 .main-col,
356 .main-col.expanded {
357 --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
356 358
357 .sub-menu { 359 .sub-menu {
358 padding-left: 50px; 360 padding-left: 50px;
359 padding-right: 50px; 361 padding-right: 50px;
360 362
361 .title-page { 363 .title-page {
362 font-size: 17px; 364 font-size: 17px;
363 }
364 } 365 }
365 } 366 }
366 } 367 }
@@ -373,98 +374,46 @@ ngx-loading-bar {
373} 374}
374 375
375@media screen and (max-width: $small-view) { 376@media screen and (max-width: $small-view) {
376 .main-col { 377 .main-col,
377 margin-left: 0; 378 .main-col.expanded {
378 379 --horizontalMarginContent: 15px;
379 &, &.expanded {
380 .margin-content {
381 --expanded-horizontal-margin-content: 15px;
382 }
383
384 .sub-menu {
385 width: 100vw;
386 padding-left: 15px;
387 padding-right: 15px;
388 margin-bottom: $sub-menu-margin-bottom-small-view;
389 overflow-x: auto;
390 }
391
392 // Use an appropriate offset top when sub-menu fixed
393 .margin-content.offset-content {
394 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
395 }
396
397 .admin-sub-header {
398 @include admin-sub-header-responsive(15px*2);
399 }
400 380
401 my-markdown-textarea { 381 margin-left: 0;
402 .root {
403 max-width: 100% !important;
404 }
405 }
406
407 input[type=text],
408 input[type=password],
409 input[type=email],
410 textarea,
411 .peertube-select-container {
412 flex-grow: 1;
413 }
414 382
415 .caption input[type=text] { 383 .sub-menu {
416 width: unset !important; 384 width: 100vw;
417 flex-grow: 1; 385 padding-left: 15px;
418 } 386 padding-right: 15px;
387 margin-bottom: $sub-menu-margin-bottom-small-view;
388 overflow-x: auto;
419 } 389 }
420 }
421}
422 390
423// overflow-databale responsive rules 391 // Use an appropriate offset top when sub-menu fixed
424@media screen and (min-width: #{breakpoint(lg)}) { 392 .margin-content.offset-content {
425 .main-col { 393 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
426 &.expanded {
427 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
428 } 394 }
429 395
430 &:not(.expanded) { 396 .admin-sub-header {
431 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false); 397 @include admin-sub-header-responsive;
432 } 398 }
433 }
434}
435 399
436@media screen and (max-width: #{breakpoint(lg)}) { 400 my-markdown-textarea {
437 .main-col { 401 .root {
438 &.expanded { 402 max-width: 100% !important;
439 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3); 403 }
440 } 404 }
441 405
442 &:not(.expanded) { 406 input[type=text],
443 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2); 407 input[type=password],
444 } 408 input[type=email],
445 } 409 textarea,
446} 410 .peertube-select-container {
447 411 flex-grow: 1;
448@media screen and (max-width: $small-view) {
449 .main-col {
450 &:not(.expanded),
451 &.expanded {
452 @include overflow-datatable(breakpoint(lg), 15px);
453 } 412 }
454 }
455}
456 413
457@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) { 414 .caption input[type=text] {
458 .main-col { 415 width: unset !important;
459 &:not(.expanded) { 416 flex-grow: 1;
460 .admin-sub-header {
461 @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
462 }
463
464 .sub-menu {
465 overflow-x: auto;
466 width: calc(100vw - #{$menu-width});
467 }
468 } 417 }
469 } 418 }
470} 419}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 7047f6e03..75dc91d7a 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -9,6 +9,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
9 animation: spin .7s infinite linear; 9 animation: spin .7s infinite linear;
10} 10}
11 11
12.glyphicon-duplicate {
13 font-size: 70%;
14}
15
12.flex-auto { 16.flex-auto {
13 flex: auto; 17 flex: auto;
14} 18}
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
new file mode 100644
index 000000000..af8e39573
--- /dev/null
+++ b/client/src/sass/classes.scss
@@ -0,0 +1,22 @@
1@import '_variables';
2@import '_mixins';
3
4.peertube-button {
5 @include peertube-button;
6}
7
8.peertube-button-link {
9 @include peertube-button-link;
10}
11
12.orange-button {
13 @include orange-button;
14}
15
16.orange-button-inverted {
17 @include orange-button-inverted;
18}
19
20.grey-button {
21 @include grey-button;
22}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..8d82a042c
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,92 @@
1@import '_variables';
2
3@mixin section-label-responsive {
4 color: pvar(--mainColor);
5 font-size: 12px;
6 margin-bottom: 15px;
7 font-weight: $font-bold;
8 letter-spacing: 2.5px;
9
10 @media screen and (max-width: $mobile-view) {
11 font-size: 10px;
12 letter-spacing: 2.1px;
13 margin-bottom: 5px;
14 }
15}
16
17@mixin show-more-description {
18 color: pvar(--mainColor);
19 cursor: pointer;
20 margin: 10px auto 45px auto;
21}
22
23@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
24 display: flex;
25 grid-column: 1;
26 margin-bottom: 30px;
27
28 .channel-avatar {
29 @include channel-avatar(120px);
30 }
31
32 .account-avatar {
33 @include avatar(120px);
34 }
35
36 > div {
37 margin-left: $img-margin;
38 min-width: 1px;
39 }
40
41 .actor-info {
42 display: flex;
43
44 > div:first-child {
45 flex-grow: 1;
46 min-width: 1px;
47 }
48 }
49
50 .actor-display-name {
51 display: flex;
52 flex-wrap: wrap;
53 }
54
55 h1 {
56 font-size: 28px;
57 font-weight: $font-bold;
58 margin: 0;
59 }
60
61 .actor-handle {
62 @include ellipsis;
63 }
64
65 .actor-handle,
66 .actor-counters {
67 color: pvar(--greyForegroundColor);
68 font-size: $grey-font-size;
69 }
70
71 .actor-counters > *:not(:last-child)::after {
72 content: '•';
73 margin: 0 10px;
74 color: pvar(--mainColor);
75 }
76
77 @media screen and (max-width: $mobile-view) {
78 margin-bottom: 15px;
79
80 h1 {
81 font-size: 22px;
82 }
83
84 .channel-avatar {
85 @include channel-avatar(80px);
86 }
87
88 .account-avatar {
89 @include avatar(120px);
90 }
91 }
92}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 134b307b1..3b86f29b4 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -4,11 +4,11 @@
4@mixin miniature-name { 4@mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
6 6
7 word-break: break-all;
8 word-wrap: break-word;
7 transition: color 0.2s; 9 transition: color 0.2s;
8 font-weight: $font-semibold; 10 font-weight: $font-semibold;
9 color: pvar(--mainForegroundColor); 11 color: pvar(--mainForegroundColor);
10 margin-top: 10px;
11 margin-bottom: 5px;
12 12
13 &:hover { 13 &:hover {
14 text-decoration: none; 14 text-decoration: none;
@@ -20,20 +20,20 @@
20 } 20 }
21} 21}
22 22
23$play-overlay-transition: 0.2s ease;
24$play-overlay-height: 26px;
25$play-overlay-width: 18px;
26
27@mixin miniature-thumbnail { 23@mixin miniature-thumbnail {
28 @include disable-outline; 24 @include disable-outline;
29 25
26 $play-overlay-transition: 0.2s ease;
27 $play-overlay-height: 26px;
28 $play-overlay-width: 18px;
29
30 display: flex; 30 display: flex;
31 flex-direction: column; 31 flex-direction: column;
32 position: relative; 32 position: relative;
33 border-radius: 3px; 33 border-radius: 3px;
34 width: 100%;
35 height: 100%;
34 overflow: hidden; 36 overflow: hidden;
35 width: $video-thumbnail-width;
36 height: $video-thumbnail-height;
37 background-color: #ececec; 37 background-color: #ececec;
38 transition: filter $play-overlay-transition; 38 transition: filter $play-overlay-transition;
39 39
@@ -97,154 +97,64 @@ $play-overlay-width: 18px;
97 color: #fff; 97 color: #fff;
98} 98}
99 99
100@mixin miniature-rows { 100// Use margin by default, or padding if $margin is false
101 &:first-child { 101@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
102 padding-top: 30px; 102 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
103 103
104 .section-title { 104 @if $margin {
105 border-top: none !important; 105 margin-left: var(--gridVideosMiniatureMargins) !important;
106 } 106 margin-right: var(--gridVideosMiniatureMargins) !important;
107 } 107 } @else {
108 108 padding-left: var(--gridVideosMiniatureMargins) !important;
109 .section-title { 109 padding-right: var(--gridVideosMiniatureMargins) !important;
110 font-size: 24px;
111 font-weight: $font-semibold;
112 padding-top: 15px;
113 margin-bottom: 15px;
114 display: flex;
115 justify-content: space-between;
116
117 &:not(h2) {
118 border-top: 1px solid $separator-border-color;
119 }
120
121 a {
122 &:hover, &:focus:not(.focus-visible), &:active {
123 text-decoration: none;
124 outline: none;
125 }
126
127 color: pvar(--mainForegroundColor);
128 }
129 }
130
131 &.channel {
132 .section-title {
133 a {
134 display: flex;
135 width: fit-content;
136 align-items: center;
137
138 img {
139 @include avatar(28px);
140
141 margin-right: 8px;
142 }
143 }
144
145 .followers {
146 color: pvar(--greyForegroundColor);
147 font-weight: normal;
148 font-size: 14px;
149 margin-left: 10px;
150 position: relative;
151 top: 2px;
152 }
153 }
154 }
155
156 .show-more {
157 position: relative;
158 top: -5px;
159 display: inline-block;
160 font-size: 16px;
161 text-transform: uppercase;
162 color: pvar(--greyForegroundColor);
163 margin-bottom: 10px;
164 font-weight: $font-semibold;
165 text-decoration: none;
166 } 110 }
167 111
168 @media screen and (max-width: $mobile-view) { 112 @media screen and (max-width: $mobile-view) {
169 max-height: initial; 113 --gridVideosMiniatureMargins: #{$min-margin};
170 overflow: initial;
171
172 .section-title {
173 font-size: 17px;
174 margin-left: 10px;
175 }
176 }
177}
178 114
179@mixin fluid-videos-miniature-layout {
180 margin-left: $not-expanded-horizontal-margins !important;
181 margin-right: $not-expanded-horizontal-margins !important;
182
183 @media screen and (max-width: $mobile-view) {
184 width: auto; 115 width: auto;
185 margin: 0 !important;
186
187 .videos {
188 text-align: center;
189
190 ::ng-deep .video-miniature {
191 padding-right: 0;
192 height: auto;
193 width: 100%;
194 margin-bottom: 25px;
195
196 .video-miniature-information {
197 width: 100% !important;
198 text-align: left;
199
200 span {
201 width: 100%;
202 }
203 }
204
205 .video-thumbnail {
206 border-radius: 0;
207 }
208 }
209 }
210 } 116 }
117}
211 118
212 @media screen and (min-width: #{breakpoint(fhd)}) { 119@mixin grid-videos-miniature-layout {
213 margin-left: 6vw !important; 120 @include grid-videos-miniature-margins;
214 margin-right: 6vw !important;
215 }
216 121
217 @media screen and (min-width: $mobile-view) { 122 @media screen and (min-width: $mobile-view) {
218 123 .videos,
219 .videos { 124 .playlists {
220 --miniature-min-width: #{$video-thumbnail-width - 15px}; 125 --miniatureMinWidth: #{$video-thumbnail-width - 25px};
221 --miniature-max-width: #{$video-thumbnail-width}; 126 --miniatureMaxWidth: #{$video-thumbnail-width};
222 127
223 display: grid; 128 display: grid;
224 column-gap: 5px; 129 column-gap: 30px;
225 grid-template-columns: repeat( 130 grid-template-columns: repeat(
226 auto-fill, 131 auto-fill,
227 minmax( 132 minmax(
228 var(--miniature-min-width), 133 var(--miniatureMinWidth),
229 1fr 134 1fr
230 ) 135 )
231 ); 136 );
232 137
233 @media screen and (min-width: #{breakpoint(fhd)}) { 138 .video-wrapper,
234 column-gap: 1%; 139 .playlist-wrapper {
235 --miniature-min-width: #{$video-thumbnail-width};
236 }
237
238 .video-wrapper {
239 margin: 0 auto; 140 margin: 0 auto;
240 width: 100%; 141 width: 100%;
241 142
242 my-video-miniature { 143 my-video-miniature,
144 my-video-playlist-miniature {
243 display: block; 145 display: block;
244 min-width: var(--miniature-min-width); 146 min-width: var(--miniatureMinWidth);
245 max-width: var(--miniature-max-width); 147 max-width: var(--miniatureMaxWidth);
246 } 148 }
247 } 149 }
150
151 @media screen and (min-width: #{breakpoint(xm)}) {
152 column-gap: 15px;
153 }
154
155 @media screen and (min-width: #{breakpoint(fhd)}) {
156 column-gap: 2%;
157 }
248 } 158 }
249 } 159 }
250} 160}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ca11488cb..bf844ac5d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,17 +23,28 @@
23 display: block; 23 display: block;
24 /* Fallback for non-webkit */ 24 /* Fallback for non-webkit */
25 display: -webkit-box; 25 display: -webkit-box;
26 max-height: $font-size * $number-of-lines; 26 -webkit-line-clamp: $number-of-lines;
27 /* Fallback for non-webkit */ 27 /* Fallback for non-webkit */
28 font-size: $font-size; 28 font-size: $font-size;
29 line-height: $font-size; 29 line-height: $font-size;
30 overflow: hidden; 30 overflow: hidden;
31 text-overflow: ellipsis; 31 text-overflow: ellipsis;
32 max-height: $font-size * $number-of-lines;
32} 33}
33 34
34@mixin prefix($property, $parameters...) { 35@mixin fade-text ($fade-after, $background-color) {
35 @each $prefix in -webkit-, -moz-, -ms-, -o-, "" { 36 position: relative;
36 #{$prefix}#{$property}: $parameters; 37 overflow: hidden;
38
39 &:after {
40 content: '';
41 pointer-events: none;
42 width: 100%;
43 height: 100%;
44 position: absolute;
45 left: 0;
46 top: 0;
47 background: linear-gradient(transparent $fade-after, $background-color);
37 } 48 }
38} 49}
39 50
@@ -41,9 +52,6 @@
41 word-break: break-word; 52 word-break: break-word;
42 word-wrap: break-word; 53 word-wrap: break-word;
43 overflow-wrap: break-word; 54 overflow-wrap: break-word;
44 -webkit-hyphens: auto;
45 -ms-hyphens: auto;
46 -moz-hyphens: auto;
47 hyphens: auto; 55 hyphens: auto;
48} 56}
49 57
@@ -52,28 +60,6 @@
52 ::ng-deep .material { 60 ::ng-deep .material {
53 color: $color; 61 color: $color;
54 } 62 }
55
56 ::ng-deep svg {
57 path[fill="#000"],
58 g[fill="#000"],
59 rect[fill="#000"],
60 circle[fill="#000"],
61 polygon[fill="#000"] {
62 fill: $color;
63 }
64
65 path[stroke="#000"],
66 g[stroke="#000"],
67 rect[stroke="#000"],
68 circle[stroke="#000"],
69 polygon[stroke="#000"] {
70 stroke: $color;
71 }
72
73 stop[stop-color="#000"] {
74 stop-color: $color;
75 }
76 }
77} 63}
78 64
79@mixin fill-svg-color ($color) { 65@mixin fill-svg-color ($color) {
@@ -163,6 +149,33 @@
163 } 149 }
164} 150}
165 151
152@mixin orange-button-inverted {
153 @include button-focus(pvar(--mainColorLightest));
154
155 border: 2px solid pvar(--mainColor);
156 font-weight: $font-semibold;
157
158 &, &:active, &:focus {
159 color: pvar(--mainColor);
160 background-color: pvar(--mainBackgroundColor);
161 }
162
163 &:hover {
164 color: pvar(--mainColor);
165 background-color: pvar(--mainColorLightest);
166 }
167
168 &[disabled], &.disabled {
169 cursor: default;
170 color: pvar(--mainColor);
171 background-color: #C6C6C6;
172 }
173
174 my-global-icon {
175 @include apply-svg-color(pvar(--mainColor))
176 }
177}
178
166@mixin tertiary-button { 179@mixin tertiary-button {
167 @include button-focus($grey-button-outline-color); 180 @include button-focus($grey-button-outline-color);
168 181
@@ -534,6 +547,14 @@
534 min-height: $size; 547 min-height: $size;
535} 548}
536 549
550@mixin channel-avatar ($size) {
551 width: $size;
552 height: $size;
553 min-width: $size;
554 min-height: $size;
555 border-radius: 5px;
556}
557
537@mixin chevron ($size, $border-width) { 558@mixin chevron ($size, $border-width) {
538 border-style: solid; 559 border-style: solid;
539 border-width: $border-width $border-width 0 0; 560 border-width: $border-width $border-width 0 0;
@@ -593,103 +614,29 @@
593 } 614 }
594} 615}
595 616
596@mixin sub-menu-with-actor {
597 position: initial;
598 z-index: unset;
599 height: max-content;
600 display: flex;
601 flex-direction: column;
602 align-items: flex-start;
603
604 .actor {
605 display: flex;
606 margin-top: 20px;
607 margin-bottom: 20px;
608
609 img {
610 @include avatar(80px);
611
612 margin-right: 20px;
613 }
614
615 .actor-info {
616 display: flex;
617 flex-direction: column;
618 justify-content: center;
619
620 .actor-names {
621 display: flex;
622 align-items: center;
623 flex-wrap: wrap;
624
625 .actor-display-name {
626 font-size: 23px;
627 font-weight: $font-bold;
628 margin-right: 7px;
629 }
630
631 .actor-name {
632 position: relative;
633 top: 3px;
634 font-size: 14px;
635 color: $grey-actor-name;
636 }
637 }
638
639 .actor-lower {
640 grid-area: lower;
641 }
642
643 .actor-followers {
644 font-size: 15px;
645 }
646
647 .actor-owner {
648 @include actor-owner;
649 }
650 }
651 }
652
653 .links {
654 margin-top: 0;
655 margin-bottom: 15px;
656
657 a {
658 margin-top: 0;
659 margin-bottom: 0;
660 text-transform: uppercase;
661 font-weight: 600;
662 font-size: 110%;
663
664 @media screen and (max-width: $mobile-view) {
665 font-size: 130%;
666 }
667 }
668
669 list-overflow {
670 display: inline-block;
671 width: max-content;
672 }
673 }
674}
675
676@mixin create-button { 617@mixin create-button {
677 @include peertube-button-link; 618 @include peertube-button-link;
678 @include orange-button; 619 @include orange-button;
679 @include button-with-icon(20px, 5px, -1px); 620 @include button-with-icon(20px, 5px, -1px);
680} 621}
681 622
682@mixin row-blocks { 623@mixin row-blocks ($column-responsive: true) {
683 display: flex; 624 display: flex;
684 min-height: 130px; 625 min-height: 130px;
685 padding-bottom: 20px; 626 padding-bottom: 20px;
686 margin-bottom: 20px; 627 margin-bottom: 20px;
687 border-bottom: 1px solid #C6C6C6; 628 border-bottom: 1px solid #C6C6C6;
688 629
689 @media screen and (max-width: 800px) { 630 @media screen and (max-width: $small-view) {
690 flex-direction: column; 631 @if $column-responsive {
691 height: auto; 632 flex-direction: column;
692 align-items: center; 633 height: auto;
634 align-items: center;
635 } @else {
636 min-height: initial;
637 padding-bottom: 10px;
638 margin-bottom: 10px;
639 }
693 } 640 }
694} 641}
695 642
@@ -756,7 +703,7 @@
756 padding: 0.75rem 1rem; 703 padding: 0.75rem 1rem;
757 margin-bottom: 1rem; 704 margin-bottom: 1rem;
758 list-style: none; 705 list-style: none;
759 background-color: pvar(--submenuColor); 706 background-color: pvar(--submenuBackgroundColor);
760 border-radius: 0.25rem; 707 border-radius: 0.25rem;
761 708
762 .breadcrumb-item { 709 .breadcrumb-item {
@@ -811,7 +758,7 @@
811 & > a, 758 & > a,
812 & > div { 759 & > div {
813 padding: 20px; 760 padding: 20px;
814 background: pvar(--submenuColor); 761 background: pvar(--submenuBackgroundColor);
815 border-radius: 4px; 762 border-radius: 4px;
816 box-sizing: border-box; 763 box-sizing: border-box;
817 height: 100%; 764 height: 100%;
@@ -833,7 +780,7 @@
833 } 780 }
834} 781}
835 782
836@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) { 783@mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
837 width: 95%; 784 width: 95%;
838 border-top: .05rem solid $color; 785 border-top: .05rem solid $color;
839 height: .05rem; 786 height: .05rem;
@@ -916,7 +863,7 @@
916 } 863 }
917} 864}
918 865
919@mixin admin-sub-header-responsive ($horizontal-margins) { 866@mixin admin-sub-header-responsive {
920 flex-direction: column; 867 flex-direction: column;
921 868
922 .form-sub-title { 869 .form-sub-title {
@@ -931,7 +878,7 @@
931 white-space: nowrap; 878 white-space: nowrap;
932 height: 50px; 879 height: 50px;
933 padding: 10px 0; 880 padding: 10px 0;
934 width: calc(100vw - #{$horizontal-margins*2}); 881 width: 100%;
935 882
936 a { 883 a {
937 margin-left: 5px; 884 margin-left: 5px;
@@ -939,14 +886,16 @@
939 } 886 }
940} 887}
941 888
942// applies 16:9 ratio to a child element (using $selector) only using 889// applies ratio (default to 16:9) to a child element (using $selector) only using
943// an immediate's parent size. This allows 16:9 ratio without explicit 890// an immediate's parent size. This allows to set a ratio without explicit
944// dimensions, as width/height cannot be computed from each other. 891// dimensions, as width/height cannot be computed from each other.
945@mixin large-screen-ratio ($selector: 'div') { 892@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
893 $padding-percent: percentage($inverted-ratio);
894
946 position: relative; 895 position: relative;
947 height: 0; 896 height: 0;
948 width: 100%; 897 width: 100%;
949 padding-top: 56%; 898 padding-top: $padding-percent;
950 899
951 #{$selector} { 900 #{$selector} {
952 position: absolute; 901 position: absolute;
@@ -991,3 +940,31 @@
991 940
992 border-left: $width solid rgba(255, 255, 255, 0.95); 941 border-left: $width solid rgba(255, 255, 255, 0.95);
993} 942}
943
944@mixin on-small-main-col () {
945 :host-context(.main-col:not(.expanded)) {
946 @media screen and (max-width: $small-view + $menu-width) {
947 @content;
948 }
949 }
950
951 :host-context(.main-col.expanded) {
952 @media screen and (max-width: $small-view) {
953 @content;
954 }
955 }
956}
957
958@mixin on-mobile-main-col () {
959 :host-context(.main-col:not(.expanded)) {
960 @media screen and (max-width: $mobile-view + $menu-width) {
961 @content;
962 }
963 }
964
965 :host-context(.main-col.expanded) {
966 @media screen and (max-width: $mobile-view) {
967 @content;
968 }
969 }
970}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c8316473d..d2a5d2bd9 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -16,9 +16,10 @@ $grey-foreground-hover-color: #303030;
16$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); 16$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
17 17
18$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
19$main-hover-color: lighten($main-color, 5%);
20$main-color-lighter: lighten($main-color, 10%); 19$main-color-lighter: lighten($main-color, 10%);
21$main-color-lightest: lighten($main-color, 40%); 20$main-color-lightest: lighten($main-color, 40%);
21$main-hover-color: lighten($main-color, 5%);
22
22$secondary-color: hsl(187, 77%, 34%); 23$secondary-color: hsl(187, 77%, 34%);
23 24
24$support-button: inherit; 25$support-button: inherit;
@@ -47,18 +48,34 @@ $menu-bottom-color: #C6C6C6;
47$menu-width: 240px; 48$menu-width: 240px;
48$menu-lateral-padding: 26px; 49$menu-lateral-padding: 26px;
49 50
50$sub-menu-color: #F7F7F7; 51$sub-menu-background-color: #F7F7F7;
51$sub-menu-height: 81px; 52$sub-menu-height: 81px;
52 53
54$channel-background-color: #f6ede8;
55
56$banner-inverted-ratio: 1/6;
57
58$max-channels-width: 1200px;
59
53$footer-height: 30px; 60$footer-height: 30px;
54$footer-margin: 30px; 61$footer-margin: 30px;
55 62
56$separator-border-color: rgba(0, 0, 0, 0.10); 63$separator-border-color: rgba(0, 0, 0, 0.10);
57 64
58$video-miniature-width: 238px;
59$video-miniature-margin-bottom: 15px; 65$video-miniature-margin-bottom: 15px;
60$video-thumbnail-height: 122px; 66
61$video-thumbnail-width: 223px; 67$video-miniature-row-name-font-size: 1.3em;
68$video-miniature-row-mobile-name-font-size: 14px;
69
70$video-miniature-row-info-font-size: 14px;
71$video-miniature-row-mobile-info-font-size: 12px;
72
73$video-thumbnail-height: 153px;
74$video-thumbnail-width: 280px;
75$video-thumbnail-medium-height: 114px;
76$video-thumbnail-medium-width: 201px;
77$video-thumbnail-small-height: 71px;
78$video-thumbnail-small-width: 125px;
62 79
63$theater-bottom-space: 115px; 80$theater-bottom-space: 115px;
64 81
@@ -98,7 +115,9 @@ $variables: (
98 115
99 --menuBackgroundColor: var(--menuBackgroundColor), 116 --menuBackgroundColor: var(--menuBackgroundColor),
100 --menuForegroundColor: var(--menuForegroundColor), 117 --menuForegroundColor: var(--menuForegroundColor),
101 --submenuColor: var(--submenuColor), 118
119 --submenuBackgroundColor: var(--submenuBackgroundColor),
120 --channelBackgroundColor: var(--channelBackgroundColor),
102 121
103 --inputForegroundColor: var(--inputForegroundColor), 122 --inputForegroundColor: var(--inputForegroundColor),
104 --inputBackgroundColor: var(--inputBackgroundColor), 123 --inputBackgroundColor: var(--inputBackgroundColor),
@@ -116,11 +135,20 @@ $variables: (
116 --supportButtonHeartColor: var(--supportButtonHeartColor), 135 --supportButtonHeartColor: var(--supportButtonHeartColor),
117 136
118 --embedForegroundColor: var(--embedForegroundColor), 137 --embedForegroundColor: var(--embedForegroundColor),
119 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 138 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
139
140 --horizontalMarginContent: var(--horizontalMarginContent),
141 --videosHorizontalMarginContent: var(--videosHorizontalMarginContent),
142 --mainColWidth: var(--mainColWidth)
120); 143);
121 144
145// SASS type check our CSS variables
122@function pvar($variable) { 146@function pvar($variable) {
123 @return map-get($variables, $variable); 147 @if map-has-key($variables, $variable) {
148 @return map-get($variables, $variable);
149 } @else {
150 @error "ERROR: Variable #{$variable} does not exist";
151 }
124} 152}
125 153
126/*** z-index groups ***/ 154/*** z-index groups ***/
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 54c805ccf..13fc1d6c2 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -11,7 +11,7 @@ $ng-select-highlight: #f2690d;
11$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); 11$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
12// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default; 12// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
13$ng-select-height: 30px; 13$ng-select-height: 30px;
14// $ng-select-value-padding-left: 10px !default; 14$ng-select-value-padding-left: 15px;
15// $ng-select-value-font-size: 0.9em !default; 15// $ng-select-value-font-size: 0.9em !default;
16 16
17@import "~@ng-select/ng-select/scss/default.theme.scss"; 17@import "~@ng-select/ng-select/scss/default.theme.scss";
@@ -20,11 +20,6 @@ $ng-select-height: 30px;
20 font-size: .9em; 20 font-size: .9em;
21} 21}
22 22
23.ng-input,
24.ng-select .ng-select-container .ng-value-container {
25 padding-left: 15px !important;
26}
27
28.ng-select { 23.ng-select {
29 &.ng-select-focused { 24 &.ng-select-focused {
30 &:not(.ng-select-opened) > .ng-select-container { 25 &:not(.ng-select-opened) > .ng-select-container {
@@ -44,4 +39,11 @@ $ng-select-height: 30px;
44 &.ng-select-single .ng-value-container .ng-value { 39 &.ng-select-single .ng-value-container .ng-value {
45 color: pvar(--inputForegroundColor); 40 color: pvar(--inputForegroundColor);
46 } 41 }
42
43 &.ng-select-multiple .ng-select-container .ng-value-container {
44 padding-left: 12px;
45 .ng-value {
46 margin-left: 3px;
47 }
48 }
47} 49}
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index f3a28ead0..ad673eea7 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: pvar(--embedForegroundCsolor); 17 color: pvar(--embedForegroundColor);
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 0144e89fb..81aacf1d7 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -43,10 +43,6 @@ body {
43 } 43 }
44 } 44 }
45 45
46 .vjs-button > .vjs-icon-placeholder::before {
47 line-height: $control-bar-height;
48 }
49
50 .vjs-volume-level::before { 46 .vjs-volume-level::before {
51 content: ''; /* Remove Circle From Progress Bar */ 47 content: ''; /* Remove Circle From Progress Bar */
52 } 48 }
@@ -242,8 +238,19 @@ body {
242 @include disable-outline; 238 @include disable-outline;
243 239
244 cursor: pointer; 240 cursor: pointer;
245 font-size: $play-control-font-size;
246 width: 2em; 241 width: 2em;
242
243 .vjs-icon-placeholder {
244 line-height: $control-bar-height;
245 position: relative;
246 top: -1px;
247
248 &::before {
249 font-size: 28px;
250 line-height: unset;
251 position: relative;
252 }
253 }
247 } 254 }
248 255
249 .vjs-time-control { 256 .vjs-time-control {
@@ -375,7 +382,6 @@ body {
375 .vjs-mute-control { 382 .vjs-mute-control {
376 @include disable-outline; 383 @include disable-outline;
377 384
378 line-height: $control-bar-height;
379 padding: 0; 385 padding: 0;
380 width: 30px; 386 width: 30px;
381 387
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index afa577819..9c9b5d4fc 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -547,7 +547,7 @@ p-table {
547 height: 46px; 547 height: 46px;
548 548
549 &.p-highlight { 549 &.p-highlight {
550 background-color: pvar(--submenuColor) !important; 550 background-color: pvar(--submenuBackgroundColor) !important;
551 551
552 td, td > a { 552 td, td > a {
553 color: pvar(--mainForegroundColor) !important; 553 color: pvar(--mainForegroundColor) !important;
@@ -558,7 +558,7 @@ p-table {
558 .p-datatable-tbody { 558 .p-datatable-tbody {
559 tr { 559 tr {
560 &:hover { 560 &:hover {
561 background-color: pvar(--submenuColor) !important; 561 background-color: pvar(--submenuBackgroundColor) !important;
562 } 562 }
563 563
564 td { 564 td {
@@ -590,16 +590,16 @@ p-table {
590 th { 590 th {
591 border: none !important; 591 border: none !important;
592 border-bottom: 1px solid !important; 592 border-bottom: 1px solid !important;
593 border-color: pvar(--submenuColor) !important; 593 border-color: pvar(--submenuBackgroundColor) !important;
594 text-align: left !important; 594 text-align: left !important;
595 padding: 5px 0 5px 15px !important; 595 padding: 5px 0 5px 15px !important;
596 font-weight: $font-semibold !important; 596 font-weight: $font-semibold !important;
597 color: pvar(--mainForegroundColor) !important; 597 color: pvar(--mainForegroundColor) !important;
598 598
599 &.p-sortable-column:hover { 599 &.p-sortable-column:hover {
600 background-color: pvar(--submenuColor) !important; 600 background-color: pvar(--submenuBackgroundColor) !important;
601 border: 1px solid !important; 601 border: 1px solid !important;
602 border-color: pvar(--submenuColor) !important; 602 border-color: pvar(--submenuBackgroundColor) !important;
603 border-width: 0 1px !important; 603 border-width: 0 1px !important;
604 604
605 &:first-child { 605 &:first-child {
@@ -608,7 +608,7 @@ p-table {
608 } 608 }
609 609
610 &.p-highlight { 610 &.p-highlight {
611 background-color: pvar(--submenuColor) !important; 611 background-color: pvar(--submenuBackgroundColor) !important;
612 612
613 .pi { 613 .pi {
614 @extend .glyphicon; 614 @extend .glyphicon;
@@ -654,7 +654,7 @@ p-table {
654 position: relative; 654 position: relative;
655 border: none; 655 border: none;
656 border-top: 1px solid !important; 656 border-top: 1px solid !important;
657 border-color: pvar(--submenuColor) !important; 657 border-color: pvar(--submenuBackgroundColor) !important;
658 height: 40px; 658 height: 40px;
659 display: flex; 659 display: flex;
660 justify-content: center; 660 justify-content: center;
@@ -753,29 +753,32 @@ p-table {
753} 753}
754 754
755// overflow data table 755// overflow data table
756@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) { 756p-table {
757 p-table { 757 .p-datatable-wrapper {
758 .p-datatable-wrapper { 758 overflow-x: auto;
759 overflow-x: auto; 759 max-width: 100%;
760 max-width: calc(100vw - #{$horizontal-margins * 2});
761
762 table {
763 min-width: $table-min-width;
764 }
765 }
766 760
767 @if $mobile-paginator { 761 table {
768 p-paginator .p-paginator-bottom { 762 min-width: breakpoint(lg);
769 display: block; 763 }
764 }
770 765
771 .p-paginator-current { 766 @media screen and (max-width: #{breakpoint(lg)}) {
772 position: relative; 767 // Prevent overflow
773 display: block; 768 p-paginator {
774 } 769 .p-paginator-current,
770 .p-dropdown {
771 top: 0;
772 margin-top: 30px;
773 }
774 }
775 }
775 776
776 a, .p-paginator-pages { 777 @media screen and (max-width: $mobile-view) {
777 vertical-align: middle; 778 // Prevent overflow
778 } 779 p-paginator {
780 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
781 display: none;
779 } 782 }
780 } 783 }
781 } 784 }
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-28 01:45:13 +0000