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