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