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