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