]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/sass/primeng-custom.scss
Translated using Weblate (Toki Pona (tok))
[github/Chocobozzz/PeerTube.git] / client / src / sass / primeng-custom.scss
CommitLineData
8cbc40b2
C
1@use '_variables' as *;
2@use '_mixins' as *;
93c728a2 3@use '_icons' as *;
bbe0f064 4
931d3430 5/* stylelint-disable */
cd2fad00 6@import '~primeng/resources/primeng.css';
4f926722 7
266947e5 8// Override primeng style we don't want
931d3430 9input[type=button] {
266947e5
C
10 border-radius: inherit;
11}
12
1fd61899
C
13p-table .p-datatable-header .caption {
14 margin-bottom: 15px;
15}
16
4f926722
C
17// Taken from old nova light theme
18
19body .p-disabled {
20 opacity: 0.5;
21}
22
23// Checkbox
24body .p-checkbox {
25 display: inline-block;
26 vertical-align: middle;
27 margin: 0;
28 width: 20px;
29 height: 20px;
30}
31body .p-checkbox .p-checkbox-box {
32 border: 1px solid #a6a6a6;
33 background-color: #ffffff;
34 width: 20px;
35 height: 20px;
36 text-align: center;
37 border-radius: 3px;
38 transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
39}
40body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
41 border-color: #212121;
42}
43body .p-checkbox .p-checkbox-box .p-checkbox-icon {
44 overflow: hidden;
45 position: relative;
46 font-size: 18px;
47}
48
49// Paginator
50body .p-paginator {
51 background-color: #f4f4f4;
52 border: 1px solid #c8c8c8;
53 padding: 0;
54}
55body .p-paginator .p-paginator-first,
56body .p-paginator .p-paginator-prev,
57body .p-paginator .p-paginator-next,
58body .p-paginator .p-paginator-last {
59 color: #848484;
60 height: 2.286em;
61 min-width: 2.286em;
62 border: 0 none;
63 line-height: 2.286em;
64 padding: 0;
65 margin: 0;
66 vertical-align: top;
67 transition: box-shadow 0.2s;
68 border-radius: 0;
69}
70body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
71body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
72body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
73body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
74 background-color: #e0e0e0;
75 color: #333333;
76}
77body .p-paginator .p-paginator-first:focus,
78body .p-paginator .p-paginator-prev:focus,
79body .p-paginator .p-paginator-next:focus,
80body .p-paginator .p-paginator-last:focus {
81 outline: 0 none;
82 outline-offset: 0;
83 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
84}
85body .p-paginator .p-paginator-current {
86 color: #333333;
87 height: 2.286em;
88 min-width: 2.286em;
89 line-height: 2.286em;
90}
91body .p-paginator .p-dropdown {
92 border: 0 none;
93}
94body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
95 color: #848484;
96}
97body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
98 color: #333333;
99}
100body .p-paginator .p-paginator-first:before {
101 position: relative;
102 top: 1px;
103}
104body .p-paginator .p-paginator-prev:before {
105 position: relative;
106 top: 1px;
107}
108body .p-paginator .p-paginator-next:before {
109 position: relative;
110 top: 1px;
111}
112body .p-paginator .p-paginator-last:before {
113 position: relative;
114 top: 1px;
115}
116body .p-paginator .p-paginator-pages {
117 vertical-align: top;
118 display: inline-block;
119 padding: 0;
120}
121body .p-paginator .p-paginator-pages .p-paginator-page {
122 color: #848484;
123 height: 2.286em;
124 min-width: 2.286em;
125 border: 0 none;
126 line-height: 2.286em;
127 padding: 0;
128 margin: 0;
129 vertical-align: top;
130 transition: box-shadow 0.2s;
131 border-radius: 0;
132}
133body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
134 background-color: #e0e0e0;
135 color: #333333;
136}
137body .p-paginator .p-paginator-pages .p-paginator-page:focus {
138 outline: 0 none;
139 outline-offset: 0;
140 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
141}
142body .p-paginator .p-dropdown {
27bc9586
C
143 @include margin-left(0.5em);
144
4f926722
C
145 height: 2.286em;
146 min-width: auto;
147}
148
149// Dropdown
150
151body .p-dropdown {
152 background: #ffffff;
153 border: 1px solid #a6a6a6;
154 transition: border-color 0.2s, box-shadow 0.2s;
155}
156body .p-dropdown:not(.p-disabled):hover {
157 border-color: #212121;
158}
159body .p-dropdown:not(.p-disabled).p-focus {
160 outline: 0 none;
161 outline-offset: 0;
162 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
163 border-color: pvar(--mainColor);
164}
165body .p-dropdown .p-dropdown-label {
27bc9586 166 @include padding-right(2em);
4f926722
C
167}
168body .p-dropdown .p-dropdown-trigger {
169 background-color: #ffffff;
170 width: 2em;
171 line-height: 2em;
172 text-align: center;
173 padding: 0;
174 color: #848484;
175}
176body .p-dropdown .p-dropdown-clear-icon {
177 color: #848484;
178}
179body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
27bc9586 180 @include padding-right(4em);
4f926722
C
181}
182body .p-dropdown-panel {
183 padding: 0;
184 border: 1px solid #c8c8c8;
185 background-color: #ffffff;
186 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
187}
188body .p-dropdown-panel .p-dropdown-filter-container {
189 padding: 0.429em 0.857em 0.429em 0.857em;
190 border-bottom: 1px solid #eaeaea;
191 color: #333333;
192 background-color: #ffffff;
193 margin: 0;
194}
195body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
27bc9586
C
196 @include padding-right(2em);
197
4f926722 198 width: 100%;
4f926722
C
199}
200body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
201 top: 50%;
202 margin-top: -0.5em;
203 right: 1.357em;
204 color: pvar(--mainColor);
205}
206body .p-dropdown-panel .p-dropdown-items {
207 padding: 0;
208}
209body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
210 margin: 0;
211 padding: 0.429em 0.857em;
212 border: 0 none;
213 color: #333333;
214 background-color: transparent;
215 -moz-border-radius: 0;
216 -webkit-border-radius: 0;
217 border-radius: 0;
218}
219body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
220body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
221 color: #ffffff;
222 background-color: pvar(--mainColor);
223}
224body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
225body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
226 color: #333333;
227 background-color: #eaeaea;
228}
229body p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
230 border: 1px solid #a80000;
231}
232
233// p-toast
234body .p-toast .p-toast-message {
235 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
236 margin: 0 0 1em 0;
237}
238
239// p-calendar
240body .p-datepicker {
241 padding: 0.857em;
242 min-width: 20em;
243 background-color: #ffffff;
244 color: #333333;
245 border: 1px solid #a6a6a6;
246}
247
248body .p-datepicker:not(.p-datepicker-inline) {
249 border: 1px solid #c8c8c8;
250 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
251}
252body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:focus,
253body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:focus {
254 outline: 0 none;
255 outline-offset: 0;
256 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
257}
258body .p-datepicker:not(.p-disabled) table td a:not(.p-highlight):not(.p-highlight):hover {
259 background-color: #eaeaea;
260}
261body .p-datepicker:not(.p-disabled) .p-monthpicker a.p-monthpicker-month:not(.p-highlight):hover {
262 background-color: #eaeaea;
263}
264body .p-datepicker .p-datepicker-header {
265 padding: 0.429em 0.857em 0.429em 0.857em;
266 background-color: #ffffff;
267 color: #333333;
268 -moz-border-radius: 0;
269 -webkit-border-radius: 0;
270 border-radius: 0;
271}
272body .p-datepicker .p-datepicker-header .p-datepicker-prev,
273body .p-datepicker .p-datepicker-header .p-datepicker-next {
274 cursor: pointer;
275 top: 0;
276 color: #a6a6a6;
277 transition: color 0.2s, box-shadow 0.2s;
278}
279body .p-datepicker .p-datepicker-header .p-datepicker-title {
280 margin: 0;
281 padding: 0;
282 line-height: 1;
283}
284body .p-datepicker .p-datepicker-header .p-datepicker-title select {
285 margin-top: -0.35em;
286 margin-bottom: 0;
287 transition: color 0.2s, box-shadow 0.2s;
288}
289body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
290 outline: 0 none;
291 outline-offset: 0;
292 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
293}
294body .p-datepicker table {
295 font-size: 14px;
296 margin: 0.857em 0 0 0;
297}
298body .p-datepicker table th {
299 padding: 0.5em;
300}
301body .p-datepicker table th.p-datepicker-weekheader {
302 border-right: 1px solid #a6a6a6;
303}
304body .p-datepicker table td {
305 padding: 0.5em;
306}
307body .p-datepicker table td > a,
308body .p-datepicker table td > span {
309 display: block;
310 text-align: center;
311 color: #333333;
312 padding: 0.5em;
313 transition: box-shadow 0.2s;
314 border-radius: 3px;
315}
316body .p-datepicker table td > a.p-highlight,
317body .p-datepicker table td > span.p-highlight {
318 color: #ffffff;
319 background-color: pvar(--mainColor);
320}
321body .p-datepicker table td > a {
322 cursor: pointer;
323}
324body .p-datepicker table td > a:focus {
325 outline: 0 none;
326 outline-offset: 0;
327 box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
328}
329body .p-datepicker table td.p-datepicker-today > a,
330body .p-datepicker table td.p-datepicker-today > span {
331 background-color: #d0d0d0;
332 color: #333333;
333}
334body .p-datepicker table td.p-datepicker-today > a.p-highlight,
335body .p-datepicker table td.p-datepicker-today > span.p-highlight {
336 color: #ffffff;
337 background-color: pvar(--mainColor);
338}
339body .p-datepicker table td.p-datepicker-weeknumber {
340 border-right: 1px solid #a6a6a6;
341}
342body .p-datepicker .p-datepicker-buttonbar {
343 border-top: 1px solid #d8dae2;
344}
345body .p-datepicker .p-timepicker {
346 border: 0 none;
347 border-top: 1px solid #d8dae2;
348 padding: 0.857em;
349}
350body .p-datepicker .p-timepicker a {
351 color: #333333;
352 font-size: 1.286em;
353}
354body .p-datepicker .p-timepicker a:hover {
355 color: pvar(--mainColor);
356}
357body .p-datepicker .p-timepicker span {
358 font-size: 1.286em;
359}
360body .p-datepicker .p-monthpicker .p-monthpicker-month {
361 color: #333333;
362}
363body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
364 color: #ffffff;
365 background-color: pvar(--mainColor);
366}
367body .p-datepicker.p-datepicker-timeonly {
368 padding: 0;
369}
370body .p-datepicker.p-datepicker-timeonly .p-timepicker {
371 border-top: 0 none;
372}
373body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
27bc9586
C
374 @include padding-right(0.857em);
375 @include padding-left(0.857em);
376
4f926722 377 border-right: 1px solid #d8dae2;
4f926722
C
378 padding-top: 0;
379 padding-bottom: 0;
380}
381body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
27bc9586 382 @include padding-left(0);
4f926722
C
383}
384body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
27bc9586 385 @include padding-right(0);
4f926722
C
386 border-right: 0 none;
387}
388body .p-calendar.p-calendar-w-btn .p-inputtext {
389 border-top-right-radius: 0;
390 border-bottom-right-radius: 0;
391 border-right: 0 none;
392}
393body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
394body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
395 border-right: 0 none;
396}
397body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
398 width: 2.357em;
399 border-top-left-radius: 0;
400 border-bottom-left-radius: 0;
401}
402body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
403 width: calc(100% - 2.357em);
404}
405body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
406 border: 1px solid #a80000;
407}
408body .p-timepicker .p-separator {
27bc9586 409 @include margin-left(0);
4f926722
C
410 min-width: 0.75rem;
411}
412
413// auto complete
414body .p-autocomplete .p-autocomplete-input {
415 padding: 0.429em;
416}
417body .p-autocomplete-panel {
418 padding: 0;
419 border: 1px solid #c8c8c8;
420 background-color: #ffffff;
421 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
422}
423body .p-autocomplete-panel .p-autocomplete-items {
424 padding: 0;
425}
426body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
427 margin: 0;
428 padding: 0.429em 0.857em;
429 border: 0 none;
430 color: #333333;
431 background-color: transparent;
432 border-radius: 0;
433}
434body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
435body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
436 color: #ffffff;
437 background-color: pvar(--mainColor);
438}
439body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
440 padding: 0.429em 0.857em;
441 background-color: #d8dae2;
442 color: #333333;
443}
444body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
445 border: 1px solid #a80000;
446}
447
93c728a2
C
448// ---------------------------------------------------------------------------
449// PeerTube customizations
450// ---------------------------------------------------------------------------
bbe0f064 451
bbe0f064 452p-table {
4f926722 453 .p-datatable-header {
276d9652 454 border: none !important;
e66883b3 455 background-color: pvar(--mainBackgroundColor) !important;
b014b6b9
C
456
457 .caption {
458 height: 40px;
25a42e29
RK
459 width: 100%;
460 display: inline-flex;
b014b6b9 461 align-items: center;
0d3a2982 462
9c1a88e3 463 .left-buttons {
27bc9586 464 @include padding-left(15px);
9c1a88e3 465 }
b014b6b9 466 }
791645e6
C
467 }
468
276d9652 469 th {
e66883b3 470 background-color: pvar(--mainBackgroundColor) !important;
276d9652 471 outline: 0;
b0a9743a
C
472 overflow: hidden;
473 text-overflow: ellipsis;
474 white-space: nowrap;
276d9652
C
475 }
476
477 td, th {
478 font-family: $main-fonts;
5b0ec7cd 479 font-size: 15px;
e66883b3 480 color: pvar(--mainForegroundColor) !important;
276d9652
C
481 }
482
bbe0f064 483 td {
27bc9586 484 @include padding-left(15px !important);
141b177d 485
4f926722
C
486 &.expand-cell {
487 padding: 10px 15px;
488 }
489
7706b370 490 &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
141b177d
C
491 overflow: hidden !important;
492 text-overflow: ellipsis !important;
493 white-space: nowrap !important;
494 }
bbe0f064
C
495 }
496
497 tr {
276d9652 498 outline: 0;
e66883b3 499 background-color: pvar(--mainBackgroundColor) !important;
bbe0f064 500 height: 46px;
791645e6 501
4f926722 502 &.p-highlight {
218f730c 503 background-color: pvar(--submenuBackgroundColor) !important;
276d9652
C
504
505 td, td > a {
e66883b3 506 color: pvar(--mainForegroundColor) !important;
276d9652 507 }
791645e6 508 }
bbe0f064
C
509 }
510
4f926722 511 .p-datatable-tbody {
bbe0f064
C
512 tr {
513 &:hover {
218f730c 514 background-color: pvar(--submenuBackgroundColor) !important;
bbe0f064
C
515 }
516
276d9652
C
517 td {
518 border: none !important;
7aebd32f 519 white-space: normal !important;
276d9652
C
520 }
521
bbe0f064
C
522 &:first-child td {
523 border-top: none !important;
524 }
525
526 &:last-child td {
527 border-bottom: none !important;
528 }
654a188f
RK
529
530 &:focus + tr > td,
531 &:focus > td {
532 box-shadow: none !important;
533 }
bbe0f064
C
534 }
535
536 .expander {
537 cursor: pointer;
538 position: relative;
539 top: 1px;
540 }
541 }
542
543 th {
544 border: none !important;
b9fcfb1d 545 border-bottom: 1px solid !important;
218f730c 546 border-color: pvar(--submenuBackgroundColor) !important;
bbe0f064
C
547 text-align: left !important;
548 padding: 5px 0 5px 15px !important;
549 font-weight: $font-semibold !important;
e66883b3 550 color: pvar(--mainForegroundColor) !important;
bbe0f064 551
4f926722 552 &.p-sortable-column:hover {
218f730c 553 background-color: pvar(--submenuBackgroundColor) !important;
b9fcfb1d 554 border: 1px solid !important;
218f730c 555 border-color: pvar(--submenuBackgroundColor) !important;
bbe0f064
C
556 border-width: 0 1px !important;
557
558 &:first-child {
559 border-width: 0 1px 0 0 !important;
560 }
561 }
562
4f926722 563 &.p-highlight {
218f730c 564 background-color: pvar(--submenuBackgroundColor) !important;
bbe0f064 565
93c728a2
C
566 .pi-sort-amount-up-alt,
567 .pi-sort-amount-down {
568 display: inline-block;
569 position: relative;
570 top: -1px;
571 color: pvar(--mainForegroundColor) !important;
572 }
bbe0f064 573
93c728a2
C
574 .pi-sort-amount-up-alt {
575 @include arrow-up(5px);
576 }
f2fab901 577
93c728a2
C
578 .pi-sort-amount-down {
579 @include arrow-down(5px);
bbe0f064
C
580 }
581 }
582 }
583
584 .action-cell {
585 width: 250px !important;
bbe0f064 586
28e0e40d
C
587 .dropdown-root,
588 my-edit-button,
589 my-delete-button,
590 my-button {
2170f1db 591 display: inline-block !important;
27bc9586 592 @include margin-left(5px);
c5a1ae50 593
9c1a88e3 594 &:first-child {
27bc9586 595 @include margin-left(0)
165ee292 596 }
bbe0f064
C
597 }
598 }
599
600 p-paginator {
4f926722 601 .p-paginator-bottom {
e66883b3 602 background-color: pvar(--mainBackgroundColor) !important;
bbe0f064 603 position: relative;
8b183196
RK
604 border: none;
605 border-top: 1px solid !important;
218f730c 606 border-color: pvar(--submenuBackgroundColor) !important;
bbe0f064
C
607 height: 40px;
608 display: flex;
609 justify-content: center;
610 align-items: center;
611
4f926722 612 .p-dropdown {
2bc9bd08 613 position: absolute;
4f926722 614 top: 10px;
2bc9bd08 615 left: 0;
9b4241e3 616
4f926722 617 &.p-focus {
e66883b3 618 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
9b4241e3
RK
619 }
620
4f926722 621 .p-label {
e66883b3 622 color: pvar(--inputPlaceholderColor);
9b4241e3 623 }
2bc9bd08
RK
624 }
625
4f926722 626 .p-paginator-current {
2bc9bd08
RK
627 position: absolute;
628 right: 0;
e66883b3 629 color: pvar(--inputPlaceholderColor);
4f926722 630 overflow: visible;
2bc9bd08
RK
631 }
632
4f926722
C
633 .p-paginator-first,
634 .p-paginator-prev,
635 .p-paginator-next,
636 .p-paginator-last {
30eac84e 637 padding: 5px 2px;
93c728a2 638 height: 100%;
30eac84e 639 outline: none;
93c728a2 640 color: pvar(--mainForegroundColor);
30eac84e 641
2bc9bd08
RK
642 &.focus-within,
643 &:focus {
e66883b3 644 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
2bc9bd08
RK
645 }
646
4f926722 647 &.p-disabled:hover {
30eac84e
C
648 background-color: #fff !important;
649 }
650
4f926722 651 &.p-paginator-first {
93c728a2
C
652 .p-paginator-icon {
653 width: 18px;
654 height: 18px;
655 background: url('../assets/images/feather/skip-back.svg') no-repeat;
656 background-size: contain;
657 }
30eac84e
C
658 }
659
4f926722 660 &.p-paginator-prev {
3bf57a01
C
661 @include margin-right(10px);
662
93c728a2
C
663 .p-paginator-icon {
664 @extend .chevron-left !optional;
665 }
30eac84e
C
666 }
667
4f926722 668 &.p-paginator-next {
3bf57a01
C
669 @include margin-left(10px);
670
93c728a2
C
671 .p-paginator-icon {
672 @extend .chevron-right !optional;
673 }
30eac84e
C
674 }
675
4f926722 676 &.p-paginator-last {
93c728a2
C
677 .p-paginator-icon {
678 width: 18px;
679 height: 18px;
680 background: url('../assets/images/feather/skip-forward.svg') no-repeat;
681 background-size: contain;
682 }
30eac84e
C
683 }
684 }
685
4f926722 686 .p-paginator-pages {
bbe0f064
C
687 height: auto !important;
688
4f926722 689 .p-paginator-page {
2bc9bd08
RK
690 &.focus-within,
691 &:focus {
e66883b3 692 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
165ee292 693 }
2bc9bd08 694
e66883b3 695 color: pvar(--mainForegroundColor) !important;
bbe0f064 696 font-weight: $font-semibold !important;
276d9652 697 margin: 0 5px !important;
bbe0f064
C
698 outline: 0 !important;
699 border-radius: 3px !important;
700 padding: 5px 2px !important;
701 height: auto !important;
276d9652 702 line-height: initial !important;
bbe0f064 703
4f926722 704 &.p-highlight {
bbe0f064
C
705 &, &:hover, &:active, &:focus {
706 color: #fff !important;
e66883b3 707 background-color: pvar(--mainColor) !important;
bbe0f064
C
708 }
709 }
710 }
711 }
712 }
713 }
eeae8142 714
4c8749cb
C
715 .pt-badge {
716 font-size: 12px;
717 text-transform: uppercase;
eeae8142 718 }
bbe0f064
C
719}
720
165ee292 721// overflow data table
d7941370
C
722p-table {
723 .p-datatable-wrapper {
724 overflow-x: auto;
725 max-width: 100%;
165ee292 726
d7941370 727 table {
d94b8ecf 728 width: 100%;
d7941370
C
729 }
730 }
619443a3 731
d7941370
C
732 @media screen and (max-width: #{breakpoint(lg)}) {
733 // Prevent overflow
734 p-paginator {
735 .p-paginator-current,
736 .p-dropdown {
737 top: 0;
738 margin-top: 30px;
739 }
740 }
741 }
619443a3 742
d7941370
C
743 @media screen and (max-width: $mobile-view) {
744 // Prevent overflow
745 p-paginator {
746 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
747 display: none;
165ee292
K
748 }
749 }
750 }
751}
752
bbe0f064 753// PrimeNG calendar tweaks
4f926722 754p-calendar .p-datepicker {
bbe0f064
C
755 a {
756 @include disable-default-a-behaviour;
757 }
758
4f926722 759 .p-datepicker-header {
bbe0f064 760
4f926722 761 .p-datepicker-year {
27bc9586 762 @include margin-left(5px);
bbe0f064
C
763 }
764
4f926722 765 .p-datepicker-next {
93c728a2 766 @extend .chevron-right !optional;
276d9652 767
aa879092 768 color: #000 !important;
27bc9586 769 text-align: end;
276d9652
C
770
771 .pi.pi-chevron-right {
772 display: none !important;
773 }
bbe0f064
C
774 }
775
4f926722 776 .p-datepicker-prev {
93c728a2 777 @extend .chevron-left !optional;
276d9652 778
aa879092 779 color: #000 !important;
27bc9586 780 text-align: start;
276d9652
C
781
782 .pi.pi-chevron-left {
783 display: none !important;
784 }
bbe0f064
C
785 }
786 }
787
4f926722 788 .p-timepicker {
bbe0f064
C
789
790 .pi.pi-chevron-up {
93c728a2 791 @extend .chevron-up !optional;
aa879092
C
792
793 color: #000 !important;
bbe0f064
C
794 }
795
796 .pi.pi-chevron-down {
93c728a2 797 @extend .chevron-down !optional;
aa879092
C
798
799 color: #000 !important;
bbe0f064
C
800 }
801 }
791645e6
C
802}
803
4f926722 804p-tablecheckbox:hover div .p-checkbox-box {
46db9430
RK
805 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
806}
807
4f926722 808.p-checkbox {
276d9652 809
4f926722 810 &, .p-checkbox-box {
17bb716b
C
811 width: 18px !important;
812 height: 18px !important;
791645e6
C
813 }
814
4f926722
C
815 .p-checkbox-box {
816 &.p-highlight {
e66883b3
RK
817 border-color: pvar(--mainColor) !important;
818 background-color: pvar(--mainColor) !important;
791645e6
C
819 }
820
4f926722 821 .p-checkbox-icon {
17bb716b
C
822 position: relative;
823 overflow: visible !important;
824
825 &:after {
826 content: '';
827 position: absolute;
4f926722
C
828 bottom: -5px;
829 left: -2px;
17bb716b
C
830 width: 5px;
831 height: 12px;
832 opacity: 0;
833 transform: rotate(45deg) scale(0);
e66883b3
RK
834 border-right: 2px solid pvar(--mainBackgroundColor);
835 border-bottom: 2px solid pvar(--mainBackgroundColor);
17bb716b
C
836 }
837
838 &.pi-check:after {
839 opacity: 1;
840 transform: rotate(45deg) scale(1);
841 }
791645e6
C
842 }
843 }
276d9652
C
844}
845
f8b2c1b4 846p-toast {
4f926722
C
847 .p-toast {
848 width: auto;
849 max-width: 300px;
e6ad4316 850 min-width: 200px;
3195cd1c 851
4f926722 852 .p-toast-icon-close {
21973012 853 opacity: 0;
4f926722
C
854 position: absolute;
855 right: 5px;
856 top: 5px;
93c728a2
C
857 width: 18px;
858 height: 18px;
859 background: url('../assets/images/feather/x.svg') no-repeat;
860 background-size: contain;
75264e37
RK
861 }
862
4f926722 863 &:hover .p-toast-icon-close {
21973012 864 opacity: .3;
75264e37
RK
865 }
866 }
867
4f926722 868 .p-toast-message {
f8b2c1b4 869 font-family: $main-fonts;
e66883b3
RK
870 background-color: pvar(--mainBackgroundColor) !important;
871 color: pvar(--mainForegroundColor) !important;
28c801b6
RK
872 border-radius: 5px;
873 box-sizing: border-box;
874 border: 1px solid #EBEEF5 !important;
875 box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
876 overflow: hidden;
877
4707f410
C
878 .notification-block {
879 display: flex;
2f1548fd 880 align-items: center;
e6ad4316 881 width: 100%;
93991770 882 padding: 10px 20px;
f8b2c1b4 883
4707f410 884 .message {
27bc9586 885 @include margin-right(20px);
6e7e63b8 886
c4a05171
C
887 flex-grow: 1;
888
4707f410
C
889 h3 {
890 font-size: 21px;
891 }
f8b2c1b4 892
4707f410 893 p {
c4a05171
C
894 @include peertube-word-wrap;
895
2f1548fd 896 margin-bottom: 0;
4707f410 897 }
f8b2c1b4 898 }
f8b2c1b4
C
899 }
900 }
93c728a2
C
901
902 .p-toast-message-success my-global-icon {
903 color: #8BC34A !important;
904 }
905
906 .p-toast-message-error my-global-icon {
907 color: #F44336 !important;
908 }
909
910 .p-toast-message-warn my-global-icon {
911 color: #F1680D !important;
912 }
913
914 .p-toast-message-info my-global-icon {
915 color: #03A9F4 !important;
916 }
f8b2c1b4 917}
17bb716b 918
d94b8ecf
C
919@media screen and (max-width: $primeng-breakpoint) {
920 p-table {
921 td {
922 padding: 3px 0;
923
924 &.expand-cell {
925 padding: 5px;
926 }
927 }
928
929 .p-datatable-tbody {
930
931 td:last-child {
932 padding-bottom: 15px;
933 margin-bottom: 15px;
934 border-bottom: 1px solid $separator-border-color !important;
935 }
936 }
937 }
938}
939
940@media screen and (max-width: $mobile-view) {
941 p-table {
942 .p-datatable-header {
943 .caption {
944 flex-wrap: wrap;
945
946 > div {
947 width: 100%;
948 padding: 0 !important;
949 margin-bottom: 5px;
950 }
951 }
952 }
953 }
954}