aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss188
-rw-r--r--client/src/sass/bootstrap.scss17
-rw-r--r--client/src/sass/classes.scss26
-rw-r--r--client/src/sass/include/_actor.scss88
-rw-r--r--client/src/sass/include/_miniature.scss172
-rw-r--r--client/src/sass/include/_mixins.scss228
-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.scss30
-rw-r--r--client/src/sass/player/peertube-skin.scss18
-rw-r--r--client/src/sass/primeng-custom.scss62
11 files changed, 449 insertions, 438 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a0009eecc..fa9c0d992 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -6,15 +6,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
6 6
7@import '_fonts'; 7@import '_fonts';
8 8
9@import '~video.js/dist/video-js.css';
10
11$assets-path: '../../assets/';
12@import './player/index';
13
14@import './bootstrap'; 9@import './bootstrap';
15@import './primeng-custom'; 10@import './primeng-custom';
16@import './ng-select.scss'; 11@import './ng-select.scss';
17 12
13@import './classes.scss';
14
18[hidden] { 15[hidden] {
19 display: none !important; 16 display: none !important;
20} 17}
@@ -36,7 +33,9 @@ body {
36 33
37 --menuBackgroundColor: #{$menu-background}; 34 --menuBackgroundColor: #{$menu-background};
38 --menuForegroundColor: #{$menu-color}; 35 --menuForegroundColor: #{$menu-color};
39 --submenuColor: #{$sub-menu-color}; 36
37 --submenuBackgroundColor: #{$sub-menu-background-color};
38 --channelBackgroundColor: #{$channel-background-color};
40 39
41 --inputForegroundColor: #{$input-foreground-color}; 40 --inputForegroundColor: #{$input-foreground-color};
42 --inputBackgroundColor: #{$input-background-color}; 41 --inputBackgroundColor: #{$input-background-color};
@@ -53,7 +52,9 @@ body {
53 52
54 --activatedActionButtonColor: #{$activated-action-button-color}; 53 --activatedActionButtonColor: #{$activated-action-button-color};
55 54
56 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins}; 55 --horizontalMarginContent: #{$not-expanded-horizontal-margins};
56 --videosHorizontalMarginContent: 6vw;
57 --mainColWidth: calc(100vw - #{$menu-width});
57 58
58 font-family: $main-fonts; 59 font-family: $main-fonts;
59 font-weight: $font-regular; 60 font-weight: $font-regular;
@@ -146,24 +147,26 @@ my-input-toggle-hidden ::ng-deep input {
146 outline: none; 147 outline: none;
147 148
148 .margin-content { 149 .margin-content {
149 margin-left: $not-expanded-horizontal-margins; 150 margin-left: pvar(--horizontalMarginContent);
150 margin-right: $not-expanded-horizontal-margins; 151 margin-right: pvar(--horizontalMarginContent);
151 flex-grow: 1; 152 flex-grow: 1;
152 } 153 }
153 154
154 .sub-menu { 155 .sub-menu {
155 background-color: pvar(--submenuColor); 156 background-color: pvar(--submenuBackgroundColor);
156 width: 100%; 157 width: 100%;
157 display: flex; 158 display: flex;
158 align-items: center; 159 align-items: center;
159 padding-left: $not-expanded-horizontal-margins; 160 padding-left: pvar(--horizontalMarginContent);
160 padding-right: $not-expanded-horizontal-margins; 161 padding-right: pvar(--horizontalMarginContent);
161 height: $sub-menu-height; 162 height: $sub-menu-height;
162 margin-bottom: $sub-menu-margin-bottom; 163 margin-bottom: $sub-menu-margin-bottom;
164 overflow-x: auto;
163 165
164 &.sub-menu-fixed { 166 &.sub-menu-fixed {
165 position: fixed; 167 position: fixed;
166 z-index: #{z('sub-menu') - 1}; 168 z-index: #{z('sub-menu') - 1};
169 max-width: pvar(--mainColWidth);
167 } 170 }
168 } 171 }
169 172
@@ -174,18 +177,11 @@ my-input-toggle-hidden ::ng-deep input {
174 177
175 // Override some properties if the main content is expanded (no menu on the left) 178 // Override some properties if the main content is expanded (no menu on the left)
176 &.expanded { 179 &.expanded {
180 --horizontalMarginContent: #{$expanded-horizontal-margins};
181 --mainColWidth: 100vw;
182
177 margin-left: 0; 183 margin-left: 0;
178 width: 100%; 184 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 } 185 }
190 186
191 &.lock-scroll .main-row > router-outlet + * { 187 &.lock-scroll .main-row > router-outlet + * {
@@ -263,7 +259,7 @@ my-input-toggle-hidden ::ng-deep input {
263 opacity: 0.6; 259 opacity: 0.6;
264 260
265 &.active { 261 &.active {
266 background-color: pvar(--submenuColor); 262 background-color: pvar(--submenuBackgroundColor);
267 } 263 }
268 264
269 &.active, &:hover, &:active, &:focus { 265 &.active, &:hover, &:active, &:focus {
@@ -277,11 +273,6 @@ my-input-toggle-hidden ::ng-deep input {
277 font-weight: bold; 273 font-weight: bold;
278} 274}
279 275
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 276// In tables, don't have a hover different background
286table { 277table {
287 .action-button-edit, .action-button-delete { 278 .action-button-edit, .action-button-delete {
@@ -338,29 +329,34 @@ ngx-loading-bar {
338 329
339@media screen and (max-width: #{breakpoint(xxl)}) { 330@media screen and (max-width: #{breakpoint(xxl)}) {
340 .main-col { 331 .main-col {
332 & {
333 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
334 }
335
341 &.expanded { 336 &.expanded {
342 .margin-content { 337 --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
343 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
344 }
345 } 338 }
339
340 --videosHorizontalMarginContent: 30px;
346 } 341 }
347} 342}
348 343
349@media screen and (max-width: #{breakpoint(lg)}) { 344@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 { 345 .main-col {
352 &, &.expanded { 346 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
353 .margin-content { 347 }
354 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3}; 348
355 } 349 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
350 .main-col,
351 .main-col.expanded {
352 --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
356 353
357 .sub-menu { 354 .sub-menu {
358 padding-left: 50px; 355 padding-left: 50px;
359 padding-right: 50px; 356 padding-right: 50px;
360 357
361 .title-page { 358 .title-page {
362 font-size: 17px; 359 font-size: 17px;
363 }
364 } 360 }
365 } 361 }
366 } 362 }
@@ -373,98 +369,46 @@ ngx-loading-bar {
373} 369}
374 370
375@media screen and (max-width: $small-view) { 371@media screen and (max-width: $small-view) {
376 .main-col { 372 .main-col,
377 margin-left: 0; 373 .main-col.expanded {
374 --horizontalMarginContent: 15px;
378 375
379 &, &.expanded { 376 margin-left: 0;
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
401 my-markdown-textarea {
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
415 .caption input[type=text] {
416 width: unset !important;
417 flex-grow: 1;
418 }
419 }
420 }
421}
422 377
423// overflow-databale responsive rules 378 .sub-menu {
424@media screen and (min-width: #{breakpoint(lg)}) { 379 width: 100vw;
425 .main-col { 380 padding-left: 15px;
426 &.expanded { 381 padding-right: 15px;
427 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false); 382 margin-bottom: $sub-menu-margin-bottom-small-view;
383 overflow-x: auto;
428 } 384 }
429 385
430 &:not(.expanded) { 386 // Use an appropriate offset top when sub-menu fixed
431 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false); 387 .margin-content.offset-content {
388 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
432 } 389 }
433 }
434}
435 390
436@media screen and (max-width: #{breakpoint(lg)}) { 391 .admin-sub-header {
437 .main-col { 392 @include admin-sub-header-responsive;
438 &.expanded {
439 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
440 } 393 }
441 394
442 &:not(.expanded) { 395 my-markdown-textarea {
443 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2); 396 .root {
397 max-width: 100% !important;
398 }
444 } 399 }
445 }
446}
447 400
448@media screen and (max-width: $small-view) { 401 input[type=text],
449 .main-col { 402 input[type=password],
450 &:not(.expanded), 403 input[type=email],
451 &.expanded { 404 textarea,
452 @include overflow-datatable(breakpoint(lg), 15px); 405 .peertube-select-container {
406 flex-grow: 1;
453 } 407 }
454 }
455}
456 408
457@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) { 409 .caption input[type=text] {
458 .main-col { 410 width: unset !important;
459 &:not(.expanded) { 411 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 } 412 }
469 } 413 }
470} 414}
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 7047f6e03..e11603e4d 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}
@@ -149,17 +153,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
149 margin-bottom: 0; 153 margin-bottom: 0;
150 text-align: right; 154 text-align: right;
151 155
152 .action-button-cancel { 156 > .peertube-button:not(:first-child) {
153 @include peertube-button; 157 margin-left: 10px
154 @include tertiary-button;
155
156 display: inline-block;
157 margin-right: 10px;
158 }
159
160 .action-button-submit {
161 @include peertube-button;
162 @include orange-button;
163 } 158 }
164 } 159 }
165} 160}
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
new file mode 100644
index 000000000..85bfce7f4
--- /dev/null
+++ b/client/src/sass/classes.scss
@@ -0,0 +1,26 @@
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}
23
24.tertiary-button {
25 @include tertiary-button;
26}
diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..a4798ce1d
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,88 @@
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 > div {
33 margin-left: $img-margin;
34 min-width: 1px;
35 }
36
37 .actor-info {
38 display: flex;
39
40 > div:first-child {
41 flex-grow: 1;
42 min-width: 1px;
43 }
44 }
45
46 .actor-display-name {
47 display: flex;
48 flex-wrap: wrap;
49 }
50
51 h1 {
52 font-size: 28px;
53 font-weight: $font-bold;
54 margin: 0;
55 }
56
57 .actor-handle {
58 @include ellipsis;
59 }
60
61 .actor-handle,
62 .actor-counters {
63 color: pvar(--greyForegroundColor);
64 font-size: $grey-font-size;
65 }
66
67 .actor-counters > *:not(:last-child)::after {
68 content: '•';
69 margin: 0 10px;
70 color: pvar(--mainColor);
71 }
72
73 @media screen and (max-width: $mobile-view) {
74 margin-bottom: 15px;
75
76 h1 {
77 font-size: 22px;
78 }
79
80 .channel-avatar {
81 @include channel-avatar(80px);
82 }
83
84 .account-avatar {
85 @include avatar(120px);
86 }
87 }
88}
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..e03201cef 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
@@ -225,7 +238,8 @@
225 font-size: 15px; 238 font-size: 15px;
226 height: $button-height; 239 height: $button-height;
227 line-height: $button-height; 240 line-height: $button-height;
228 border-radius: 3px; 241 // FIXME: because of primeng that redefines border-radius of all input[type="..."]
242 border-radius: 3px !important;
229 text-align: center; 243 text-align: center;
230 padding: 0 17px 0 13px; 244 padding: 0 17px 0 13px;
231 cursor: pointer; 245 cursor: pointer;
@@ -534,6 +548,14 @@
534 min-height: $size; 548 min-height: $size;
535} 549}
536 550
551@mixin channel-avatar ($size) {
552 width: $size;
553 height: $size;
554 min-width: $size;
555 min-height: $size;
556 border-radius: 5px;
557}
558
537@mixin chevron ($size, $border-width) { 559@mixin chevron ($size, $border-width) {
538 border-style: solid; 560 border-style: solid;
539 border-width: $border-width $border-width 0 0; 561 border-width: $border-width $border-width 0 0;
@@ -593,103 +615,29 @@
593 } 615 }
594} 616}
595 617
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 { 618@mixin create-button {
677 @include peertube-button-link; 619 @include peertube-button-link;
678 @include orange-button; 620 @include orange-button;
679 @include button-with-icon(20px, 5px, -1px); 621 @include button-with-icon(20px, 5px, -1px);
680} 622}
681 623
682@mixin row-blocks { 624@mixin row-blocks ($column-responsive: true) {
683 display: flex; 625 display: flex;
684 min-height: 130px; 626 min-height: 130px;
685 padding-bottom: 20px; 627 padding-bottom: 20px;
686 margin-bottom: 20px; 628 margin-bottom: 20px;
687 border-bottom: 1px solid #C6C6C6; 629 border-bottom: 1px solid #C6C6C6;
688 630
689 @media screen and (max-width: 800px) { 631 @media screen and (max-width: $small-view) {
690 flex-direction: column; 632 @if $column-responsive {
691 height: auto; 633 flex-direction: column;
692 align-items: center; 634 height: auto;
635 align-items: center;
636 } @else {
637 min-height: initial;
638 padding-bottom: 10px;
639 margin-bottom: 10px;
640 }
693 } 641 }
694} 642}
695 643
@@ -756,7 +704,7 @@
756 padding: 0.75rem 1rem; 704 padding: 0.75rem 1rem;
757 margin-bottom: 1rem; 705 margin-bottom: 1rem;
758 list-style: none; 706 list-style: none;
759 background-color: pvar(--submenuColor); 707 background-color: pvar(--submenuBackgroundColor);
760 border-radius: 0.25rem; 708 border-radius: 0.25rem;
761 709
762 .breadcrumb-item { 710 .breadcrumb-item {
@@ -811,7 +759,7 @@
811 & > a, 759 & > a,
812 & > div { 760 & > div {
813 padding: 20px; 761 padding: 20px;
814 background: pvar(--submenuColor); 762 background: pvar(--submenuBackgroundColor);
815 border-radius: 4px; 763 border-radius: 4px;
816 box-sizing: border-box; 764 box-sizing: border-box;
817 height: 100%; 765 height: 100%;
@@ -833,7 +781,7 @@
833 } 781 }
834} 782}
835 783
836@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) { 784@mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
837 width: 95%; 785 width: 95%;
838 border-top: .05rem solid $color; 786 border-top: .05rem solid $color;
839 height: .05rem; 787 height: .05rem;
@@ -916,7 +864,7 @@
916 } 864 }
917} 865}
918 866
919@mixin admin-sub-header-responsive ($horizontal-margins) { 867@mixin admin-sub-header-responsive {
920 flex-direction: column; 868 flex-direction: column;
921 869
922 .form-sub-title { 870 .form-sub-title {
@@ -931,7 +879,7 @@
931 white-space: nowrap; 879 white-space: nowrap;
932 height: 50px; 880 height: 50px;
933 padding: 10px 0; 881 padding: 10px 0;
934 width: calc(100vw - #{$horizontal-margins*2}); 882 width: 100%;
935 883
936 a { 884 a {
937 margin-left: 5px; 885 margin-left: 5px;
@@ -939,14 +887,16 @@
939 } 887 }
940} 888}
941 889
942// applies 16:9 ratio to a child element (using $selector) only using 890// 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 891// an immediate's parent size. This allows to set a ratio without explicit
944// dimensions, as width/height cannot be computed from each other. 892// dimensions, as width/height cannot be computed from each other.
945@mixin large-screen-ratio ($selector: 'div') { 893@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
894 $padding-percent: percentage($inverted-ratio);
895
946 position: relative; 896 position: relative;
947 height: 0; 897 height: 0;
948 width: 100%; 898 width: 100%;
949 padding-top: 56%; 899 padding-top: $padding-percent;
950 900
951 #{$selector} { 901 #{$selector} {
952 position: absolute; 902 position: absolute;
@@ -964,7 +914,7 @@
964 padding-bottom: 15px; 914 padding-bottom: 15px;
965 margin-bottom: $sub-menu-margin-bottom; 915 margin-bottom: $sub-menu-margin-bottom;
966 916
967 my-global-icon { 917 > my-global-icon {
968 margin-right: 10px; 918 margin-right: 10px;
969 vertical-align: bottom; 919 vertical-align: bottom;
970 width: 24px; 920 width: 24px;
@@ -991,3 +941,31 @@
991 941
992 border-left: $width solid rgba(255, 255, 255, 0.95); 942 border-left: $width solid rgba(255, 255, 255, 0.95);
993} 943}
944
945@mixin on-small-main-col () {
946 :host-context(.main-col:not(.expanded)) {
947 @media screen and (max-width: $small-view + $menu-width) {
948 @content;
949 }
950 }
951
952 :host-context(.main-col.expanded) {
953 @media screen and (max-width: $small-view) {
954 @content;
955 }
956 }
957}
958
959@mixin on-mobile-main-col () {
960 :host-context(.main-col:not(.expanded)) {
961 @media screen and (max-width: $mobile-view + $menu-width) {
962 @content;
963 }
964 }
965
966 :host-context(.main-col.expanded) {
967 @media screen and (max-width: $mobile-view) {
968 @content;
969 }
970 }
971}
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..df78916c6 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -9,12 +9,13 @@ $context-menu-width: 350px;
9.video-js .vjs-contextmenu-ui-menu { 9.video-js .vjs-contextmenu-ui-menu {
10 position: absolute; 10 position: absolute;
11 background-color: rgba(0, 0, 0, 0.5); 11 background-color: rgba(0, 0, 0, 0.5);
12 padding: 5px 0; 12 padding: 8px 0;
13 border-radius: 4px;
13 width: $context-menu-width; 14 width: $context-menu-width;
14 15
15 .vjs-menu-content { 16 .vjs-menu-content {
16 opacity: $primary-foreground-opacity; 17 opacity: $primary-foreground-opacity;
17 color: pvar(--embedForegroundCsolor); 18 color: pvar(--embedForegroundColor);
18 font-size: $font-size !important; 19 font-size: $font-size !important;
19 font-weight: $font-semibold; 20 font-weight: $font-semibold;
20 } 21 }
@@ -29,5 +30,30 @@ $context-menu-width: 350px;
29 &:hover { 30 &:hover {
30 background-color: rgba(255, 255, 255, 0.2); 31 background-color: rgba(255, 255, 255, 0.2);
31 } 32 }
33
34 [class^="vjs-icon-"] {
35 display: inline-flex;
36 position: relative;
37 top: 2px;
38 cursor: pointer;
39 width: 14px;
40 height: 14px;
41 background-color: white;
42 mask-size: cover;
43 margin-right: 0.8rem !important;
44
45 $icons: 'link-2', 'repeat', 'code', 'tick-white';
46
47 @each $icon in $icons {
48 &[class$="-#{$icon}"] {
49 mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
50 }
51 }
52
53 &[class$="-tick-white"] {
54 float: right;
55 margin: 0 !important;
56 }
57 }
32 } 58 }
33} 59}
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..544d0039a 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -3,6 +3,11 @@
3 3
4@import '~primeng/resources/primeng.css'; 4@import '~primeng/resources/primeng.css';
5 5
6// Override primeng style we don't want
7input[type="button"] {
8 border-radius: inherit;
9}
10
6// Taken from old nova light theme 11// Taken from old nova light theme
7 12
8body .p-disabled { 13body .p-disabled {
@@ -547,7 +552,7 @@ p-table {
547 height: 46px; 552 height: 46px;
548 553
549 &.p-highlight { 554 &.p-highlight {
550 background-color: pvar(--submenuColor) !important; 555 background-color: pvar(--submenuBackgroundColor) !important;
551 556
552 td, td > a { 557 td, td > a {
553 color: pvar(--mainForegroundColor) !important; 558 color: pvar(--mainForegroundColor) !important;
@@ -558,7 +563,7 @@ p-table {
558 .p-datatable-tbody { 563 .p-datatable-tbody {
559 tr { 564 tr {
560 &:hover { 565 &:hover {
561 background-color: pvar(--submenuColor) !important; 566 background-color: pvar(--submenuBackgroundColor) !important;
562 } 567 }
563 568
564 td { 569 td {
@@ -590,16 +595,16 @@ p-table {
590 th { 595 th {
591 border: none !important; 596 border: none !important;
592 border-bottom: 1px solid !important; 597 border-bottom: 1px solid !important;
593 border-color: pvar(--submenuColor) !important; 598 border-color: pvar(--submenuBackgroundColor) !important;
594 text-align: left !important; 599 text-align: left !important;
595 padding: 5px 0 5px 15px !important; 600 padding: 5px 0 5px 15px !important;
596 font-weight: $font-semibold !important; 601 font-weight: $font-semibold !important;
597 color: pvar(--mainForegroundColor) !important; 602 color: pvar(--mainForegroundColor) !important;
598 603
599 &.p-sortable-column:hover { 604 &.p-sortable-column:hover {
600 background-color: pvar(--submenuColor) !important; 605 background-color: pvar(--submenuBackgroundColor) !important;
601 border: 1px solid !important; 606 border: 1px solid !important;
602 border-color: pvar(--submenuColor) !important; 607 border-color: pvar(--submenuBackgroundColor) !important;
603 border-width: 0 1px !important; 608 border-width: 0 1px !important;
604 609
605 &:first-child { 610 &:first-child {
@@ -608,7 +613,7 @@ p-table {
608 } 613 }
609 614
610 &.p-highlight { 615 &.p-highlight {
611 background-color: pvar(--submenuColor) !important; 616 background-color: pvar(--submenuBackgroundColor) !important;
612 617
613 .pi { 618 .pi {
614 @extend .glyphicon; 619 @extend .glyphicon;
@@ -654,7 +659,7 @@ p-table {
654 position: relative; 659 position: relative;
655 border: none; 660 border: none;
656 border-top: 1px solid !important; 661 border-top: 1px solid !important;
657 border-color: pvar(--submenuColor) !important; 662 border-color: pvar(--submenuBackgroundColor) !important;
658 height: 40px; 663 height: 40px;
659 display: flex; 664 display: flex;
660 justify-content: center; 665 justify-content: center;
@@ -753,29 +758,32 @@ p-table {
753} 758}
754 759
755// overflow data table 760// overflow data table
756@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) { 761p-table {
757 p-table { 762 .p-datatable-wrapper {
758 .p-datatable-wrapper { 763 overflow-x: auto;
759 overflow-x: auto; 764 max-width: 100%;
760 max-width: calc(100vw - #{$horizontal-margins * 2});
761
762 table {
763 min-width: $table-min-width;
764 }
765 }
766 765
767 @if $mobile-paginator { 766 table {
768 p-paginator .p-paginator-bottom { 767 min-width: breakpoint(lg);
769 display: block; 768 }
769 }
770 770
771 .p-paginator-current { 771 @media screen and (max-width: #{breakpoint(lg)}) {
772 position: relative; 772 // Prevent overflow
773 display: block; 773 p-paginator {
774 } 774 .p-paginator-current,
775 .p-dropdown {
776 top: 0;
777 margin-top: 30px;
778 }
779 }
780 }
775 781
776 a, .p-paginator-pages { 782 @media screen and (max-width: $mobile-view) {
777 vertical-align: middle; 783 // Prevent overflow
778 } 784 p-paginator {
785 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
786 display: none;
779 } 787 }
780 } 788 }
781 } 789 }
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 13:22:32 +0000