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: 6rem;
 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 input[type="text"].doc-search-input {
 363   background-color: transparent;
 364   border: 2px solid #FFF;
 365   color: #FFF;
 366   background-color: transparent;
 367   border-radius: 30px;
 368   width: 300px;
 369   margin-bottom: $-m;
 370   margin-top: $-xs;
 371   &::-webkit-input-placeholder { /* Chrome */
 372     color: rgba(255, 255, 255, 0.7);
 373   }
 374   &::-moz-placeholder { /* Firefox 19+ */
 375     color: rgba(255, 255, 255, 0.7);
 376     opacity: 1;
 377   }
 378   &:-moz-placeholder { /* Firefox 4 - 18 */
 379     color: rgba(255, 255, 255, 0.7);
 380     opacity: 1;
 381   }
 382   &:focus, &:active {
 383     outline: none;
 384   }
 385 }
 386
 387 .youtube-embed-wrap {
 388   margin-bottom: 1rem;
 389 }
 390 iframe[src^="https://www.youtube-nocookie.com"],
 391 .youtube-embed-wrap a {
 392   max-width: 100%;
 393   aspect-ratio: 16/9;
 394   height: auto;
 395   overflow: hidden;
 396   border-radius: 3px;
 397   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
 398   background-color: #222;
 399 }
 400
 401 .youtube-embed-wrap a {
 402   display: block;
 403   position: relative;
 404 }
 405 .youtube-embed-wrap a::before,
 406 .youtube-embed-wrap a::after {
 407   content: '';
 408   left: 0;
 409   position: absolute;
 410   width: 100%;
 411   height: 100%;
 412   transition: opacity ease-in-out 120ms;
 413 }
 414 .youtube-embed-wrap a::before {
 415   background-color: $primary;
 416   opacity: 0.3;
 417 }
 418 .youtube-embed-wrap a::after {
 419   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");
 420   background-repeat: no-repeat;
 421   opacity: 0.8;
 422   background-position: 50% 50%;
 423   background-size: 100px 100px;
 424 }
 425 .youtube-embed-wrap a:hover::before {
 426   opacity: 0.4;
 427 }
 428 .youtube-embed-wrap a:hover::after {
 429   opacity: 1;
 430 }
 431 .youtube-embed-wrap a img {
 432   object-fit: cover;
 433   width: 100%;
 434 }
 435
 436 .meilisearch-autocomplete .docs-searchbar-footer {
 437   font-size: 0.8rem;
 438 }
 439 .meilisearch-autocomplete .docs-searchbar-footer-logo,
 440 .meilisearch-autocomplete .docs-searchbar-footer {
 441   vertical-align: top !important;
 442 }
 443
 444 .meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
 445   color: #53555a !important;
 446 }
 447
 448 .price-table {
 449   display: flex;
 450   flex-wrap: wrap;
 451   gap: 2rem;
 452   margin-bottom: $-xl;
 453   justify-content: center;
 454   margin-left: -20vw;
 455   margin-right: -20vw;
 456   // align-items: flex-start;
 457 }
 458 @include smaller-than(1200px) {
 459   .price-table {
 460     margin-left: 0;
 461     margin-right: 0;
 462   }
 463 }
 464
 465 .price-table-offer {
 466   box-shadow: 0 1px 4px 0 rgba(94, 94, 94, 0.26);
 467   border-radius: 3px;
 468   min-width: 280px;
 469   flex-basis: 360px;
 470   display: flex;
 471   flex-direction: column;
 472 }
 473 .price-table-item, .price-table-header, .price-table-action {
 474   padding: .5rem 1rem;
 475 }
 476 .price-table-item {
 477   border-bottom: 1px solid #EEE;
 478   position: relative;
 479   padding-left: 3rem;
 480 }
 481 .price-table-item:before {
 482   content: '';
 483   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>');
 484   width: 16px;
 485   height: 16px;
 486   display: block;
 487   position: absolute;
 488   left: 1rem;
 489   top: .8rem;
 490 }
 491 .price-table-item.price-table-item-negative:before {
 492   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>');
 493 }
 494 .price-table-item-highlight {
 495   font-weight: 700;
 496 }
 497 .price-table-item-highlight small {
 498   font-weight: 400;
 499 }
 500 .price-table-header {
 501   background-color: rgba($primary, 0.1);
 502 }
 503 .price-table-header h3 {
 504   font-size: 1.2rem;
 505   font-weight: 700;
 506   margin-bottom: .2em;
 507 }
 508 .price-table-header .price {
 509   font-weight: 700;
 510   color: #666;
 511   margin-bottom: .5rem;
 512 }
 513 .price-table-action {
 514   font-weight: 700;
 515   background-color: rgba($primary, 0.1);
 516   text-align: center;
 517   margin-top: auto;
 518 }
 519 .price-table-action a {
 520   display: block;
 521 }
 522
 523 .content-card-grid {
 524   display: grid;
 525   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 526   gap: 1rem;
 527 }
 528 .content-card-item {
 529   padding: 1rem;
 530   border: 1px solid #DDD;
 531   border-radius: 4px;
 532   display: flex;
 533   gap: 1rem;
 534   color: #222;
 535   svg {
 536     width: 32px;
 537     height: 32px;
 538     padding: 6px;
 539     border-radius: 50%;
 540     background-color: rgba($primary, 0.1);
 541     fill: $primary;
 542   }
 543   &:hover {
 544     background-color: rgba($primary, 0.1);
 545     text-decoration: none;
 546     border-color: #e5f1f8;
 547   }
 548   .content-card-item-title {
 549     font-weight: 700;
 550   }
 551   p {
 552     margin-bottom: 0;
 553     font-size: .9rem;
 554     color: #666;
 555   }
 556 }