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