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 .p-datepicker-header .p-datepicker-title .p-datepicker-month {
 306   @include margin-right(0.5rem);
 307 }
 308 body .p-datepicker table {
 309   font-size: 14px;
 310   margin: 0.857em 0 0 0;
 311 }
 312 body .p-datepicker table th {
 313   padding: 0.5em;
 314 }
 315 body .p-datepicker table th.p-datepicker-weekheader {
 316   border-right: 1px solid #a6a6a6;
 317 }
 318 body .p-datepicker table td {
 319   padding: 0.5em;
 320 }
 321 body .p-datepicker table td > a,
 322 body .p-datepicker table td > span {
 323   display: block;
 324   text-align: center;
 325   color: #333333;
 326   padding: 0.5em;
 327   transition: box-shadow 0.2s;
 328   border-radius: 3px;
 329 }
 330 body .p-datepicker table td > a.p-highlight,
 331 body .p-datepicker table td > span.p-highlight {
 332   color: #ffffff;
 333   background-color: pvar(--mainColor);
 334 }
 335 body .p-datepicker table td > a {
 336   cursor: pointer;
 337 }
 338 body .p-datepicker table td > a:focus {
 339   outline: 0 none;
 340   outline-offset: 0;
 341   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 342 }
 343 body .p-datepicker table td.p-datepicker-today > a,
 344 body .p-datepicker table td.p-datepicker-today > span {
 345   background-color: #d0d0d0;
 346   color: #333333;
 347 }
 348 body .p-datepicker table td.p-datepicker-today > a.p-highlight,
 349 body .p-datepicker table td.p-datepicker-today > span.p-highlight {
 350   color: #ffffff;
 351   background-color: pvar(--mainColor);
 352 }
 353 body .p-datepicker table td.p-datepicker-weeknumber {
 354   border-right: 1px solid #a6a6a6;
 355 }
 356 body .p-datepicker .p-datepicker-buttonbar {
 357   border-top: 1px solid #d8dae2;
 358 }
 359 body .p-datepicker .p-timepicker {
 360   border: 0 none;
 361   border-top: 1px solid #d8dae2;
 362   padding: 0.857em;
 363 }
 364 body .p-datepicker .p-timepicker a {
 365   color: #333333;
 366   font-size: 1.286em;
 367 }
 368 body .p-datepicker .p-timepicker a:hover {
 369   color: pvar(--mainColor);
 370 }
 371 body .p-datepicker .p-timepicker span {
 372   font-size: 1.286em;
 373 }
 374 body .p-datepicker .p-monthpicker .p-monthpicker-month {
 375   color: #333333;
 376 }
 377 body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
 378   color: #ffffff;
 379   background-color: pvar(--mainColor);
 380 }
 381 body .p-datepicker.p-datepicker-timeonly {
 382   padding: 0;
 383 }
 384 body .p-datepicker.p-datepicker-timeonly .p-timepicker {
 385   border-top: 0 none;
 386 }
 387 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
 388   @include padding-right(0.857em);
 389   @include padding-left(0.857em);
 390
 391   border-right: 1px solid #d8dae2;
 392   padding-top: 0;
 393   padding-bottom: 0;
 394 }
 395 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
 396   @include padding-left(0);
 397 }
 398 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
 399   @include padding-right(0);
 400   border-right: 0 none;
 401 }
 402 body .p-calendar.p-calendar-w-btn .p-inputtext {
 403   border-top-right-radius: 0;
 404   border-bottom-right-radius: 0;
 405   border-right: 0 none;
 406 }
 407 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error),
 408 body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
 409   border-right: 0 none;
 410 }
 411 body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
 412   width: 2.357em;
 413   border-top-left-radius: 0;
 414   border-bottom-left-radius: 0;
 415 }
 416 body .ui-fluid .p-calendar.p-calendar-w-btn input.p-inputtext {
 417   width: calc(100% - 2.357em);
 418 }
 419 body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 420   border: 1px solid #a80000;
 421 }
 422 body .p-timepicker .p-separator {
 423   @include margin-left(0);
 424   min-width: 0.75rem;
 425 }
 426
 427 // auto complete
 428 body .p-autocomplete .p-autocomplete-input {
 429   padding: 0.429em;
 430 }
 431 body .p-autocomplete-panel {
 432   padding: 0;
 433   border: 1px solid #c8c8c8;
 434   background-color: #ffffff;
 435   box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 436 }
 437 body .p-autocomplete-panel .p-autocomplete-items {
 438   padding: 0;
 439 }
 440 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
 441   margin: 0;
 442   padding: 0.429em 0.857em;
 443   border: 0 none;
 444   color: #333333;
 445   background-color: transparent;
 446   border-radius: 0;
 447 }
 448 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight,
 449 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
 450   color: #ffffff;
 451   background-color: pvar(--mainColor);
 452 }
 453 body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
 454   padding: 0.429em 0.857em;
 455   background-color: #d8dae2;
 456   color: #333333;
 457 }
 458 body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 459   border: 1px solid #a80000;
 460 }
 461
 462 // ---------------------------------------------------------------------------
 463 // PeerTube customizations
 464 // ---------------------------------------------------------------------------
 465
 466 p-table {
 467   table {
 468     table-layout: fixed;
 469   }
 470
 471   .p-datatable-header {
 472     border: none !important;
 473     background-color: pvar(--mainBackgroundColor) !important;
 474
 475     .caption {
 476       min-height: 40px;
 477       width: 100%;
 478       display: inline-flex;
 479       align-items: center;
 480
 481       .left-buttons {
 482         @include padding-left(15px);
 483       }
 484     }
 485   }
 486
 487   th {
 488     background-color: pvar(--mainBackgroundColor) !important;
 489     outline: 0;
 490     overflow: hidden;
 491     text-overflow: ellipsis;
 492     white-space: nowrap;
 493   }
 494
 495   td, th {
 496     font-family: $main-fonts;
 497     font-size: 15px;
 498     color: pvar(--mainForegroundColor) !important;
 499   }
 500
 501   td {
 502     @include padding-left(15px !important);
 503
 504     &.expand-cell {
 505       padding: 10px 15px;
 506     }
 507
 508     &:not(.action-cell):not(.expand-cell):not(.checkbox-cell) {
 509       overflow: hidden !important;
 510       text-overflow: ellipsis !important;
 511       white-space: nowrap !important;
 512     }
 513   }
 514
 515   tr {
 516     outline: 0;
 517     background-color: pvar(--mainBackgroundColor) !important;
 518     height: 46px;
 519
 520     &.p-highlight {
 521       background-color: pvar(--submenuBackgroundColor) !important;
 522
 523       td, td > a {
 524         color: pvar(--mainForegroundColor) !important;
 525       }
 526     }
 527   }
 528
 529   .p-datatable-tbody {
 530     tr {
 531       &:hover {
 532         background-color: pvar(--submenuBackgroundColor) !important;
 533       }
 534
 535       td {
 536         border: none !important;
 537         white-space: normal !important;
 538       }
 539
 540       &:first-child td {
 541         border-top: none !important;
 542       }
 543
 544       &:last-child td {
 545         border-bottom: none !important;
 546       }
 547
 548       &:focus + tr > td,
 549       &:focus > td {
 550         box-shadow: none !important;
 551       }
 552     }
 553
 554     .expander {
 555       cursor: pointer;
 556       position: relative;
 557       top: 1px;
 558     }
 559   }
 560
 561   th {
 562     @include padding-left(15px);
 563     @include padding-right(0px);
 564
 565     padding-top: 5px !important;
 566     padding-bottom: 5px !important;
 567
 568     border: none !important;
 569     border-bottom: 1px solid !important;
 570     border-color: pvar(--submenuBackgroundColor) !important;
 571     text-align: start !important;
 572     font-weight: $font-semibold !important;
 573     color: pvar(--mainForegroundColor) !important;
 574
 575     &.p-sortable-column:hover {
 576       background-color: pvar(--submenuBackgroundColor) !important;
 577     }
 578
 579     &.p-highlight {
 580       background-color: pvar(--submenuBackgroundColor) !important;
 581
 582       .pi-sort-amount-up-alt,
 583       .pi-sort-amount-down {
 584         display: inline-block;
 585         position: relative;
 586         top: -1px;
 587         color: pvar(--mainForegroundColor) !important;
 588       }
 589
 590       .pi-sort-amount-up-alt {
 591         @include arrow-up(5px);
 592       }
 593
 594       .pi-sort-amount-down {
 595         @include arrow-down(5px);
 596       }
 597     }
 598   }
 599
 600   .action-cell {
 601     width: 250px !important;
 602
 603     .dropdown-root,
 604     my-edit-button,
 605     my-delete-button,
 606     my-button {
 607       display: inline-block !important;
 608       @include margin-left(5px);
 609
 610       &:first-child {
 611         @include margin-left(0)
 612       }
 613     }
 614   }
 615
 616   p-paginator {
 617     .p-paginator-bottom {
 618       background-color: pvar(--mainBackgroundColor) !important;
 619       position: relative;
 620       border: none;
 621       border-top: 1px solid !important;
 622       border-color: pvar(--submenuBackgroundColor) !important;
 623       height: 40px;
 624       display: flex;
 625       justify-content: center;
 626       align-items: center;
 627
 628       p-dropdown {
 629         .p-dropdown {
 630           @include padding-left(0.5rem);
 631
 632           align-items: center;
 633         }
 634
 635         &.p-focus {
 636           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 637         }
 638
 639         .p-label {
 640           color: pvar(--inputPlaceholderColor);
 641         }
 642       }
 643
 644       .p-dropdown,
 645       .p-dropdown-trigger {
 646         color: pvar(--mainForegroundColor);
 647         background-color: pvar(--mainBackgroundColor);
 648       }
 649
 650       .p-paginator-current {
 651         color: pvar(--inputPlaceholderColor);
 652         overflow: visible;
 653       }
 654
 655       .p-paginator-first {
 656         margin-left: auto;
 657       }
 658
 659       .p-paginator-last {
 660         margin-right: auto;
 661       }
 662
 663       .p-paginator-first,
 664       .p-paginator-prev,
 665       .p-paginator-next,
 666       .p-paginator-last {
 667         padding: 5px 2px;
 668         height: 100%;
 669         outline: none;
 670         color: pvar(--mainForegroundColor);
 671
 672         &.focus-within,
 673         &:focus {
 674           box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 675         }
 676
 677         &.p-disabled:hover {
 678           background-color: #fff !important;
 679         }
 680
 681         .p-paginator-icon {
 682           width: 18px;
 683           height: 18px;
 684         }
 685
 686         &.p-paginator-prev {
 687           @include margin-right(10px);
 688         }
 689
 690         &.p-paginator-next {
 691           @include margin-left(10px);
 692         }
 693       }
 694
 695       .p-paginator-pages {
 696         height: auto !important;
 697
 698         .p-paginator-page {
 699           &.focus-within,
 700           &:focus {
 701             box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
 702           }
 703
 704           color: pvar(--mainForegroundColor) !important;
 705           font-weight: $font-semibold !important;
 706           margin: 0 5px !important;
 707           outline: 0 !important;
 708           border-radius: 3px !important;
 709           padding: 5px 2px !important;
 710           height: auto !important;
 711           line-height: initial !important;
 712
 713           &.p-highlight {
 714             &, &:hover, &:active, &:focus {
 715               color: #fff !important;
 716               background-color: pvar(--mainColor) !important;
 717             }
 718           }
 719         }
 720       }
 721     }
 722   }
 723
 724   .pt-badge {
 725     font-size: 12px;
 726     text-transform: uppercase;
 727   }
 728 }
 729
 730 // overflow data table
 731 p-table {
 732   .p-datatable-wrapper {
 733     overflow-x: auto;
 734     max-width: 100%;
 735
 736     table {
 737       width: 100%;
 738     }
 739   }
 740
 741   @media screen and (max-width: $small-view) {
 742     p-paginator {
 743       .p-paginator-current {
 744         display: none !important;
 745       }
 746     }
 747   }
 748
 749   @media screen and (max-width: $mobile-view) {
 750     p-paginator {
 751       .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
 752         display: none;
 753       }
 754     }
 755   }
 756 }
 757
 758 p-tablecheckbox:hover div .p-checkbox-box {
 759   box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 760 }
 761
 762 .p-checkbox {
 763
 764   &, .p-checkbox-box {
 765     width: 18px !important;
 766     height: 18px !important;
 767   }
 768
 769   .p-checkbox-box {
 770     &.p-highlight {
 771       color: pvar(--mainBackgroundColor) !important;
 772       background-color: pvar(--mainColor) !important;
 773       border-color: pvar(--mainColor) !important;
 774     }
 775   }
 776 }
 777
 778 p-toast {
 779   .p-toast {
 780     width: auto;
 781     max-width: 300px;
 782     min-width: 200px;
 783
 784     .p-toast-icon-close {
 785       opacity: 0;
 786       position: absolute;
 787       right: 5px;
 788       top: 5px;
 789       width: 18px;
 790       height: 18px;
 791       background: url('../assets/images/feather/x.svg') no-repeat;
 792       background-size: contain;
 793     }
 794
 795     &:hover .p-toast-icon-close {
 796       opacity: .3;
 797     }
 798   }
 799
 800   .p-toast-message {
 801     font-family: $main-fonts;
 802     background-color: pvar(--mainBackgroundColor) !important;
 803     color: pvar(--mainForegroundColor) !important;
 804     border-radius: 5px;
 805     box-sizing: border-box;
 806     border: 1px solid #EBEEF5 !important;
 807     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
 808     overflow: hidden;
 809
 810     .notification-block {
 811       display: flex;
 812       align-items: center;
 813       width: 100%;
 814       padding: 10px 20px;
 815
 816       .message {
 817         @include margin-right(20px);
 818
 819         flex-grow: 1;
 820
 821         h3 {
 822           font-size: 21px;
 823         }
 824
 825         p {
 826           @include peertube-word-wrap;
 827
 828           margin-bottom: 0;
 829         }
 830       }
 831     }
 832   }
 833
 834   .p-toast-message-success my-global-icon {
 835     color: #8BC34A !important;
 836   }
 837
 838   .p-toast-message-error my-global-icon {
 839     color: #F44336 !important;
 840   }
 841
 842   .p-toast-message-warn my-global-icon {
 843     color: #F1680D !important;
 844   }
 845
 846   .p-toast-message-info my-global-icon {
 847     color: #03A9F4 !important;
 848   }
 849 }
 850
 851 @media screen and (max-width: $primeng-breakpoint) {
 852   p-table {
 853     td {
 854       padding: 3px 0;
 855
 856       &.expand-cell {
 857         padding: 5px;
 858       }
 859     }
 860
 861     .p-datatable-tbody {
 862
 863       td:last-child {
 864         padding-bottom: 15px;
 865         margin-bottom: 15px;
 866         border-bottom: 1px solid $separator-border-color !important;
 867       }
 868     }
 869   }
 870 }
 871
 872 @media screen and (max-width: $mobile-view) {
 873   p-table {
 874     .p-datatable-header {
 875       .caption {
 876         flex-wrap: wrap;
 877
 878         > div {
 879           width: 100%;
 880           padding: 0 !important;
 881           margin-bottom: 5px;
 882         }
 883       }
 884     }
 885   }
 886 }