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   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-right: 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 .dropzone-file-item-status {
 326   align-items: center;
 327   font-size: .8rem;
 328   font-weight: 700;
 329 }
 330 .dropzone-file-item-status[data-status] {
 331   display: flex;
 332   font-size: .6rem;
 333   font-weight: 500;
 334   line-height: 1.2;
 335 }
 336 .dropzone-file-item-status[data-status="success"] {
 337   color: $positive;
 338 }
 339 .dropzone-file-item-status[data-status="error"] {
 340   color: $negative;
 341 }
 342 .dropzone-file-item-status[data-status] + .dropzone-file-item-label {
 343   display: none;
 344 }
 345
 346 .image-manager-body {
 347   min-height: 70vh;
 348 }
 349 .image-manager-filter-bar {
 350   position: sticky;
 351   top: 0;
 352   z-index: 5;
 353   background-color: rgba(255, 255, 255, 0.85);
 354 }
 355 .image-manager-filter-bar-bg {
 356   position: absolute;
 357   left: 0;
 358   top: 0;
 359   width: 100%;
 360   height: 100%;
 361   opacity: .15;
 362   z-index: -1;
 363 }
 364 .image-manager-filter-bar .contained-search-box {
 365   box-shadow: $bs-med;
 366   border-radius: 4px;
 367   margin: $-s $-m;
 368   overflow: hidden;
 369   input, button {
 370     border: 0;
 371   }
 372   input:focus, input:active {
 373     border: 0;
 374     outline: 1px dotted var(--color-primary);
 375   }
 376   button {
 377     width: 48px;
 378     color: #444;
 379     border-left: 1px solid #DDD;
 380     background-color: #FFF;
 381   }
 382 }
 383
 384 @include smaller-than($s) {
 385   .image-manager-filter-bar .contained-search-box input {
 386     width: 180px;
 387   }
 388 }
 389 .image-manager-filters {
 390   box-shadow: $bs-med;
 391   border-radius: 4px;
 392   margin: $-s $-m;
 393   overflow: hidden;
 394   border-bottom: 0 !important;
 395   button {
 396     line-height: 0;
 397     background-color: #FFF;
 398   }
 399   svg {
 400     margin: 0;
 401   }
 402 }
 403
 404 .image-manager-list {
 405   padding: 3px;
 406   display: grid;
 407   grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
 408   gap: 3px;
 409   z-index: 3;
 410   > div {
 411     aspect-ratio: 1;
 412   }
 413 }
 414
 415 .image-manager-list .image {
 416   display: block;
 417   position: relative;
 418   border-radius: 0;
 419   margin: 0;
 420   width: 100%;
 421   text-align: start;
 422   padding: 0;
 423   cursor: pointer;
 424   aspect-ratio: 1;
 425   @include lightDark(border-color, #ddd, #000);
 426   transition: all linear 80ms;
 427   overflow: hidden;
 428   &.selected {
 429     background-color: var(--color-primary-light);
 430     outline: currentColor 3px solid;
 431     border-radius: 3px;
 432     transform: scale3d(0.95, 0.95, 0.95);
 433   }
 434   img {
 435     width: 100%;
 436     max-width: 100%;
 437     display: block;
 438     object-fit: cover;
 439     height: auto;
 440   }
 441   .image-meta {
 442     opacity: 0;
 443     position: absolute;
 444     width: 100%;
 445     bottom: 0;
 446     left: 0;
 447     color: #EEE;
 448     background-color: rgba(0, 0, 0, 0.7);
 449     font-size: 10px;
 450     padding: 3px 4px;
 451     pointer-events: none;
 452     transition: opacity ease-in-out 80ms;
 453     span {
 454       display: block;
 455     }
 456   }
 457   &.selected .image-meta,
 458   &:hover .image-meta,
 459   &:focus .image-meta {
 460     opacity: 1;
 461   }
 462   @include smaller-than($m) {
 463     .image-meta {
 464       display: none;
 465     }
 466   }
 467 }
 468
 469 .image-manager .load-more {
 470   text-align: center;
 471   padding: $-s $-m;
 472   clear: both;
 473   .loading-container {
 474     margin: 0;
 475   }
 476 }
 477
 478 .image-manager .loading-container {
 479   text-align: center;
 480 }
 481
 482 .image-manager-sidebar {
 483   width: 300px;
 484   margin: 0 auto;
 485   overflow-y: auto;
 486   overflow-x: hidden;
 487   border-inline-start: 1px solid #DDD;
 488   @include lightDark(border-color, #ddd, #000);
 489   .inner {
 490     min-height: auto;
 491     padding: $-m;
 492   }
 493   .image-manager-viewer img {
 494     max-width: 100%;
 495     max-height: 180px;
 496     display: block;
 497     margin: 0 auto $-m auto;
 498     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
 499   }
 500   .image-manager-viewer {
 501     height: 196px;
 502     display: flex;
 503     align-items: center;
 504     justify-content: center;
 505     a {
 506       display: inline-block;
 507     }
 508   }
 509 }
 510 @include smaller-than($m) {
 511   .image-manager-sidebar {
 512     border-inline-start: 0;
 513   }
 514 }
 515
 516 .image-manager-content {
 517   display: flex;
 518   flex-direction: column;
 519   flex: 1;
 520   overflow-y: scroll;
 521   .container {
 522     width: 100%;
 523   }
 524   .full-tab {
 525     text-align: center;
 526   }
 527 }
 528
 529 .tab-container.bordered [role="tablist"] button[role="tab"] {
 530   border-right: 1px solid #DDD;
 531   @include lightDark(border-right-color, #DDD, #000);
 532   &:last-child {
 533     border-right: none;
 534   }
 535 }
 536
 537 .tab-container [role="tablist"] {
 538   display: flex;
 539   align-items: end;
 540   justify-items: start;
 541   text-align: start;
 542   border-bottom: 1px solid #DDD;
 543   @include lightDark(border-color, #ddd, #444);
 544   margin-bottom: $-m;
 545 }
 546
 547 .tab-container [role="tablist"] button[role="tab"] {
 548   display: inline-block;
 549   padding: $-s;
 550   @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
 551   cursor: pointer;
 552   border-bottom: 2px solid transparent;
 553   margin-bottom: -1px;
 554   &[aria-selected="true"] {
 555     color: var(--color-link) !important;
 556     border-bottom-color: var(--color-link) !important;
 557   }
 558   &:hover, &:focus {
 559     @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
 560     @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
 561   }
 562 }
 563 .tab-container.tab-primary [role="tablist"] button[role="tab"][aria-selected="true"] {
 564   color: var(--color-primary) !important;
 565   border-bottom-color: var(--color-primary) !important;
 566 }
 567 .tab-container [role="tablist"].controls-card {
 568   margin-bottom: 0;
 569   border-bottom: 0;
 570   padding: 0 $-xs;
 571 }
 572
 573 .image-picker .none {
 574   display: none;
 575 }
 576
 577 .code-editor .CodeMirror {
 578   height: auto;
 579   min-height: 50vh;
 580   border-bottom: 0;
 581 }
 582
 583 .code-editor .lang-options {
 584   overflow-y: scroll;
 585   flex-basis: 200px;
 586   flex-grow: 1;
 587 }
 588
 589 .code-editor .lang-options button {
 590   display: block;
 591   padding: $-xs $-m;
 592   border-bottom: 1px solid;
 593   @include lightDark(color, #333, #AAA);
 594   @include lightDark(border-bottom-color, #EEE, #000);
 595   cursor: pointer;
 596   width: 100%;
 597   text-align: left;
 598   font-family: $mono;
 599   font-size: 0.7rem;
 600   padding-left: 24px + $-xs;
 601   &:hover, &.active {
 602     background-color: var(--color-primary-light);
 603     color: var(--color-primary);
 604   }
 605 }
 606
 607 .code-editor button.lang-option-favorite-toggle {
 608   position: absolute;
 609   top: 0;
 610   left: 0;
 611   width: 28px;
 612   font-size: 1rem;
 613   border: 0;
 614   line-height: 1;
 615   padding: 2px;
 616   z-index: 2;
 617   height: 100%;
 618   text-align: center;
 619   color: var(--color-primary);
 620   svg {
 621     margin: 0;
 622   }
 623 }
 624
 625 .code-editor button[data-favourite="true"] ~ .action-favourite,
 626 .code-editor button[data-favourite="false"] ~ .action-unfavourite {
 627   display: none;
 628 }
 629
 630 .code-editor .action-favourite {
 631   opacity: 0.5;
 632 }
 633 .code-editor button:hover ~ .action-favourite {
 634   opacity: 1;
 635 }
 636
 637 .code-editor label {
 638   background-color: var(--color-primary-light);
 639   width: 100%;
 640   color: var(--color-primary);
 641   padding: $-xxs $-s;
 642   margin-bottom: 0;
 643 }
 644
 645 .code-editor-language-list {
 646   position: relative;
 647   width: 160px;
 648   z-index: 2;
 649   align-items: stretch;
 650 }
 651
 652 .code-editor-language-list input {
 653   border-radius: 0;
 654   border: 0;
 655   border-bottom: 1px solid #DDD;
 656   padding: $-xs $-s;
 657   height: auto;
 658 }
 659
 660 .code-editor-main {
 661   flex: 1;
 662   min-width: 0;
 663   .cm-editor {
 664     margin-bottom: 0;
 665     z-index: 1;
 666     max-width: 100%;
 667     width: 100%;
 668   }
 669 }
 670
 671 .code-editor-body-wrap {
 672   height: 80vh;
 673 }
 674
 675 @include smaller-than($s) {
 676   .code-editor .lang-options {
 677     display: none;
 678   }
 679   .code-editor-body-wrap {
 680     flex-direction: column;
 681   }
 682   .code-editor-language-list, .code-editor-language-list input {
 683     width: 100%;
 684   }
 685 }
 686
 687 .comment-box {
 688   border-radius: 4px;
 689   border: 1px solid #DDD;
 690   @include lightDark(border-color, #ddd, #000);
 691   @include lightDark(background-color, #FFF, #222);
 692   .content {
 693     font-size: 0.666em;
 694     p, ul, ol {
 695       font-size: $fs-m;
 696       margin: .5em 0;
 697     }
 698   }
 699   .actions {
 700     opacity: 0;
 701     transition: opacity ease-in-out 120ms;
 702   }
 703   &:hover .actions, &:focus-within .actions {
 704     opacity: 1;
 705   }
 706 }
 707
 708 .comment-box .header {
 709   .meta {
 710     img, a, span {
 711       display: inline-block;
 712       vertical-align: top;
 713     }
 714     a, span {
 715       padding: $-xxs 0 $-xxs 0;
 716       line-height: 1.6;
 717     }
 718     a { color: #666; }
 719     span {
 720       padding-inline-start: $-xxs;
 721     }
 722   }
 723   .text-muted {
 724     color: #999;
 725   }
 726 }
 727
 728 #tag-manager .drag-card {
 729   max-width: 500px;
 730 }
 731
 732 .template-item {
 733   cursor: pointer;
 734   position: relative;
 735   &:hover, .template-item-actions button:hover {
 736     background-color: #F2F2F2;
 737   }
 738   .template-item-actions {
 739     position: absolute;
 740     top: 0;
 741     inset-inline-end: 0;
 742     width: 50px;
 743     height: 100%;
 744     display: flex;
 745     flex-direction: column;
 746     border-inline-start: 1px solid;
 747     @include lightDark(border-color, #ddd, #000);
 748   }
 749   .template-item-actions button {
 750     cursor: pointer;
 751     flex: 1;
 752     @include lightDark(background-color, #FFF, #222);
 753     border: 0;
 754     border-top: 1px solid;
 755     @include lightDark(border-color, #DDD, #000);
 756   }
 757   .template-item-actions button svg {
 758     margin: 0;
 759   }
 760   .template-item-actions button:first-child {
 761     border-top: 0;
 762   }
 763 }
 764
 765
 766 .dropdown-search {
 767   position: relative;
 768 }
 769 .dropdown-search-toggle-breadcrumb {
 770   border: 1px solid transparent;
 771   border-radius: 4px;
 772   line-height: normal;
 773   padding: $-xs;
 774   &:hover {
 775     border-color: #DDD;
 776   }
 777   .svg-icon {
 778     margin-inline-end: 0;
 779   }
 780 }
 781 .dropdown-search-toggle-select {
 782   display: flex;
 783   gap: $-s;
 784   line-height: normal;
 785   .svg-icon {
 786     height: 26px;
 787     width: 26px;
 788     margin: 0;
 789   }
 790   .avatar {
 791     height: 22px;
 792     width: 22px;
 793   }
 794   .avatar + span {
 795     max-width: 100%;
 796     overflow: hidden;
 797     text-overflow: ellipsis;
 798     white-space: nowrap;
 799   }
 800   .dropdown-search-toggle-caret {
 801     font-size: 1.15rem;
 802   }
 803 }
 804 .dropdown-search-toggle-select-label {
 805   min-width: 0;
 806   white-space: nowrap;
 807 }
 808 .dropdown-search-toggle-select-caret {
 809   line-height: 0;
 810   margin-left: auto;
 811   margin-top: -2px;
 812   display: flex;
 813   align-items: center;
 814 }
 815
 816 .dropdown-search-dropdown {
 817   box-shadow: $bs-med;
 818   overflow: hidden;
 819   min-height: 100px;
 820   width: 240px;
 821   display: none;
 822   position: absolute;
 823   z-index: 80;
 824   right: 0;
 825   top: 0;
 826   margin-top: $-m;
 827   @include rtl {
 828     right: auto;
 829     left: -$-m;
 830   }
 831   .dropdown-search-search .svg-icon {
 832     position: absolute;
 833     left: $-s;
 834     @include rtl {
 835       right: $-s;
 836       left: auto;
 837     }
 838     top: 11px;
 839     fill: #888;
 840     pointer-events: none;
 841   }
 842   .dropdown-search-list {
 843     max-height: 400px;
 844     overflow-y: scroll;
 845     text-align: start;
 846   }
 847   .dropdown-search-item {
 848     padding: $-s $-m;
 849     &:hover,&:focus {
 850       background-color: #F2F2F2;
 851       text-decoration: none;
 852     }
 853   }
 854   input, input:focus {
 855     padding-inline-start: $-xl;
 856     border-radius: 0;
 857     border: 0;
 858     border-bottom: 1px solid #DDD;
 859   }
 860   input:focus {
 861     outline: 0;
 862   }
 863 }
 864
 865 @include smaller-than($m) {
 866   .dropdown-search-dropdown {
 867     position: fixed;
 868     right: auto;
 869     left: $-m;
 870   }
 871   .dropdown-search-dropdown .dropdown-search-list {
 872     max-height: 240px;
 873   }
 874 }
 875
 876 .item-list {
 877   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 878 }
 879 .item-list-row {
 880   border: 1.5px solid;
 881   @include lightDark(border-color, #E2E2E2, #444);
 882   border-bottom-width: 0;
 883   label {
 884     padding-bottom: 0;
 885   }
 886   &:hover {
 887     @include lightDark(background-color, #F6F6F6, #333);
 888   }
 889 }
 890 .item-list-row:first-child {
 891   border-radius: 4px 4px 0 0;
 892 }
 893 .item-list-row:last-child {
 894   border-radius: 0 0 4px 4px;
 895   border-bottom-width: 1.5px;
 896 }
 897 .item-list-row:first-child:last-child {
 898   border-radius: 4px;
 899 }
 900 .item-list-row-toggle-all {
 901   visibility: hidden;
 902 }
 903 .item-list-row:hover .item-list-row-toggle-all {
 904   visibility: visible;
 905 }
 906
 907 .status-indicator-active, .status-indicator-inactive {
 908   width: 8px;
 909   height: 8px;
 910   border-radius: 50%;
 911   display: inline-block;
 912 }
 913 .status-indicator-active {
 914   background-color: $positive;
 915 }
 916 .status-indicator-inactive {
 917   background-color: $negative;
 918 }
 919
 920 .shortcut-container {
 921   background-color: rgba(0, 0, 0, 0.25);
 922   pointer-events: none;
 923   position: fixed;
 924   left: 0;
 925   top: 0;
 926   width: 100%;
 927   height: 100%;
 928   z-index: 99;
 929 }
 930 .shortcut-linkage {
 931   position: fixed;
 932   box-shadow: 0 0 4px 0 #FFF;
 933   border-radius: 3px;
 934 }
 935 .shortcut-hint {
 936   position: fixed;
 937   padding: $-xxs $-xxs;
 938   font-size: .85rem;
 939   font-weight: 700;
 940   line-height: 1;
 941   background-color: #eee;
 942   border-radius: 3px;
 943   border: 1px solid #b4b4b4;
 944   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
 945   color: #333;
 946 }
 947
 948 // Back to top link
 949 $btt-size: 40px;
 950 .back-to-top {
 951   background-color: var(--color-primary);
 952   position: fixed;
 953   bottom: $-m;
 954   right: $-l;
 955   padding: 5px 7px;
 956   cursor: pointer;
 957   color: #FFF;
 958   fill: #FFF;
 959   svg {
 960     width: math.div($btt-size, 1.5);
 961     height: math.div($btt-size, 1.5);
 962     margin-inline-end: 4px;
 963   }
 964   width: $btt-size;
 965   height: $btt-size;
 966   border-radius: $btt-size;
 967   transition: all ease-in-out 180ms;
 968   opacity: 0;
 969   z-index: 999;
 970   overflow: hidden;
 971   &:hover {
 972     width: $btt-size*3.4;
 973     opacity: 1 !important;
 974   }
 975   .inner {
 976     width: $btt-size*3.4;
 977   }
 978   span {
 979     position: relative;
 980     vertical-align: top;
 981     line-height: 2;
 982   }
 983 }
 984
 985 // Sortable scroll boxes
 986 .scroll-box {
 987   list-style: none;
 988   padding: 0;
 989   margin: 0;
 990   max-height: 280px;
 991   overflow-y: scroll;
 992   border: 1px solid;
 993   @include lightDark(border-color, #DDD, #000);
 994   border-radius: 3px;
 995   min-height: 20px;
 996   @include lightDark(background-color, #EEE, #000);
 997 }
 998 .scroll-box-item {
 999   border-bottom: 1px solid;
1000   border-top: 1px solid;
1001   @include lightDark(border-color, #DDD, #000);
1002   margin-top: -1px;
1003   @include lightDark(background-color, #FFF, #222);
1004   display: flex;
1005   align-items: flex-start;
1006   padding: 1px;
1007   &:last-child {
1008     border-bottom: 0;
1009   }
1010   &:hover {
1011     cursor: pointer;
1012     @include lightDark(background-color, #f8f8f8, #333);
1013   }
1014   .handle {
1015     color: #AAA;
1016     cursor: grab;
1017   }
1018   button {
1019     opacity: .6;
1020   }
1021   .handle svg {
1022     margin: 0;
1023   }
1024   > * {
1025     padding: $-xs $-m;
1026   }
1027   .handle + * {
1028     padding-left: 0;
1029   }
1030   &:hover .handle {
1031     @include lightDark(color, #444, #FFF);
1032   }
1033   &:hover button {
1034     opacity: 1;
1035   }
1036   a:hover {
1037     text-decoration: none;
1038   }
1039 }
1040
1041 input.scroll-box-search, .scroll-box-header-item {
1042   font-size: 0.8rem;
1043   border: 1px solid;
1044   @include lightDark(border-color, #DDD, #000);
1045   @include lightDark(background-color, #FFF, #222);
1046   margin-bottom: -1px;
1047   border-radius: 3px 3px 0 0;
1048   width: 100%;
1049   max-width: 100%;
1050   height: auto;
1051   line-height: 1.4;
1052   color: #666;
1053 }
1054
1055 .scroll-box-search + .scroll-box,
1056 .scroll-box-header-item + .scroll-box {
1057   border-radius: 0 0 3px 3px;
1058 }
1059
1060 .scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
1061   display: none;
1062 }
1063 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
1064 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
1065 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
1066 {
1067   display: none;
1068 }