client/src/sass/primeng-custom.scss

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