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