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