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