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