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