BookStack Code Mirror - bookstack/blob - resources/sass/_components.scss

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