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 }
 298 body .p-datepicker table th {
 299   padding: 0.5em;
 300 }
 301 body .p-datepicker table th.p-datepicker-weekheader {
 302   border-right: 1px solid #a6a6a6;
 303 }
 304 body .p-datepicker table td {
 305   padding: 0.5em;
 306 }
 307 body .p-datepicker table td > a,
 308 body .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 }
 316 body .p-datepicker table td > a.p-highlight,
 317 body .p-datepicker table td > span.p-highlight {
 318   color: #ffffff;
 319   background-color: pvar(--mainColor);
 320 }
 321 body .p-datepicker table td > a {
 322   cursor: pointer;
 323 }
 324 body .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 }
 329 body .p-datepicker table td.p-datepicker-today > a,
 330 body .p-datepicker table td.p-datepicker-today > span {
 331   background-color: #d0d0d0;
 332   color: #333333;
 333 }
 334 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
 335 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
 336   color: #ffffff;
 337   background-color: pvar(--mainColor);
 338 }
 339 body .p-datepicker table td.p-datepicker-weeknumber {
 340   border-right: 1px solid #a6a6a6;
 341 }
 342 body .p-datepicker .p-datepicker-buttonbar {
 343   border-top: 1px solid #d8dae2;
 344 }
 345 body .p-datepicker .p-timepicker {
 346   border: 0 none;
 347   border-top: 1px solid #d8dae2;
 348   padding: 0.857em;
 349 }
 350 body .p-datepicker .p-timepicker a {
 351   color: #333333;
 352   font-size: 1.286em;
 353 }
 354 body .p-datepicker .p-timepicker a:hover {
 355   color: pvar(--mainColor);
 356 }
 357 body .p-datepicker .p-timepicker span {
 358   font-size: 1.286em;
 359 }
 360 body .p-datepicker .p-monthpicker .p-monthpicker-month {
 361   color: #333333;
 362 }
 363 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
 364   color: #ffffff;
 365   background-color: pvar(--mainColor);
 366 }
 367 body .p-datepicker.p-datepicker-timeonly {
 368   padding: 0;
 369 }
 370 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
 371   border-top: 0 none;
 372 }
 373 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
 374   @include padding-right(0.857em);
 375   @include padding-left(0.857em);
 376
 377   border-right: 1px solid #d8dae2;
 378   padding-top: 0;
 379   padding-bottom: 0;
 380 }
 381 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
 382   @include padding-left(0);
 383 }
 384 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
 385   @include padding-right(0);
 386   border-right: 0 none;
 387 }
 388 body .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 }
 393 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
 394 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
 395   border-right: 0 none;
 396 }
 397 body .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 }
 402 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
 403   width: calc(100% - 2.357em);
 404 }
 405 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 406   border: 1px solid #a80000;
 407 }
 408 body .p-timepicker .p-separator {
 409   @include margin-left(0);
 410   min-width: 0.75rem;
 411 }
 412
 413 // auto complete
 414 body .p-autocomplete .p-autocomplete-input {
 415   padding: 0.429em;
 416 }
 417 body .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 }
 423 body .p-autocomplete-panel .p-autocomplete-items {
 424   padding: 0;
 425 }
 426 body .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 }
 434 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
 435 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
 436   color: #ffffff;
 437   background-color: pvar(--mainColor);
 438 }
 439 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
 440   padding: 0.429em 0.857em;
 441   background-color: #d8dae2;
 442   color: #333333;
 443 }
 444 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 445   border: 1px solid #a80000;
 446 }
 447
 448 // ---------------------------------------------------------------------------
 449 // PeerTube customizations
 450 // ---------------------------------------------------------------------------
 451
 452 p-table {
 453   .p-datatable-header {
 454     border: none !important;
 455     background-color: pvar(--mainBackgroundColor) !important;
 456
 457     .caption {
 458       height: 40px;
 459       width: 100%;
 460       display: inline-flex;
 461       align-items: center;
 462
 463       .left-buttons {
 464         @include padding-left(15px);
 465       }
 466     }
 467   }
 468
 469   th {
 470     background-color: pvar(--mainBackgroundColor) !important;
 471     outline: 0;
 472     overflow: hidden;
 473     text-overflow: ellipsis;
 474     white-space: nowrap;
 475   }
 476
 477   td, th {
 478     font-family: $main-fonts;
 479     font-size: 15px;
 480     color: pvar(--mainForegroundColor) !important;
 481   }
 482
 483   td {
 484     @include padding-left(15px !important);
 485
 486     &.expand-cell {
 487       padding: 10px 15px;
 488     }
 489
 490     &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
 491       overflow: hidden !important;
 492       text-overflow: ellipsis !important;
 493       white-space: nowrap !important;
 494     }
 495   }
 496
 497   tr {
 498     outline: 0;
 499     background-color: pvar(--mainBackgroundColor) !important;
 500     height: 46px;
 501
 502     &.p-highlight {
 503       background-color: pvar(--submenuBackgroundColor) !important;
 504
 505       td, td > a {
 506         color: pvar(--mainForegroundColor) !important;
 507       }
 508     }
 509   }
 510
 511   .p-datatable-tbody {
 512     tr {
 513       &:hover {
 514         background-color: pvar(--submenuBackgroundColor) !important;
 515       }
 516
 517       td {
 518         border: none !important;
 519         white-space: normal !important;
 520       }
 521
 522       &:first-child td {
 523         border-top: none !important;
 524       }
 525
 526       &:last-child td {
 527         border-bottom: none !important;
 528       }
 529
 530       &:focus + tr > td,
 531       &:focus > td {
 532         box-shadow: none !important;
 533       }
 534     }
 535
 536     .expander {
 537       cursor: pointer;
 538       position: relative;
 539       top: 1px;
 540     }
 541   }
 542
 543   th {
 544     border: none !important;
 545     border-bottom: 1px solid !important;
 546     border-color: pvar(--submenuBackgroundColor) !important;
 547     text-align: left !important;
 548     padding: 5px 0 5px 15px !important;
 549     font-weight: $font-semibold !important;
 550     color: pvar(--mainForegroundColor) !important;
 551
 552     &.p-sortable-column:hover {
 553       background-color: pvar(--submenuBackgroundColor) !important;
 554       border: 1px solid !important;
 555       border-color: pvar(--submenuBackgroundColor) !important;
 556       border-width: 0 1px !important;
 557
 558       &:first-child {
 559         border-width: 0 1px 0 0 !important;
 560       }
 561     }
 562
 563     &.p-highlight {
 564       background-color: pvar(--submenuBackgroundColor) !important;
 565
 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       }
 573
 574       .pi-sort-amount-up-alt {
 575         @include arrow-up(5px);
 576       }
 577
 578       .pi-sort-amount-down {
 579         @include arrow-down(5px);
 580       }
 581     }
 582   }
 583
 584   .action-cell {
 585     width: 250px !important;
 586
 587     .dropdown-root,
 588     my-edit-button,
 589     my-delete-button,
 590     my-button {
 591       display: inline-block !important;
 592       @include margin-left(5px);
 593
 594       &:first-child {
 595         @include margin-left(0)
 596       }
 597     }
 598   }
 599
 600   p-paginator {
 601     .p-paginator-bottom {
 602       background-color: pvar(--mainBackgroundColor) !important;
 603       position: relative;
 604       border: none;
 605       border-top: 1px solid !important;
 606       border-color: pvar(--submenuBackgroundColor) !important;
 607       height: 40px;
 608       display: flex;
 609       justify-content: center;
 610       align-items: center;
 611
 612       .p-dropdown {
 613         position: absolute;
 614         top: 10px;
 615         left: 0;
 616
 617         &.p-focus {
 618           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 619         }
 620
 621         .p-label {
 622           color: pvar(--inputPlaceholderColor);
 623         }
 624       }
 625
 626       .p-dropdown,
 627       .p-dropdown-trigger {
 628         color: pvar(--mainForegroundColor);
 629         background-color: pvar(--mainBackgroundColor);
 630       }
 631
 632       .p-paginator-current {
 633         position: absolute;
 634         right: 0;
 635         color: pvar(--inputPlaceholderColor);
 636         overflow: visible;
 637       }
 638
 639       .p-paginator-first,
 640       .p-paginator-prev,
 641       .p-paginator-next,
 642       .p-paginator-last {
 643         padding: 5px 2px;
 644         height: 100%;
 645         outline: none;
 646         color: pvar(--mainForegroundColor);
 647
 648         &.focus-within,
 649         &:focus {
 650           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 651         }
 652
 653         &.p-disabled:hover {
 654           background-color: #fff !important;
 655         }
 656
 657         &.p-paginator-first {
 658           .p-paginator-icon {
 659             width: 18px;
 660             height: 18px;
 661             background: url('../assets/images/feather/skip-back.svg') no-repeat;
 662             background-size: contain;
 663           }
 664         }
 665
 666         &.p-paginator-prev {
 667           @include margin-right(10px);
 668
 669           .p-paginator-icon {
 670             @include chevron-left-default;
 671           }
 672         }
 673
 674         &.p-paginator-next {
 675           @include margin-left(10px);
 676
 677           .p-paginator-icon {
 678             @include chevron-right-default;
 679           }
 680         }
 681
 682         &.p-paginator-last {
 683           .p-paginator-icon {
 684             width: 18px;
 685             height: 18px;
 686             background: url('../assets/images/feather/skip-forward.svg') no-repeat;
 687             background-size: contain;
 688           }
 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: #{breakpoint(lg)}) {
 739     // Prevent overflow
 740     p-paginator {
 741       .p-paginator-current,
 742       .p-dropdown {
 743         top: 0;
 744         margin-top: 30px;
 745       }
 746     }
 747   }
 748
 749   @media screen and (max-width: $mobile-view) {
 750     // Prevent overflow
 751     p-paginator {
 752       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
 753         display: none;
 754       }
 755     }
 756   }
 757 }
 758
 759 // PrimeNG calendar tweaks
 760 p-calendar .p-datepicker {
 761   a {
 762     @include disable-default-a-behaviour;
 763   }
 764
 765   .p-datepicker-header {
 766
 767     .p-datepicker-year {
 768       @include margin-left(5px);
 769     }
 770
 771     .p-datepicker-next {
 772       @include chevron-right-default;
 773
 774       color: #000 !important;
 775       text-align: end;
 776
 777       .pi.pi-chevron-right {
 778         display: none !important;
 779       }
 780     }
 781
 782     .p-datepicker-prev {
 783       @include chevron-left-default;
 784
 785       color: #000 !important;
 786       text-align: start;
 787
 788       .pi.pi-chevron-left {
 789         display: none !important;
 790       }
 791     }
 792   }
 793
 794   .p-timepicker {
 795
 796     .pi.pi-chevron-up {
 797       @include chevron-up-default;
 798
 799       color: #000 !important;
 800     }
 801
 802     .pi.pi-chevron-down {
 803       @include chevron-down-default;
 804
 805       color: #000 !important;
 806     }
 807   }
 808 }
 809
 810 p-tablecheckbox:hover div .p-checkbox-box {
 811   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 812 }
 813
 814 .p-checkbox {
 815
 816   &, .p-checkbox-box {
 817     width: 18px !important;
 818     height: 18px !important;
 819   }
 820
 821   .p-checkbox-box {
 822     &.p-highlight {
 823       border-color: pvar(--mainColor) !important;
 824       background-color: pvar(--mainColor) !important;
 825     }
 826
 827     .p-checkbox-icon {
 828       position: relative;
 829       overflow: visible !important;
 830
 831       &:after {
 832         content: '';
 833         position: absolute;
 834         bottom: -5px;
 835         left: -2px;
 836         width: 5px;
 837         height: 12px;
 838         opacity: 0;
 839         transform: rotate(45deg) scale(0);
 840         border-right: 2px solid pvar(--mainBackgroundColor);
 841         border-bottom: 2px solid pvar(--mainBackgroundColor);
 842       }
 843
 844       &.pi-check:after {
 845         opacity: 1;
 846         transform: rotate(45deg) scale(1);
 847       }
 848     }
 849   }
 850 }
 851
 852 p-toast {
 853   .p-toast {
 854     width: auto;
 855     max-width: 300px;
 856     min-width: 200px;
 857
 858     .p-toast-icon-close {
 859       opacity: 0;
 860       position: absolute;
 861       right: 5px;
 862       top: 5px;
 863       width: 18px;
 864       height: 18px;
 865       background: url('../assets/images/feather/x.svg') no-repeat;
 866       background-size: contain;
 867     }
 868
 869     &:hover .p-toast-icon-close {
 870       opacity: .3;
 871     }
 872   }
 873
 874   .p-toast-message {
 875     font-family: $main-fonts;
 876     background-color: pvar(--mainBackgroundColor) !important;
 877     color: pvar(--mainForegroundColor) !important;
 878     border-radius: 5px;
 879     box-sizing: border-box;
 880     border: 1px solid #EBEEF5 !important;
 881     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 882     overflow: hidden;
 883
 884     .notification-block {
 885       display: flex;
 886       align-items: center;
 887       width: 100%;
 888       padding: 10px 20px;
 889
 890       .message {
 891         @include margin-right(20px);
 892
 893         flex-grow: 1;
 894
 895         h3 {
 896           font-size: 21px;
 897         }
 898
 899         p {
 900           @include peertube-word-wrap;
 901
 902           margin-bottom: 0;
 903         }
 904       }
 905     }
 906   }
 907
 908   .p-toast-message-success my-global-icon {
 909     color: #8BC34A !important;
 910   }
 911
 912   .p-toast-message-error my-global-icon {
 913     color: #F44336 !important;
 914   }
 915
 916   .p-toast-message-warn my-global-icon {
 917     color: #F1680D !important;
 918   }
 919
 920   .p-toast-message-info my-global-icon {
 921     color: #03A9F4 !important;
 922   }
 923 }
 924
 925 @media screen and (max-width: $primeng-breakpoint) {
 926   p-table {
 927     td {
 928       padding: 3px 0;
 929
 930       &.expand-cell {
 931         padding: 5px;
 932       }
 933     }
 934
 935     .p-datatable-tbody {
 936
 937       td:last-child {
 938         padding-bottom: 15px;
 939         margin-bottom: 15px;
 940         border-bottom: 1px solid $separator-border-color !important;
 941       }
 942     }
 943   }
 944 }
 945
 946 @media screen and (max-width: $mobile-view) {
 947   p-table {
 948     .p-datatable-header {
 949       .caption {
 950         flex-wrap: wrap;
 951
 952         > div {
 953           width: 100%;
 954           padding: 0 !important;
 955           margin-bottom: 5px;
 956         }
 957       }
 958     }
 959   }
 960 }