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