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