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

   1 // System wide notifications
   2 [notification] {
   3   position: fixed;
   4   top: 0;
   5   right: 0;
   6   margin: $-xl;
   7   padding: $-m $-l;
   8   background-color: #FFF;
   9   @include lightDark(background-color, #fff, #444);
  10   border-radius: 4px;
  11   border-inline-start: 6px solid currentColor;
  12   box-shadow: $bs-large;
  13   z-index: 999999;
  14   cursor: pointer;
  15   max-width: 360px;
  16   transition: transform ease-in-out 280ms;
  17   transform: translateX(580px);
  18   display: grid;
  19   grid-template-columns: 42px 1fr 12px;
  20   color: #444;
  21   font-weight: 700;
  22   span, svg {
  23     vertical-align: middle;
  24     justify-self: center;
  25     align-self: center;
  26   }
  27   svg {
  28     width: 2.8rem;
  29     height: 2.8rem;
  30     padding-inline-end: $-s;
  31     fill: currentColor;
  32   }
  33   .dismiss {
  34     margin-top: -8px;
  35     svg {
  36       height: 1.0rem;
  37       @include lightDark(color, #444, #888);
  38     }
  39   }
  40   span {
  41     vertical-align: middle;
  42     line-height: 1.3;
  43     @include whenDark {
  44       color: #BBB;
  45     }
  46   }
  47   &.pos {
  48     color: $positive;
  49   }
  50   &.neg {
  51     color: $negative;
  52   }
  53   &.warning {
  54     color: $warning;
  55   }
  56   &.showing {
  57     transform: translateX(0);
  58   }
  59   &.showing:hover {
  60     transform: translate3d(0, -2px, 0);
  61   }
  62 }
  63
  64 .chapter-contents-toggle {
  65   cursor: pointer;
  66   margin: 0;
  67   transition: all ease-in-out 180ms;
  68   user-select: none;
  69   svg[data-icon="caret-right"] {
  70     margin-inline-end: 0;
  71     font-size: 1rem;
  72     transition: all ease-in-out 180ms;
  73     transform: rotate(0deg);
  74     transform-origin: 50% 50%;
  75   }
  76   &.open svg[data-icon="caret-right"] {
  77     transform: rotate(90deg);
  78   }
  79   svg[data-icon="caret-right"] + * {
  80     margin-inline-start: $-xxs;
  81   }
  82 }
  83
  84 [overlay], .popup-background {
  85   @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
  86   position: fixed;
  87   z-index: 95536;
  88   width: 100%;
  89   height: 100%;
  90   min-width: 100%;
  91   min-height: 100%;
  92   top: 0;
  93   left: 0;
  94   right: 0;
  95   bottom: 0;
  96   align-items: center;
  97   justify-content: center;
  98   display: none;
  99 }
 100
 101 .popup-body-wrap {
 102   display: flex;
 103 }
 104
 105 .popup-body {
 106   @include lightDark(background-color, #fff, #333);
 107   max-height: 90%;
 108   max-width: 1200px;
 109   width: 90%;
 110   height: auto;
 111   margin: 2% auto;
 112   border-radius: 4px;
 113   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 114   overflow: hidden;
 115   z-index: 999;
 116   display: flex;
 117   flex-direction: column;
 118   &.small {
 119     margin: 2% auto;
 120     width: 800px;
 121     max-width: 90%;
 122   }
 123   &.very-small {
 124     margin: 2% auto;
 125     width: 600px;
 126     max-width: 90%;
 127   }
 128   &:before {
 129     display: flex;
 130     align-self: flex-start;
 131   }
 132   .popup-content {
 133     overflow-y: auto;
 134   }
 135   &:focus {
 136     outline: 0;
 137   }
 138 }
 139
 140 .popup-footer button, .popup-header-close {
 141   position: absolute;
 142   top: 0;
 143   right: 0;
 144   margin: 0;
 145   height: 40px;
 146   border-radius: 0;
 147   box-shadow: none;
 148   &:active {
 149     outline: 0;
 150   }
 151 }
 152 .popup-header-close {
 153   background-color: transparent;
 154   border: 0;
 155   color: #FFF;
 156   font-size: 16px;
 157   padding: 0 $-m;
 158 }
 159
 160 .popup-header, .popup-footer {
 161   display: block !important;
 162   position: relative;
 163   height: 40px;
 164   flex: none !important;
 165   .popup-title {
 166     color: #FFF;
 167     padding: 8px $-m;
 168   }
 169   &.flex-container-row {
 170     display: flex !important;
 171   }
 172 }
 173 body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 174   height: 444px;
 175   min-height: 444px;
 176 }
 177 #entity-selector-wrap .popup-body .form-group {
 178   margin: 0;
 179 }
 180 .popup-body .entity-selector-container {
 181   flex: 1;
 182 }
 183
 184 .image-manager-body {
 185   min-height: 70vh;
 186 }
 187
 188 .dropzone-container {
 189   position: relative;
 190   @include lightDark(background-color, #eee, #222);
 191   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");
 192 }
 193
 194 .image-manager-list .image {
 195   display: block;
 196   position: relative;
 197   border-radius: 0;
 198   float: left;
 199   margin: 0;
 200   cursor: pointer;
 201   width: math.div(100%, 6);
 202   height: auto;
 203   @include lightDark(border-color, #ddd, #000);
 204   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 205   transition: all cubic-bezier(.4, 0, 1, 1) 160ms;
 206   overflow: hidden;
 207   &.selected {
 208     transform: scale3d(0.92, 0.92, 0.92);
 209     outline: currentColor 2px solid;
 210   }
 211   img {
 212     width: 100%;
 213     max-width: 100%;
 214     display: block;
 215   }
 216   .image-meta {
 217     position: absolute;
 218     width: 100%;
 219     bottom: 0;
 220     left: 0;
 221     color: #EEE;
 222     background-color: rgba(0, 0, 0, 0.4);
 223     font-size: 10px;
 224     padding: 3px 4px;
 225     span {
 226       display: block;
 227     }
 228   }
 229   @include smaller-than($xl) {
 230     width: math.div(100%, 4);
 231   }
 232   @include smaller-than($m) {
 233     .image-meta {
 234       display: none;
 235     }
 236   }
 237 }
 238
 239 .image-manager .load-more {
 240   display: block;
 241   text-align: center;
 242   @include lightDark(background-color, #EEE, #444);
 243   padding: $-s $-m;
 244   color: #AAA;
 245   clear: both;
 246   font-size: 20px;
 247   cursor: pointer;
 248   font-style: italic;
 249 }
 250
 251 .image-manager .loading-container {
 252   text-align: center;
 253 }
 254
 255 .image-manager-sidebar {
 256   width: 300px;
 257   overflow-y: auto;
 258   overflow-x: hidden;
 259   border-inline-start: 1px solid #DDD;
 260   @include lightDark(border-color, #ddd, #000);
 261   .inner {
 262     min-height: auto;
 263     padding: $-m;
 264   }
 265   img {
 266     max-width: 100%;
 267     max-height: 180px;
 268     display: block;
 269     margin: 0 auto $-m auto;
 270     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
 271   }
 272   .image-manager-viewer {
 273     height: 196px;
 274     display: flex;
 275     align-items: center;
 276     justify-content: center;
 277     a {
 278       display: inline-block;
 279     }
 280   }
 281   .dropzone-container {
 282     border-bottom: 1px solid #DDD;
 283     @include lightDark(border-color, #ddd, #000);
 284   }
 285 }
 286
 287 .image-manager-list {
 288   overflow-y: scroll;
 289   flex: 1;
 290 }
 291
 292 .image-manager-content {
 293   display: flex;
 294   flex-direction: column;
 295   flex: 1;
 296   .container {
 297     width: 100%;
 298   }
 299   .full-tab {
 300     text-align: center;
 301   }
 302 }
 303
 304 .image-manager .corner-button {
 305   margin: 0;
 306   border-radius: 0;
 307   padding: $-m;
 308 }
 309
 310 // Dropzone
 311 /*
 312  * The MIT License
 313  * Copyright (c) 2012 Matias Meno <[email protected]>
 314  */
 315 .dz-message {
 316   font-size: 1em;
 317   line-height: 2.85;
 318   font-style: italic;
 319   color: #888;
 320   text-align: center;
 321   cursor: pointer;
 322   padding: $-l $-m;
 323   transition: all ease-in-out 120ms;
 324 }
 325
 326 .dz-drag-hover .dz-message {
 327   background-color: rgb(16, 126, 210);
 328   color: #EEE;
 329 }
 330
 331 @keyframes passing-through {
 332   0% {
 333     opacity: 0;
 334     transform: translateY(40px);
 335   }
 336   30%, 70% {
 337     opacity: 1;
 338     transform: translateY(0px);
 339   }
 340   100% {
 341     opacity: 0;
 342     transform: translateY(-40px);
 343   }
 344 }
 345
 346 @keyframes slide-in {
 347   0% {
 348     opacity: 0;
 349     transform: translateY(40px);
 350   }
 351   30% {
 352     opacity: 1;
 353     transform: translateY(0px);
 354   }
 355 }
 356
 357 @keyframes pulse {
 358   0% {
 359     transform: scale(1);
 360   }
 361   10% {
 362     transform: scale(1.1);
 363   }
 364   20% {
 365     transform: scale(1);
 366   }
 367 }
 368
 369 .dropzone, .dropzone * {
 370   box-sizing: border-box;
 371 }
 372
 373 .dz-preview {
 374   position: relative;
 375   display: inline-block;
 376   vertical-align: top;
 377   margin: 12px;
 378   min-height: 80px;
 379 }
 380
 381 .dz-preview:hover {
 382   z-index: 1000;
 383 }
 384
 385 .dz-preview:hover .dz-details {
 386   opacity: 1;
 387 }
 388
 389 .dz-preview.dz-file-preview .dz-image {
 390   border-radius: 4px;
 391   background: #e9e9e9;
 392 }
 393
 394 .dz-preview.dz-file-preview .dz-details {
 395   opacity: 1;
 396 }
 397
 398 .dz-preview.dz-image-preview {
 399   background: white;
 400 }
 401
 402 .dz-preview.dz-image-preview .dz-details {
 403   transition: opacity 0.2s linear;
 404 }
 405
 406 .dz-preview .dz-remove {
 407   font-size: 13px;
 408   text-align: center;
 409   display: block;
 410   cursor: pointer;
 411   border: none;
 412   margin-top: 3px;
 413 }
 414
 415 .dz-preview .dz-remove:hover {
 416   text-decoration: underline;
 417 }
 418
 419 .dz-preview:hover .dz-details {
 420   opacity: 1;
 421 }
 422
 423 .dz-preview .dz-details {
 424   z-index: 20;
 425   position: absolute;
 426   top: 0;
 427   left: 0;
 428   opacity: 0;
 429   font-size: 10px;
 430   min-width: 100%;
 431   max-width: 100%;
 432   padding: 6px 3px;
 433   text-align: center;
 434   color: rgba(0, 0, 0, 0.9);
 435   line-height: 150%;
 436 }
 437
 438 .dz-preview .dz-details .dz-size {
 439   margin-bottom: 0.5em;
 440   font-size: 12px;
 441 }
 442
 443 .dz-preview .dz-details .dz-filename {
 444   white-space: nowrap;
 445 }
 446
 447 .dz-preview .dz-details .dz-filename:hover span {
 448   border: 1px solid rgba(200, 200, 200, 0.8);
 449   background-color: rgba(255, 255, 255, 0.8);
 450 }
 451
 452 .dz-preview .dz-details .dz-filename:not(:hover) {
 453   overflow: hidden;
 454   text-overflow: ellipsis;
 455 }
 456
 457 .dz-preview .dz-details .dz-filename:not(:hover) span {
 458   border: 1px solid transparent;
 459 }
 460
 461 .dz-preview .dz-details .dz-filename span {
 462   background-color: rgba(255, 255, 255, 0.4);
 463   padding: 0 0.4em;
 464   border-radius: 3px;
 465 }
 466
 467 .dz-preview:hover .dz-image img {
 468   filter: blur(8px);
 469 }
 470
 471 .dz-preview .dz-image {
 472   border-radius: 4px;
 473   overflow: hidden;
 474   width: 80px;
 475   height: 80px;
 476   position: relative;
 477   display: block;
 478   z-index: 10;
 479 }
 480
 481 .dz-preview .dz-image img {
 482   display: block;
 483 }
 484
 485 .dz-preview.dz-success .dz-success-mark {
 486   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 487 }
 488
 489 .dz-preview.dz-error .dz-error-mark {
 490   opacity: 1;
 491   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 492 }
 493
 494 .dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
 495   pointer-events: none;
 496   opacity: 0;
 497   z-index: 1001;
 498   position: absolute;
 499   display: block;
 500   top: 50%;
 501   left: 50%;
 502   margin-inline-start: -27px;
 503   margin-top: -35px;
 504 }
 505
 506 .dz-preview .dz-success-mark svg, .dz-preview .dz-error-mark svg {
 507   display: block;
 508   width: 54px;
 509   height: 54px;
 510 }
 511
 512 .dz-preview.dz-processing .dz-progress {
 513   opacity: 1;
 514   transition: all 0.2s linear;
 515 }
 516
 517 .dz-preview.dz-complete .dz-progress {
 518   opacity: 0;
 519   transition: opacity 0.4s ease-in;
 520 }
 521
 522 .dz-preview:not(.dz-processing) .dz-progress {
 523   animation: pulse 6s ease infinite;
 524 }
 525
 526 .dz-preview .dz-progress {
 527   opacity: 1;
 528   z-index: 1000;
 529   pointer-events: none;
 530   position: absolute;
 531   height: 16px;
 532   left: 50%;
 533   top: 50%;
 534   margin-top: -8px;
 535   width: 80px;
 536   margin-inline-start: -40px;
 537   background: rgba(255, 255, 255, 0.9);
 538   transform: scale(1);
 539   border-radius: 8px;
 540   overflow: hidden;
 541 }
 542
 543 .dz-preview .dz-progress .dz-upload {
 544   background: #333;
 545   background: linear-gradient(to bottom, #666, #444);
 546   position: absolute;
 547   top: 0;
 548   left: 0;
 549   bottom: 0;
 550   width: 0;
 551   transition: width 300ms ease-in-out;
 552 }
 553
 554 .dz-preview.dz-error .dz-error-message {
 555   display: block;
 556 }
 557
 558 .dz-preview.dz-error {
 559   .dz-image, .dz-details {
 560     &:hover ~ .dz-error-message {
 561       opacity: 1;
 562       pointer-events: auto;
 563     }
 564   }
 565 }
 566
 567 .dz-preview .dz-error-message {
 568   pointer-events: none;
 569   z-index: 1000;
 570   position: absolute;
 571   display: block;
 572   display: none;
 573   opacity: 0;
 574   transition: opacity 0.3s ease;
 575   border-radius: 4px;
 576   font-size: 12px;
 577   line-height: 1.2;
 578   top: 88px;
 579   left: -12px;
 580   width: 160px;
 581   background: $negative;
 582   padding: $-xs;
 583   color: white;
 584 }
 585
 586 .dz-preview .dz-error-message:after {
 587   content: '';
 588   position: absolute;
 589   top: -6px;
 590   left: 44px;
 591   width: 0;
 592   height: 0;
 593   border-inline-start: 6px solid transparent;
 594   border-inline-end: 6px solid transparent;
 595   border-bottom: 6px solid $negative;
 596 }
 597
 598
 599 .tab-container .nav-tabs {
 600   text-align: start;
 601   border-bottom: 1px solid #DDD;
 602   @include lightDark(border-color, #ddd, #444);
 603   margin-bottom: $-m;
 604   .tab-item {
 605     padding: $-s;
 606     @include lightDark(color, #666, #999);
 607     &.selected {
 608       border-bottom-width: 3px;
 609     }
 610   }
 611 }
 612
 613 .nav-tabs {
 614   text-align: center;
 615   a, .tab-item {
 616     padding: $-m;
 617     display: inline-block;
 618     @include lightDark(color, #666, #999);
 619     cursor: pointer;
 620     border-right: 1px solid rgba(0, 0, 0, 0.1);
 621     border-bottom: 2px solid transparent;
 622     &.selected {
 623       border-bottom: 2px solid var(--color-primary);
 624     }
 625     &:last-child {
 626       border-right: 0;
 627     }
 628   }
 629 }
 630
 631 .image-picker .none {
 632   display: none;
 633 }
 634
 635 .code-editor .CodeMirror {
 636   height: 400px;
 637 }
 638
 639 .code-editor .lang-options {
 640   overflow-y: scroll;
 641 }
 642
 643 .code-editor .lang-options button {
 644   display: block;
 645   padding: $-xs $-m;
 646   border-bottom: 1px solid #eee;
 647   width: 100%;
 648   text-align: left;
 649   font-family: $mono;
 650   font-size: 0.7rem;
 651   &:hover {
 652     background-color: var(--color-primary-light);
 653     color: var(--color-primary);
 654   }
 655 }
 656
 657 .code-editor label {
 658   background-color: var(--color-primary-light);
 659   width: 100%;
 660   color: var(--color-primary);
 661   padding: $-xxs $-m;
 662 }
 663
 664 .code-editor-language-list {
 665   flex-basis: 200px;
 666   border-right: 1px solid #DDD;
 667   box-shadow: $bs-card;
 668 }
 669
 670 .code-editor-language-list input {
 671   border-radius: 0;
 672   border: 0;
 673   border-bottom: 1px solid #DDD;
 674 }
 675
 676 .code-editor-main {
 677   flex: 1;
 678   height: 100%;
 679   overflow-y: scroll;
 680 }
 681
 682 @include smaller-than($m) {
 683   .code-editor .lang-options {
 684     max-width: 100%;
 685   }
 686   .code-editor .CodeMirror {
 687     height: 200px;
 688   }
 689 }
 690
 691 .comment-box {
 692   border-radius: 4px;
 693   border: 1px solid #DDD;
 694   @include lightDark(border-color, #ddd, #000);
 695   @include lightDark(background-color, #FFF, #222);
 696   .content {
 697     font-size: 0.666em;
 698     p, ul, ol {
 699       font-size: $fs-m;
 700       margin: .5em 0;
 701     }
 702   }
 703   .actions {
 704     opacity: 0;
 705     transition: opacity ease-in-out 120ms;
 706   }
 707   &:hover .actions, &:focus-within .actions {
 708     opacity: 1;
 709   }
 710 }
 711
 712 .comment-box .header {
 713   .meta {
 714     img, a, span {
 715       display: inline-block;
 716       vertical-align: top;
 717     }
 718     a, span {
 719       padding: $-xxs 0 $-xxs 0;
 720       line-height: 1.6;
 721     }
 722     a { color: #666; }
 723     span {
 724       padding-inline-start: $-xxs;
 725     }
 726   }
 727   .text-muted {
 728     color: #999;
 729   }
 730 }
 731
 732 #tag-manager .drag-card {
 733   max-width: 500px;
 734 }
 735
 736 .permissions-table [permissions-table-toggle-all-in-row] {
 737   display: none;
 738 }
 739 .permissions-table tr:hover [permissions-table-toggle-all-in-row] {
 740   display: inline;
 741 }
 742
 743 .template-item {
 744   cursor: pointer;
 745   position: relative;
 746   &:hover, .template-item-actions button:hover {
 747     background-color: #F2F2F2;
 748   }
 749   .template-item-actions {
 750     position: absolute;
 751     top: 0;
 752     right: 0;
 753     width: 50px;
 754     height: 100%;
 755     display: flex;
 756     flex-direction: column;
 757     border-inline-start: 1px solid #DDD;
 758   }
 759   .template-item-actions button {
 760     cursor: pointer;
 761     flex: 1;
 762     background: #FFF;
 763     border: 0;
 764     border-top: 1px solid #DDD;
 765   }
 766   .template-item-actions button:first-child {
 767     border-top: 0;
 768   }
 769 }
 770
 771
 772 .dropdown-search {
 773   position: relative;
 774 }
 775 .dropdown-search-toggle-breadcrumb {
 776   border: 1px solid transparent;
 777   border-radius: 4px;
 778   line-height: normal;
 779   padding: $-xs;
 780   &:hover {
 781     border-color: #DDD;
 782   }
 783   .svg-icon {
 784     margin-inline-end: 0;
 785   }
 786 }
 787 .dropdown-search-toggle-select {
 788   display: flex;
 789   gap: $-s;
 790   line-height: normal;
 791   .svg-icon {
 792     height: 16px;
 793     margin: 0;
 794   }
 795   .avatar {
 796     height: 22px;
 797     width: 22px;
 798   }
 799   .avatar + span {
 800     max-width: 100%;
 801     overflow: hidden;
 802     text-overflow: ellipsis;
 803     white-space: nowrap;
 804   }
 805   .dropdown-search-toggle-caret {
 806     font-size: 1.15rem;
 807   }
 808 }
 809 .dropdown-search-toggle-select-label {
 810   min-width: 0;
 811   white-space: nowrap;
 812 }
 813 .dropdown-search-toggle-select-caret {
 814   font-size: 1.5rem;
 815   line-height: 0;
 816   margin-left: auto;
 817   margin-top: -2px;
 818 }
 819
 820 .dropdown-search-dropdown {
 821   box-shadow: $bs-med;
 822   overflow: hidden;
 823   min-height: 100px;
 824   width: 240px;
 825   display: none;
 826   position: absolute;
 827   z-index: 80;
 828   right: 0;
 829   top: 0;
 830   margin-top: $-m;
 831   @include rtl {
 832     right: auto;
 833     left: -$-m;
 834   }
 835   .dropdown-search-search .svg-icon {
 836     position: absolute;
 837     left: $-s;
 838     @include rtl {
 839       right: $-s;
 840       left: auto;
 841     }
 842     top: 11px;
 843     fill: #888;
 844     pointer-events: none;
 845   }
 846   .dropdown-search-list {
 847     max-height: 400px;
 848     overflow-y: scroll;
 849     text-align: start;
 850   }
 851   .dropdown-search-item {
 852     padding: $-s $-m;
 853     &:hover,&:focus {
 854       background-color: #F2F2F2;
 855       text-decoration: none;
 856     }
 857   }
 858   input, input:focus {
 859     padding-inline-start: $-xl;
 860     border-radius: 0;
 861     border: 0;
 862     border-bottom: 1px solid #DDD;
 863   }
 864   input:focus {
 865     outline: 0;
 866   }
 867 }
 868
 869 @include smaller-than($m) {
 870   .dropdown-search-dropdown {
 871     position: fixed;
 872     right: auto;
 873     left: $-m;
 874   }
 875   .dropdown-search-dropdown .dropdown-search-list {
 876     max-height: 240px;
 877   }
 878 }