BookStack Code Mirror - website/blob - themes/bookstack/sass/styles.scss

   1 @import "reset";
   2 @import "variables";
   3 @import "mixins";
   4 @import "html";
   5 @import "code";
   6 @import "codemirror";
   7 @import "text";
   8 @import "grid";
   9 @import "blocks";
  10 @import "buttons";
  11 @import "header";
  12 @import "blog";
  13 @import "photoswipe";
  14
  15 .md-margin-top {
  16   margin-top: $-xxl*1.4;
  17   @include smaller-than($screen-lg) {
  18     margin-top: $-m;
  19   }
  20 }
  21
  22 .md-margin-bottom {
  23   margin-bottom: $-xxl*1.4;
  24   @include smaller-than($screen-lg) {
  25     margin-bottom: $-m;
  26   }
  27 }
  28
  29 .screenshot-container-parent {
  30   perspective: 800px;
  31   z-index: 5;
  32   perspective-origin: 50% 50%;
  33 }
  34
  35 @keyframes slow-rotate {
  36   from {
  37       transform: rotateY(-10deg);
  38   }
  39   to {
  40     transform: rotateY(0deg);
  41   }
  42 }
  43
  44 .screenshot-container {
  45   animation: slow-rotate ease-in-out 1s;
  46   border-radius: 4px;
  47   display: inline-block;
  48   overflow: hidden;
  49   box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.2);
  50   border: 3px solid #DDD;
  51   position: absolute;
  52   transform: rotateY(0) translateX(0);
  53   transform-style: preserve-3d;
  54   transition: all ease-in-out 280ms;
  55   transform-origin: 50% 50%;
  56   z-index: 50;
  57   &:hover {
  58     transform: rotateY(-10deg) translateX(20px);
  59     box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  60   }
  61   .window-row {
  62     line-height: 1;
  63     background-color: #DDD;
  64     padding: 2px 4px;
  65     .window-option {
  66       display: inline-block;
  67       background-color: red;
  68       width: 8px;
  69       margin-right: 2px;
  70       height: 8px;
  71       border-radius: 50%;
  72     }
  73   }
  74   @include smaller-than($screen-lg) {
  75     position: relative;
  76     width: 80%;
  77     display: block;
  78     margin-bottom: $-l;
  79   }
  80 }
  81 .screenshot {
  82   display: block;
  83   max-width: 100%;
  84   border-radius: 2px;
  85 }
  86
  87 .sponsor-list {
  88   display: flex;
  89   align-items: center;
  90   justify-content: center;
  91   flex-wrap: wrap;
  92   a {
  93     display: block;
  94     margin: $-s $-xl;
  95     min-width: 240px;
  96   }
  97 }
  98
  99 footer .menu {
 100   text-align: right;
 101   a {
 102     display: inline-block;
 103     padding: $-m;
 104     line-height: 1.9
 105   }
 106   span.icon {
 107     font-size: 16px;
 108     vertical-align: top;
 109     padding-right: 4px;
 110     display: inline-block;
 111     position: relative;
 112     top: 2px;
 113     svg {
 114       height: 18px;
 115       margin-top: 3px;
 116     }
 117   }
 118 }
 119
 120 .hero a {
 121   color: #FFF;
 122   font-weight: 400;
 123   font-size: 0.9em;
 124   text-decoration: underline;
 125 }
 126
 127 @include smaller-than($xl) {
 128   footer .menu {
 129     display: none;
 130   }
 131 }
 132
 133 footer {
 134   padding-top: $-l;
 135   padding-bottom: $-l;
 136   p {
 137     font-size: 0.9rem;
 138     padding: $-l 0;
 139     margin: 0;
 140   }
 141 }
 142
 143 footer, .shaded-border {
 144   border-top: 1px solid #DDD;
 145 }
 146
 147
 148 h3 > i {
 149   color: $primary;
 150   vertical-align: top;
 151   padding-top: 8px;
 152   padding-right: $-s;
 153 }
 154
 155 p > i {
 156   vertical-align: top;
 157 }
 158
 159 label {
 160   display: inline-block;
 161   margin-top: $-s;
 162   font-weight: 500;
 163 }
 164
 165 input[type=text] {
 166   font-family: $text;
 167   font-size: 14px;
 168   padding: $-xs*1.2 $-s;
 169   width: 230px;
 170   border-radius: 2px;
 171   border: 1px solid #DDD;
 172   color: #666;
 173 }
 174
 175 .demo-box {
 176   display: inline-block;
 177   background: #FFF;
 178   border: 1px solid #DDD;
 179   padding: $-xl;
 180   border-radius: 3px;
 181 }
 182
 183 .my-gallery {
 184   figure img {
 185     border: 1px solid #DDD;
 186     border-radius: 4px;
 187     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
 188     transform: translate3d(0, 0, 0);
 189     transition: all cubic-bezier(.62, .28, .23, .99) 160ms;
 190     &:hover {
 191       transform: translate3d(0, -6px, 0);
 192       box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
 193     }
 194   }
 195   figcaption {
 196     margin-bottom: .5rem;
 197   }
 198   h4 {
 199     margin-bottom: 0;
 200   }
 201 }
 202
 203
 204 .docs-content {
 205   padding-bottom: $-xxl;
 206   .edit-link {
 207     margin-top: $-xxl;
 208     display: inline-block;
 209     padding: $-s $-xl;
 210     border-radius: 24px;
 211     z-index: 1;
 212     position: relative;
 213     border: 2px solid #DDD;
 214     color: #888;
 215     transition: all ease-in-out 120ms;
 216     .icon {
 217       width: 24px;
 218       vertical-align: 4px;
 219     }
 220     svg {
 221       transition: all ease-in-out 120ms;
 222       fill: #888;
 223       height: 18px;
 224       width: 20px;
 225     }
 226   }
 227   .edit-link:hover {
 228     border-color: $primary;
 229     color: $primary;
 230     text-decoration: none;
 231     svg {
 232       fill: $primary;
 233     }
 234   }
 235   img, video {
 236     border: 1px solid $primary;
 237     border-radius: 3px;
 238     max-width: 100%;
 239   }
 240   video {
 241     cursor: pointer;
 242     margin: $-l auto;
 243     display: block;
 244   }
 245 }
 246
 247 .docs-section-title {
 248   font-size: 2rem;
 249   font-weight: 400;
 250   color: #444;
 251 }
 252
 253 .sidebar, .docs-index {
 254   margin-top: $-xl;
 255   h4 {
 256     padding-top: 0;
 257     font-size: 1.2em;
 258   }
 259   ul {
 260     list-style: none;
 261     margin-left: 0;
 262   }
 263   li {
 264     padding: 2px 0;
 265   }
 266 }
 267
 268 .sidebar .col-md-6 {
 269   width: 100%;
 270   ul {
 271     margin-bottom: 0;
 272   }
 273 }
 274
 275 .docs-index-row {
 276   display: flex;
 277   flex-wrap: wrap;
 278   column-gap: 5rem;
 279   row-gap: .5rem;
 280   justify-content: left;
 281 }
 282
 283 .sidebar {
 284   border-right: 2px dotted #E5E5E5;
 285 }
 286
 287 .sidebar-inner {
 288   display: none;
 289 }
 290 .sidebar-inner.mobile {
 291   display: block;
 292 }
 293
 294
 295 @include larger-than($l) {
 296   .sidebar {
 297     position: sticky;
 298     top: $-m;
 299   }
 300   .sidebar-inner {
 301     display: block;
 302   }
 303   .sidebar-inner.mobile {
 304     display: none;
 305   }
 306 }
 307
 308
 309 h2.thin-margin {
 310   margin-top: 0;
 311 }
 312
 313 #content {
 314   min-height: 70vh;
 315 }
 316
 317
 318 .blogpost-cards {
 319   display: flex;
 320   gap: 32px;
 321   flex-wrap: wrap;
 322   margin-top: $-xl;
 323 }
 324
 325 .blogpost-card {
 326   display: block;
 327   margin-bottom: $-m;
 328   flex: 1;
 329   min-width: 280px;
 330   max-width: 320px;
 331   background-color: #FFF;
 332   border-radius: 4px;
 333   overflow: hidden;
 334   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
 335   a {
 336     display: block;
 337   }
 338   .image {
 339     height: 160px;
 340   }
 341   .image img {
 342     object-fit: cover;
 343     height: 100%;
 344     width: 100%;
 345   }
 346   .text {
 347     padding: $-m;
 348     font-size: 1.1rem;
 349     font-weight: 500;
 350   }
 351   &:hover {
 352     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
 353   }
 354 }
 355
 356 .shaded .hero h1 {
 357   font-size: 4rem;
 358   font-weight: 500;
 359 }
 360
 361
 362 header input[type="search"] {
 363   background-color: transparent;
 364   border: 2px solid #FFF;
 365   color: #FFF;
 366   background-color: transparent;
 367   border-radius: 30px;
 368   width: 280px;
 369   margin-block: $-m;
 370   font-size: 14px;
 371   padding: 7.2px 12px;
 372   &::-webkit-input-placeholder { /* Chrome */
 373     color: rgba(255, 255, 255, 0.7);
 374   }
 375   &::-moz-placeholder { /* Firefox 19+ */
 376     color: rgba(255, 255, 255, 0.7);
 377     opacity: 1;
 378   }
 379   &:-moz-placeholder { /* Firefox 4 - 18 */
 380     color: rgba(255, 255, 255, 0.7);
 381     opacity: 1;
 382   }
 383   &:focus, &:active {
 384     outline: none;
 385   }
 386 }
 387 #site-search-form {
 388   position: relative;
 389 }
 390 #site-search-form dialog {
 391   position: absolute;
 392   left: -10px;
 393   top: 100%;
 394   margin-top: -14px;
 395   border: 0;
 396   margin-inline: 0;
 397   background-color: #FFF;
 398   box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.2);
 399   border-radius: 4px;
 400   width: 300px;
 401   padding: 0;
 402   min-height: 42px;
 403   a {
 404     display: block;
 405     padding: 0.25rem 1rem 0.25rem 2rem;
 406     border-bottom: 1px solid #EEE;
 407     color: #222;
 408     font-size: 15px;
 409   }
 410   a:hover {
 411     color: $primary;
 412     text-decoration: none;
 413     background-color: rgba($primary, 0.1);
 414   }
 415   a:last-child {
 416     border-bottom: 0;
 417   }
 418   strong.search-category-title {
 419     padding: .5rem 1rem .25rem 1rem;
 420     color: #666;
 421     display: block;
 422     font-size: 14px;
 423   }
 424 }
 425
 426 // Loader from https://loading.io/css/
 427 .lds-ellipsis {
 428   display: block;
 429   position: relative;
 430   width: 80px;
 431   height: 80px;
 432   margin: 0 auto;
 433 }
 434 .lds-ellipsis div {
 435   position: absolute;
 436   top: 33px;
 437   width: 13px;
 438   height: 13px;
 439   border-radius: 50%;
 440   background: $primary;
 441   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 442 }
 443 .lds-ellipsis div:nth-child(1) {
 444   left: 8px;
 445   animation: lds-ellipsis1 0.6s infinite;
 446 }
 447 .lds-ellipsis div:nth-child(2) {
 448   left: 8px;
 449   animation: lds-ellipsis2 0.6s infinite;
 450 }
 451 .lds-ellipsis div:nth-child(3) {
 452   left: 32px;
 453   animation: lds-ellipsis2 0.6s infinite;
 454 }
 455 .lds-ellipsis div:nth-child(4) {
 456   left: 56px;
 457   animation: lds-ellipsis3 0.6s infinite;
 458 }
 459 @keyframes lds-ellipsis1 {
 460   0% {
 461     transform: scale(0);
 462   }
 463   100% {
 464     transform: scale(1);
 465   }
 466 }
 467 @keyframes lds-ellipsis3 {
 468   0% {
 469     transform: scale(1);
 470   }
 471   100% {
 472     transform: scale(0);
 473   }
 474 }
 475 @keyframes lds-ellipsis2 {
 476   0% {
 477     transform: translate(0, 0);
 478   }
 479   100% {
 480     transform: translate(24px, 0);
 481   }
 482 }
 483
 484 .youtube-embed-wrap {
 485   margin-bottom: 1rem;
 486 }
 487 iframe[src^="https://www.youtube-nocookie.com"],
 488 .youtube-embed-wrap a {
 489   max-width: 100%;
 490   aspect-ratio: 16/9;
 491   height: auto;
 492   overflow: hidden;
 493   border-radius: 3px;
 494   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
 495   background-color: #222;
 496 }
 497
 498 .youtube-embed-wrap a {
 499   display: block;
 500   position: relative;
 501 }
 502 .youtube-embed-wrap a::before,
 503 .youtube-embed-wrap a::after {
 504   content: '';
 505   left: 0;
 506   position: absolute;
 507   width: 100%;
 508   height: 100%;
 509   transition: opacity ease-in-out 120ms;
 510 }
 511 .youtube-embed-wrap a::before {
 512   background-color: $primary;
 513   opacity: 0.3;
 514 }
 515 .youtube-embed-wrap a::after {
 516   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' fill='%23FFFFFF'%3E%3Cpath d='M19.15 32.5 32.5 24l-13.35-8.5ZM24 44q-4.1 0-7.75-1.575-3.65-1.575-6.375-4.3-2.725-2.725-4.3-6.375Q4 28.1 4 24q0-4.15 1.575-7.8 1.575-3.65 4.3-6.35 2.725-2.7 6.375-4.275Q19.9 4 24 4q4.15 0 7.8 1.575 3.65 1.575 6.35 4.275 2.7 2.7 4.275 6.35Q44 19.85 44 24q0 4.1-1.575 7.75-1.575 3.65-4.275 6.375t-6.35 4.3Q28.15 44 24 44Zm0-3q7.1 0 12.05-4.975Q41 31.05 41 24q0-7.1-4.95-12.05Q31.1 7 24 7q-7.05 0-12.025 4.95Q7 16.9 7 24q0 7.05 4.975 12.025Q16.95 41 24 41Zm0-17Z'/%3E%3C/svg%3E");
 517   background-repeat: no-repeat;
 518   opacity: 0.8;
 519   background-position: 50% 50%;
 520   background-size: 100px 100px;
 521 }
 522 .youtube-embed-wrap a:hover::before {
 523   opacity: 0.4;
 524 }
 525 .youtube-embed-wrap a:hover::after {
 526   opacity: 1;
 527 }
 528 .youtube-embed-wrap a img {
 529   object-fit: cover;
 530   width: 100%;
 531 }
 532
 533 .price-table {
 534   display: flex;
 535   flex-wrap: wrap;
 536   gap: 2rem;
 537   margin-bottom: $-xl;
 538   justify-content: center;
 539   margin-left: -20vw;
 540   margin-right: -20vw;
 541   // align-items: flex-start;
 542 }
 543 @include smaller-than(1200px) {
 544   .price-table {
 545     margin-left: 0;
 546     margin-right: 0;
 547   }
 548 }
 549
 550 .price-table-offer {
 551   box-shadow: 0 1px 4px 0 rgba(94, 94, 94, 0.26);
 552   border-radius: 3px;
 553   min-width: 280px;
 554   flex-basis: 360px;
 555   display: flex;
 556   flex-direction: column;
 557 }
 558 .price-table-item, .price-table-header, .price-table-action {
 559   padding: .5rem 1rem;
 560 }
 561 .price-table-item {
 562   border-bottom: 1px solid #EEE;
 563   position: relative;
 564   padding-left: 3rem;
 565 }
 566 .price-table-item:before {
 567   content: '';
 568   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23329f71"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
 569   width: 16px;
 570   height: 16px;
 571   display: block;
 572   position: absolute;
 573   left: 1rem;
 574   top: .8rem;
 575 }
 576 .price-table-item.price-table-item-negative:before {
 577   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888888"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/></svg>');
 578 }
 579 .price-table-item-highlight {
 580   font-weight: 700;
 581 }
 582 .price-table-item-highlight small {
 583   font-weight: 400;
 584 }
 585 .price-table-header {
 586   background-color: rgba($primary, 0.1);
 587 }
 588 .price-table-header h3 {
 589   font-size: 1.2rem;
 590   font-weight: 700;
 591   margin-bottom: .2em;
 592 }
 593 .price-table-header .price {
 594   font-weight: 700;
 595   color: #666;
 596   margin-bottom: .5rem;
 597 }
 598 .price-table-action {
 599   font-weight: 700;
 600   background-color: rgba($primary, 0.1);
 601   text-align: center;
 602   margin-top: auto;
 603 }
 604 .price-table-action a {
 605   display: block;
 606 }
 607
 608 .content-card-grid {
 609   display: grid;
 610   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 611   gap: 1rem;
 612 }
 613 .content-card-item {
 614   padding: 1rem;
 615   border: 1px solid #DDD;
 616   border-radius: 4px;
 617   display: flex;
 618   gap: 1rem;
 619   color: #222;
 620   svg {
 621     width: 32px;
 622     height: 32px;
 623     padding: 6px;
 624     border-radius: 50%;
 625     background-color: rgba($primary, 0.1);
 626     fill: $primary;
 627   }
 628   &:hover {
 629     background-color: rgba($primary, 0.1);
 630     text-decoration: none;
 631     border-color: #e5f1f8;
 632   }
 633   .content-card-item-title {
 634     font-weight: 700;
 635   }
 636   p {
 637     margin-bottom: 0;
 638     font-size: .9rem;
 639     color: #666;
 640   }
 641 }
 642
 643 .dual-column-dual-level-toc {
 644   columns: 2;
 645   list-style: none;
 646   margin: 0;
 647   > li {
 648     break-inside: avoid;
 649   }
 650   > li > a {
 651     color: $text-dark;
 652     font-weight: bold;
 653   }
 654   > li > ul {
 655     margin-bottom: 1rem;
 656   }
 657
 658   @include smaller-than($s) {
 659     columns: 1;
 660   }
 661 }
 662
 663 .hack-meta {
 664   list-style: none;
 665   margin: 0;
 666   padding: 0;
 667   display: flex;
 668   flex-wrap: wrap;
 669   column-gap: 1rem;
 670   margin-bottom: 1.2rem;
 671   li {
 672     display: inline-block;
 673     color: #666;
 674     font-size: .9rem;
 675   }
 676 }
 677
 678 .hacks-content {
 679   margin-bottom: 3rem;
 680   h1 {
 681     margin-bottom: .5rem;
 682   }
 683   h1 + p {
 684     margin-top: 1rem;
 685   }
 686 }
 687
 688 .hack-file-wrapper {
 689   background-color: #FFF;
 690   border: 1.5px solid #e2e2e2;
 691   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
 692   border-radius: 4px;
 693   margin-bottom: 1rem;
 694   .chroma {
 695     margin: -1px;
 696   }
 697   summary {
 698     list-style: none;
 699     font-size: .9rem;
 700     cursor: pointer;
 701   }
 702   summary::-webkit-details-marker {
 703     display: none;
 704   }
 705 }
 706
 707 .hack-file-block {
 708   display: flex;
 709   justify-content: space-between;
 710   align-items: center;
 711 }
 712 .hack-file-block-filename {
 713   padding: .5rem 1rem;
 714   font-weight: bold;
 715   font-size: 1rem;
 716   &:before {
 717     display: inline-block;
 718     width: 1rem;
 719     content: "▸ ";
 720   }
 721 }
 722 details[open] .hack-file-block-filename:before {
 723   content: "▾ ";
 724 }
 725 .hack-file-block-type {
 726   padding: 0 .5rem;
 727 }
 728 .hack-file-block-type a {
 729   display: inline-flex;
 730   gap: .2em;
 731   align-items: center;
 732   padding: .4rem .5rem;
 733   font-size: .9rem;
 734   font-weight: 400;
 735 }
 736
 737 .hack-warning {
 738   color: #b7560f;
 739   background-color: #fce7d8;
 740   border: 1px solid #ed7721;
 741   border-radius: 4px;
 742   padding: .5rem 1rem;
 743   margin: 1.5rem 0 0 0;
 744   display: flex;
 745   gap: 1rem;
 746   line-height: 1.3;
 747   font-size: .9rem;
 748   svg {
 749     width: 1.6em;
 750   }
 751 }
 752
 753 .hack-box-list {
 754   display: flex;
 755   flex-direction: row;
 756   flex-wrap: wrap;
 757   gap: 1rem;
 758 }
 759
 760 .hack-box {
 761   background-color: #FFF;
 762   border: 1.5px solid #e2e2e2;
 763   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
 764   border-radius: 4px;
 765   text-decoration: none;
 766   display: flex;
 767   flex-direction: column;
 768   color: #222;
 769   min-width: 180px;
 770   flex-basis: 320px;
 771   flex-grow: 1;
 772   h2 {
 773     font-size: 1.4rem;
 774     font-weight: bold;
 775     padding: 0 1rem;
 776   }
 777   .hack-excerpt {
 778     display: -webkit-box;
 779     padding: 0 1rem;
 780     -webkit-line-clamp: 2;
 781     -webkit-box-orient: vertical;
 782     overflow: hidden;
 783     margin-bottom: .5rem;
 784     p {
 785       margin-bottom: 0;
 786     }
 787   }
 788   .hack-meta {
 789     padding: 0 1rem;
 790     font-size: .9rem;
 791     color: #444;
 792     margin-top: auto;
 793   }
 794   &:hover {
 795     text-decoration: none;
 796     box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);
 797     color: #000;
 798     h2 {
 799       color: $primary;
 800       text-decoration: underline;
 801     }
 802   }
 803 }