BookStack Code Mirror - bookstack/blob - resources/sass/_components.scss

   1
   2 // System wide notifications
   3 .notification {
   4   position: fixed;
   5   top: 0;
   6   right: 0;
   7   margin: $-xl;
   8   padding: $-m $-l;
   9   background-color: #FFF;
  10   @include lightDark(background-color, #fff, #444);
  11   border-radius: 4px;
  12   border-inline-start: 6px solid currentColor;
  13   box-shadow: $bs-large;
  14   z-index: 999999;
  15   cursor: pointer;
  16   max-width: 360px;
  17   transition: transform ease-in-out 280ms;
  18   transform: translateX(580px);
  19   display: grid;
  20   grid-template-columns: 42px 1fr 12px;
  21   color: #444;
  22   font-weight: 700;
  23   span, svg {
  24     vertical-align: middle;
  25     justify-self: center;
  26     align-self: center;
  27   }
  28   svg {
  29     width: 2.8rem;
  30     height: 2.8rem;
  31     padding-inline-end: $-s;
  32     fill: currentColor;
  33   }
  34   .dismiss {
  35     margin-top: -8px;
  36     svg {
  37       height: 1.0rem;
  38       @include lightDark(color, #444, #888);
  39     }
  40   }
  41   span {
  42     vertical-align: middle;
  43     line-height: 1.3;
  44     @include whenDark {
  45       color: #BBB;
  46     }
  47   }
  48   &.pos {
  49     color: $positive;
  50   }
  51   &.neg {
  52     color: $negative;
  53   }
  54   &.warning {
  55     color: $warning;
  56   }
  57   &.showing {
  58     transform: translateX(0);
  59   }
  60   &.showing:hover {
  61     transform: translate3d(0, -2px, 0);
  62   }
  63 }
  64
  65 .chapter-contents-toggle {
  66   cursor: pointer;
  67   margin: 0;
  68   transition: all ease-in-out 180ms;
  69   user-select: none;
  70   svg[data-icon="caret-right"] {
  71     margin-inline-end: 0;
  72     font-size: 1rem;
  73     transition: all ease-in-out 180ms;
  74     transform: rotate(0deg);
  75     transform-origin: 50% 50%;
  76   }
  77   &.open svg[data-icon="caret-right"] {
  78     transform: rotate(90deg);
  79   }
  80   svg[data-icon="caret-right"] + * {
  81     margin-inline-start: $-xxs;
  82   }
  83 }
  84
  85 [overlay], .popup-background {
  86   @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
  87   position: fixed;
  88   z-index: 95536;
  89   width: 100%;
  90   height: 100%;
  91   min-width: 100%;
  92   min-height: 100%;
  93   top: 0;
  94   left: 0;
  95   right: 0;
  96   bottom: 0;
  97   align-items: center;
  98   justify-content: center;
  99   display: none;
 100 }
 101
 102 .popup-body-wrap {
 103   display: flex;
 104 }
 105
 106 .popup-body {
 107   @include lightDark(background-color, #fff, #333);
 108   max-height: 90%;
 109   max-width: 1200px;
 110   width: 90%;
 111   height: auto;
 112   margin: 2% auto;
 113   border-radius: 4px;
 114   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 115   overflow: hidden;
 116   z-index: 999;
 117   display: flex;
 118   flex-direction: column;
 119   &.small {
 120     margin: 2% auto;
 121     width: 800px;
 122     max-width: 90%;
 123   }
 124   &.very-small {
 125     margin: 2% auto;
 126     width: 600px;
 127     max-width: 90%;
 128   }
 129   &:before {
 130     display: flex;
 131     align-self: flex-start;
 132   }
 133   .popup-content {
 134     overflow-y: auto;
 135   }
 136   &:focus {
 137     outline: 0;
 138   }
 139 }
 140
 141 .popup-header button, .popup-footer button {
 142   margin: 0;
 143   border-radius: 0;
 144   box-shadow: none;
 145   color: #FFF;
 146   padding: $-xs $-m;
 147 }
 148
 149 .popup-header button:not(.popup-header-close) {
 150   font-size: 0.8rem;
 151 }
 152
 153 .popup-header button:hover {
 154     background-color: rgba(255, 255, 255, 0.1);
 155 }
 156
 157 .popup-footer {
 158   justify-content: end;
 159   background-color: var(--color-primary-light);
 160   min-height: 41px;
 161   button {
 162     padding: 10px $-m;
 163   }
 164 }
 165
 166 .popup-header-close {
 167   border: 0;
 168   color: #FFF;
 169   font-size: 16px;
 170   cursor: pointer;
 171   svg {
 172     margin-right: 0;
 173   }
 174 }
 175
 176 .popup-header, .popup-footer {
 177   display: flex;
 178   position: relative;
 179   height: 40px;
 180   flex: 0;
 181   .popup-title {
 182     color: #FFF;
 183     margin-right: auto;
 184     padding: 8px $-m;
 185   }
 186   &.flex-container-row {
 187     display: flex !important;
 188   }
 189 }
 190 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 191   height: 444px;
 192   min-height: 444px;
 193 }
 194 #entity-selector-wrap .popup-body .form-group {
 195   margin: 0;
 196 }
 197 .popup-body .entity-selector-container {
 198   flex: 1;
 199 }
 200
 201 .image-manager-body {
 202   min-height: 70vh;
 203 }
 204
 205 .dropzone-container {
 206   position: relative;
 207   @include lightDark(background-color, #eee, #222);
 208   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
 209 }
 210
 211 .image-manager-list .image {
 212   display: block;
 213   position: relative;
 214   border-radius: 0;
 215   float: left;
 216   margin: 0;
 217   cursor: pointer;
 218   width: math.div(100%, 6);
 219   height: auto;
 220   @include lightDark(border-color, #ddd, #000);
 221   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 222   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
 223   overflow: hidden;
 224   &.selected {
 225     transform: scale3d(0.92, 0.92, 0.92);
 226     outline: currentColor 2px solid;
 227   }
 228   img {
 229     width: 100%;
 230     max-width: 100%;
 231     display: block;
 232   }
 233   .image-meta {
 234     position: absolute;
 235     width: 100%;
 236     bottom: 0;
 237     left: 0;
 238     color: #EEE;
 239     background-color: rgba(0, 0, 0, 0.4);
 240     font-size: 10px;
 241     padding: 3px 4px;
 242     span {
 243       display: block;
 244     }
 245   }
 246   @include smaller-than($xl) {
 247     width: math.div(100%, 4);
 248   }
 249   @include smaller-than($m) {
 250     .image-meta {
 251       display: none;
 252     }
 253   }
 254 }
 255
 256 .image-manager .load-more {
 257   display: block;
 258   text-align: center;
 259   @include lightDark(background-color, #EEE, #444);
 260   padding: $-s $-m;
 261   color: #AAA;
 262   clear: both;
 263   font-size: 20px;
 264   cursor: pointer;
 265   font-style: italic;
 266 }
 267
 268 .image-manager .loading-container {
 269   text-align: center;
 270 }
 271
 272 .image-manager-sidebar {
 273   width: 300px;
 274   overflow-y: auto;
 275   overflow-x: hidden;
 276   border-inline-start: 1px solid #DDD;
 277   @include lightDark(border-color, #ddd, #000);
 278   .inner {
 279     min-height: auto;
 280     padding: $-m;
 281   }
 282   img {
 283     max-width: 100%;
 284     max-height: 180px;
 285     display: block;
 286     margin: 0 auto $-m auto;
 287     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
 288   }
 289   .image-manager-viewer {
 290     height: 196px;
 291     display: flex;
 292     align-items: center;
 293     justify-content: center;
 294     a {
 295       display: inline-block;
 296     }
 297   }
 298   .dropzone-container {
 299     border-bottom: 1px solid #DDD;
 300     @include lightDark(border-color, #ddd, #000);
 301   }
 302 }
 303
 304 .image-manager-list {
 305   overflow-y: scroll;
 306   flex: 1;
 307 }
 308
 309 .image-manager-content {
 310   display: flex;
 311   flex-direction: column;
 312   flex: 1;
 313   .container {
 314     width: 100%;
 315   }
 316   .full-tab {
 317     text-align: center;
 318   }
 319 }
 320
 321 // Dropzone
 322 /*
 323  * The MIT License
 324  * Copyright (c) 2012 Matias Meno <[email protected]>
 325  */
 326 .dz-message {
 327   font-size: 1em;
 328   line-height: 2.85;
 329   font-style: italic;
 330   color: #888;
 331   text-align: center;
 332   cursor: pointer;
 333   padding: $-l $-m;
 334   transition: all ease-in-out 120ms;
 335 }
 336
 337 .dz-drag-hover .dz-message {
 338   background-color: rgb(16, 126, 210);
 339   color: #EEE;
 340 }
 341
 342 @keyframes passing-through {
 343   0% {
 344     opacity: 0;
 345     transform: translateY(40px);
 346   }
 347   30%, 70% {
 348     opacity: 1;
 349     transform: translateY(0px);
 350   }
 351   100% {
 352     opacity: 0;
 353     transform: translateY(-40px);
 354   }
 355 }
 356
 357 @keyframes slide-in {
 358   0% {
 359     opacity: 0;
 360     transform: translateY(40px);
 361   }
 362   30% {
 363     opacity: 1;
 364     transform: translateY(0px);
 365   }
 366 }
 367
 368 @keyframes pulse {
 369   0% {
 370     transform: scale(1);
 371   }
 372   10% {
 373     transform: scale(1.1);
 374   }
 375   20% {
 376     transform: scale(1);
 377   }
 378 }
 379
 380 .dropzone, .dropzone * {
 381   box-sizing: border-box;
 382 }
 383
 384 .dz-preview {
 385   position: relative;
 386   display: inline-block;
 387   vertical-align: top;
 388   margin: 12px;
 389   min-height: 80px;
 390 }
 391
 392 .dz-preview:hover {
 393   z-index: 1000;
 394 }
 395
 396 .dz-preview:hover .dz-details {
 397   opacity: 1;
 398 }
 399
 400 .dz-preview.dz-file-preview .dz-image {
 401   border-radius: 4px;
 402   background: #e9e9e9;
 403 }
 404
 405 .dz-preview.dz-file-preview .dz-details {
 406   opacity: 1;
 407 }
 408
 409 .dz-preview.dz-image-preview {
 410   background: white;
 411 }
 412
 413 .dz-preview.dz-image-preview .dz-details {
 414   transition: opacity 0.2s linear;
 415 }
 416
 417 .dz-preview .dz-remove {
 418   font-size: 13px;
 419   text-align: center;
 420   display: block;
 421   cursor: pointer;
 422   border: none;
 423   margin-top: 3px;
 424 }
 425
 426 .dz-preview .dz-remove:hover {
 427   text-decoration: underline;
 428 }
 429
 430 .dz-preview:hover .dz-details {
 431   opacity: 1;
 432 }
 433
 434 .dz-preview .dz-details {
 435   z-index: 20;
 436   position: absolute;
 437   top: 0;
 438   left: 0;
 439   opacity: 0;
 440   font-size: 10px;
 441   min-width: 100%;
 442   max-width: 100%;
 443   padding: 6px 3px;
 444   text-align: center;
 445   color: rgba(0, 0, 0, 0.9);
 446   line-height: 150%;
 447 }
 448
 449 .dz-preview .dz-details .dz-size {
 450   margin-bottom: 0.5em;
 451   font-size: 12px;
 452 }
 453
 454 .dz-preview .dz-details .dz-filename {
 455   white-space: nowrap;
 456 }
 457
 458 .dz-preview .dz-details .dz-filename:hover span {
 459   border: 1px solid rgba(200, 200, 200, 0.8);
 460   background-color: rgba(255, 255, 255, 0.8);
 461 }
 462
 463 .dz-preview .dz-details .dz-filename:not(:hover) {
 464   overflow: hidden;
 465   text-overflow: ellipsis;
 466 }
 467
 468 .dz-preview .dz-details .dz-filename:not(:hover) span {
 469   border: 1px solid transparent;
 470 }
 471
 472 .dz-preview .dz-details .dz-filename span {
 473   background-color: rgba(255, 255, 255, 0.4);
 474   padding: 0 0.4em;
 475   border-radius: 3px;
 476 }
 477
 478 .dz-preview:hover .dz-image img {
 479   filter: blur(8px);
 480 }
 481
 482 .dz-preview .dz-image {
 483   border-radius: 4px;
 484   overflow: hidden;
 485   width: 80px;
 486   height: 80px;
 487   position: relative;
 488   display: block;
 489   z-index: 10;
 490 }
 491
 492 .dz-preview .dz-image img {
 493   display: block;
 494 }
 495
 496 .dz-preview.dz-success .dz-success-mark {
 497   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 498 }
 499
 500 .dz-preview.dz-error .dz-error-mark {
 501   opacity: 1;
 502   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 503 }
 504
 505 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
 506   pointer-events: none;
 507   opacity: 0;
 508   z-index: 1001;
 509   position: absolute;
 510   display: block;
 511   top: 50%;
 512   left: 50%;
 513   margin-inline-start: -27px;
 514   margin-top: -35px;
 515 }
 516
 517 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
 518   display: block;
 519   width: 54px;
 520   height: 54px;
 521 }
 522
 523 .dz-preview.dz-processing .dz-progress {
 524   opacity: 1;
 525   transition: all 0.2s linear;
 526 }
 527
 528 .dz-preview.dz-complete .dz-progress {
 529   opacity: 0;
 530   transition: opacity 0.4s ease-in;
 531 }
 532
 533 .dz-preview:not(.dz-processing) .dz-progress {
 534   animation: pulse 6s ease infinite;
 535 }
 536
 537 .dz-preview .dz-progress {
 538   opacity: 1;
 539   z-index: 1000;
 540   pointer-events: none;
 541   position: absolute;
 542   height: 16px;
 543   left: 50%;
 544   top: 50%;
 545   margin-top: -8px;
 546   width: 80px;
 547   margin-inline-start: -40px;
 548   background: rgba(255, 255, 255, 0.9);
 549   transform: scale(1);
 550   border-radius: 8px;
 551   overflow: hidden;
 552 }
 553
 554 .dz-preview .dz-progress .dz-upload {
 555   background: #333;
 556   background: linear-gradient(to bottom, #666, #444);
 557   position: absolute;
 558   top: 0;
 559   left: 0;
 560   bottom: 0;
 561   width: 0;
 562   transition: width 300ms ease-in-out;
 563 }
 564
 565 .dz-preview.dz-error .dz-error-message {
 566   display: block;
 567 }
 568
 569 .dz-preview.dz-error {
 570   .dz-image, .dz-details {
 571     &:hover ~ .dz-error-message {
 572       opacity: 1;
 573       pointer-events: auto;
 574     }
 575   }
 576 }
 577
 578 .dz-preview .dz-error-message {
 579   pointer-events: none;
 580   z-index: 1000;
 581   position: absolute;
 582   display: block;
 583   display: none;
 584   opacity: 0;
 585   transition: opacity 0.3s ease;
 586   border-radius: 4px;
 587   font-size: 12px;
 588   line-height: 1.2;
 589   top: 88px;
 590   left: -12px;
 591   width: 160px;
 592   background: $negative;
 593   padding: $-xs;
 594   color: white;
 595 }
 596
 597 .dz-preview .dz-error-message:after {
 598   content: '';
 599   position: absolute;
 600   top: -6px;
 601   left: 44px;
 602   width: 0;
 603   height: 0;
 604   border-inline-start: 6px solid transparent;
 605   border-inline-end: 6px solid transparent;
 606   border-bottom: 6px solid $negative;
 607 }
 608
 609
 610 .tab-container .nav-tabs {
 611   text-align: start;
 612   border-bottom: 1px solid #DDD;
 613   @include lightDark(border-color, #ddd, #444);
 614   margin-bottom: $-m;
 615   .tab-item {
 616     padding: $-s;
 617     @include lightDark(color, #666, #999);
 618     &.selected {
 619       border-bottom-width: 3px;
 620     }
 621   }
 622 }
 623
 624 .nav-tabs {
 625   text-align: center;
 626   a, .tab-item {
 627     padding: $-m;
 628     display: inline-block;
 629     @include lightDark(color, #666, #999);
 630     cursor: pointer;
 631     border-right: 1px solid rgba(0, 0, 0, 0.1);
 632     border-bottom: 2px solid transparent;
 633     &.selected {
 634       border-bottom: 2px solid var(--color-primary);
 635     }
 636     &:last-child {
 637       border-right: 0;
 638     }
 639   }
 640 }
 641
 642 .image-picker .none {
 643   display: none;
 644 }
 645
 646 .code-editor .CodeMirror {
 647   height: auto;
 648   min-height: 50vh;
 649   border-bottom: 0;
 650 }
 651
 652 .code-editor .lang-options {
 653   overflow-y: scroll;
 654   flex-basis: 200px;
 655   flex-grow: 1;
 656 }
 657
 658 .code-editor .lang-options button {
 659   display: block;
 660   padding: $-xs $-m;
 661   border-bottom: 1px solid;
 662   @include lightDark(color, #333, #AAA);
 663   @include lightDark(border-bottom-color, #EEE, #000);
 664   cursor: pointer;
 665   width: 100%;
 666   text-align: left;
 667   font-family: $mono;
 668   font-size: 0.7rem;
 669   padding-left: 24px + $-xs;
 670   &:hover, &.active {
 671     background-color: var(--color-primary-light);
 672     color: var(--color-primary);
 673   }
 674 }
 675
 676 .code-editor button.lang-option-favorite-toggle {
 677   position: absolute;
 678   top: 0;
 679   left: 0;
 680   width: 28px;
 681   font-size: 1rem;
 682   border: 0;
 683   line-height: 1;
 684   padding: 2px;
 685   z-index: 2;
 686   height: 100%;
 687   text-align: center;
 688   color: var(--color-primary);
 689   svg {
 690     margin: 0;
 691   }
 692 }
 693
 694 .code-editor button[data-favourite="true"] ~ .action-favourite,
 695 .code-editor button[data-favourite="false"] ~ .action-unfavourite {
 696   display: none;
 697 }
 698
 699 .code-editor .action-favourite {
 700   opacity: 0.5;
 701 }
 702 .code-editor button:hover ~ .action-favourite {
 703   opacity: 1;
 704 }
 705
 706 .code-editor label {
 707   background-color: var(--color-primary-light);
 708   width: 100%;
 709   color: var(--color-primary);
 710   padding: $-xxs $-s;
 711   margin-bottom: 0;
 712 }
 713
 714 .code-editor-language-list {
 715   position: relative;
 716   width: 160px;
 717   z-index: 2;
 718   align-items: stretch;
 719 }
 720
 721 .code-editor-language-list input {
 722   border-radius: 0;
 723   border: 0;
 724   border-bottom: 1px solid #DDD;
 725   padding: $-xs $-s;
 726   height: auto;
 727 }
 728
 729 .code-editor-main {
 730   flex: 1;
 731   min-width: 0;
 732   .CodeMirror {
 733     margin-bottom: 0;
 734     z-index: 1;
 735     max-width: 100%;
 736     width: 100%;
 737   }
 738 }
 739
 740 .code-editor-body-wrap {
 741   height: 80vh;
 742 }
 743
 744 @include smaller-than($s) {
 745   .code-editor .lang-options {
 746     display: none;
 747   }
 748   .code-editor-body-wrap {
 749     flex-direction: column;
 750   }
 751   .code-editor-language-list, .code-editor-language-list input {
 752     width: 100%;
 753   }
 754 }
 755
 756 .comment-box {
 757   border-radius: 4px;
 758   border: 1px solid #DDD;
 759   @include lightDark(border-color, #ddd, #000);
 760   @include lightDark(background-color, #FFF, #222);
 761   .content {
 762     font-size: 0.666em;
 763     p, ul, ol {
 764       font-size: $fs-m;
 765       margin: .5em 0;
 766     }
 767   }
 768   .actions {
 769     opacity: 0;
 770     transition: opacity ease-in-out 120ms;
 771   }
 772   &:hover .actions, &:focus-within .actions {
 773     opacity: 1;
 774   }
 775 }
 776
 777 .comment-box .header {
 778   .meta {
 779     img, a, span {
 780       display: inline-block;
 781       vertical-align: top;
 782     }
 783     a, span {
 784       padding: $-xxs 0 $-xxs 0;
 785       line-height: 1.6;
 786     }
 787     a { color: #666; }
 788     span {
 789       padding-inline-start: $-xxs;
 790     }
 791   }
 792   .text-muted {
 793     color: #999;
 794   }
 795 }
 796
 797 #tag-manager .drag-card {
 798   max-width: 500px;
 799 }
 800
 801 .template-item {
 802   cursor: pointer;
 803   position: relative;
 804   &:hover, .template-item-actions button:hover {
 805     background-color: #F2F2F2;
 806   }
 807   .template-item-actions {
 808     position: absolute;
 809     top: 0;
 810     inset-inline-end: 0;
 811     width: 50px;
 812     height: 100%;
 813     display: flex;
 814     flex-direction: column;
 815     border-inline-start: 1px solid;
 816     @include lightDark(border-color, #ddd, #000);
 817   }
 818   .template-item-actions button {
 819     cursor: pointer;
 820     flex: 1;
 821     @include lightDark(background-color, #FFF, #222);
 822     border: 0;
 823     border-top: 1px solid;
 824     @include lightDark(border-color, #DDD, #000);
 825   }
 826   .template-item-actions button svg {
 827     margin: 0;
 828   }
 829   .template-item-actions button:first-child {
 830     border-top: 0;
 831   }
 832 }
 833
 834
 835 .dropdown-search {
 836   position: relative;
 837 }
 838 .dropdown-search-toggle-breadcrumb {
 839   border: 1px solid transparent;
 840   border-radius: 4px;
 841   line-height: normal;
 842   padding: $-xs;
 843   &:hover {
 844     border-color: #DDD;
 845   }
 846   .svg-icon {
 847     margin-inline-end: 0;
 848   }
 849 }
 850 .dropdown-search-toggle-select {
 851   display: flex;
 852   gap: $-s;
 853   line-height: normal;
 854   .svg-icon {
 855     height: 26px;
 856     width: 26px;
 857     margin: 0;
 858   }
 859   .avatar {
 860     height: 22px;
 861     width: 22px;
 862   }
 863   .avatar + span {
 864     max-width: 100%;
 865     overflow: hidden;
 866     text-overflow: ellipsis;
 867     white-space: nowrap;
 868   }
 869   .dropdown-search-toggle-caret {
 870     font-size: 1.15rem;
 871   }
 872 }
 873 .dropdown-search-toggle-select-label {
 874   min-width: 0;
 875   white-space: nowrap;
 876 }
 877 .dropdown-search-toggle-select-caret {
 878   line-height: 0;
 879   margin-left: auto;
 880   margin-top: -2px;
 881   display: flex;
 882   align-items: center;
 883 }
 884
 885 .dropdown-search-dropdown {
 886   box-shadow: $bs-med;
 887   overflow: hidden;
 888   min-height: 100px;
 889   width: 240px;
 890   display: none;
 891   position: absolute;
 892   z-index: 80;
 893   right: 0;
 894   top: 0;
 895   margin-top: $-m;
 896   @include rtl {
 897     right: auto;
 898     left: -$-m;
 899   }
 900   .dropdown-search-search .svg-icon {
 901     position: absolute;
 902     left: $-s;
 903     @include rtl {
 904       right: $-s;
 905       left: auto;
 906     }
 907     top: 11px;
 908     fill: #888;
 909     pointer-events: none;
 910   }
 911   .dropdown-search-list {
 912     max-height: 400px;
 913     overflow-y: scroll;
 914     text-align: start;
 915   }
 916   .dropdown-search-item {
 917     padding: $-s $-m;
 918     &:hover,&:focus {
 919       background-color: #F2F2F2;
 920       text-decoration: none;
 921     }
 922   }
 923   input, input:focus {
 924     padding-inline-start: $-xl;
 925     border-radius: 0;
 926     border: 0;
 927     border-bottom: 1px solid #DDD;
 928   }
 929   input:focus {
 930     outline: 0;
 931   }
 932 }
 933
 934 @include smaller-than($m) {
 935   .dropdown-search-dropdown {
 936     position: fixed;
 937     right: auto;
 938     left: $-m;
 939   }
 940   .dropdown-search-dropdown .dropdown-search-list {
 941     max-height: 240px;
 942   }
 943 }
 944
 945 .item-list {
 946   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 947 }
 948 .item-list-row {
 949   border: 1.5px solid;
 950   @include lightDark(border-color, #E2E2E2, #444);
 951   border-bottom-width: 0;
 952   label {
 953     padding-bottom: 0;
 954   }
 955   &:hover {
 956     @include lightDark(background-color, #F6F6F6, #333);
 957   }
 958 }
 959 .item-list-row:first-child {
 960   border-radius: 4px 4px 0 0;
 961 }
 962 .item-list-row:last-child {
 963   border-radius: 0 0 4px 4px;
 964   border-bottom-width: 1.5px;
 965 }
 966 .item-list-row:first-child:last-child {
 967   border-radius: 4px;
 968 }
 969 .item-list-row-toggle-all {
 970   visibility: hidden;
 971 }
 972 .item-list-row:hover .item-list-row-toggle-all {
 973   visibility: visible;
 974 }
 975
 976 .status-indicator-active, .status-indicator-inactive {
 977   width: 8px;
 978   height: 8px;
 979   border-radius: 50%;
 980   display: inline-block;
 981 }
 982 .status-indicator-active {
 983   background-color: $positive;
 984 }
 985 .status-indicator-inactive {
 986   background-color: $negative;
 987 }
 988
 989 .shortcut-container {
 990   background-color: rgba(0, 0, 0, 0.25);
 991   pointer-events: none;
 992   position: fixed;
 993   left: 0;
 994   top: 0;
 995   width: 100%;
 996   height: 100%;
 997   z-index: 99;
 998 }
 999 .shortcut-linkage {
1000   position: fixed;
1001   box-shadow: 0 0 4px 0 #FFF;
1002   border-radius: 3px;
1003 }
1004 .shortcut-hint {
1005   position: fixed;
1006   padding: $-xxs $-xxs;
1007   font-size: .85rem;
1008   font-weight: 700;
1009   line-height: 1;
1010   background-color: #eee;
1011   border-radius: 3px;
1012   border: 1px solid #b4b4b4;
1013   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
1014   color: #333;
1015 }
1016
1017 // Back to top link
1018 $btt-size: 40px;
1019 .back-to-top {
1020   background-color: var(--color-primary);
1021   position: fixed;
1022   bottom: $-m;
1023   right: $-l;
1024   padding: 5px 7px;
1025   cursor: pointer;
1026   color: #FFF;
1027   fill: #FFF;
1028   svg {
1029     width: math.div($btt-size, 1.5);
1030     height: math.div($btt-size, 1.5);
1031     margin-inline-end: 4px;
1032   }
1033   width: $btt-size;
1034   height: $btt-size;
1035   border-radius: $btt-size;
1036   transition: all ease-in-out 180ms;
1037   opacity: 0;
1038   z-index: 999;
1039   overflow: hidden;
1040   &:hover {
1041     width: $btt-size*3.4;
1042     opacity: 1 !important;
1043   }
1044   .inner {
1045     width: $btt-size*3.4;
1046   }
1047   span {
1048     position: relative;
1049     vertical-align: top;
1050     line-height: 2;
1051   }
1052 }