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