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 [role="tablist"] {
 611   display: flex;
 612   align-items: end;
 613   justify-items: start;
 614   text-align: start;
 615   border-bottom: 1px solid #DDD;
 616   @include lightDark(border-color, #ddd, #444);
 617   margin-bottom: $-m;
 618 }
 619
 620 .tab-container [role="tablist"] button[role="tab"],
 621 .image-manager [role="tablist"] button[role="tab"] {
 622   display: inline-block;
 623   padding: $-s;
 624   @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
 625   cursor: pointer;
 626   border-bottom: 2px solid transparent;
 627   margin-bottom: -1px;
 628   &[aria-selected="true"] {
 629     color: var(--color-link) !important;
 630     border-bottom-color: var(--color-link) !important;
 631   }
 632   &:hover, &:focus {
 633     @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
 634     @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
 635   }
 636 }
 637 .tab-container [role="tablist"].controls-card {
 638   margin-bottom: 0;
 639   border-bottom: 0;
 640   padding: 0 $-xs;
 641 }
 642
 643 .image-picker .none {
 644   display: none;
 645 }
 646
 647 .code-editor .CodeMirror {
 648   height: auto;
 649   min-height: 50vh;
 650   border-bottom: 0;
 651 }
 652
 653 .code-editor .lang-options {
 654   overflow-y: scroll;
 655   flex-basis: 200px;
 656   flex-grow: 1;
 657 }
 658
 659 .code-editor .lang-options button {
 660   display: block;
 661   padding: $-xs $-m;
 662   border-bottom: 1px solid;
 663   @include lightDark(color, #333, #AAA);
 664   @include lightDark(border-bottom-color, #EEE, #000);
 665   cursor: pointer;
 666   width: 100%;
 667   text-align: left;
 668   font-family: $mono;
 669   font-size: 0.7rem;
 670   padding-left: 24px + $-xs;
 671   &:hover, &.active {
 672     background-color: var(--color-primary-light);
 673     color: var(--color-primary);
 674   }
 675 }
 676
 677 .code-editor button.lang-option-favorite-toggle {
 678   position: absolute;
 679   top: 0;
 680   left: 0;
 681   width: 28px;
 682   font-size: 1rem;
 683   border: 0;
 684   line-height: 1;
 685   padding: 2px;
 686   z-index: 2;
 687   height: 100%;
 688   text-align: center;
 689   color: var(--color-primary);
 690   svg {
 691     margin: 0;
 692   }
 693 }
 694
 695 .code-editor button[data-favourite="true"] ~ .action-favourite,
 696 .code-editor button[data-favourite="false"] ~ .action-unfavourite {
 697   display: none;
 698 }
 699
 700 .code-editor .action-favourite {
 701   opacity: 0.5;
 702 }
 703 .code-editor button:hover ~ .action-favourite {
 704   opacity: 1;
 705 }
 706
 707 .code-editor label {
 708   background-color: var(--color-primary-light);
 709   width: 100%;
 710   color: var(--color-primary);
 711   padding: $-xxs $-s;
 712   margin-bottom: 0;
 713 }
 714
 715 .code-editor-language-list {
 716   position: relative;
 717   width: 160px;
 718   z-index: 2;
 719   align-items: stretch;
 720 }
 721
 722 .code-editor-language-list input {
 723   border-radius: 0;
 724   border: 0;
 725   border-bottom: 1px solid #DDD;
 726   padding: $-xs $-s;
 727   height: auto;
 728 }
 729
 730 .code-editor-main {
 731   flex: 1;
 732   min-width: 0;
 733   .cm-editor {
 734     margin-bottom: 0;
 735     z-index: 1;
 736     max-width: 100%;
 737     width: 100%;
 738   }
 739 }
 740
 741 .code-editor-body-wrap {
 742   height: 80vh;
 743 }
 744
 745 @include smaller-than($s) {
 746   .code-editor .lang-options {
 747     display: none;
 748   }
 749   .code-editor-body-wrap {
 750     flex-direction: column;
 751   }
 752   .code-editor-language-list, .code-editor-language-list input {
 753     width: 100%;
 754   }
 755 }
 756
 757 .comment-box {
 758   border-radius: 4px;
 759   border: 1px solid #DDD;
 760   @include lightDark(border-color, #ddd, #000);
 761   @include lightDark(background-color, #FFF, #222);
 762   .content {
 763     font-size: 0.666em;
 764     p, ul, ol {
 765       font-size: $fs-m;
 766       margin: .5em 0;
 767     }
 768   }
 769   .actions {
 770     opacity: 0;
 771     transition: opacity ease-in-out 120ms;
 772   }
 773   &:hover .actions, &:focus-within .actions {
 774     opacity: 1;
 775   }
 776 }
 777
 778 .comment-box .header {
 779   .meta {
 780     img, a, span {
 781       display: inline-block;
 782       vertical-align: top;
 783     }
 784     a, span {
 785       padding: $-xxs 0 $-xxs 0;
 786       line-height: 1.6;
 787     }
 788     a { color: #666; }
 789     span {
 790       padding-inline-start: $-xxs;
 791     }
 792   }
 793   .text-muted {
 794     color: #999;
 795   }
 796 }
 797
 798 #tag-manager .drag-card {
 799   max-width: 500px;
 800 }
 801
 802 .template-item {
 803   cursor: pointer;
 804   position: relative;
 805   &:hover, .template-item-actions button:hover {
 806     background-color: #F2F2F2;
 807   }
 808   .template-item-actions {
 809     position: absolute;
 810     top: 0;
 811     inset-inline-end: 0;
 812     width: 50px;
 813     height: 100%;
 814     display: flex;
 815     flex-direction: column;
 816     border-inline-start: 1px solid;
 817     @include lightDark(border-color, #ddd, #000);
 818   }
 819   .template-item-actions button {
 820     cursor: pointer;
 821     flex: 1;
 822     @include lightDark(background-color, #FFF, #222);
 823     border: 0;
 824     border-top: 1px solid;
 825     @include lightDark(border-color, #DDD, #000);
 826   }
 827   .template-item-actions button svg {
 828     margin: 0;
 829   }
 830   .template-item-actions button:first-child {
 831     border-top: 0;
 832   }
 833 }
 834
 835
 836 .dropdown-search {
 837   position: relative;
 838 }
 839 .dropdown-search-toggle-breadcrumb {
 840   border: 1px solid transparent;
 841   border-radius: 4px;
 842   line-height: normal;
 843   padding: $-xs;
 844   &:hover {
 845     border-color: #DDD;
 846   }
 847   .svg-icon {
 848     margin-inline-end: 0;
 849   }
 850 }
 851 .dropdown-search-toggle-select {
 852   display: flex;
 853   gap: $-s;
 854   line-height: normal;
 855   .svg-icon {
 856     height: 26px;
 857     width: 26px;
 858     margin: 0;
 859   }
 860   .avatar {
 861     height: 22px;
 862     width: 22px;
 863   }
 864   .avatar + span {
 865     max-width: 100%;
 866     overflow: hidden;
 867     text-overflow: ellipsis;
 868     white-space: nowrap;
 869   }
 870   .dropdown-search-toggle-caret {
 871     font-size: 1.15rem;
 872   }
 873 }
 874 .dropdown-search-toggle-select-label {
 875   min-width: 0;
 876   white-space: nowrap;
 877 }
 878 .dropdown-search-toggle-select-caret {
 879   line-height: 0;
 880   margin-left: auto;
 881   margin-top: -2px;
 882   display: flex;
 883   align-items: center;
 884 }
 885
 886 .dropdown-search-dropdown {
 887   box-shadow: $bs-med;
 888   overflow: hidden;
 889   min-height: 100px;
 890   width: 240px;
 891   display: none;
 892   position: absolute;
 893   z-index: 80;
 894   right: 0;
 895   top: 0;
 896   margin-top: $-m;
 897   @include rtl {
 898     right: auto;
 899     left: -$-m;
 900   }
 901   .dropdown-search-search .svg-icon {
 902     position: absolute;
 903     left: $-s;
 904     @include rtl {
 905       right: $-s;
 906       left: auto;
 907     }
 908     top: 11px;
 909     fill: #888;
 910     pointer-events: none;
 911   }
 912   .dropdown-search-list {
 913     max-height: 400px;
 914     overflow-y: scroll;
 915     text-align: start;
 916   }
 917   .dropdown-search-item {
 918     padding: $-s $-m;
 919     &:hover,&:focus {
 920       background-color: #F2F2F2;
 921       text-decoration: none;
 922     }
 923   }
 924   input, input:focus {
 925     padding-inline-start: $-xl;
 926     border-radius: 0;
 927     border: 0;
 928     border-bottom: 1px solid #DDD;
 929   }
 930   input:focus {
 931     outline: 0;
 932   }
 933 }
 934
 935 @include smaller-than($m) {
 936   .dropdown-search-dropdown {
 937     position: fixed;
 938     right: auto;
 939     left: $-m;
 940   }
 941   .dropdown-search-dropdown .dropdown-search-list {
 942     max-height: 240px;
 943   }
 944 }
 945
 946 .item-list {
 947   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 948 }
 949 .item-list-row {
 950   border: 1.5px solid;
 951   @include lightDark(border-color, #E2E2E2, #444);
 952   border-bottom-width: 0;
 953   label {
 954     padding-bottom: 0;
 955   }
 956   &:hover {
 957     @include lightDark(background-color, #F6F6F6, #333);
 958   }
 959 }
 960 .item-list-row:first-child {
 961   border-radius: 4px 4px 0 0;
 962 }
 963 .item-list-row:last-child {
 964   border-radius: 0 0 4px 4px;
 965   border-bottom-width: 1.5px;
 966 }
 967 .item-list-row:first-child:last-child {
 968   border-radius: 4px;
 969 }
 970 .item-list-row-toggle-all {
 971   visibility: hidden;
 972 }
 973 .item-list-row:hover .item-list-row-toggle-all {
 974   visibility: visible;
 975 }
 976
 977 .status-indicator-active, .status-indicator-inactive {
 978   width: 8px;
 979   height: 8px;
 980   border-radius: 50%;
 981   display: inline-block;
 982 }
 983 .status-indicator-active {
 984   background-color: $positive;
 985 }
 986 .status-indicator-inactive {
 987   background-color: $negative;
 988 }
 989
 990 .shortcut-container {
 991   background-color: rgba(0, 0, 0, 0.25);
 992   pointer-events: none;
 993   position: fixed;
 994   left: 0;
 995   top: 0;
 996   width: 100%;
 997   height: 100%;
 998   z-index: 99;
 999 }
1000 .shortcut-linkage {
1001   position: fixed;
1002   box-shadow: 0 0 4px 0 #FFF;
1003   border-radius: 3px;
1004 }
1005 .shortcut-hint {
1006   position: fixed;
1007   padding: $-xxs $-xxs;
1008   font-size: .85rem;
1009   font-weight: 700;
1010   line-height: 1;
1011   background-color: #eee;
1012   border-radius: 3px;
1013   border: 1px solid #b4b4b4;
1014   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
1015   color: #333;
1016 }
1017
1018 // Back to top link
1019 $btt-size: 40px;
1020 .back-to-top {
1021   background-color: var(--color-primary);
1022   position: fixed;
1023   bottom: $-m;
1024   right: $-l;
1025   padding: 5px 7px;
1026   cursor: pointer;
1027   color: #FFF;
1028   fill: #FFF;
1029   svg {
1030     width: math.div($btt-size, 1.5);
1031     height: math.div($btt-size, 1.5);
1032     margin-inline-end: 4px;
1033   }
1034   width: $btt-size;
1035   height: $btt-size;
1036   border-radius: $btt-size;
1037   transition: all ease-in-out 180ms;
1038   opacity: 0;
1039   z-index: 999;
1040   overflow: hidden;
1041   &:hover {
1042     width: $btt-size*3.4;
1043     opacity: 1 !important;
1044   }
1045   .inner {
1046     width: $btt-size*3.4;
1047   }
1048   span {
1049     position: relative;
1050     vertical-align: top;
1051     line-height: 2;
1052   }
1053 }
1054
1055 // Sortable scroll boxes
1056 .scroll-box {
1057   list-style: none;
1058   padding: 0;
1059   margin: 0;
1060   max-height: 280px;
1061   overflow-y: scroll;
1062   border: 1px solid;
1063   @include lightDark(border-color, #DDD, #000);
1064   border-radius: 3px;
1065   min-height: 20px;
1066   @include lightDark(background-color, #EEE, #000);
1067 }
1068 .scroll-box-item {
1069   border-bottom: 1px solid;
1070   border-top: 1px solid;
1071   @include lightDark(border-color, #DDD, #000);
1072   margin-top: -1px;
1073   @include lightDark(background-color, #FFF, #222);
1074   display: flex;
1075   align-items: flex-start;
1076   padding: 1px;
1077   &:last-child {
1078     border-bottom: 0;
1079   }
1080   &:hover {
1081     cursor: pointer;
1082     @include lightDark(background-color, #f8f8f8, #333);
1083   }
1084   .handle {
1085     color: #AAA;
1086     cursor: grab;
1087   }
1088   button {
1089     opacity: .6;
1090   }
1091   .handle svg {
1092     margin: 0;
1093   }
1094   > * {
1095     padding: $-xs $-m;
1096   }
1097   .handle + * {
1098     padding-left: 0;
1099   }
1100   &:hover .handle {
1101     @include lightDark(color, #444, #FFF);
1102   }
1103   &:hover button {
1104     opacity: 1;
1105   }
1106   a:hover {
1107     text-decoration: none;
1108   }
1109 }
1110
1111 input.scroll-box-search, .scroll-box-header-item {
1112   font-size: 0.8rem;
1113   border: 1px solid;
1114   @include lightDark(border-color, #DDD, #000);
1115   @include lightDark(background-color, #FFF, #222);
1116   margin-bottom: -1px;
1117   border-radius: 3px 3px 0 0;
1118   width: 100%;
1119   max-width: 100%;
1120   height: auto;
1121   line-height: 1.4;
1122   color: #666;
1123 }
1124
1125 .scroll-box-search + .scroll-box,
1126 .scroll-box-header-item + .scroll-box {
1127   border-radius: 0 0 3px 3px;
1128 }
1129
1130 .scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
1131   display: none;
1132 }
1133 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
1134 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
1135 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
1136 {
1137   display: none;
1138 }