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