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.6;
 17   @include smaller-than($screen-lg) {
 18     margin-top: $-m;
 19   }
 20 }
 21
 22 .md-margin-bottom {
 23   margin-bottom: $-xxl*1.6;
 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 header .menu, footer .menu {
 88   text-align: right;
 89   a {
 90     display: inline-block;
 91     padding: $-m;
 92     line-height: 1.9
 93   }
 94   span.icon {
 95     font-size: 16px;
 96     vertical-align: top;
 97     padding-right: 4px;
 98     display: inline-block;
 99     position: relative;
 100     top: 2px;
 101     svg {
 102       height: 18px;
 103       margin-top: 3px;
 104     }
 105   }
 106 }
 107
 108 header .menu a {
 109   color: #FFF;
 110 }
 111
 112 .hero a {
 113   color: #FFF;
 114   font-weight: 400;
 115   font-size: 0.9em;
 116   text-decoration: underline;
 117 }
 118
 119 header #menu-button {
 120   display: none;
 121   background-color: transparent;
 122   border: 0;
 123   box-shadow: none;
 124   padding-top: $-m;
 125 }
 126
 127 @include smaller-than($xl) {
 128   body header {
 129     padding-top: $-xxl*1.7;
 130   }
 131   header .row.fix-mobile {
 132     top: 0;
 133     position: fixed;
 134     background-color: $primary;
 135     width: 100%;
 136     z-index: 99;
 137     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 138   }
 139   header #menu-button {
 140     display: inline-block;
 141   }
 142   header .menu .inner {
 143     display: none;
 144     right: $-m;
 145     position: fixed;
 146     border-radius: 3px;
 147     width: 240px;
 148     background-color: #FFF;
 149     z-index: 55;
 150     padding: 0;
 151     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
 152     &.showing {
 153       display: block;
 154     }
 155     a {
 156       color: #444;
 157       display: block;
 158       text-align: left;
 159       border-bottom: 1px solid #EEE;
 160       padding: $-m $-m*2;
 161     }
 162     a .icon svg {
 163       fill: #444;
 164     }
 165     &:after {
 166       width: 16px;
 167       height: 16px;
 168       content: '';
 169       display: block;
 170       background-color: #FFF;
 171       transform: rotate(45deg);
 172       position: absolute;
 173       top: -6px;
 174       border-radius: 2px;
 175       right: 22px;
 176     }
 177   }
 178   footer .menu {
 179     display: none;
 180   }
 181 }
 182
 183 footer {
 184   padding-top: $-l;
 185   padding-bottom: $-l;
 186   p {
 187     padding: $-m;
 188     margin: 0;
 189   }
 190 }
 191
 192 footer, .shaded-border {
 193   border-top: 1px solid #DDD;
 194 }
 195
 196
 197 h3 > i {
 198   color: $primary;
 199   vertical-align: top;
 200   padding-top: 8px;
 201   padding-right: $-s;
 202 }
 203
 204 p > i {
 205   vertical-align: top;
 206 }
 207
 208 label {
 209   display: inline-block;
 210   margin-top: $-s;
 211   font-weight: 500;
 212 }
 213
 214 input[type=text] {
 215   font-family: $text;
 216   font-size: 14px;
 217   padding: $-xs*1.2 $-s;
 218   width: 230px;
 219   border-radius: 2px;
 220   border: 1px solid #DDD;
 221   color: #666;
 222 }
 223
 224 .demo-box {
 225   display: inline-block;
 226   background: #FFF;
 227   border: 1px solid #DDD;
 228   padding: $-xl;
 229   border-radius: 3px;
 230 }
 231
 232 .my-gallery {
 233   figure img {
 234     border: 1px solid #DDD;
 235     border-radius: 4px;
 236     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
 237     transform: translate3d(0, 0, 0);
 238     transition: all cubic-bezier(.62, .28, .23, .99) 160ms;
 239     &:hover {
 240       transform: translate3d(0, -6px, 0);
 241       box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
 242     }
 243   }
 244   figcaption {
 245     margin-bottom: .5rem;
 246   }
 247   h4 {
 248     margin-bottom: 0;
 249   }
 250 }
 251
 252
 253 .docs-content {
 254   padding-bottom: $-xxl;
 255   .edit-link {
 256     margin-top: $-xxl;
 257     display: inline-block;
 258     padding: $-s $-xl;
 259     border-radius: 24px;
 260     z-index: 1;
 261     position: relative;
 262     border: 2px solid #DDD;
 263     color: #888;
 264     transition: all ease-in-out 120ms;
 265     .icon {
 266       width: 24px;
 267       vertical-align: 4px;
 268     }
 269     svg {
 270       transition: all ease-in-out 120ms;
 271       fill: #888;
 272       height: 18px;
 273       width: 20px;
 274     }
 275   }
 276   .edit-link:hover {
 277     border-color: $primary;
 278     color: $primary;
 279     text-decoration: none;
 280     svg {
 281       fill: $primary;
 282     }
 283   }
 284   img, video {
 285     border: 1px solid $primary;
 286     border-radius: 3px;
 287   }
 288   video {
 289     cursor: pointer;
 290     margin: $-l auto;
 291     display: block;
 292     max-width: 100%;
 293   }
 294 }
 295
 296 .sidebar, .docs-index {
 297   margin-top: $-xl;
 298   h4 {
 299     padding-top: 0;
 300     font-size: 1.2em;
 301   }
 302   ul {
 303     list-style: none;
 304     margin-left: 0;
 305   }
 306   li {
 307     padding: 2px 0;
 308   }
 309 }
 310
 311 .sidebar {
 312   border-right: 2px dotted #E5E5E5;
 313 }
 314
 315 @include larger-than($xl) {
 316   .sidebar {
 317     position: sticky;
 318     top: $-m;
 319   }
 320 }
 321
 322 @include smaller-than($m) {
 323   .sidebar li a {
 324     padding: $-xs 0;
 325     display: block;
 326   }
 327 }
 328
 329
 330
 331 h2.thin-margin {
 332   margin-top: 0;
 333 }
 334
 335 #content {
 336   min-height: 70vh;
 337 }
 338
 339
 340 .blogpost-card {
 341   display: block;
 342   float: left;
 343   margin-right: $-m;
 344   margin-bottom: $-m;
 345   width: 280px;
 346   background-color: #FFF;
 347   border-radius: 4px;
 348   overflow: hidden;
 349   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
 350   a {
 351     display: block;
 352   }
 353   .image {
 354     height: 160px;
 355     background-size: cover;
 356   }
 357   .text {
 358     padding: $-m;
 359     min-height: 80px;
 360   }
 361   &:hover {
 362     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
 363   }
 364 }
 365
 366
 367 input[type="text"].doc-search-input {
 368   background-color: transparent;
 369   border: 2px solid #FFF;
 370   color: #FFF;
 371   background-color: $primary;
 372   border-radius: 30px;
 373   width: 300px;
 374   margin-bottom: $-m;
 375   margin-top: $-xs;
 376   &::-webkit-input-placeholder { /* Chrome */
 377     color: rgba(255, 255, 255, 0.7);
 378   }
 379   &:-ms-input-placeholder { /* IE 10+ */
 380     color: rgba(255, 255, 255, 0.7);
 381   }
 382   &::-moz-placeholder { /* Firefox 19+ */
 383     color: rgba(255, 255, 255, 0.7);
 384     opacity: 1;
 385   }
 386   &:-moz-placeholder { /* Firefox 4 - 18 */
 387     color: rgba(255, 255, 255, 0.7);
 388     opacity: 1;
 389   }
 390   &:focus, &:active {
 391     outline: none;
 392   }
 393 }