xref: /template/mikio/assets/mikio.less (revision 7a4050d36454df91128e1e8455caf6bc268b38bd) 
1/**
2 * DokuWiki Mikio Template CSS
3 *
4 * @link    http://dokuwiki.org/template:mikio
5 * @author  James Collins <james.collins@outlook.com.au>
6 * @license GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
7 */
8
9/* Vendor Prefixes */
10.mikio-user-select(@value: none) {
11    -webkit-user-select: @value;
12    -moz-user-select: @value;
13    -ms-user-select: @value;
14}
15
16.mikio-appearance(@value: none) {
17    -webkit-appearance: @value;
18    -moz-appearance: @value;
19    -ms-appearance: @value;
20}
21
22.mikio-transition(@value: all 0s ease 0s) {
23    -webkit-transition: @value;
24    transition: @value;
25}
26
27.mikio-text-decoration(@value: none) {
28    -webkit-text-decoration: @value;
29    text-decoration: @value;
30}
31
32.mikio-sticky {
33    position: -webkit-sticky;
34    position: sticky;
35}
36
37.mikio-pre-wrap {
38    white-space: pre-wrap;
39    white-space: -moz-pre-wrap;
40    white-space: -pre-wrap;
41    white-space: -o-pre-wrap;
42}
43
44
45/* Containers */
46html {
47    overflow-x: auto;
48    overflow-y: scroll;
49    display: block;
50    padding: 0;
51    font-size: @ini_font_size;
52    line-height: @ini_line_height;
53}
54
55// body.mikio {
56body {
57    display: flex;
58    flex-direction: column;
59    min-height: 100vh;
60    font-family: @ini_font_family;
61    letter-spacing: -.01em;
62    padding: 0;
63}
64
65html, body {
66    background-color: @ini_background;
67    color: @ini_text;
68    margin: 0;
69}
70
71#dokuwiki__site {
72    min-height: 100vh;
73}
74
75.mikio .site {
76    min-height: 100vh;
77    display: flex;
78    flex-direction: column;
79}
80
81.mikio-page-topheader {
82    padding: 0 2rem;
83    border-bottom: 1px solid @ini_navbar_border_color;;
84}
85
86.mikio-page-header {
87    padding: 0 2rem;
88}
89
90.mikio-sidebar-header {
91    border-bottom: 1px solid @ini_sidebar_border_color;
92}
93
94.mikio-sidebar-footer {
95    border-top: 1px solid @ini_sidebar_border_color;
96}
97
98.mikio-page-contentheader {
99
100}
101
102.mikio-page-contentfooter {
103
104}
105
106.mikio-page-footer {
107
108}
109
110.mikio-page-bottomfooter {
111    padding: 0 2rem;
112}
113
114.mikio-admin {
115    background-color: @ini_admin_background_color;
116}
117
118.mikio-small-only {
119    display: none;
120}
121
122.mikio .mikio-breadcrumbs {
123    padding: .75rem 2rem;
124    background-color: @ini_breadcrumb_background_color;
125    font-size: @ini_breadcrumb_font_size;
126    color: @ini_breadcrumb_text_color;
127
128    span.curid a, a {
129        .mikio-text-decoration(none);
130        color: @ini_breadcrumb_link_color;
131        font-weight: normal;
132
133        &:hover {
134            color: @ini_breadcrumb_link_hover_color;
135        }
136    }
137
138    ul {
139        list-style: none;
140        margin: 0;
141        padding: 0;
142    }
143
144    li {
145        display: inline-block;
146        margin-right: .5rem;
147        vertical-align: text-bottom;
148    }
149
150    svg {
151        width: .9rem;
152        height: .9rem;
153    }
154}
155
156.mikio-navbar {
157    position: relative;
158    display: flex;
159    align-items: center;
160    padding: .5rem 1rem .5rem 2rem;
161    border-bottom-width: 1px;
162    border-bottom-style: solid;
163    border-bottom-color: @ini_navbar_border_color;
164    background-color: @ini_navbar_background_color;
165    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
166
167    .mikio-navbar-brand {
168        display: flex;
169
170        .mikio-navbar-brand-image {
171            max-width: 3rem;
172            max-height: 3rem;
173            margin-right: .5rem;
174        }
175
176        .mikio-navbar-brand-title {
177            display: flex;
178            flex-direction: column;
179            align-items: stretch;
180            justify-content: center;
181        }
182
183        .mikio-navbar-brand-title-text {
184            color: @ini_navbar_brand_text_color;
185            margin: 0;
186            font-weight: 500;
187            font-size: 1.2rem;
188        }
189
190        .mikio-navbar-brand-title-tagline {
191            margin: 0;
192            color: @ini_navbar_brand_tagline_color;
193        }
194    }
195
196    .mikio-navbar-toggle {
197        display: none;
198        width: 2.5rem;
199        height: 2rem;
200        border: 1px solid @ini_control_border_color;
201        border-radius: .25rem;
202        background-color: @ini_control_background_color;
203        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:@{ini_control_text_color}"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>');
204        background-size: 1.2rem;
205        background-position: center;
206        background-repeat: no-repeat;
207    }
208
209    .mikio-navbar-collapse {
210        display: flex;
211        flex: 1;
212        align-items: center;
213        justify-content: @ini_navbar_content_justify;
214    }
215
216    a {
217        .mikio-text-decoration(none);
218        color: inherit;
219    }
220
221    .mikio-search {
222        margin: 0 .5rem;
223    }
224}
225
226.mikio-sub-navbar {
227    color: @ini_subnavbar_text_color;
228    justify-content: @ini_subnavbar_content_justify;
229    padding: .75rem 1rem;
230    border-color: @ini_subnavbar_border_color;
231    background-color: @ini_subnavbar_background_color;
232
233    ul, ol, p {
234        list-style: none;
235        margin: 0;
236        padding: 0;
237    }
238
239    ul, ol {
240        list-style: none;
241    }
242
243    li {
244        display: inline-block;
245        padding: 0 .2rem;
246        margin: 0 .5rem;
247    }
248
249    a {
250        color: @ini_subnavbar_link_color;
251
252        &:hover {
253            color: @ini_subnavbar_link_hover_color;
254        }
255    }
256}
257
258.mikio-hero {
259    display: flex;
260    background-color: @ini_hero_background_color;
261
262    .mikio-hero-text {
263        flex: 1;
264        min-height: 5rem;
265        padding: 2rem;
266
267        .mikio-breadcrumbs {
268            background-color: transparent;
269            padding: 0;
270            margin: 0 0 .75rem 0;
271        }
272
273        h1 {
274            margin: 0 0 1rem 0;
275            color: @ini_hero_title_color;
276            line-height: 1.2
277        }
278
279        h2 {
280            margin: 0;
281            font-weight: normal;
282            font-size: 1.25rem;
283            color: @ini_hero_subtitle_color;
284        }
285    }
286
287    .mikio-hero-image {
288        display: flex;
289        flex: 0 0 33%;
290        background-repeat: no-repeat;
291        background-position: center;
292        background-size: cover;
293        align-items: flex-end;
294    }
295
296    .mikio-hero-image-resize {
297        height: 15rem;
298    }
299}
300
301.mikio-tags {
302    display: block;
303    width: 100%;
304    text-align: right;
305    padding-right: .5rem;
306    margin-bottom: .5rem;
307
308    a {
309        margin: 0 .25rem;
310        font-size: 80%;
311        padding: .25rem .75rem;
312        border: 1px solid @ini_tag_background_color;
313        border-radius: 1rem;
314        background-color: @ini_tag_background_color;
315        color: @ini_tag_text_color;
316        .mikio-text-decoration(none);
317        transition: all .15s ease-in-out;
318
319        &:hover {
320            background-color: transparent;
321            color: @ini_tag_background_color;
322        }
323    }
324}
325
326
327.mikio-sidebar {
328    width: @ini_sidebar_width;
329    flex-shrink: 0;
330    background-color: @ini_sidebar_background_color;
331    padding: 1rem;
332    font-size: @ini_sidebar_font_size;
333    color: @ini_sidebar_text_color;
334
335    &.mikio-sidebar-left {
336        border-right: 1px solid @ini_sidebar_border_color;
337    }
338
339    &.mikio-sidebar-right {
340        border-left: 1px solid @ini_sidebar_border_color;
341    }
342
343    .mikio-sidebar-toggle {
344        display: none;
345        margin: 0 1rem;
346        .mikio-text-decoration(none);
347        text-align: center;
348        color: rgba(0, 0, 0, 0.6);
349        background-size: 1rem;
350        background-position: 95% 50%;
351        background-repeat: no-repeat;
352        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:@{ini_sidebar_text_color}"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>');
353
354        &.closed {
355            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:@{ini_sidebar_text_color}"><path d="M15.997 13.374l-7.081 7.081L7 18.54l8.997-8.998 9.003 9-1.916 1.916z"/></svg>');
356        }
357    }
358
359    .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse {
360        display: block;
361    }
362
363    .mikio-user-info {
364        margin-bottom: 1rem;
365        margin: 0 -1rem;
366        padding: 0 1rem 1rem 1rem;
367        border-bottom: 1px solid @ini_sidebar_border_color;
368    }
369
370    .mikio-search {
371        margin: 1rem 0 1rem 0;
372    }
373
374    .mikio-sidebar-content {
375        overflow-wrap: break-word;
376        margin-bottom: 1rem;
377
378        a {
379            display: block;
380            margin: 1rem 0;
381            color: @ini_sidebar_link_color;
382            .mikio-text-decoration(none);
383
384            &:hover {
385                color: @ini_sidebar_link_hover_color;
386            }
387        }
388
389        ul, ul.idx {
390            margin: 0;
391            padding: 0;
392
393            ul {
394                padding-left: 1rem;
395            }
396
397            li, li.closed, li.open {
398                list-style: none;
399            }
400        }
401    }
402
403    .mikio-tags {
404        margin: 0 0 1rem 0;
405        text-align: center;
406
407        a {
408            display: inline-block;
409            margin: 0 .25rem .25rem .25rem;
410        }
411    }
412}
413
414.mikio-page {
415    display: flex;
416    // flex: 1;
417    padding: 0;
418}
419
420.mikio-page-fill {
421    display: flex;
422    flex: 1;
423}
424
425.mikio .mikio-content .mikio-article {
426    margin: 0 auto;
427
428    ul, ul.idx {
429        padding-left: 1rem;
430    }
431
432    &.toc-full {
433        display: flex;
434
435        .mikio-toc {
436            margin-top: 1rem;
437            order: 2;
438            // flex: 1;
439        }
440
441        .mikio-article-content {
442            flex: 1;
443        }
444    }
445}
446
447.mikio-content {
448    box-sizing: border-box;
449    width: 100%;
450    max-width: 100%;
451    background-color: @ini_content_background;
452    padding: .5rem 2rem;
453}
454
455.mikio.dokuwiki div.preview {
456    background-color: @ini_content_background;
457    padding: 1rem 2rem;
458}
459
460.mikio-footer {
461    padding: 2rem;
462    color: @ini_footer_text_color;
463    background-color: @ini_footer_background_color;
464    font-size: @ini_footer_font_size;
465    text-align: @ini_footer_text_align;
466
467    a {
468        color: @ini_footer_link_color;
469
470        &:hover {
471            color: @ini_footer_link_hover_color;
472        }
473    }
474
475    .dw__pagetools {
476        margin-top: 1rem;
477
478        a {
479            margin: 0 .5rem;
480
481            svg {
482                fill: @ini_footer_link_color;
483            }
484
485            &:hover {
486                svg {
487                    fill: @ini_footer_link_hover_color;
488                }
489            }
490        }
491    }
492
493    .mikio-nav {
494        margin-top: 1rem;
495    }
496
497    .mikio-footer-search {
498        margin-top: .5rem;
499        display: inline-block;
500    }
501
502    .license {
503        margin-top: .5rem;
504
505        img {
506            vertical-align: middle;
507            margin: 0 1rem;
508        }
509    }
510}
511
512.mikio .site > div.no {
513    display: none;
514}
515
516
517/* Page Elements */
518.mikio-control {
519    margin: 0;
520    font-family: inherit;
521    font-size: inherit;
522    font-weight: 400;
523    // line-height: inherit;
524    border-width: 1px;
525    border-style: solid;
526    border-color: transparent;
527    border-radius: .25rem;
528    background-color: @ini_control_background_color;
529    box-sizing: border-box;
530    vertical-align: middle;
531    padding: .375rem .75rem;
532    color: @ini_control_text_color;
533}
534
535.mikio-button {
536    display: inline-block;
537    text-align: center;
538    border-color: @ini_control_border_color;
539    line-height: 1.5;
540    .mikio-text-decoration(none);
541    text-transform: capitalize;
542
543    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
544
545    &:hover:not(:disabled) {
546        .mikio-text-decoration(none);
547        color: @ini_control_background_color;
548        background-color: @ini_control_border_color;
549        border-color: @ini_control_border_color;
550    }
551
552    &:disabled {
553        opacity: .65;
554    }
555}
556
557.mikio-button-small {
558    padding: .1rem .2rem;
559    font-size: 80%;
560    min-width: 3rem;
561}
562
563.mikio-button-submit {
564    color: #fff;
565    background-color: #007bff;
566    border-color: #007bff;
567
568    &:hover {
569        color: #fff;
570        background-color: #0069d9;
571        border-color: #0062cc;
572    }
573}
574
575.mikio-button-danger {
576    color: #dc3545;
577    border-color: #dc3545;
578
579    &:hover {
580        color: #fff;
581        background-color: #dc3545;
582        border-color: #dc3545;
583    }
584}
585
586.mikio-input-text {
587    border-color: @ini_input_border_color;
588    line-height: inherit;
589}
590
591.mikio-select {
592    .mikio-user-select();
593    height: 2.25rem;
594}
595
596.mikio-toolbar-button {
597    border-radius: 0;
598    border-right-width: 0;
599    border-color: @ini_input_border_color;
600
601    &:first-of-type {
602        border-radius: .25rem 0 0 .25rem;
603    }
604
605    &:last-of-type {
606        border-radius: 0 .25rem .25rem 0;
607        border-right-width: 1px;
608    }
609}
610
611.mikio-dialog {
612    .mikio-article {
613        max-width: 40rem;
614    }
615
616    fieldset {
617        legend {
618            font-size: 1.75rem;
619            font-weight: 400;
620        }
621
622        label.block input.edit, select {
623            width: 100%;
624        }
625
626        label {
627            text-align: left;
628            font-weight: normal;
629            display: block;
630        }
631
632        label.simple {
633            text-align: center;
634        }
635
636        label.block {
637            position: relative;
638        }
639
640        label.block span {
641            position: absolute;
642            padding: .4rem .9rem;
643            color: rgba(0, 0, 0, 0.3);
644        }
645
646        button {
647            display: block;
648            width: 100%;
649
650            &[type=submit] {
651                .mikio-button-submit;
652            }
653        }
654
655        input[type=checkbox] {
656            vertical-align: middle;
657        }
658    }
659}
660
661.mikio .mikio-navbar .mikio-search,
662.mikio .mikio-sidebar .mikio-search,
663.mikio .mikio-footer .mikio-search,
664.mikio .mikio-search {
665    display: flex;
666
667    input {
668        width: 1%;
669        flex: 1 1 auto;
670        border-radius: .25rem 0 0 .25rem;
671    }
672
673    button {
674        color: @ini_control_background_color;
675        background-color: @ini_control_border_color;
676        border-radius: 0 .25rem .25rem 0;
677        border-color: @ini_control_border_color;
678
679        &:hover {
680            background-color: @ini_control_background_color;
681            color: @ini_control_text_color;
682        }
683    }
684
685    .mikio-iicon {
686        // width: 1.4rem;
687        // height: 1.4rem;
688        margin: 0 -4px 0 -4px;
689    }
690}
691
692#dw__pagetools {
693    .mikio-sticky;
694    top: 0;
695    align-self: flex-start;
696    padding: 3rem .5rem 0 .5rem;
697
698    a {
699        display: block;
700
701        svg {
702            fill: @ini_pagetools_color;
703        }
704
705        &:hover {
706            svg {
707                fill: @ini_pagetools_hover_color;
708            }
709        }
710    }
711}
712
713.mode_admin .mikio-toc {
714    background-color: @ini_admin_background_color;
715
716    #dw__toc {
717        background-color: #fff;
718    }
719}
720
721.mikio-toc {
722    float: right;
723    padding-left: 1rem;
724    padding-bottom: 1rem;
725    background-color: @ini_content_background;
726    margin-top: 1rem;
727
728    #dw__toc {
729        background-color: @ini_toc_background_color;
730        border: 1px solid @ini_toc_border_color;
731        border-radius: .25rem;
732        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
733        padding: .5rem;
734        max-width: 12rem;
735        float: none;
736        // width: auto;
737        margin: 0;
738        // background-color: transparent;
739
740        ul {
741            padding-left: 0;
742            margin-left: 0;
743
744            ul {
745                padding-left: .5rem;
746            }
747        }
748    }
749
750    h3 {
751        margin: 0;
752        font-size: @ini_toc_font_size;
753        background-size: 1rem;
754        background-position: 95% 50%;
755        background-repeat: no-repeat;
756        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:inherit"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>');
757
758        &.closed {
759            font-size: 0;
760            height: 1rem;
761            width: 2rem;
762
763            &:before {
764                display: inline-block;
765                content: "";
766                width: .8rem;
767                height: .8rem;
768                margin-right: .5rem;
769                margin-top: .1rem;
770                background-size: .8rem;
771                background-position: center;
772                background-repeat: no-repeat;
773                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:inherit"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>');
774            }
775        }
776
777        span {
778            display: none;
779        }
780    }
781
782    a {
783        display: block;
784        font-size: @ini_toc_font_size;
785        color: @ini_toc_link_color;
786        .mikio-text-decoration(none);
787        padding: .2rem 0;
788
789        &:hover {
790            color: @ini_toc_link_hover_color;
791        }
792    }
793}
794
795.mikio-icon {
796    margin-right: .25rem;
797    // max-width: 1.4rem;
798    // max-height: 1.4rem;
799
800    svg {
801        // max-width: 1.4rem;
802        // max-height: 1.4rem;
803        vertical-align: middle;
804    }
805}
806
807.mikio-iicon {
808    display: inline-block;
809    width: 1.2rem;
810    height: 1.2rem;
811    background-size: 1.2rem;
812    background-position: center;
813    background-repeat: no-repeat;
814    vertical-align: middle;
815    margin-right: .25rem;
816    fill: currentColor;
817}
818
819.mikio .mode_show table,
820.mikio.dokuwiki .mode_showtag table.ul,
821.mikio .mode_admin table {
822    width: 100%;
823    border-collapse: collapse;
824    margin-bottom: 1rem;
825    font-size: @ini_table_font_size;
826
827
828    td, th {
829        border-top: 1px solid @ini_table_row_border_color;
830        padding: .75rem;
831        text-align: left;
832    }
833
834    tbody tr {
835        border: 0;
836
837        &:nth-child(odd) {
838            background-color: @ini_table_odd_row_color;
839        }
840
841        &:nth-child(even) {
842            background-color: @ini_table_even_row_color;
843        }
844    }
845}
846
847.mikio-nav {
848    list-style: none;
849    margin: 0;
850    padding: 0;
851
852    .mikio-nav-item, .mikio-nav-dropdown {
853        display: inline-block;
854        padding: .5rem .2rem;
855        margin: 0 .5rem;
856    }
857
858    .mikio-nav-link {
859
860    }
861
862    .mikio-nav-dropdown {
863        position: relative;
864    }
865
866    .mikio-nav-dropdown > a {
867        display: inline-block;
868        padding: .2rem 1.2rem .2rem 0rem;
869        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:inherit"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>');
870        background-size: 1.2rem;
871        background-position: right;
872        background-repeat: no-repeat;
873    }
874
875    a {
876        .mikio-text-decoration(none);
877    }
878}
879
880.mikio-dropdown {
881    display: block;
882    position: absolute;
883    z-index: 10000;
884    min-width: 12rem;
885    right: 0;
886    padding: 1rem 1.5rem;
887    border: 1px solid @ini_dropdown_border_color;
888    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
889    background-color: @ini_dropdown_background_color;
890    color: @ini_dropdown_color;
891
892    &.closed {
893        display: none;
894    }
895
896    .mikio-dropdown-item {
897        display: flex;
898        align-items: center;
899        margin-top: .5rem;
900        margin-bottom: .5rem;
901    }
902
903    .mikio-dropdown-header {
904        margin: 0 0 1rem 0;
905    }
906
907    .mikio-dropdown-divider {
908        margin: 1rem -1rem;
909        border-bottom: 1px solid @ini_dropdown_border_color;
910    }
911
912    .mikio-nav-link {
913        margin: 0rem -1rem 0rem -1rem;
914        padding: .25rem 1rem .25rem 1rem;
915        transition: all 0.15s ease-in-out;
916
917        &:hover {
918            background-color: @ini_dropdown_hover_color;
919        }
920    }
921}
922
923.mikio-tabs {
924    padding: 0;
925    margin-bottom: -1px;
926
927    li {
928        strong {
929            .mikio-tab-active;
930        }
931
932        a {
933            padding: .5rem 1rem;
934            border: 1px solid transparent;
935            color: #007bff;
936            .mikio-text-decoration(none);
937            margin: 0;
938            background-color: transparent;
939
940            &:hover {
941                color: #0056b3;
942                border-color:#dee2e6 #dee2e6 #dee2e6;
943                background-color: transparent;
944            }
945        }
946    }
947
948    &:after {
949        border-bottom: 0;
950    }
951}
952
953.mikio-tab-active {
954    background-color: #fff;
955    font-weight: normal;
956    color: #495057;
957    border-color: #dee2e6 #dee2e6 #fff;
958    padding: .5rem 1rem;
959    margin: 0;
960    bottom: -1px;
961    // margin-bottom: -1px;
962}
963
964.mikio-tab-panel {
965    margin-bottom: 0;
966    background-color: #fff;
967    border-width: 1px 1px 1px 1px;
968    border-style: solid;
969    border-color: #dee2e6;
970    word-wrap: break-word;
971    word-break: break-word;
972}
973
974.mikio.dokuwiki div.section_highlight {
975    background-color: @ini_section_edit_highlight;
976    border-width: 0;
977    margin: 0 -1rem;
978    padding: 0 1rem;
979}
980
981.mikio-input-file {
982    position: absolute;
983    margin-top: -.5rem;
984    top: 0;
985    right: 0;
986    left: 0;
987    z-index: 5;
988    padding: .25rem 1rem;
989    line-height: 1.5;
990    text-align: left;
991    color: @ini_control_text_color;
992    background-color: @ini_control_background_color;
993    border: .1px solid @ini_control_border_color;
994    border-radius: .25rem;
995    -webkit-user-select: none;
996    -moz-user-select: none;
997    -ms-user-select: none;
998    user-select: none;
999    white-space: nowrap;
1000    overflow: hidden;
1001    text-overflow: ellipsis;
1002    box-sizing: border-box;
1003
1004    &:before {
1005        position: absolute;
1006        top: 0;
1007        right: 0;
1008        bottom: 0;
1009        z-index: 6;
1010        display: block;
1011        content: "Browse";
1012        padding: .25rem 1rem;
1013        line-height: 1.5;
1014        color: @ini_control_background_color;
1015        background-color: @ini_control_border_color;
1016        border-radius: 0 .25rem .25rem 0;
1017        border: 1px solid @ini_control_border_color;
1018        transition: all .15s ease-in-out;
1019    }
1020
1021    &:hover:before {
1022        background-color: @ini_control_background_color;
1023        color: @ini_control_text_color;
1024    }
1025}
1026
1027code, pre {
1028    overflow-x: auto;
1029    font-family: @ini_code_font_family;
1030    font-size: @ini_code_font_size;
1031    color: @ini_code_text_color;
1032    background-color: @ini_code_background_color;
1033    word-wrap: @ini_code_word_wrap;
1034    .mikio-pre-wrap;
1035    border: 1px solid @ini_code_border_color;
1036    padding: 1em;
1037    line-height: @ini_code_line_height;
1038}
1039
1040
1041/* Dokuwiki Patches */
1042.mikio-search,
1043.mikio .dokuwiki fieldset,
1044.mikio.dokuwiki .secedit,
1045.mikio .mode_revisions,
1046.mikio .mode_edit,
1047.mikio .mode_draft,
1048.mikio .mode_preview,
1049.mikio .mode_showtag,
1050.mikio .mode_admin {
1051    button, input, optgroup, select, textarea {
1052        .mikio-control;
1053        .mikio-input-text;
1054    }
1055
1056    button {
1057        .mikio-button;
1058    }
1059
1060    button#edbtn__save, button[name="run[save]"] {
1061        .mikio-button-submit;
1062    }
1063
1064    input[type=text], input[type=search], input[type=password], input[type=email] {
1065        .mikio-appearance();
1066    }
1067
1068    textarea {
1069        margin-bottom: 1rem;
1070        width: 100%;
1071        word-wrap: break-word;
1072        overflow: auto;
1073        resize: vertical;
1074        white-space: pre-wrap;
1075    }
1076
1077    select {
1078        .mikio-select;
1079    }
1080
1081    .toolbutton {
1082        .mikio-toolbar-button;
1083    }
1084}
1085
1086.mikio.dokuwiki .secedit {
1087    float: none;
1088    margin-top: 0;
1089    text-align: right;
1090}
1091
1092.mikio.dokuwiki fieldset {
1093    margin: 2rem auto;
1094    border: 0;
1095}
1096
1097.mikio.dokuwiki .mode_login,
1098.mikio.dokuwiki .mode_denied {
1099    .mikio-dialog;
1100}
1101
1102.mikio .mode_admin {
1103    input[type=text], input[type=password], input[type=email] {
1104        width: 100%;
1105    }
1106
1107    div.ui-admin {
1108        ul.admin_tasks, ul.admin_plugins {
1109            float: none;
1110            display: grid;
1111            grid-template-columns: repeat(auto-fit, 15rem);
1112            width: auto;
1113            padding: 0;
1114            margin: 0;
1115            justify-content: center;
1116
1117            li {
1118                border: 1px solid @ini_control_border_color;
1119                border-radius: .25rem;
1120                margin: 1rem 1rem;
1121                background-color: @ini_control_background_color;
1122
1123                a {
1124                    display: flex;
1125                    flex-direction: column;
1126                    align-items: center;
1127                    justify-content: center;
1128                    text-align: center;
1129                    height: 4rem;
1130                    font-size: 1rem;
1131                    font-weight: normal;
1132                    padding: 1rem 2rem;
1133                    color: #333;
1134                    .mikio-text-decoration(none);
1135                    overflow: hidden;
1136                    transition: all .15s ease-in-out;
1137
1138                    span.icon {
1139                        width: auto;
1140                        height: auto;
1141                        min-height: auto;
1142                    }
1143
1144                    &:hover {
1145                        .mikio-text-decoration(none);
1146                        color: @ini_control_background_color;
1147                        background-color: @ini_control_border_color;
1148                        border-color: @ini_control_border_color;
1149
1150                        svg {
1151                            fill: @ini_control_background_color;
1152                        }
1153                    }
1154                }
1155            }
1156        }
1157    }
1158
1159    .mikio-config-table-header {
1160        background-color: #ddd;
1161        font-weight: bold;
1162
1163        .mikio-iicon {
1164            vertical-align: text-bottom;
1165        }
1166    }
1167
1168    #extension__list {
1169        ul.extensionList {
1170            li {
1171                border-width: 0 0 1px 0;
1172                border-style: solid;
1173                border-color: @ini_table_row_border_color;
1174                padding: .75rem;
1175                margin: 0;
1176                text-align: left;
1177
1178                &:nth-child(odd) {
1179                    background-color: @ini_table_odd_row_color;
1180                }
1181
1182                &:nth-child(even) {
1183                    background-color: @ini_table_even_row_color;
1184                }
1185            }
1186        }
1187    }
1188
1189    button#usrmgr__del {
1190        .mikio-button-danger;
1191        margin-right: .5rem;
1192    }
1193
1194    #acl__tree {
1195        background-color: #fff;
1196    }
1197
1198    #acl_manager table tr {
1199        &:nth-child(odd) {
1200            background-color: @ini_table_odd_row_color;
1201        }
1202
1203        &:nth-child(even) {
1204            background-color: @ini_table_even_row_color;
1205        }
1206    }
1207}
1208
1209.mode_admin,
1210.mode_login,
1211.mode_denied,
1212.mode_revisions,
1213.mode_recent,
1214.mode_backlink,
1215.mode_media,
1216.mode_index,
1217.mode_search,
1218.mode_edit,
1219.mode_draft,
1220.mode_preview,
1221.mode_showtag {
1222    .mikio-content, .mikio-page-fill {
1223        .mikio-admin;
1224    }
1225}
1226
1227.mikio #plugin__styling button.primary {
1228    font-weight: inherit;
1229}
1230
1231.mikio.dokuwiki .secedit {
1232    button {
1233        .mikio-button-small;
1234    }
1235}
1236
1237.mikio img {
1238    max-width: 100%;
1239
1240    &.media {
1241        margin: .2rem 0;
1242    }
1243
1244    &.medialeft {
1245        margin: .2rem 1em .2rem 0;
1246    }
1247
1248    &.mediaright {
1249        margin: .2rem 0 .2rem 1rem;
1250    }
1251
1252    &.mediacenter {
1253        margin: .2rem auto;
1254    }
1255}
1256
1257.mikio div.dokuwiki div.inclmeta {
1258    margin-top: .5rem;
1259    padding-top: .5rem;
1260}
1261
1262.mikio #dw__login label[for=remember__me] {
1263    margin-left: 0;
1264}
1265
1266.mikio #config__manager {
1267    fieldset {
1268        background-color: transparent;
1269        margin: 0;
1270        padding: 0;
1271
1272        legend {
1273            text-align: left;
1274        }
1275    }
1276
1277    tr {
1278        .input, input {
1279            color: inherit;
1280            background-color: transparent;
1281        }
1282
1283        textarea, select {
1284            color: inherit;
1285            background-color: #fff;
1286        }
1287
1288        select {
1289            width: 100%;
1290        }
1291    }
1292
1293    td {
1294        &.label {
1295            display: grid;
1296            grid-template-columns: auto 2rem;
1297
1298            span.outkey {
1299                float: none;
1300                font-size: 100%;
1301                background-color: transparent;
1302                margin: 0;
1303                grid-column: 1 / span 1;
1304                grid-row: 1 / span 1;
1305            }
1306
1307            label {
1308                grid-column: 1 / span 1;
1309                grid-row: 2 / span 1;
1310            }
1311
1312            img {
1313                float: none;
1314                grid-column: 2 / span 1;
1315                grid-row: 1 / span 2;
1316                align-self: center;
1317            }
1318        }
1319
1320        input.edit {
1321            width: 100%;
1322        }
1323    }
1324
1325    button[type=submit] {
1326        .mikio-button-submit;
1327    }
1328}
1329
1330.mode_revisions .mikio-article {
1331    li {
1332        padding: .5rem 1rem;
1333        border-top: 1px solid #e5e5e5;
1334    }
1335
1336    li:nth-child(odd) {
1337        background-color: #fff;
1338    }
1339
1340    .li {
1341        display: grid;
1342        grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem;
1343        align-items: center;
1344        text-align: center;
1345        font-size: 90%;
1346
1347        a.wikilink1 {
1348            text-align: left;
1349        }
1350
1351        span.sizechange {
1352            width: 100%;
1353        }
1354    }
1355
1356    .sum {
1357        display: block;
1358    }
1359}
1360
1361.mode_recent .mikio-article {
1362    li {
1363        padding: .5rem 1rem;
1364        border-top: 1px solid #e5e5e5;
1365    }
1366
1367    li:nth-child(odd) {
1368        background-color: #fff;
1369    }
1370
1371    .li {
1372        display: grid;
1373        grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem;
1374        align-items: center;
1375        text-align: center;
1376        font-size: 90%;
1377
1378        a.wikilink1, span.curid {
1379            text-align: left;
1380        }
1381
1382        span.sizechange {
1383            width: 100%;
1384        }
1385    }
1386
1387    select {
1388        .mikio-control;
1389        .mikio-select;
1390    }
1391}
1392
1393
1394.mikio #mediamanager__page, #media__manager {
1395    button, .qq-upload-button, .qq-upload-list a {
1396        .mikio-control;
1397        .mikio-button;
1398    }
1399
1400    .qq-upload-list a.qq-upload-cancel {
1401        .mikio-button-danger;
1402    }
1403
1404    button.qq-upload-action {
1405        .mikio-button-submit;
1406    }
1407
1408    input[type=text], input[type=search], textarea {
1409        .mikio-control;
1410        .mikio-input-text
1411    }
1412
1413    .ui-resizable-e {
1414        background: transparent;
1415
1416        &:hover {
1417            background-color: #999;
1418        }
1419    }
1420
1421    .namespaces, #media__tree {
1422        h2 {
1423            .mikio-tab-active;
1424        }
1425
1426        .panelHeader {
1427            .mikio-tab-panel;
1428        }
1429
1430        ul, ul.idx {
1431            margin-top: 0;
1432
1433            ul {
1434                margin-left: 1rem;
1435            }
1436
1437            li {
1438                margin: .25rem 0;
1439                white-space: nowrap;
1440            }
1441
1442            a {
1443                .mikio-text-decoration(none);
1444                color: #333;
1445            }
1446        }
1447    }
1448
1449    .filelist, .qq-uploader {
1450        .panelHeader {
1451            .mikio-tab-panel;
1452        }
1453
1454        form.options {
1455            margin-top: 0;
1456
1457            .ui-controlgroup-horizontal label {
1458                margin-right: 0;
1459            }
1460        }
1461
1462        .panelContent {
1463            padding-top: 1rem;
1464            text-align: center;
1465        }
1466
1467        ul {
1468            &.thumbs {
1469                margin: 0;
1470
1471                li {
1472                    width: 200px;
1473                    background-color: #fff;
1474
1475                    dt a {
1476                        display: inline;
1477                    }
1478
1479                    dd {
1480                        width: auto;
1481                        font-size: 90%;
1482                        color: #666;
1483                        margin-bottom: .25rem;
1484                    }
1485
1486                    .name {
1487                        font-weight: normal;
1488
1489                        a {
1490                            color: #000;
1491                        }
1492                    }
1493                }
1494            }
1495
1496            &.tabs {
1497                .mikio-tabs;
1498            }
1499        }
1500
1501        .rows {
1502            li {
1503                background-color: @ini_table_odd_row_color;
1504                max-height: none;
1505                font-size: 90%;
1506
1507                &:nth-child(2n+1) {
1508                    background-color: @ini_table_even_row_color;
1509                }
1510
1511                a {
1512                    font-weight: normal;
1513                    color: #333;
1514                }
1515
1516                dt a {
1517                    height: auto;
1518                }
1519
1520                dd.name {
1521                    text-align: left;
1522                }
1523            }
1524        }
1525
1526        .qq-upload-list {
1527            margin-top: 1rem;
1528
1529            li {
1530                &:hover {
1531                    background-color: transparent;
1532                }
1533            }
1534        }
1535
1536        .qq-action-container {
1537            margin-top: 1rem;
1538            padding-top: 1rem;
1539            border-top: 1px solid #dee2e6;
1540        }
1541    }
1542
1543    .file {
1544        .panelHeader {
1545            .mikio-tab-panel;
1546
1547            a {
1548                font-weight: normal;
1549                color: #333;
1550            }
1551        }
1552
1553        ul {
1554            &.tabs {
1555                .mikio-tabs;
1556            }
1557        }
1558
1559        #mediamanager__btn_delete button {
1560            .mikio-button-danger;
1561        }
1562
1563        dl {
1564            font-size: 90%;
1565
1566            dt {
1567                padding: .25rem .5rem;
1568                background-color: #f0f0f0;
1569            }
1570
1571            dd {
1572                padding: .25rem .5rem;
1573                background-color: #f8f8f8;
1574            }
1575        }
1576
1577        input[type=text], form.meta textarea.edit {
1578            width: 100%;
1579            min-width: 100%;
1580            max-width: 100%;
1581        }
1582
1583        button[name="mediado[save]"] {
1584            .mikio-button-submit;
1585        }
1586    }
1587
1588    .panelContent {
1589        background-color: #fff;
1590        margin: 0 10px 0 0;
1591        border-width: 0 1px 1px 1px;
1592        border-style: solid;
1593        border-color: #dee2e6;
1594        padding: .5rem;
1595    }
1596
1597    #media__opts {
1598        border-bottom: 1px solid #dee2e6;
1599        padding-bottom: .75rem;
1600    }
1601
1602    #media__content {
1603        .odd, .even {
1604            border-top: 1px solid @ini_table_row_border_color;
1605            font-size: 90%;
1606            display: grid;
1607            grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem;
1608            align-items: center;
1609
1610            a.mediafile {
1611                grid-column: 2 / span 1;
1612                grid-row: 1 / span 1;
1613                margin: 0;
1614                word-break: break-word;
1615            }
1616
1617            span.info {
1618                grid-column: 3 / span 1;
1619                grid-row: 1 / span 1;
1620                text-align: center;
1621
1622                br {
1623                    display: inline-block;
1624                }
1625            }
1626
1627            a:nth-child(2) {
1628                grid-column: 4 / span 1;
1629                grid-row: 1 / span 1;
1630                text-align: center;
1631            }
1632
1633            a:nth-child(3) {
1634                grid-column: 5 / span 1;
1635                grid-row: 1 / span 1;
1636                text-align: center;
1637            }
1638
1639            a.btn_media_delete {
1640                grid-column: 6 / span 1;
1641                grid-row: 1 / span 1;
1642                text-align: center;
1643            }
1644
1645            div.example, div.clearer, br {
1646                display: none;
1647            }
1648
1649            div.detail {
1650                grid-column: 1 / span 1;
1651                grid-row: 1 / span 1;
1652                padding: 0;
1653
1654                div.thumb {
1655                    float: none;
1656                    margin: 0;
1657                }
1658            }
1659        }
1660
1661        .odd {
1662            background-color: @ini_table_odd_row_color;
1663        }
1664
1665        .even {
1666            background-color: @ini_table_even_row_color;
1667        }
1668    }
1669}
1670
1671.mikio.dokuwiki .mode_search .mikio-article {
1672    .search-results-form {
1673        fieldset.search-form {
1674            display: grid;
1675            margin: 0 auto;
1676            max-width: 800px;
1677            grid-template-columns: auto  10rem 10rem;
1678            grid-gap: 1rem;
1679
1680            input[name=q] {
1681                grid-column: 1 / span 1;
1682                grid-row: 1 / span 1;
1683                width: 100%;
1684            }
1685
1686            button[type=submit] {
1687                .mikio-button-submit;
1688                grid-column: 2 / span 1;
1689                grid-row: 1 / span 1;
1690            }
1691
1692            .toggleAssistant {
1693                .mikio-button-small;
1694                grid-column: 3 / span 1;
1695                grid-row: 1 / span 1;
1696                flex: 0;
1697            }
1698
1699            .advancedOptions {
1700                grid-column: 1 / span 3;
1701                grid-row: 2 / span 1;
1702
1703                .toggle {
1704                    .current {
1705                        padding: .2rem 1.2rem .2rem 0rem;
1706                        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:inherit"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>');
1707                        background-size: 1.2rem;
1708                        background-position: right;
1709                        background-repeat: no-repeat;
1710
1711                        &:after {
1712                            content = "";
1713                        }
1714                    }
1715
1716                    ul {
1717                        position: absolute;
1718                        right: 0;
1719                        top: .5rem;
1720                        padding: 1rem 1.5rem;
1721                        border: 1px solid @ini_dropdown_border_color;
1722                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1723                        background-color: @ini_dropdown_background_color;
1724                        color: #999;
1725
1726                        a {
1727                            transition: all 0.15s ease-in-out;
1728                            color: @ini_dropdown_color;
1729                            .mikio-text-decoration(none);
1730                            font-style: normal;
1731                            margin: 0 -1rem;
1732                            padding: 0 1rem;
1733
1734                            &:hover {
1735                                background-color: @ini_dropdown_hover_color;
1736                            }
1737                        }
1738                    }
1739                }
1740            }
1741        }
1742    }
1743
1744    h2 {
1745        margin-top: .5rem;
1746        padding-top: 1rem;
1747        border-top: 1px solid #dee2e6;
1748    }
1749
1750    .search_quickresult ul {
1751        background-color: #fff;
1752        padding: .5rem 1rem;
1753
1754        li {
1755            float: none;
1756            display: inline-block;
1757            text-align: left;
1758            padding-left: 0;
1759
1760            &:before {
1761                font-size: 1.2rem;
1762                content:'\2022';
1763                margin-right:0.5em;
1764            }
1765
1766            .li {
1767                display: inline-block;
1768            }
1769        }
1770    }
1771
1772    div.search_quickresult ul li {
1773        width: auto;
1774    }
1775
1776    .search_fullpage_result {
1777        border-top: 1px solid @ini_table_row_border_color;
1778        padding: .75rem;
1779        background-color: @ini_table_odd_row_color;
1780
1781        &:nth-child(2n+1) {
1782            background-color: @ini_table_even_row_color;
1783        }
1784
1785        .snippet {
1786            font-size: 90%;
1787            margin-bottom: 0;
1788        }
1789    }
1790}
1791
1792#index__tree {
1793    background-color: #fff;
1794    border: 1px solid #dee2e6;
1795    padding: 0 .5rem;
1796
1797    a {
1798        color: #333;
1799        .mikio-text-decoration(none);
1800    }
1801
1802    .curid a {
1803        color: red;
1804    }
1805}
1806
1807.mikio.dokuwiki ul.tabs {
1808    .mikio-tabs;
1809}
1810
1811.mikio .mode_draft {
1812    table {
1813        margin-bottom: 1rem;
1814    }
1815}
1816
1817#dokuwiki__detail {
1818    .mikio-admin;
1819    height: 100vh;
1820    padding: 0 2rem;
1821
1822    .content {
1823        display: flex;
1824
1825        .img_detail dl {
1826            display: grid;
1827            grid-template-columns: 4rem auto;
1828            align-items: center;
1829
1830            dt {
1831                font-weight: bold;
1832            }
1833        }
1834    }
1835}
1836
1837/* Mobile */
1838@media (max-width: 768px) {
1839    .mikio-small-only {
1840        display: inline-block;
1841    }
1842
1843    .mikio-navbar {
1844        display: grid;
1845        grid-template-columns: auto 3rem;
1846
1847        .mikio-navbar-brand {
1848            grid-column: 1 / span 1;
1849            grid-row: 1 / span 1;
1850            margin-bottom: .5rem;
1851        }
1852
1853        .mikio-navbar-toggle {
1854            display: block;
1855            margin-bottom: .5rem;
1856            grid-column: 2 / span 1;
1857            grid-row: 1 / span 1;
1858        }
1859
1860        .mikio-navbar-toggle.closed + .mikio-navbar-collapse {
1861            display: none;
1862        }
1863
1864        .mikio-navbar-collapse {
1865            grid-column: 1 / span 2;
1866            grid-row: 2 / span 1;
1867            flex-direction: column;
1868            margin: 0 -2rem;
1869            padding-top: .5rem;
1870            border-top: 1px solid rgba(0, 0, 0, 0.1);
1871        }
1872
1873        .mikio-nav-item {
1874            display: block;
1875            width: 100%;
1876            padding: .5rem 2rem;
1877            box-sizing: border-box;
1878            text-align: center;
1879        }
1880
1881        .mikio-dropdown-item {
1882            justify-content: center;
1883        }
1884
1885        .mikio-nav {
1886            width: 100%;
1887        }
1888
1889        .mikio-nav-dropdown {
1890            width: 100%;
1891            text-align: center;
1892        }
1893
1894        .mikio-nav-dropdown .mikio-dropdown {
1895            position: relative;
1896            border: 0;
1897            box-shadow: none;
1898        }
1899    }
1900
1901    .mikio-hero {
1902        flex-direction: column;
1903
1904        .mikio-hero-image-resize {
1905            height: auto;
1906        }
1907
1908        .mikio-hero-image {
1909            background-image: none !important;
1910        }
1911    }
1912
1913    .mikio-page {
1914        display: grid;
1915        grid-template-columns: auto 2.5rem;
1916        // grid-template-rows: min-content auto;
1917    }
1918
1919    .mode_revisions,
1920    .mode_edit,
1921    .mode_login,
1922    .mode_denied,
1923    .mode_draft,
1924    .mode_preview,
1925    .mode_showtag,
1926    .mode_admin {
1927        .mikio-page {
1928            grid-template-columns: auto;
1929        }
1930    }
1931
1932    .mikio-content {
1933        grid-column: 1 / span 1;
1934        grid-row: 2 / span 1;
1935        padding-bottom: 1rem;
1936        padding-right: 0;
1937        width: auto;
1938    }
1939
1940    /* Sidebar */
1941    .mikio-sidebar {
1942        grid-column: 1 / span 2;
1943        width: auto;
1944
1945        .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse {
1946            display: none;
1947        }
1948
1949        &.mikio-sidebar-left {
1950            grid-row: 1 / span 1;
1951            border-right: 0;
1952            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1953        }
1954
1955        &.mikio-sidebar-right {
1956            grid-row: 3 / span 1;
1957            border-left: 0;
1958            border-top: 1px solid rgba(0, 0, 0, 0.2);
1959        }
1960
1961        .mikio-sidebar-toggle {
1962            display: block;
1963        }
1964    }
1965
1966    /* Page Tools */
1967    #dw__pagetools {
1968        grid-column: 2 / span 1;
1969        grid-row: 2 / span 1;
1970    }
1971
1972    .mikio.dokuwiki div.ui-admin #admin__version {
1973        padding-right: 1rem;
1974    }
1975
1976    .mikio-page-fill {
1977        .mikio-sidebar {
1978            display: none;
1979        }
1980    }
1981}
1982
1983@media print {
1984    .mikio {
1985        .mikio-navbar-collapse,
1986        .mikio-toc,
1987        .mikio-sidebar,
1988        #dw__pagetools,
1989        .mikio-search {
1990            display: none !important;;
1991        }
1992
1993        .mikio-navbar {
1994            box-shadow: none !important;;
1995        }
1996
1997        .mikio-hero {
1998            .mikio-hero-text {
1999                min-height: auto;
2000                padding-bottom: 0;
2001            }
2002        }
2003
2004        .mikio-breadcrumbs, .mikio-hero, .mikio-footer {
2005            background-color: #fff !important;
2006        }
2007    }
2008}