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: var(--color-positive);
  50   }
  51   &.neg {
  52     color: var(--color-negative);
  53   }
  54   &.warning {
  55     color: var(--color-warning);
  56   }
  57   &.showing {
  58     transform: translateX(0);
  59   }
  60   &.showing:hover {
  61     transform: translate3d(0, -2px, 0);
  62   }
  63 }
  64
  65 .chapter-contents-toggle {
  66   cursor: pointer;
  67   margin: 0;
  68   transition: all ease-in-out 180ms;
  69   user-select: none;
  70   svg[data-icon="caret-right"] {
  71     margin-inline-end: 0;
  72     font-size: 1rem;
  73     transition: all ease-in-out 180ms;
  74     transform: rotate(0deg);
  75     transform-origin: 50% 50%;
  76   }
  77   &.open svg[data-icon="caret-right"] {
  78     transform: rotate(90deg);
  79   }
  80   svg[data-icon="caret-right"] + * {
  81     margin-inline-start: $-xxs;
  82   }
  83 }
  84
  85 [overlay], .popup-background {
  86   @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
  87   position: fixed;
  88   z-index: 95536;
  89   width: 100%;
  90   height: 100%;
  91   min-width: 100%;
  92   min-height: 100%;
  93   top: 0;
  94   left: 0;
  95   right: 0;
  96   bottom: 0;
  97   align-items: center;
  98   justify-content: center;
  99   display: none;
 100 }
 101
 102 .popup-body-wrap {
 103   display: flex;
 104 }
 105
 106 .popup-body {
 107   @include lightDark(background-color, #fff, #333);
 108   max-height: 90%;
 109   max-width: 1200px;
 110   width: 90%;
 111   height: auto;
 112   margin: 2% auto;
 113   border-radius: 4px;
 114   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 115   overflow: hidden;
 116   z-index: 999;
 117   display: flex;
 118   flex-direction: column;
 119   position: relative;
 120   &.small {
 121     margin: 2% auto;
 122     width: 800px;
 123     max-width: 90%;
 124   }
 125   &.very-small {
 126     margin: 2% auto;
 127     width: 600px;
 128     max-width: 90%;
 129   }
 130   &:before {
 131     display: flex;
 132     align-self: flex-start;
 133   }
 134   .popup-content {
 135     overflow-y: auto;
 136   }
 137   &:focus {
 138     outline: 0;
 139   }
 140 }
 141
 142 .popup-header button, .popup-footer button {
 143   margin: 0;
 144   border-radius: 0;
 145   box-shadow: none;
 146   color: #FFF;
 147   padding: $-xs $-m;
 148   cursor: pointer;
 149 }
 150
 151 .popup-header button:not(.popup-header-close) {
 152   font-size: 0.8rem;
 153 }
 154
 155 .popup-header button:hover {
 156     background-color: rgba(255, 255, 255, 0.1);
 157 }
 158
 159 .popup-footer {
 160   justify-content: end;
 161   background-color: var(--color-primary-light);
 162   min-height: 41px;
 163   button {
 164     padding: 10px $-m;
 165   }
 166 }
 167
 168 .popup-header-close {
 169   border: 0;
 170   color: #FFF;
 171   font-size: 16px;
 172   cursor: pointer;
 173   svg {
 174     margin-right: 0;
 175   }
 176 }
 177
 178 .popup-header, .popup-footer {
 179   display: flex;
 180   position: relative;
 181   height: 40px;
 182   flex: 0;
 183   .popup-title {
 184     color: #FFF;
 185     margin-right: auto;
 186     padding: 8px $-m;
 187   }
 188   &.flex-container-row {
 189     display: flex !important;
 190   }
 191 }
 192 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 193   height: 444px;
 194   min-height: 444px;
 195 }
 196 #entity-selector-wrap .popup-body .form-group {
 197   margin: 0;
 198 }
 199 .popup-body .entity-selector-container {
 200   flex: 1;
 201 }
 202
 203 .dropzone-overlay {
 204   position: absolute;
 205   display: flex;
 206   justify-content: center;
 207   align-items: center;
 208   font-size: 1.333rem;
 209   width: 98%;
 210   height: 98%;
 211   left: 1%;
 212   top: 1%;
 213   border-radius: 4px;
 214   border: 1px dashed var(--color-primary);
 215   font-style: italic;
 216   box-sizing: content-box;
 217   background-clip: padding-box;
 218   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a9a9a9' fill-opacity='0.52' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
 219   background-color: var(--color-primary);
 220   color: #FFF;
 221   opacity: .8;
 222   z-index: 9;
 223   pointer-events: none;
 224   animation: dzAnimIn 240ms ease-in-out;
 225 }
 226
 227 .dropzone-landing-area {
 228   background-color: var(--color-primary-light);
 229   padding: $-m $-l;
 230   width: 100%;
 231   border: 1px dashed var(--color-primary);
 232   color: var(--color-primary);
 233   border-radius: 4px;
 234 }
 235
 236 @keyframes dzAnimIn {
 237   0% {
 238     opacity: 0;
 239     transform: scale(.7);
 240   }
 241   60% {
 242     transform: scale(1.1);
 243   }
 244   100% {
 245     transform: scale(1);
 246     opacity: .8;
 247   }
 248 }
 249
 250 @keyframes dzFileItemIn {
 251   0% {
 252     opacity: .5;
 253     transform: translateY(28px);
 254   }
 255   100% {
 256     opacity: 1;
 257     transform: translateY(0);
 258   }
 259 }
 260 @keyframes dzFileItemOut {
 261   0% {
 262     opacity: 1;
 263     transform: translateY(0);
 264   }
 265   100% {
 266     opacity: .5;
 267     transform: translateY(28px);
 268   }
 269 }
 270
 271 .dropzone-file-item {
 272   width: 260px;
 273   height: 80px;
 274   position: relative;
 275   display: flex;
 276   margin: 1rem;
 277   flex-direction: row;
 278   @include lightDark(background, #FFF, #444);
 279   box-shadow: $bs-large;
 280   border-radius: 4px;
 281   overflow: hidden;
 282   padding-bottom: 3px;
 283   animation: dzFileItemIn ease-in-out 240ms;
 284   transition: transform ease-in-out 120ms, box-shadow ease-in-out 120ms;
 285   cursor: pointer;
 286   &:hover {
 287     transform: translateY(-3px);
 288     box-shadow: 0 3px 8px 1px rgba(22, 22, 22, 0.2);
 289   }
 290 }
 291 .dropzone-file-item.dismiss {
 292   animation: dzFileItemOut ease-in-out 240ms;
 293 }
 294 .dropzone-file-item .loading-container {
 295   text-align: start !important;
 296   margin: 0;
 297 }
 298 .dropzone-file-item-image-wrap {
 299   width: 80px;
 300   position: relative;
 301   background-color: var(--color-primary-light);
 302   img {
 303     object-fit: cover;
 304     width: 100%;
 305     height: 100%;
 306     opacity: .8;
 307   }
 308 }
 309 .dropzone-file-item-text-wrap {
 310   flex: 1;
 311   display: block;
 312   padding: 1rem;
 313   overflow: auto;
 314 }
 315 .dropzone-file-item-progress {
 316   position: absolute;
 317   bottom: 0;
 318   left: 0;
 319   font-size: 0;
 320   height: 3px;
 321   background-color: var(--color-primary);
 322   transition: width ease-in-out 240ms;
 323 }
 324 .dropzone-file-item-label,
 325 .dropzone-file-item-status {
 326   align-items: center;
 327   font-size: .8rem;
 328   font-weight: 700;
 329 }
 330 .dropzone-file-item-status[data-status] {
 331   display: flex;
 332   font-size: .6rem;
 333   font-weight: 500;
 334   line-height: 1.2;
 335 }
 336 .dropzone-file-item-status[data-status="success"] {
 337   color: var(--color-positive);
 338 }
 339 .dropzone-file-item-status[data-status="error"] {
 340   color: var(--color-negative);
 341 }
 342 .dropzone-file-item-status[data-status] + .dropzone-file-item-label {
 343   display: none;
 344 }
 345
 346 .image-manager-body {
 347   min-height: 70vh;
 348 }
 349 .image-manager-filter-bar {
 350   position: sticky;
 351   top: 0;
 352   z-index: 5;
 353   @include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
 354 }
 355 .image-manager-filter-bar-bg {
 356   position: absolute;
 357   left: 0;
 358   top: 0;
 359   width: 100%;
 360   height: 100%;
 361   opacity: .15;
 362   z-index: -1;
 363 }
 364
 365 .image-manager-filters {
 366   box-shadow: $bs-med;
 367   border-radius: 4px;
 368   overflow: hidden;
 369   border-bottom: 0 !important;
 370   @include whenDark {
 371     border: 1px solid #000 !important;
 372   }
 373   button {
 374     line-height: 0;
 375     @include lightDark(background-color, #FFF, #333);
 376   }
 377   svg {
 378     margin: 0;
 379   }
 380 }
 381
 382 .image-manager-list {
 383   padding: 3px;
 384   display: grid;
 385   grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
 386   gap: 3px;
 387   z-index: 3;
 388   > div {
 389     aspect-ratio: 1;
 390   }
 391 }
 392
 393 .image-manager-list .image {
 394   display: block;
 395   position: relative;
 396   border-radius: 0;
 397   margin: 0;
 398   width: 100%;
 399   text-align: start;
 400   padding: 0;
 401   cursor: pointer;
 402   aspect-ratio: 1;
 403   @include lightDark(border-color, #ddd, #000);
 404   transition: all linear 80ms;
 405   overflow: hidden;
 406   &.selected {
 407     background-color: var(--color-primary-light);
 408     outline: currentColor 3px solid;
 409     border-radius: 3px;
 410     transform: scale3d(0.95, 0.95, 0.95);
 411   }
 412   img {
 413     width: 100%;
 414     max-width: 100%;
 415     display: block;
 416     object-fit: cover;
 417     height: auto;
 418   }
 419   .image-meta {
 420     opacity: 0;
 421     position: absolute;
 422     width: 100%;
 423     bottom: 0;
 424     left: 0;
 425     color: #EEE;
 426     background-color: rgba(0, 0, 0, 0.7);
 427     font-size: 10px;
 428     padding: 3px 4px;
 429     pointer-events: none;
 430     transition: opacity ease-in-out 80ms;
 431     span {
 432       display: block;
 433     }
 434   }
 435   &.selected .image-meta,
 436   &:hover .image-meta,
 437   &:focus .image-meta {
 438     opacity: 1;
 439   }
 440   @include smaller-than($m) {
 441     .image-meta {
 442       display: none;
 443     }
 444   }
 445 }
 446
 447 .image-manager .load-more {
 448   text-align: center;
 449   padding: $-s $-m;
 450   clear: both;
 451   .loading-container {
 452     margin: 0;
 453   }
 454 }
 455
 456 .image-manager .loading-container {
 457   text-align: center;
 458 }
 459
 460 .image-manager-sidebar {
 461   width: 300px;
 462   margin: 0 auto;
 463   overflow-y: auto;
 464   overflow-x: hidden;
 465   border-inline-start: 1px solid #DDD;
 466   @include lightDark(border-color, #ddd, #000);
 467   .inner {
 468     min-height: auto;
 469     padding: $-m;
 470   }
 471   .image-manager-viewer img {
 472     max-width: 100%;
 473     max-height: 180px;
 474     display: block;
 475     margin: 0 auto $-m auto;
 476     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
 477   }
 478   .image-manager-viewer {
 479     height: 196px;
 480     display: flex;
 481     align-items: center;
 482     justify-content: center;
 483     a {
 484       display: inline-block;
 485     }
 486   }
 487 }
 488 @include smaller-than($m) {
 489   .image-manager-sidebar {
 490     border-inline-start: 0;
 491   }
 492 }
 493
 494 .image-manager-content {
 495   display: flex;
 496   flex-direction: column;
 497   flex: 1;
 498   overflow-y: scroll;
 499   .container {
 500     width: 100%;
 501   }
 502   .full-tab {
 503     text-align: center;
 504   }
 505 }
 506
 507 .tab-container.bordered [role="tablist"] button[role="tab"] {
 508   border-inline-end: 1px solid #DDD;
 509   @include lightDark(border-inline-end-color, #DDD, #000);
 510   &:last-child {
 511     border-inline-end: none;
 512   }
 513 }
 514
 515 .tab-container [role="tablist"] {
 516   display: flex;
 517   align-items: end;
 518   justify-items: start;
 519   text-align: start;
 520   border-bottom: 1px solid #DDD;
 521   @include lightDark(border-color, #ddd, #444);
 522   margin-bottom: $-m;
 523 }
 524
 525 .tab-container [role="tablist"] button[role="tab"] {
 526   display: inline-block;
 527   padding: $-s;
 528   @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
 529   cursor: pointer;
 530   border-bottom: 2px solid transparent;
 531   margin-bottom: -1px;
 532   &[aria-selected="true"] {
 533     color: var(--color-link) !important;
 534     border-bottom-color: var(--color-link) !important;
 535     outline: 0 !important;
 536   }
 537   &:hover, &:focus {
 538     @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
 539     @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
 540   }
 541   &:focus {
 542     outline: 1px dotted var(--color-primary);
 543     outline-offset: -2px;
 544   }
 545 }
 546 .tab-container [role="tablist"].controls-card {
 547   margin-bottom: 0;
 548   border-bottom: 0;
 549   padding: 0 $-xs;
 550 }
 551
 552 .image-picker .none {
 553   display: none;
 554 }
 555
 556 .code-editor .CodeMirror {
 557   height: auto;
 558   min-height: 50vh;
 559   border-bottom: 0;
 560 }
 561
 562 .code-editor .lang-options {
 563   overflow-y: scroll;
 564   flex-basis: 200px;
 565   flex-grow: 1;
 566 }
 567
 568 .code-editor .lang-options button {
 569   display: block;
 570   padding: $-xs $-m;
 571   border-bottom: 1px solid;
 572   @include lightDark(color, #333, #AAA);
 573   @include lightDark(border-bottom-color, #EEE, #000);
 574   cursor: pointer;
 575   width: 100%;
 576   text-align: left;
 577   font-family: var(--font-code);
 578   font-size: 0.7rem;
 579   padding-left: 24px + $-xs;
 580   &:hover, &.active {
 581     background-color: var(--color-primary-light);
 582     color: var(--color-primary);
 583   }
 584 }
 585
 586 .code-editor button.lang-option-favorite-toggle {
 587   position: absolute;
 588   top: 0;
 589   left: 0;
 590   width: 28px;
 591   font-size: 1rem;
 592   border: 0;
 593   line-height: 1;
 594   padding: 2px;
 595   z-index: 2;
 596   height: 100%;
 597   text-align: center;
 598   color: var(--color-primary);
 599   svg {
 600     margin: 0;
 601   }
 602 }
 603
 604 .code-editor button[data-favourite="true"] ~ .action-favourite,
 605 .code-editor button[data-favourite="false"] ~ .action-unfavourite {
 606   display: none;
 607 }
 608
 609 .code-editor .action-favourite {
 610   opacity: 0.5;
 611 }
 612 .code-editor button:hover ~ .action-favourite {
 613   opacity: 1;
 614 }
 615
 616 .code-editor label {
 617   background-color: var(--color-primary-light);
 618   width: 100%;
 619   color: var(--color-primary);
 620   padding: $-xxs $-s;
 621   margin-bottom: 0;
 622 }
 623
 624 .code-editor-language-list {
 625   position: relative;
 626   width: 160px;
 627   z-index: 2;
 628   align-items: stretch;
 629 }
 630
 631 .code-editor-language-list input {
 632   border-radius: 0;
 633   border: 0;
 634   border-bottom: 1px solid #DDD;
 635   padding: $-xs $-s;
 636   height: auto;
 637 }
 638
 639 .code-editor-main {
 640   flex: 1;
 641   min-width: 0;
 642   .cm-editor {
 643     margin-bottom: 0;
 644     z-index: 1;
 645     max-width: 100%;
 646     width: 100%;
 647   }
 648 }
 649
 650 .code-editor-body-wrap {
 651   height: 80vh;
 652 }
 653
 654 @include smaller-than($s) {
 655   .code-editor .lang-options {
 656     display: none;
 657   }
 658   .code-editor-body-wrap {
 659     flex-direction: column;
 660   }
 661   .code-editor-language-list, .code-editor-language-list input {
 662     width: 100%;
 663   }
 664 }
 665
 666 .comments-container {
 667   padding-inline: $-xl;
 668   @include smaller-than($m) {
 669     padding-inline: $-xs;
 670   }
 671 }
 672 .comment-box {
 673   border-radius: 4px;
 674   border: 1px solid #DDD;
 675   @include lightDark(border-color, #ddd, #000);
 676   @include lightDark(background-color, #FFF, #222);
 677   .content {
 678     font-size: 0.666em;
 679     padding: $-xs $-s;
 680     p, ul, ol {
 681       font-size: $fs-m;
 682       margin: .5em 0;
 683     }
 684   }
 685   .actions {
 686     opacity: 0;
 687     transition: opacity ease-in-out 120ms;
 688   }
 689   &:hover .actions, &:focus-within .actions {
 690     opacity: 1;
 691   }
 692   .actions button:focus {
 693     outline: 1px dotted var(--color-primary);
 694   }
 695   @include smaller-than($m) {
 696     .actions {
 697       opacity: 1;
 698     }
 699   }
 700 }
 701
 702 .comment-box .header {
 703   border-bottom: 1px solid #DDD;
 704   padding: $-xs $-s;
 705   @include lightDark(border-color, #DDD, #000);
 706   a {
 707     color: inherit;
 708   }
 709   .text-muted {
 710     color: #999;
 711   }
 712   .meta a, .meta span {
 713     white-space: nowrap;
 714   }
 715   .right-meta .text-muted {
 716     opacity: .8;
 717   }
 718 }
 719
 720 .comment-thread-indicator {
 721   border-inline-start: 3px dotted #DDD;
 722   @include lightDark(border-color, #DDD, #444);
 723   margin-inline-start: $-xs;
 724   width: $-l;
 725   height: calc(100% - $-m);
 726 }
 727
 728 .comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
 729   display: none;
 730 }
 731
 732 .comment-reply {
 733   display: none;
 734   margin: 0 !important;
 735   margin-bottom: -$-xxs !important;
 736 }
 737
 738 .comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
 739   display: block;
 740 }
 741
 742 .comment-container-compact .comment-box {
 743   .meta {
 744     font-size: 0.8rem;
 745   }
 746   .header {
 747     padding: $-xs;
 748   }
 749   .right-meta {
 750     display: none;
 751   }
 752   .content {
 753     padding: $-xs $-s;
 754   }
 755 }
 756 .comment-container-compact .comment-thread-indicator {
 757   width: $-m;
 758 }
 759
 760 #tag-manager .drag-card {
 761   max-width: 500px;
 762 }
 763
 764 .template-item {
 765   cursor: pointer;
 766   position: relative;
 767   &:hover, .template-item-actions button:hover {
 768     background-color: #F2F2F2;
 769   }
 770   .template-item-actions {
 771     position: absolute;
 772     top: 0;
 773     inset-inline-end: 0;
 774     width: 50px;
 775     height: 100%;
 776     display: flex;
 777     flex-direction: column;
 778     border-inline-start: 1px solid;
 779     @include lightDark(border-color, #ddd, #000);
 780   }
 781   .template-item-actions button {
 782     cursor: pointer;
 783     flex: 1;
 784     @include lightDark(background-color, #FFF, #222);
 785     border: 0;
 786     border-top: 1px solid;
 787     @include lightDark(border-color, #DDD, #000);
 788   }
 789   .template-item-actions button svg {
 790     margin: 0;
 791   }
 792   .template-item-actions button:first-child {
 793     border-top: 0;
 794   }
 795 }
 796
 797
 798 .dropdown-search {
 799   position: relative;
 800 }
 801 .dropdown-search-toggle-breadcrumb {
 802   border: 1px solid transparent;
 803   border-radius: 4px;
 804   line-height: normal;
 805   padding: $-xs;
 806   &:hover {
 807     border-color: #DDD;
 808   }
 809   .svg-icon {
 810     margin-inline-end: 0;
 811   }
 812 }
 813 .dropdown-search-toggle-select {
 814   display: flex;
 815   gap: $-s;
 816   line-height: normal;
 817   .svg-icon {
 818     height: 26px;
 819     width: 26px;
 820     margin: 0;
 821   }
 822   .avatar {
 823     height: 22px;
 824     width: 22px;
 825   }
 826   .avatar + span {
 827     max-width: 100%;
 828     overflow: hidden;
 829     text-overflow: ellipsis;
 830     white-space: nowrap;
 831   }
 832   .dropdown-search-toggle-caret {
 833     font-size: 1.15rem;
 834   }
 835 }
 836 .dropdown-search-toggle-select-label {
 837   min-width: 0;
 838   white-space: nowrap;
 839 }
 840 .dropdown-search-toggle-select-caret {
 841   line-height: 0;
 842   margin-left: auto;
 843   margin-top: -2px;
 844   display: flex;
 845   align-items: center;
 846 }
 847
 848 .dropdown-search-dropdown {
 849   box-shadow: $bs-med;
 850   overflow: hidden;
 851   min-height: 100px;
 852   width: 240px;
 853   display: none;
 854   position: absolute;
 855   z-index: 80;
 856   right: 0;
 857   top: 0;
 858   margin-top: $-m;
 859   @include rtl {
 860     right: auto;
 861     left: -$-m;
 862   }
 863   .dropdown-search-search .svg-icon {
 864     position: absolute;
 865     left: $-s;
 866     @include rtl {
 867       right: $-s;
 868       left: auto;
 869     }
 870     top: 11px;
 871     fill: #888;
 872     pointer-events: none;
 873   }
 874   .dropdown-search-list {
 875     max-height: 400px;
 876     overflow-y: scroll;
 877     text-align: start;
 878   }
 879   .dropdown-search-item {
 880     padding: $-s $-m;
 881     &:hover,&:focus {
 882       background-color: #F2F2F2;
 883       text-decoration: none;
 884     }
 885   }
 886   input, input:focus {
 887     padding-inline-start: $-xl;
 888     border-radius: 0;
 889     border: 0;
 890     border-bottom: 1px solid #DDD;
 891   }
 892   input:focus {
 893     outline: 0;
 894   }
 895 }
 896
 897 @include smaller-than($m) {
 898   .dropdown-search-dropdown {
 899     position: fixed;
 900     right: auto;
 901     left: $-m;
 902   }
 903   .dropdown-search-dropdown .dropdown-search-list {
 904     max-height: 240px;
 905   }
 906 }
 907
 908 .item-list {
 909   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 910 }
 911 .item-list-row {
 912   border: 1.5px solid;
 913   @include lightDark(border-color, #E2E2E2, #444);
 914   border-bottom-width: 0;
 915   label {
 916     padding-bottom: 0;
 917   }
 918   &:hover {
 919     @include lightDark(background-color, #F6F6F6, #333);
 920   }
 921 }
 922 .item-list-row:first-child {
 923   border-radius: 4px 4px 0 0;
 924 }
 925 .item-list-row:last-child {
 926   border-radius: 0 0 4px 4px;
 927   border-bottom-width: 1.5px;
 928 }
 929 .item-list-row:first-child:last-child {
 930   border-radius: 4px;
 931 }
 932 .item-list-row-toggle-all {
 933   visibility: hidden;
 934 }
 935 .item-list-row:hover .item-list-row-toggle-all {
 936   visibility: visible;
 937 }
 938
 939 .status-indicator-active, .status-indicator-inactive {
 940   width: 8px;
 941   height: 8px;
 942   border-radius: 50%;
 943   display: inline-block;
 944 }
 945 .status-indicator-active {
 946   background-color: var(--color-positive);
 947 }
 948 .status-indicator-inactive {
 949   background-color: var(--color-negative);
 950 }
 951
 952 .shortcut-container {
 953   background-color: rgba(0, 0, 0, 0.25);
 954   pointer-events: none;
 955   position: fixed;
 956   left: 0;
 957   top: 0;
 958   width: 100%;
 959   height: 100%;
 960   z-index: 99;
 961 }
 962 .shortcut-linkage {
 963   position: fixed;
 964   box-shadow: 0 0 4px 0 #FFF;
 965   border-radius: 3px;
 966 }
 967 .shortcut-hint {
 968   position: fixed;
 969   padding: $-xxs $-xxs;
 970   font-size: .85rem;
 971   font-weight: 700;
 972   line-height: 1;
 973   background-color: #eee;
 974   border-radius: 3px;
 975   border: 1px solid #b4b4b4;
 976   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
 977   color: #333;
 978 }
 979
 980 // Back to top link
 981 $btt-size: 40px;
 982 .back-to-top {
 983   background-color: var(--color-primary);
 984   position: fixed;
 985   bottom: $-m;
 986   right: $-l;
 987   padding: 5px 7px;
 988   cursor: pointer;
 989   color: #FFF;
 990   fill: #FFF;
 991   svg {
 992     width: math.div($btt-size, 1.5);
 993     height: math.div($btt-size, 1.5);
 994     margin-inline-end: 4px;
 995   }
 996   width: $btt-size;
 997   height: $btt-size;
 998   border-radius: $btt-size;
 999   transition: all ease-in-out 180ms;
1000   opacity: 0;
1001   z-index: 999;
1002   overflow: hidden;
1003   &:hover {
1004     width: $btt-size*3.4;
1005     opacity: 1 !important;
1006   }
1007   .inner {
1008     width: $btt-size*3.4;
1009   }
1010   span {
1011     position: relative;
1012     vertical-align: top;
1013     line-height: 2;
1014   }
1015 }
1016
1017 // Sortable scroll boxes
1018 .scroll-box {
1019   list-style: none;
1020   padding: 0;
1021   margin: 0;
1022   max-height: 280px;
1023   overflow-y: scroll;
1024   border: 1px solid;
1025   @include lightDark(border-color, #DDD, #000);
1026   border-radius: 3px;
1027   min-height: 20px;
1028   @include lightDark(background-color, #EEE, #000);
1029 }
1030 .scroll-box-item {
1031   border-bottom: 1px solid;
1032   border-top: 1px solid;
1033   @include lightDark(border-color, #DDD, #000);
1034   margin-top: -1px;
1035   @include lightDark(background-color, #FFF, #222);
1036   display: flex;
1037   align-items: flex-start;
1038   padding: 1px;
1039   &:last-child {
1040     border-bottom: 0;
1041   }
1042   &:hover {
1043     cursor: pointer;
1044     @include lightDark(background-color, #f8f8f8, #333);
1045   }
1046   .handle {
1047     color: #AAA;
1048     cursor: grab;
1049   }
1050   button {
1051     opacity: .6;
1052   }
1053   .handle svg {
1054     margin: 0;
1055   }
1056   > * {
1057     padding: $-xs $-m;
1058   }
1059   .handle + * {
1060     padding-left: 0;
1061   }
1062   &:hover .handle {
1063     @include lightDark(color, #444, #FFF);
1064   }
1065   &:hover button {
1066     opacity: 1;
1067   }
1068   a:hover {
1069     text-decoration: none;
1070   }
1071 }
1072
1073 input.scroll-box-search, .scroll-box-header-item {
1074   font-size: 0.8rem;
1075   border: 1px solid;
1076   @include lightDark(border-color, #DDD, #000);
1077   @include lightDark(background-color, #FFF, #222);
1078   margin-bottom: -1px;
1079   border-radius: 3px 3px 0 0;
1080   width: 100%;
1081   max-width: 100%;
1082   height: auto;
1083   line-height: 1.4;
1084   color: #666;
1085 }
1086
1087 .scroll-box-search + .scroll-box,
1088 .scroll-box-header-item + .scroll-box {
1089   border-radius: 0 0 3px 3px;
1090 }
1091
1092 .scroll-box[refs="shelf-sort@shelf-book-list"] [data-action="add"] {
1093   display: none;
1094 }
1095 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="remove"],
1096 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_up"],
1097 .scroll-box[refs="shelf-sort@all-book-list"] [data-action="move_down"],
1098 {
1099   display: none;
1100 }