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: 2rem;
 212   width: 98%;
 213   height: 98%;
 214   left: 1%;
 215   top: 1%;
 216   background-color: var(--color-primary);
 217   border: 4px dashed rgba(0, 0, 0, 0.5);
 218   border-radius: 4px;
 219   color: #FFF;
 220   opacity: .8;
 221   z-index: 9;
 222   box-sizing: border-box;
 223   pointer-events: none;
 224   animation: dzAnimIn 240ms ease-in-out;
 225 }
 226
 227 @keyframes dzAnimIn {
 228   0% {
 229     opacity: 0;
 230     transform: scale(.7);
 231   }
 232   60% {
 233     transform: scale(1.1);
 234   }
 235   100% {
 236     transform: scale(1);
 237     opacity: .8;
 238   }
 239 }
 240
 241 @keyframes dzFileItemIn {
 242   0% {
 243     opacity: .5;
 244     transform: translateY(28px);
 245   }
 246   100% {
 247     opacity: 1;
 248     transform: translateY(0);
 249   }
 250 }
 251
 252 .dropzone-file-item {
 253   width: 260px;
 254   height: 80px;
 255   position: relative;
 256   display: flex;
 257   margin: 1rem;
 258   flex-direction: row;
 259   background-color: #FFF;
 260   box-shadow: $bs-large;
 261   border-radius: 4px;
 262   overflow: hidden;
 263   padding-bottom: 3px;
 264   animation: dzFileItemIn ease-in-out 240ms;
 265 }
 266 .dropzone-file-item .loading-container {
 267   text-align: start !important;
 268   margin: 0;
 269 }
 270 .dropzone-file-item-image-wrap {
 271   width: 80px;
 272   position: relative;
 273   img {
 274     object-fit: cover;
 275     width: 100%;
 276     height: 100%;
 277     opacity: .8;
 278   }
 279 }
 280 .dropzone-file-item-text-wrap {
 281   flex: 1;
 282   display: block;
 283   padding: 1rem;
 284   overflow: auto;
 285 }
 286 .dropzone-file-item-progress {
 287   position: absolute;
 288   bottom: 0;
 289   left: 0;
 290   font-size: 0;
 291   height: 3px;
 292   background-color: var(--color-primary);
 293   transition: width ease-in-out 240ms;
 294 }
 295 .dropzone-file-item-label,
 296 .dropzone-file-item-status {
 297   align-items: center;
 298   font-size: .9rem;
 299   font-weight: 700;
 300 }
 301 .dropzone-file-item-status[data-status] {
 302   display: flex;
 303   font-size: .8rem;
 304   font-weight: 500;
 305   line-height: 1.2;
 306 }
 307 .dropzone-file-item-status[data-status="success"] {
 308   color: $positive;
 309 }
 310 .dropzone-file-item-status[data-status="error"] {
 311   color: $negative;
 312 }
 313 .dropzone-file-item-status[data-status] + .dropzone-file-item-label {
 314   display: none;
 315 }
 316
 317 .dropzone-container {
 318   position: relative;
 319   @include lightDark(background-color, #eee, #222);
 320   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");
 321 }
 322
 323 .image-manager-list .image {
 324   display: block;
 325   position: relative;
 326   border-radius: 0;
 327   float: left;
 328   margin: 0;
 329   cursor: pointer;
 330   width: math.div(100%, 6);
 331   height: auto;
 332   @include lightDark(border-color, #ddd, #000);
 333   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 334   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
 335   overflow: hidden;
 336   &.selected {
 337     transform: scale3d(0.92, 0.92, 0.92);
 338     outline: currentColor 2px solid;
 339   }
 340   img {
 341     width: 100%;
 342     max-width: 100%;
 343     display: block;
 344   }
 345   .image-meta {
 346     position: absolute;
 347     width: 100%;
 348     bottom: 0;
 349     left: 0;
 350     color: #EEE;
 351     background-color: rgba(0, 0, 0, 0.4);
 352     font-size: 10px;
 353     padding: 3px 4px;
 354     span {
 355       display: block;
 356     }
 357   }
 358   @include smaller-than($xl) {
 359     width: math.div(100%, 4);
 360   }
 361   @include smaller-than($m) {
 362     .image-meta {
 363       display: none;
 364     }
 365   }
 366 }
 367
 368 .image-manager .load-more {
 369   display: block;
 370   text-align: center;
 371   @include lightDark(background-color, #EEE, #444);
 372   padding: $-s $-m;
 373   color: #AAA;
 374   clear: both;
 375   font-size: 20px;
 376   cursor: pointer;
 377   font-style: italic;
 378 }
 379
 380 .image-manager .loading-container {
 381   text-align: center;
 382 }
 383
 384 .image-manager-sidebar {
 385   width: 300px;
 386   overflow-y: auto;
 387   overflow-x: hidden;
 388   border-inline-start: 1px solid #DDD;
 389   @include lightDark(border-color, #ddd, #000);
 390   .inner {
 391     min-height: auto;
 392     padding: $-m;
 393   }
 394   img {
 395     max-width: 100%;
 396     max-height: 180px;
 397     display: block;
 398     margin: 0 auto $-m auto;
 399     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
 400   }
 401   .image-manager-viewer {
 402     height: 196px;
 403     display: flex;
 404     align-items: center;
 405     justify-content: center;
 406     a {
 407       display: inline-block;
 408     }
 409   }
 410   .dropzone-container {
 411     border-bottom: 1px solid #DDD;
 412     @include lightDark(border-color, #ddd, #000);
 413   }
 414 }
 415
 416 .image-manager-list {
 417   overflow-y: scroll;
 418   flex: 1;
 419 }
 420
 421 .image-manager-content {
 422   display: flex;
 423   flex-direction: column;
 424   flex: 1;
 425   .container {
 426     width: 100%;
 427   }
 428   .full-tab {
 429     text-align: center;
 430   }
 431 }
 432
 433 // Dropzone
 434 /*
 435  * The MIT License
 436  * Copyright (c) 2012 Matias Meno <[email protected]>
 437  */
 438 .dz-message {
 439   font-size: 1em;
 440   line-height: 2.85;
 441   font-style: italic;
 442   color: #888;
 443   text-align: center;
 444   cursor: pointer;
 445   padding: $-l $-m;
 446   transition: all ease-in-out 120ms;
 447 }
 448
 449 .dz-drag-hover .dz-message {
 450   background-color: rgb(16, 126, 210);
 451   color: #EEE;
 452 }
 453
 454 @keyframes passing-through {
 455   0% {
 456     opacity: 0;
 457     transform: translateY(40px);
 458   }
 459   30%, 70% {
 460     opacity: 1;
 461     transform: translateY(0px);
 462   }
 463   100% {
 464     opacity: 0;
 465     transform: translateY(-40px);
 466   }
 467 }
 468
 469 @keyframes slide-in {
 470   0% {
 471     opacity: 0;
 472     transform: translateY(40px);
 473   }
 474   30% {
 475     opacity: 1;
 476     transform: translateY(0px);
 477   }
 478 }
 479
 480 @keyframes pulse {
 481   0% {
 482     transform: scale(1);
 483   }
 484   10% {
 485     transform: scale(1.1);
 486   }
 487   20% {
 488     transform: scale(1);
 489   }
 490 }
 491
 492 .dropzone, .dropzone * {
 493   box-sizing: border-box;
 494 }
 495
 496 .dz-preview {
 497   position: relative;
 498   display: inline-block;
 499   vertical-align: top;
 500   margin: 12px;
 501   min-height: 80px;
 502 }
 503
 504 .dz-preview:hover {
 505   z-index: 1000;
 506 }
 507
 508 .dz-preview:hover .dz-details {
 509   opacity: 1;
 510 }
 511
 512 .dz-preview.dz-file-preview .dz-image {
 513   border-radius: 4px;
 514   background: #e9e9e9;
 515 }
 516
 517 .dz-preview.dz-file-preview .dz-details {
 518   opacity: 1;
 519 }
 520
 521 .dz-preview.dz-image-preview {
 522   background: white;
 523 }
 524
 525 .dz-preview.dz-image-preview .dz-details {
 526   transition: opacity 0.2s linear;
 527 }
 528
 529 .dz-preview .dz-remove {
 530   font-size: 13px;
 531   text-align: center;
 532   display: block;
 533   cursor: pointer;
 534   border: none;
 535   margin-top: 3px;
 536 }
 537
 538 .dz-preview .dz-remove:hover {
 539   text-decoration: underline;
 540 }
 541
 542 .dz-preview:hover .dz-details {
 543   opacity: 1;
 544 }
 545
 546 .dz-preview .dz-details {
 547   z-index: 20;
 548   position: absolute;
 549   top: 0;
 550   left: 0;
 551   opacity: 0;
 552   font-size: 10px;
 553   min-width: 100%;
 554   max-width: 100%;
 555   padding: 6px 3px;
 556   text-align: center;
 557   color: rgba(0, 0, 0, 0.9);
 558   line-height: 150%;
 559 }
 560
 561 .dz-preview .dz-details .dz-size {
 562   margin-bottom: 0.5em;
 563   font-size: 12px;
 564 }
 565
 566 .dz-preview .dz-details .dz-filename {
 567   white-space: nowrap;
 568 }
 569
 570 .dz-preview .dz-details .dz-filename:hover span {
 571   border: 1px solid rgba(200, 200, 200, 0.8);
 572   background-color: rgba(255, 255, 255, 0.8);
 573 }
 574
 575 .dz-preview .dz-details .dz-filename:not(:hover) {
 576   overflow: hidden;
 577   text-overflow: ellipsis;
 578 }
 579
 580 .dz-preview .dz-details .dz-filename:not(:hover) span {
 581   border: 1px solid transparent;
 582 }
 583
 584 .dz-preview .dz-details .dz-filename span {
 585   background-color: rgba(255, 255, 255, 0.4);
 586   padding: 0 0.4em;
 587   border-radius: 3px;
 588 }
 589
 590 .dz-preview:hover .dz-image img {
 591   filter: blur(8px);
 592 }
 593
 594 .dz-preview .dz-image {
 595   border-radius: 4px;
 596   overflow: hidden;
 597   width: 80px;
 598   height: 80px;
 599   position: relative;
 600   display: block;
 601   z-index: 10;
 602 }
 603
 604 .dz-preview .dz-image img {
 605   display: block;
 606 }
 607
 608 .dz-preview.dz-success .dz-success-mark {
 609   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 610 }
 611
 612 .dz-preview.dz-error .dz-error-mark {
 613   opacity: 1;
 614   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 615 }
 616
 617 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
 618   pointer-events: none;
 619   opacity: 0;
 620   z-index: 1001;
 621   position: absolute;
 622   display: block;
 623   top: 50%;
 624   left: 50%;
 625   margin-inline-start: -27px;
 626   margin-top: -35px;
 627 }
 628
 629 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
 630   display: block;
 631   width: 54px;
 632   height: 54px;
 633 }
 634
 635 .dz-preview.dz-processing .dz-progress {
 636   opacity: 1;
 637   transition: all 0.2s linear;
 638 }
 639
 640 .dz-preview.dz-complete .dz-progress {
 641   opacity: 0;
 642   transition: opacity 0.4s ease-in;
 643 }
 644
 645 .dz-preview:not(.dz-processing) .dz-progress {
 646   animation: pulse 6s ease infinite;
 647 }
 648
 649 .dz-preview .dz-progress {
 650   opacity: 1;
 651   z-index: 1000;
 652   pointer-events: none;
 653   position: absolute;
 654   height: 16px;
 655   left: 50%;
 656   top: 50%;
 657   margin-top: -8px;
 658   width: 80px;
 659   margin-inline-start: -40px;
 660   background: rgba(255, 255, 255, 0.9);
 661   transform: scale(1);
 662   border-radius: 8px;
 663   overflow: hidden;
 664 }
 665
 666 .dz-preview .dz-progress .dz-upload {
 667   background: #333;
 668   background: linear-gradient(to bottom, #666, #444);
 669   position: absolute;
 670   top: 0;
 671   left: 0;
 672   bottom: 0;
 673   width: 0;
 674   transition: width 300ms ease-in-out;
 675 }
 676
 677 .dz-preview.dz-error .dz-error-message {
 678   display: block;
 679 }
 680
 681 .dz-preview.dz-error {
 682   .dz-image, .dz-details {
 683     &:hover ~ .dz-error-message {
 684       opacity: 1;
 685       pointer-events: auto;
 686     }
 687   }
 688 }
 689
 690 .dz-preview .dz-error-message {
 691   pointer-events: none;
 692   z-index: 1000;
 693   position: absolute;
 694   display: block;
 695   display: none;
 696   opacity: 0;
 697   transition: opacity 0.3s ease;
 698   border-radius: 4px;
 699   font-size: 12px;
 700   line-height: 1.2;
 701   top: 88px;
 702   left: -12px;
 703   width: 160px;
 704   background: $negative;
 705   padding: $-xs;
 706   color: white;
 707 }
 708
 709 .dz-preview .dz-error-message:after {
 710   content: '';
 711   position: absolute;
 712   top: -6px;
 713   left: 44px;
 714   width: 0;
 715   height: 0;
 716   border-inline-start: 6px solid transparent;
 717   border-inline-end: 6px solid transparent;
 718   border-bottom: 6px solid $negative;
 719 }
 720
 721
 722 .tab-container [role="tablist"] {
 723   display: flex;
 724   align-items: end;
 725   justify-items: start;
 726   text-align: start;
 727   border-bottom: 1px solid #DDD;
 728   @include lightDark(border-color, #ddd, #444);
 729   margin-bottom: $-m;
 730 }
 731
 732 .tab-container [role="tablist"] button[role="tab"],
 733 .image-manager [role="tablist"] button[role="tab"] {
 734   display: inline-block;
 735   padding: $-s;
 736   @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
 737   cursor: pointer;
 738   border-bottom: 2px solid transparent;
 739   margin-bottom: -1px;
 740   &[aria-selected="true"] {
 741     color: var(--color-link) !important;
 742     border-bottom-color: var(--color-link) !important;
 743   }
 744   &:hover, &:focus {
 745     @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
 746     @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
 747   }
 748 }
 749 .tab-container [role="tablist"].controls-card {
 750   margin-bottom: 0;
 751   border-bottom: 0;
 752   padding: 0 $-xs;
 753 }
 754
 755 .image-picker .none {
 756   display: none;
 757 }
 758
 759 .code-editor .CodeMirror {
 760   height: auto;
 761   min-height: 50vh;
 762   border-bottom: 0;
 763 }
 764
 765 .code-editor .lang-options {
 766   overflow-y: scroll;
 767   flex-basis: 200px;
 768   flex-grow: 1;
 769 }
 770
 771 .code-editor .lang-options button {
 772   display: block;
 773   padding: $-xs $-m;
 774   border-bottom: 1px solid;
 775   @include lightDark(color, #333, #AAA);
 776   @include lightDark(border-bottom-color, #EEE, #000);
 777   cursor: pointer;
 778   width: 100%;
 779   text-align: left;
 780   font-family: $mono;
 781   font-size: 0.7rem;
 782   padding-left: 24px + $-xs;
 783   &:hover, &.active {
 784     background-color: var(--color-primary-light);
 785     color: var(--color-primary);
 786   }
 787 }
 788
 789 .code-editor button.lang-option-favorite-toggle {
 790   position: absolute;
 791   top: 0;
 792   left: 0;
 793   width: 28px;
 794   font-size: 1rem;
 795   border: 0;
 796   line-height: 1;
 797   padding: 2px;
 798   z-index: 2;
 799   height: 100%;
 800   text-align: center;
 801   color: var(--color-primary);
 802   svg {
 803     margin: 0;
 804   }
 805 }
 806
 807 .code-editor button[data-favourite="true"] ~ .action-favourite,
 808 .code-editor button[data-favourite="false"] ~ .action-unfavourite {
 809   display: none;
 810 }
 811
 812 .code-editor .action-favourite {
 813   opacity: 0.5;
 814 }
 815 .code-editor button:hover ~ .action-favourite {
 816   opacity: 1;
 817 }
 818
 819 .code-editor label {
 820   background-color: var(--color-primary-light);
 821   width: 100%;
 822   color: var(--color-primary);
 823   padding: $-xxs $-s;
 824   margin-bottom: 0;
 825 }
 826
 827 .code-editor-language-list {
 828   position: relative;
 829   width: 160px;
 830   z-index: 2;
 831   align-items: stretch;
 832 }
 833
 834 .code-editor-language-list input {
 835   border-radius: 0;
 836   border: 0;
 837   border-bottom: 1px solid #DDD;
 838   padding: $-xs $-s;
 839   height: auto;
 840 }
 841
 842 .code-editor-main {
 843   flex: 1;
 844   min-width: 0;
 845   .cm-editor {
 846     margin-bottom: 0;
 847     z-index: 1;
 848     max-width: 100%;
 849     width: 100%;
 850   }
 851 }
 852
 853 .code-editor-body-wrap {
 854   height: 80vh;
 855 }
 856
 857 @include smaller-than($s) {
 858   .code-editor .lang-options {
 859     display: none;
 860   }
 861   .code-editor-body-wrap {
 862     flex-direction: column;
 863   }
 864   .code-editor-language-list, .code-editor-language-list input {
 865     width: 100%;
 866   }
 867 }
 868
 869 .comment-box {
 870   border-radius: 4px;
 871   border: 1px solid #DDD;
 872   @include lightDark(border-color, #ddd, #000);
 873   @include lightDark(background-color, #FFF, #222);
 874   .content {
 875     font-size: 0.666em;
 876     p, ul, ol {
 877       font-size: $fs-m;
 878       margin: .5em 0;
 879     }
 880   }
 881   .actions {
 882     opacity: 0;
 883     transition: opacity ease-in-out 120ms;
 884   }
 885   &:hover .actions, &:focus-within .actions {
 886     opacity: 1;
 887   }
 888 }
 889
 890 .comment-box .header {
 891   .meta {
 892     img, a, span {
 893       display: inline-block;
 894       vertical-align: top;
 895     }
 896     a, span {
 897       padding: $-xxs 0 $-xxs 0;
 898       line-height: 1.6;
 899     }
 900     a { color: #666; }
 901     span {
 902       padding-inline-start: $-xxs;
 903     }
 904   }
 905   .text-muted {
 906     color: #999;
 907   }
 908 }
 909
 910 #tag-manager .drag-card {
 911   max-width: 500px;
 912 }
 913
 914 .template-item {
 915   cursor: pointer;
 916   position: relative;
 917   &:hover, .template-item-actions button:hover {
 918     background-color: #F2F2F2;
 919   }
 920   .template-item-actions {
 921     position: absolute;
 922     top: 0;
 923     inset-inline-end: 0;
 924     width: 50px;
 925     height: 100%;
 926     display: flex;
 927     flex-direction: column;
 928     border-inline-start: 1px solid;
 929     @include lightDark(border-color, #ddd, #000);
 930   }
 931   .template-item-actions button {
 932     cursor: pointer;
 933     flex: 1;
 934     @include lightDark(background-color, #FFF, #222);
 935     border: 0;
 936     border-top: 1px solid;
 937     @include lightDark(border-color, #DDD, #000);
 938   }
 939   .template-item-actions button svg {
 940     margin: 0;
 941   }
 942   .template-item-actions button:first-child {
 943     border-top: 0;
 944   }
 945 }
 946
 947
 948 .dropdown-search {
 949   position: relative;
 950 }
 951 .dropdown-search-toggle-breadcrumb {
 952   border: 1px solid transparent;
 953   border-radius: 4px;
 954   line-height: normal;
 955   padding: $-xs;
 956   &:hover {
 957     border-color: #DDD;
 958   }
 959   .svg-icon {
 960     margin-inline-end: 0;
 961   }
 962 }
 963 .dropdown-search-toggle-select {
 964   display: flex;
 965   gap: $-s;
 966   line-height: normal;
 967   .svg-icon {
 968     height: 26px;
 969     width: 26px;
 970     margin: 0;
 971   }
 972   .avatar {
 973     height: 22px;
 974     width: 22px;
 975   }
 976   .avatar + span {
 977     max-width: 100%;
 978     overflow: hidden;
 979     text-overflow: ellipsis;
 980     white-space: nowrap;
 981   }
 982   .dropdown-search-toggle-caret {
 983     font-size: 1.15rem;
 984   }
 985 }
 986 .dropdown-search-toggle-select-label {
 987   min-width: 0;
 988   white-space: nowrap;
 989 }
 990 .dropdown-search-toggle-select-caret {
 991   line-height: 0;
 992   margin-left: auto;
 993   margin-top: -2px;
 994   display: flex;
 995   align-items: center;
 996 }
 997
 998 .dropdown-search-dropdown {
 999   box-shadow: $bs-med;
1000   overflow: hidden;
1001   min-height: 100px;
1002   width: 240px;
1003   display: none;
1004   position: absolute;
1005   z-index: 80;
1006   right: 0;
1007   top: 0;
1008   margin-top: $-m;
1009   @include rtl {
1010     right: auto;
1011     left: -$-m;
1012   }
1013   .dropdown-search-search .svg-icon {
1014     position: absolute;
1015     left: $-s;
1016     @include rtl {
1017       right: $-s;
1018       left: auto;
1019     }
1020     top: 11px;
1021     fill: #888;
1022     pointer-events: none;
1023   }
1024   .dropdown-search-list {
1025     max-height: 400px;
1026     overflow-y: scroll;
1027     text-align: start;
1028   }
1029   .dropdown-search-item {
1030     padding: $-s $-m;
1031     &:hover,&:focus {
1032       background-color: #F2F2F2;
1033       text-decoration: none;
1034     }
1035   }
1036   input, input:focus {
1037     padding-inline-start: $-xl;
1038     border-radius: 0;
1039     border: 0;
1040     border-bottom: 1px solid #DDD;
1041   }
1042   input:focus {
1043     outline: 0;
1044   }
1045 }
1046
1047 @include smaller-than($m) {
1048   .dropdown-search-dropdown {
1049     position: fixed;
1050     right: auto;
1051     left: $-m;
1052   }
1053   .dropdown-search-dropdown .dropdown-search-list {
1054     max-height: 240px;
1055   }
1056 }
1057
1058 .item-list {
1059   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
1060 }
1061 .item-list-row {
1062   border: 1.5px solid;
1063   @include lightDark(border-color, #E2E2E2, #444);
1064   border-bottom-width: 0;
1065   label {
1066     padding-bottom: 0;
1067   }
1068   &:hover {
1069     @include lightDark(background-color, #F6F6F6, #333);
1070   }
1071 }
1072 .item-list-row:first-child {
1073   border-radius: 4px 4px 0 0;
1074 }
1075 .item-list-row:last-child {
1076   border-radius: 0 0 4px 4px;
1077   border-bottom-width: 1.5px;
1078 }
1079 .item-list-row:first-child:last-child {
1080   border-radius: 4px;
1081 }
1082 .item-list-row-toggle-all {
1083   visibility: hidden;
1084 }
1085 .item-list-row:hover .item-list-row-toggle-all {
1086   visibility: visible;
1087 }
1088
1089 .status-indicator-active, .status-indicator-inactive {
1090   width: 8px;
1091   height: 8px;
1092   border-radius: 50%;
1093   display: inline-block;
1094 }
1095 .status-indicator-active {
1096   background-color: $positive;
1097 }
1098 .status-indicator-inactive {
1099   background-color: $negative;
1100 }
1101
1102 .shortcut-container {
1103   background-color: rgba(0, 0, 0, 0.25);
1104   pointer-events: none;
1105   position: fixed;
1106   left: 0;
1107   top: 0;
1108   width: 100%;
1109   height: 100%;
1110   z-index: 99;
1111 }
1112 .shortcut-linkage {
1113   position: fixed;
1114   box-shadow: 0 0 4px 0 #FFF;
1115   border-radius: 3px;
1116 }
1117 .shortcut-hint {
1118   position: fixed;
1119   padding: $-xxs $-xxs;
1120   font-size: .85rem;
1121   font-weight: 700;
1122   line-height: 1;
1123   background-color: #eee;
1124   border-radius: 3px;
1125   border: 1px solid #b4b4b4;
1126   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
1127   color: #333;
1128 }
1129
1130 // Back to top link
1131 $btt-size: 40px;
1132 .back-to-top {
1133   background-color: var(--color-primary);
1134   position: fixed;
1135   bottom: $-m;
1136   right: $-l;
1137   padding: 5px 7px;
1138   cursor: pointer;
1139   color: #FFF;
1140   fill: #FFF;
1141   svg {
1142     width: math.div($btt-size, 1.5);
1143     height: math.div($btt-size, 1.5);
1144     margin-inline-end: 4px;
1145   }
1146   width: $btt-size;
1147   height: $btt-size;
1148   border-radius: $btt-size;
1149   transition: all ease-in-out 180ms;
1150   opacity: 0;
1151   z-index: 999;
1152   overflow: hidden;
1153   &:hover {
1154     width: $btt-size*3.4;
1155     opacity: 1 !important;
1156   }
1157   .inner {
1158     width: $btt-size*3.4;
1159   }
1160   span {
1161     position: relative;
1162     vertical-align: top;
1163     line-height: 2;
1164   }
1165 }
1166
1167 // Sortable scroll boxes
1168 .scroll-box {
1169   list-style: none;
1170   padding: 0;
1171   margin: 0;
1172   max-height: 280px;
1173   overflow-y: scroll;
1174   border: 1px solid;
1175   @include lightDark(border-color, #DDD, #000);
1176   border-radius: 3px;
1177   min-height: 20px;
1178   @include lightDark(background-color, #EEE, #000);
1179 }
1180 .scroll-box-item {
1181   border-bottom: 1px solid;
1182   border-top: 1px solid;
1183   @include lightDark(border-color, #DDD, #000);
1184   margin-top: -1px;
1185   @include lightDark(background-color, #FFF, #222);
1186   display: flex;
1187   align-items: flex-start;
1188   padding: 1px;
1189   &:last-child {
1190     border-bottom: 0;
1191   }
1192   &:hover {
1193     cursor: pointer;
1194     @include lightDark(background-color, #f8f8f8, #333);
1195   }
1196   .handle {
1197     color: #AAA;
1198     cursor: grab;
1199   }
1200   button {
1201     opacity: .6;
1202   }
1203   .handle svg {
1204     margin: 0;
1205   }
1206   > * {
1207     padding: $-xs $-m;
1208   }
1209   .handle + * {
1210     padding-left: 0;
1211   }
1212   &:hover .handle {
1213     @include lightDark(color, #444, #FFF);
1214   }
1215   &:hover button {
1216     opacity: 1;
1217   }
1218   a:hover {
1219     text-decoration: none;
1220   }
1221 }
1222
1223 input.scroll-box-search, .scroll-box-header-item {
1224   font-size: 0.8rem;
1225   border: 1px solid;
1226   @include lightDark(border-color, #DDD, #000);
1227   @include lightDark(background-color, #FFF, #222);
1228   margin-bottom: -1px;
1229   border-radius: 3px 3px 0 0;
1230   width: 100%;
1231   max-width: 100%;
1232   height: auto;
1233   line-height: 1.4;
1234   color: #666;
1235 }
1236
1237 .scroll-box-search + .scroll-box,
1238 .scroll-box-header-item + .scroll-box {
1239   border-radius: 0 0 3px 3px;
1240 }
1241
1242 .scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
1243   display: none;
1244 }
1245 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
1246 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
1247 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
1248 {
1249   display: none;
1250 }