]> BookStack Code Mirror - website/blob - themes/bookstack/sass/styles.scss
b8deea4e03116c01f5cc8e818fbb921581a197f4
[website] / 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 header .menu, 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 header .menu a {
121   color: #FFF;
122 }
123
124 .hero a {
125   color: #FFF;
126   font-weight: 400;
127   font-size: 0.9em;
128   text-decoration: underline;
129 }
130
131 header #menu-button {
132   display: none;
133   background-color: transparent;
134   border: 0;
135   box-shadow: none;
136   padding-top: $-m;
137 }
138
139 @include smaller-than($xl) {
140   body header {
141     padding-top: $-xxl*1.7;
142   }
143   header .row.fix-mobile {
144     top: 0;
145     position: fixed;
146     background-color: $primary;
147     width: 100%;
148     z-index: 99;
149     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
150   }
151   header #menu-button {
152     display: inline-block;
153   }
154   header .menu .inner {
155     display: none;
156     right: $-m;
157     position: fixed;
158     border-radius: 3px;
159     width: 240px;
160     background-color: #FFF;
161     z-index: 55;
162     padding: 0;
163     box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
164     &.showing {
165       display: block;
166     }
167     a {
168       color: #444;
169       display: block;
170       text-align: left;
171       border-bottom: 1px solid #EEE;
172       padding: $-m $-m*2;
173     }
174     a .icon svg {
175       fill: #444;
176     }
177     &:after {
178       width: 16px;
179       height: 16px;
180       content: '';
181       display: block;
182       background-color: #FFF;
183       transform: rotate(45deg);
184       position: absolute;
185       top: -6px;
186       border-radius: 2px;
187       right: 22px;
188     }
189   }
190   footer .menu {
191     display: none;
192   }
193 }
194
195 footer {
196   padding-top: $-l;
197   padding-bottom: $-l;
198   p {
199     padding: $-m 0;
200     margin: 0;
201   }
202 }
203
204 footer, .shaded-border {
205   border-top: 1px solid #DDD;
206 }
207
208
209 h3 > i {
210   color: $primary;
211   vertical-align: top;
212   padding-top: 8px;
213   padding-right: $-s;
214 }
215
216 p > i {
217   vertical-align: top;
218 }
219
220 label {
221   display: inline-block;
222   margin-top: $-s;
223   font-weight: 500;
224 }
225
226 input[type=text] {
227   font-family: $text;
228   font-size: 14px;
229   padding: $-xs*1.2 $-s;
230   width: 230px;
231   border-radius: 2px;
232   border: 1px solid #DDD;
233   color: #666;
234 }
235
236 .demo-box {
237   display: inline-block;
238   background: #FFF;
239   border: 1px solid #DDD;
240   padding: $-xl;
241   border-radius: 3px;
242 }
243
244 .my-gallery {
245   figure img {
246     border: 1px solid #DDD;
247     border-radius: 4px;
248     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
249     transform: translate3d(0, 0, 0);
250     transition: all cubic-bezier(.62, .28, .23, .99) 160ms;
251     &:hover {
252       transform: translate3d(0, -6px, 0);
253       box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
254     }
255   }
256   figcaption {
257     margin-bottom: .5rem;
258   }
259   h4 {
260     margin-bottom: 0;
261   }
262 }
263
264
265 .docs-content {
266   padding-bottom: $-xxl;
267   .edit-link {
268     margin-top: $-xxl;
269     display: inline-block;
270     padding: $-s $-xl;
271     border-radius: 24px;
272     z-index: 1;
273     position: relative;
274     border: 2px solid #DDD;
275     color: #888;
276     transition: all ease-in-out 120ms;
277     .icon {
278       width: 24px;
279       vertical-align: 4px;
280     }
281     svg {
282       transition: all ease-in-out 120ms;
283       fill: #888;
284       height: 18px;
285       width: 20px;
286     }
287   }
288   .edit-link:hover {
289     border-color: $primary;
290     color: $primary;
291     text-decoration: none;
292     svg {
293       fill: $primary;
294     }
295   }
296   img, video {
297     border: 1px solid $primary;
298     border-radius: 3px;
299     max-width: 100%;
300   }
301   video {
302     cursor: pointer;
303     margin: $-l auto;
304     display: block;
305   }
306 }
307
308 .docs-section-title {
309   font-size: 2rem;
310   font-weight: 300;
311 }
312
313 .sidebar, .docs-index {
314   margin-top: $-xl;
315   h4 {
316     padding-top: 0;
317     font-size: 1.2em;
318   }
319   ul {
320     list-style: none;
321     margin-left: 0;
322   }
323   li {
324     padding: 2px 0;
325   }
326 }
327
328 .sidebar .col-md-6 {
329   width: 100%;
330   ul {
331     margin-bottom: 0;
332   }
333 }
334
335 .docs-index-row {
336   display: flex;
337   flex-wrap: wrap;
338   column-gap: 6rem;
339   row-gap: .5rem;
340   justify-content: left;
341 }
342
343 .sidebar {
344   border-right: 2px dotted #E5E5E5;
345 }
346
347 .sidebar-inner {
348   display: none;
349 }
350 .sidebar-inner.mobile {
351   display: block;
352 }
353
354
355 @include larger-than($l) {
356   .sidebar {
357     position: sticky;
358     top: $-m;
359   }
360   .sidebar-inner {
361     display: block;
362   }
363   .sidebar-inner.mobile {
364     display: none;
365   }
366 }
367
368
369 h2.thin-margin {
370   margin-top: 0;
371 }
372
373 #content {
374   min-height: 70vh;
375 }
376
377
378 .blogpost-cards {
379   display: flex;
380   gap: 32px;
381   flex-wrap: wrap;
382   margin-top: $-xl;
383 }
384
385 .blogpost-card {
386   display: block;
387   margin-bottom: $-m;
388   flex: 1;
389   min-width: 280px;
390   max-width: 320px;
391   background-color: #FFF;
392   border-radius: 4px;
393   overflow: hidden;
394   box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
395   a {
396     display: block;
397   }
398   .image {
399     height: 160px;
400     background-size: cover;
401   }
402   .text {
403     padding: $-m;
404     font-size: 1.1rem;
405     font-weight: 500;
406   }
407   &:hover {
408     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
409   }
410 }
411
412 .about-page {
413   h1 {
414     font-size: 4rem;
415     font-weight: 500;
416   }
417 }
418
419
420 input[type="text"].doc-search-input {
421   background-color: transparent;
422   border: 2px solid #FFF;
423   color: #FFF;
424   background-color: $primary;
425   border-radius: 30px;
426   width: 300px;
427   margin-bottom: $-m;
428   margin-top: $-xs;
429   &::-webkit-input-placeholder { /* Chrome */
430     color: rgba(255, 255, 255, 0.7);
431   }
432   &:-ms-input-placeholder { /* IE 10+ */
433     color: rgba(255, 255, 255, 0.7);
434   }
435   &::-moz-placeholder { /* Firefox 19+ */
436     color: rgba(255, 255, 255, 0.7);
437     opacity: 1;
438   }
439   &:-moz-placeholder { /* Firefox 4 - 18 */
440     color: rgba(255, 255, 255, 0.7);
441     opacity: 1;
442   }
443   &:focus, &:active {
444     outline: none;
445   }
446 }
447
448 iframe[src^="https://www.youtube-nocookie.com"] {
449   max-width: 100%;
450   aspect-ratio: 16/9;
451   height: auto;
452   overflow: hidden;
453   border-radius: 3px;
454   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
455   background-color: #222;
456 }
457
458 input[type="text"].blog-search-input {
459   border: 2px solid #BBB;
460   color: #222;
461   width: 300px;
462   margin-bottom: $-s;
463   margin-top: $-m;
464   border-radius: 4px;
465 }
466
467 .meilisearch-autocomplete .docs-searchbar-footer-logo,
468 .meilisearch-autocomplete .docs-searchbar-footer {
469   vertical-align: top !important;
470 }
471
472 .meilisearch-autocomplete .docs-searchbar-suggestion--subcategory-column {
473   color: #53555a !important;
474 }