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