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