xref: /template/mikio/assets/mikio.less (revision e43fbe36409b0973660a5b93e3807191f6331572) 
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    box-sizing: border-box;
565    vertical-align: middle;
566    padding: .375rem .75rem;
567    color: @ini_control_text_color;
568    background-color: @ini_control_background_color;
569
570    &[type=color] {
571        padding: 0;
572    }
573}
574
575.mikio-button {
576    display: inline-block;
577    text-align: center;
578    border-color: @ini_control_border_color;
579    line-height: 1.5;
580    .mikio-text-decoration(none);
581    text-transform: capitalize;
582
583    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
584
585    &:hover:not(:disabled) {
586        .mikio-text-decoration(none);
587        color: @ini_control_background_color;
588        background-color: @ini_control_border_color;
589        border-color: @ini_control_border_color;
590    }
591
592    &:disabled {
593        opacity: .65;
594    }
595}
596
597.mikio-button-small {
598    padding: .1rem .2rem;
599    font-size: 80%;
600    min-width: 3rem;
601}
602
603.mikio-button-submit {
604    color: #fff;
605    background-color: #007bff;
606    border-color: #007bff;
607
608    &:hover {
609        color: #fff;
610        background-color: #0069d9;
611        border-color: #0062cc;
612    }
613}
614
615.mikio-button-danger {
616    color: #dc3545;
617    border-color: #dc3545;
618
619    &:hover {
620        color: #fff;
621        background-color: #dc3545;
622        border-color: #dc3545;
623    }
624}
625
626.mikio-input-text {
627    border-color: @ini_input_border_color;
628    line-height: inherit;
629}
630
631.mikio-select {
632    .mikio-user-select();
633    height: 2.25rem;
634}
635
636.mikio-toolbar-button {
637    border-radius: 0;
638    border-right-width: 0;
639    border-color: @ini_input_border_color;
640
641    &:first-of-type {
642        border-radius: .25rem 0 0 .25rem;
643    }
644
645    &:last-of-type {
646        border-radius: 0 .25rem .25rem 0;
647        border-right-width: 1px;
648    }
649}
650
651.mikio-dialog {
652    .mikio-article {
653        max-width: 40rem;
654    }
655
656    fieldset {
657        legend {
658            font-size: 1.75rem;
659            font-weight: 400;
660        }
661
662        label.block input.edit, select {
663            width: 100%;
664        }
665
666        label {
667            text-align: left;
668            font-weight: normal;
669            display: block;
670        }
671
672        label.simple {
673            text-align: center;
674        }
675
676        label.block {
677            position: relative;
678        }
679
680        label.block span {
681            position: absolute;
682            padding: .4rem .9rem;
683            color: rgba(0, 0, 0, 0.3);
684        }
685
686        button {
687            display: block;
688            width: 100%;
689
690            &[type=submit] {
691                .mikio-button-submit;
692            }
693        }
694
695        input[type=checkbox] {
696            vertical-align: middle;
697        }
698    }
699}
700
701.mikio .mikio-navbar .mikio-search,
702.mikio .mikio-sidebar .mikio-search,
703.mikio .mikio-footer .mikio-search,
704.mikio .mikio-search {
705    display: flex;
706
707    input {
708        width: 1%;
709        flex: 1 1 auto;
710        border-radius: .25rem 0 0 .25rem;
711    }
712
713    button {
714        color: @ini_control_background_color;
715        background-color: @ini_control_border_color;
716        border-radius: 0 .25rem .25rem 0;
717        border-color: @ini_control_border_color;
718
719        &:hover {
720            background-color: @ini_control_background_color;
721            color: @ini_control_text_color;
722        }
723    }
724
725    .mikio-iicon {
726        // width: 1.4rem;
727        // height: 1.4rem;
728        margin: 0 -4px 0 -4px;
729    }
730}
731
732#dw__pagetools {
733    .mikio-sticky;
734    top: 0;
735    align-self: flex-start;
736    padding: 3rem .5rem 0 .5rem;
737
738    ul {
739        list-style: none;
740        padding: 0;
741        margin: 0;
742    }
743
744    a {
745        display: block;
746
747        svg {
748            fill: @ini_pagetools_color;
749        }
750
751        &:hover {
752            svg {
753                fill: @ini_pagetools_hover_color;
754            }
755        }
756    }
757}
758
759.mode_admin .mikio-toc {
760    background-color: @ini_admin_background_color;
761
762    #dw__toc {
763        background-color: #fff;
764    }
765}
766
767.mikio .mode_admin .mikio-toc #dw__toc {
768    background-color: @ini_content_background;
769}
770
771.mikio .mikio-toc {
772    float: right;
773    padding-left: 1rem;
774    padding-bottom: 1rem;
775    // background-color: @ini_content_background;
776    margin-top: 1rem;
777
778    #dw__toc {
779        background-color: @ini_toc_background_color;
780        border: 1px solid @ini_toc_border_color;
781        border-radius: .25rem;
782        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
783        padding: .5rem;
784        max-width: 12rem;
785        float: none;
786        width: auto;
787        margin: 0;
788        // background-color: transparent;
789
790        ul {
791            padding-left: 0;
792            margin-left: 0;
793
794            ul {
795                padding-left: .5rem;
796            }
797        }
798    }
799
800    h3.toggle {
801        margin: 0;
802        padding-right: 2rem;
803        font-size: @ini_toc_font_size;
804        background-size: 1rem;
805        background-position: 95% 50%;
806        background-repeat: no-repeat;
807        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>');
808
809        &.closed {
810            font-size: 0;
811            height: 1rem;
812            width: 2rem;
813            padding-right: 0;
814
815            &:before {
816                display: inline-block;
817                content: "";
818                width: .8rem;
819                height: .8rem;
820                margin-right: .5rem;
821                margin-top: .1rem;
822                background-size: .8rem;
823                background-position: center;
824                background-repeat: no-repeat;
825                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>');
826            }
827        }
828
829        span {
830            display: none;
831        }
832    }
833
834    a {
835        display: block;
836        font-size: @ini_toc_font_size;
837        color: @ini_toc_link_color;
838        .mikio-text-decoration(none);
839        padding: .2rem 0;
840
841        &:hover {
842            color: @ini_toc_link_hover_color;
843        }
844    }
845}
846
847.mikio-icon {
848    margin-right: .25rem;
849    // max-width: 1.4rem;
850    // max-height: 1.4rem;
851
852    svg {
853        // max-width: 1.4rem;
854        // max-height: 1.4rem;
855        vertical-align: middle;
856    }
857}
858
859.mikio-iicon {
860    display: inline-block;
861    width: 1.2rem;
862    height: 1.2rem;
863    background-size: 1.2rem;
864    background-position: center;
865    background-repeat: no-repeat;
866    vertical-align: middle;
867    margin-right: .25rem;
868    fill: currentColor;
869}
870
871.mikio .mode_show table,
872.mikio.dokuwiki .mode_showtag table.ul,
873.mikio .mode_admin table {
874    width: 100%;
875    border-collapse: collapse;
876    margin-bottom: 1rem;
877    font-size: @ini_table_font_size;
878
879    tr {
880        border-top: 1px solid @ini_table_row_border_color;
881    }
882
883    td, th {
884        // border-top: 1px solid @ini_table_row_border_color;
885        padding: .75rem;
886        text-align: left;
887    }
888
889    tbody tr {
890        &:nth-child(odd) {
891            background-color: @ini_table_odd_row_color;
892        }
893
894        &:nth-child(even) {
895            background-color: @ini_table_even_row_color;
896        }
897    }
898}
899
900.mikio-nav {
901    list-style: none;
902    margin: 0;
903    padding: 0;
904
905    .mikio-nav-item, .mikio-nav-dropdown {
906        display: inline-block;
907        padding: .5rem .2rem;
908        margin: 0 .5rem;
909    }
910
911    .mikio-nav-link {
912
913    }
914
915    .mikio-nav-dropdown {
916        position: relative;
917    }
918
919    .mikio-nav-dropdown > a {
920        display: inline-block;
921        padding: .2rem 1.2rem .2rem 0rem;
922        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>');
923        background-size: 1.2rem;
924        background-position: right;
925        background-repeat: no-repeat;
926    }
927
928    a {
929        .mikio-text-decoration(none);
930    }
931}
932
933.mikio-dropdown {
934    display: block;
935    position: absolute;
936    z-index: 10000;
937    min-width: 12rem;
938    right: 0;
939    padding: 1rem 1.5rem;
940    border: 1px solid @ini_dropdown_border_color;
941    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
942    background-color: @ini_dropdown_background_color;
943    color: @ini_dropdown_color;
944
945    &.closed {
946        display: none;
947    }
948
949    .mikio-dropdown-item {
950        display: flex;
951        align-items: center;
952        margin-top: .5rem;
953        margin-bottom: .5rem;
954    }
955
956    .mikio-dropdown-header {
957        margin: 0 0 1rem 0;
958    }
959
960    .mikio-dropdown-divider {
961        margin: 1rem -1rem;
962        border-bottom: 1px solid @ini_dropdown_border_color;
963    }
964
965    .mikio-nav-link {
966        margin: 0rem -1rem 0rem -1rem;
967        padding: .25rem 1rem .25rem 1rem;
968        transition: all 0.15s ease-in-out;
969
970        &:hover {
971            background-color: @ini_dropdown_hover_color;
972        }
973    }
974}
975
976.mikio-tabs {
977    padding: 0;
978    margin-bottom: -1px;
979
980    li {
981        strong {
982            .mikio-tab-active;
983        }
984
985        a {
986            padding: .5rem 1rem;
987            border: 1px solid transparent;
988            color: #007bff;
989            .mikio-text-decoration(none);
990            margin: 0;
991            background-color: transparent;
992
993            &:hover {
994                color: #0056b3;
995                border-color:#dee2e6 #dee2e6 #dee2e6;
996                background-color: transparent;
997            }
998        }
999    }
1000
1001    &:after {
1002        border-bottom: 0;
1003    }
1004}
1005
1006.mikio-tab-active {
1007    background-color: #fff;
1008    font-weight: normal;
1009    color: #495057;
1010    border-color: #dee2e6 #dee2e6 #fff;
1011    padding: .5rem 1rem;
1012    margin: 0;
1013    bottom: -1px;
1014    // margin-bottom: -1px;
1015}
1016
1017.mikio-tab-panel {
1018    margin-bottom: 0;
1019    background-color: #fff;
1020    border-width: 1px 1px 1px 1px;
1021    border-style: solid;
1022    border-color: #dee2e6;
1023    word-wrap: break-word;
1024    word-break: break-word;
1025}
1026
1027.mikio.dokuwiki div.section_highlight {
1028    background-color: @ini_section_edit_highlight;
1029    border-width: 0;
1030    margin: 0 -1rem;
1031    padding: 0 1rem;
1032}
1033
1034.mikio-input-file {
1035    position: absolute;
1036    // margin-top: -.5rem;
1037    top: 0;
1038    right: 0;
1039    left: 0;
1040    z-index: 5;
1041    padding: .25rem 1rem;
1042    line-height: 1.5;
1043    text-align: left;
1044    color: @ini_control_text_color;
1045    background-color: @ini_control_background_color;
1046    // border: .1px solid @ini_control_border_color;
1047    border: .1px solid @ini_input_border_color;
1048    border-radius: .25rem;
1049    -webkit-user-select: none;
1050    -moz-user-select: none;
1051    -ms-user-select: none;
1052    user-select: none;
1053    white-space: nowrap;
1054    overflow: hidden;
1055    text-overflow: ellipsis;
1056    box-sizing: border-box;
1057
1058    &:before {
1059        position: absolute;
1060        top: 0;
1061        right: 0;
1062        bottom: 0;
1063        z-index: 6;
1064        display: block;
1065        content: "Browse";
1066        padding: .25rem 1rem;
1067        line-height: 1.5;
1068        color: @ini_control_background_color;
1069        background-color: @ini_control_border_color;
1070        border-radius: 0 .25rem .25rem 0;
1071        border: 1px solid @ini_control_border_color;
1072        transition: all .15s ease-in-out;
1073    }
1074
1075    &:hover:before {
1076        background-color: @ini_control_background_color;
1077        color: @ini_control_text_color;
1078    }
1079}
1080
1081code, pre {
1082    overflow-x: auto;
1083    font-family: @ini_code_font_family;
1084    font-size: @ini_code_font_size;
1085    color: @ini_code_text_color;
1086    background-color: @ini_code_background_color;
1087    word-wrap: @ini_code_word_wrap;
1088    .mikio-pre-wrap;
1089    line-height: @ini_code_line_height;
1090}
1091
1092.mode_show {
1093    code, pre {
1094        border: 1px solid @ini_code_border_color;
1095        padding: 1em;
1096    }
1097}
1098
1099
1100/* Dokuwiki Patches */
1101.mikio-search,
1102.mikio .dokuwiki fieldset,
1103.mikio.dokuwiki .secedit,
1104.mikio .mode_revisions,
1105.mikio .mode_edit,
1106.mikio .mode_draft,
1107.mikio .mode_preview,
1108.mikio .mode_showtag,
1109.mikio .mode_admin {
1110    .mikio-controls;
1111}
1112
1113.mikio.dokuwiki .secedit {
1114    float: none;
1115    margin-top: 0;
1116    text-align: right;
1117}
1118
1119.mikio.dokuwiki fieldset {
1120    margin: 2rem auto;
1121    border: 0;
1122}
1123
1124.mikio.dokuwiki .mode_login,
1125.mikio.dokuwiki .mode_denied {
1126    .mikio-dialog;
1127}
1128
1129.mikio .mode_admin {
1130    input[type=text], input[type=password], input[type=email] {
1131        width: 100%;
1132    }
1133
1134    p {
1135        button + button {
1136            margin-left: .5rem;
1137        }
1138    }
1139
1140    div.ui-admin {
1141        ul.admin_tasks, ul.admin_plugins {
1142            float: none;
1143            display: grid;
1144            grid-template-columns: repeat(auto-fit, 15rem);
1145            width: auto;
1146            padding: 0;
1147            margin: 0;
1148            justify-content: center;
1149
1150            li {
1151                border: 1px solid @ini_control_border_color;
1152                border-radius: .25rem;
1153                margin: 1rem 1rem;
1154                background-color: @ini_control_background_color;
1155
1156                a {
1157                    display: flex;
1158                    flex-direction: column;
1159                    align-items: center;
1160                    justify-content: center;
1161                    text-align: center;
1162                    height: 4rem;
1163                    font-size: 1rem;
1164                    font-weight: normal;
1165                    padding: 1rem 2rem;
1166                    color: #333;
1167                    .mikio-text-decoration(none);
1168                    overflow: hidden;
1169                    transition: all .15s ease-in-out;
1170
1171                    span.icon {
1172                        width: auto;
1173                        height: auto;
1174                        min-height: auto;
1175                    }
1176
1177                    &:hover {
1178                        .mikio-text-decoration(none);
1179                        color: @ini_control_background_color;
1180                        background-color: @ini_control_border_color;
1181                        border-color: @ini_control_border_color;
1182
1183                        svg {
1184                            fill: @ini_control_background_color;
1185                        }
1186                    }
1187                }
1188            }
1189        }
1190    }
1191
1192    .mikio-config-table-header {
1193        background-color: #ddd;
1194        font-weight: bold;
1195
1196        .mikio-iicon {
1197            vertical-align: text-bottom;
1198        }
1199    }
1200
1201    #extension__list {
1202        ul.extensionList {
1203            li {
1204                border-width: 0 0 1px 0;
1205                border-style: solid;
1206                border-color: @ini_table_row_border_color;
1207                padding: .75rem;
1208                margin: 0;
1209                text-align: left;
1210
1211                &:nth-child(odd) {
1212                    background-color: @ini_table_odd_row_color;
1213                }
1214
1215                &:nth-child(even) {
1216                    background-color: @ini_table_even_row_color;
1217                }
1218            }
1219        }
1220    }
1221
1222    button#usrmgr__del {
1223        .mikio-button-danger;
1224        margin-right: .5rem;
1225    }
1226
1227    #acl__tree {
1228        background-color: #fff;
1229    }
1230
1231    #acl_manager table tr {
1232        &:nth-child(odd) {
1233            background-color: @ini_table_odd_row_color;
1234        }
1235
1236        &:nth-child(even) {
1237            background-color: @ini_table_even_row_color;
1238        }
1239    }
1240}
1241
1242.mode_admin,
1243.mode_login,
1244.mode_denied,
1245.mode_revisions,
1246.mode_recent,
1247.mode_backlink,
1248.mode_media,
1249.mode_index,
1250.mode_search,
1251.mode_edit,
1252.mode_draft,
1253.mode_preview,
1254.mode_showtag {
1255    .mikio-content, .mikio-page-fill {
1256        .mikio-admin;
1257    }
1258}
1259
1260.mikio #plugin__styling button.primary {
1261    font-weight: inherit;
1262}
1263
1264.mikio.dokuwiki .secedit {
1265    button {
1266        .mikio-button-small;
1267    }
1268}
1269
1270.mikio img {
1271    max-width: 100%;
1272
1273    &.media {
1274        margin: .2rem 0;
1275    }
1276
1277    &.medialeft {
1278        margin: .2rem 1em .2rem 0;
1279    }
1280
1281    &.mediaright {
1282        margin: .2rem 0 .2rem 1rem;
1283    }
1284
1285    &.mediacenter {
1286        margin: .2rem auto;
1287    }
1288}
1289
1290.mikio div.dokuwiki div.inclmeta {
1291    margin-top: .5rem;
1292    padding-top: .5rem;
1293}
1294
1295.mikio #dw__login label[for=remember__me] {
1296    margin-left: 0;
1297}
1298
1299.mikio #config__manager {
1300    fieldset {
1301        background-color: transparent;
1302        margin: 0;
1303        padding: 0;
1304
1305        legend {
1306            text-align: left;
1307        }
1308    }
1309
1310    tr {
1311        .input, input {
1312            color: inherit;
1313            background-color: transparent;
1314        }
1315
1316        textarea, select {
1317            color: inherit;
1318            background-color: #fff;
1319        }
1320
1321        select {
1322            width: 100%;
1323        }
1324    }
1325
1326    td {
1327        &.label {
1328            display: grid;
1329            grid-template-columns: auto 2rem;
1330
1331            span.outkey {
1332                float: none;
1333                font-size: 100%;
1334                background-color: transparent;
1335                margin: 0;
1336                grid-column: 1 / span 1;
1337                grid-row: 1 / span 1;
1338            }
1339
1340            label {
1341                grid-column: 1 / span 1;
1342                grid-row: 2 / span 1;
1343            }
1344
1345            img {
1346                float: none;
1347                grid-column: 2 / span 1;
1348                grid-row: 1 / span 2;
1349                align-self: center;
1350            }
1351        }
1352
1353        input.edit {
1354            width: 100%;
1355        }
1356    }
1357
1358    button[type=submit] {
1359        .mikio-button-submit;
1360    }
1361}
1362
1363.mode_revisions .mikio-article {
1364    li {
1365        padding: .5rem 1rem;
1366        border-top: 1px solid #e5e5e5;
1367    }
1368
1369    li:nth-child(odd) {
1370        background-color: #fff;
1371    }
1372
1373    .li {
1374        display: grid;
1375        grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem;
1376        align-items: center;
1377        text-align: center;
1378        font-size: 90%;
1379
1380        a.wikilink1 {
1381            text-align: left;
1382        }
1383
1384        span.sizechange {
1385            width: 100%;
1386        }
1387    }
1388
1389    .sum {
1390        display: block;
1391    }
1392}
1393
1394.mode_recent .mikio-article {
1395    li {
1396        padding: .5rem 1rem;
1397        border-top: 1px solid #e5e5e5;
1398    }
1399
1400    li:nth-child(odd) {
1401        background-color: #fff;
1402    }
1403
1404    .li {
1405        display: grid;
1406        grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem;
1407        align-items: center;
1408        text-align: center;
1409        font-size: 90%;
1410
1411        a.wikilink1, span.curid {
1412            text-align: left;
1413        }
1414
1415        span.sizechange {
1416            width: 100%;
1417        }
1418    }
1419
1420    select {
1421        .mikio-control;
1422        .mikio-select;
1423    }
1424}
1425
1426
1427.mikio #mediamanager__page, #media__manager {
1428    button, .qq-upload-button, .qq-upload-list a {
1429        .mikio-control;
1430        .mikio-button;
1431    }
1432
1433    .qq-upload-list a.qq-upload-cancel {
1434        .mikio-button-danger;
1435    }
1436
1437    button.qq-upload-action {
1438        .mikio-button-submit;
1439    }
1440
1441    input[type=text], input[type=search], textarea {
1442        .mikio-control;
1443        .mikio-input-text
1444    }
1445
1446    .ui-resizable-e {
1447        background: transparent;
1448
1449        &:hover {
1450            background-color: #999;
1451        }
1452    }
1453
1454    .namespaces, #media__tree {
1455        h2 {
1456            .mikio-tab-active;
1457        }
1458
1459        .panelHeader {
1460            .mikio-tab-panel;
1461        }
1462
1463        ul, ul.idx {
1464            margin-top: 0;
1465
1466            ul {
1467                margin-left: 1rem;
1468            }
1469
1470            li {
1471                margin: .25rem 0;
1472                white-space: nowrap;
1473            }
1474
1475            a {
1476                .mikio-text-decoration(none);
1477                color: #333;
1478            }
1479        }
1480    }
1481
1482    .filelist, .qq-uploader {
1483        .panelHeader {
1484            .mikio-tab-panel;
1485        }
1486
1487        form.options {
1488            margin-top: 0;
1489
1490            .ui-controlgroup-horizontal label {
1491                margin-right: 0;
1492            }
1493        }
1494
1495        .panelContent {
1496            padding-top: 1rem;
1497            text-align: center;
1498        }
1499
1500        ul {
1501            &.thumbs {
1502                margin: 0;
1503
1504                li {
1505                    width: 200px;
1506                    background-color: #fff;
1507
1508                    dt a {
1509                        display: inline;
1510                    }
1511
1512                    dd {
1513                        width: auto;
1514                        font-size: 90%;
1515                        color: #666;
1516                        margin-bottom: .25rem;
1517                    }
1518
1519                    .name {
1520                        font-weight: normal;
1521
1522                        a {
1523                            color: #000;
1524                        }
1525                    }
1526                }
1527            }
1528
1529            &.tabs {
1530                .mikio-tabs;
1531            }
1532        }
1533
1534        .rows {
1535            li {
1536                background-color: @ini_table_odd_row_color;
1537                max-height: none;
1538                font-size: 90%;
1539
1540                &:nth-child(2n+1) {
1541                    background-color: @ini_table_even_row_color;
1542                }
1543
1544                a {
1545                    font-weight: normal;
1546                    color: #333;
1547                }
1548
1549                dt a {
1550                    height: auto;
1551                }
1552
1553                dd.name {
1554                    text-align: left;
1555                }
1556            }
1557        }
1558
1559        .qq-upload-list {
1560            margin-top: 1rem;
1561
1562            li {
1563                &:hover {
1564                    background-color: transparent;
1565                }
1566            }
1567        }
1568
1569        .qq-action-container {
1570            margin-top: 1rem;
1571            padding-top: 1rem;
1572            border-top: 1px solid #dee2e6;
1573        }
1574    }
1575
1576    .file {
1577        .panelHeader {
1578            .mikio-tab-panel;
1579
1580            a {
1581                font-weight: normal;
1582                color: #333;
1583            }
1584        }
1585
1586        ul {
1587            &.tabs {
1588                .mikio-tabs;
1589            }
1590        }
1591
1592        #mediamanager__btn_delete button {
1593            .mikio-button-danger;
1594        }
1595
1596        dl {
1597            font-size: 90%;
1598
1599            dt {
1600                padding: .25rem .5rem;
1601                background-color: #f0f0f0;
1602            }
1603
1604            dd {
1605                padding: .25rem .5rem;
1606                background-color: #f8f8f8;
1607            }
1608        }
1609
1610        input[type=text], form.meta textarea.edit {
1611            width: 100%;
1612            min-width: 100%;
1613            max-width: 100%;
1614        }
1615
1616        button[name="mediado[save]"] {
1617            .mikio-button-submit;
1618        }
1619    }
1620
1621    .panelContent {
1622        background-color: #fff;
1623        margin: 0 10px 0 0;
1624        border-width: 0 1px 1px 1px;
1625        border-style: solid;
1626        border-color: #dee2e6;
1627        padding: .5rem;
1628    }
1629
1630    #media__opts {
1631        border-bottom: 1px solid #dee2e6;
1632        padding-bottom: .75rem;
1633    }
1634
1635    #media__content {
1636        .odd, .even {
1637            border-top: 1px solid @ini_table_row_border_color;
1638            font-size: 90%;
1639            display: grid;
1640            grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem;
1641            align-items: center;
1642
1643            a.mediafile {
1644                grid-column: 2 / span 1;
1645                grid-row: 1 / span 1;
1646                margin: 0;
1647                word-break: break-word;
1648            }
1649
1650            span.info {
1651                grid-column: 3 / span 1;
1652                grid-row: 1 / span 1;
1653                text-align: center;
1654
1655                br {
1656                    display: inline-block;
1657                }
1658            }
1659
1660            a:nth-child(2) {
1661                grid-column: 4 / span 1;
1662                grid-row: 1 / span 1;
1663                text-align: center;
1664            }
1665
1666            a:nth-child(3) {
1667                grid-column: 5 / span 1;
1668                grid-row: 1 / span 1;
1669                text-align: center;
1670            }
1671
1672            a.btn_media_delete {
1673                grid-column: 6 / span 1;
1674                grid-row: 1 / span 1;
1675                text-align: center;
1676            }
1677
1678            div.example, div.clearer, br {
1679                display: none;
1680            }
1681
1682            div.detail {
1683                grid-column: 1 / span 1;
1684                grid-row: 1 / span 1;
1685                padding: 0;
1686
1687                div.thumb {
1688                    float: none;
1689                    margin: 0;
1690
1691                    img {
1692                        max-width: 48px;
1693                        max-height: 48px;
1694                    }
1695                }
1696            }
1697        }
1698
1699        .odd {
1700            background-color: @ini_table_odd_row_color;
1701        }
1702
1703        .even {
1704            background-color: @ini_table_even_row_color;
1705        }
1706    }
1707}
1708
1709.mikio.dokuwiki .mode_search .mikio-article {
1710    .search-results-form {
1711        fieldset.search-form {
1712            display: grid;
1713            margin: 0 auto;
1714            max-width: 800px;
1715            grid-template-columns: auto  10rem 10rem;
1716            grid-gap: 1rem;
1717
1718            input[name=q] {
1719                grid-column: 1 / span 1;
1720                grid-row: 1 / span 1;
1721                width: 100%;
1722            }
1723
1724            button[type=submit] {
1725                .mikio-button-submit;
1726                grid-column: 2 / span 1;
1727                grid-row: 1 / span 1;
1728            }
1729
1730            .toggleAssistant {
1731                .mikio-button-small;
1732                grid-column: 3 / span 1;
1733                grid-row: 1 / span 1;
1734                flex: 0;
1735            }
1736
1737            .advancedOptions {
1738                grid-column: 1 / span 3;
1739                grid-row: 2 / span 1;
1740
1741                .toggle {
1742                    .current {
1743                        padding: .2rem 1.2rem .2rem 0rem;
1744                        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>');
1745                        background-size: 1.2rem;
1746                        background-position: right;
1747                        background-repeat: no-repeat;
1748
1749                        &:after {
1750                            content: "";
1751                        }
1752                    }
1753
1754                    ul {
1755                        position: absolute;
1756                        right: 0;
1757                        top: .5rem;
1758                        padding: 1rem 1.5rem;
1759                        border: 1px solid @ini_dropdown_border_color;
1760                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1761                        background-color: @ini_dropdown_background_color;
1762                        color: #999;
1763
1764                        a {
1765                            transition: all 0.15s ease-in-out;
1766                            color: @ini_dropdown_color;
1767                            .mikio-text-decoration(none);
1768                            font-style: normal;
1769                            margin: 0 -1rem;
1770                            padding: 0 1rem;
1771
1772                            &:hover {
1773                                background-color: @ini_dropdown_hover_color;
1774                            }
1775                        }
1776                    }
1777                }
1778            }
1779        }
1780    }
1781
1782    h2 {
1783        margin-top: .5rem;
1784        padding-top: 1rem;
1785        border-top: 1px solid #dee2e6;
1786    }
1787
1788    .search_quickresult ul {
1789        background-color: #fff;
1790        padding: .5rem 1rem;
1791
1792        li {
1793            float: none;
1794            display: inline-block;
1795            text-align: left;
1796            padding-left: 0;
1797
1798            &:before {
1799                font-size: 1.2rem;
1800                content:'\2022';
1801                margin-right:0.5em;
1802            }
1803
1804            .li {
1805                display: inline-block;
1806            }
1807        }
1808    }
1809
1810    div.search_quickresult ul li {
1811        width: auto;
1812    }
1813
1814    .search_fullpage_result {
1815        border-top: 1px solid @ini_table_row_border_color;
1816        padding: .75rem;
1817        background-color: @ini_table_odd_row_color;
1818
1819        &:nth-child(2n+1) {
1820            background-color: @ini_table_even_row_color;
1821        }
1822
1823        .snippet {
1824            font-size: 90%;
1825            margin-bottom: 0;
1826        }
1827    }
1828}
1829
1830#index__tree {
1831    background-color: #fff;
1832    border: 1px solid #dee2e6;
1833    padding: 0 .5rem;
1834
1835    a {
1836        color: #333;
1837        .mikio-text-decoration(none);
1838    }
1839
1840    .curid a {
1841        color: red;
1842    }
1843}
1844
1845.mikio.dokuwiki ul.tabs {
1846    .mikio-tabs;
1847}
1848
1849.mikio .mode_draft {
1850    table {
1851        margin-bottom: 1rem;
1852    }
1853}
1854
1855#dokuwiki__detail {
1856    .mikio-admin;
1857    height: 100vh;
1858    padding: 0 2rem;
1859
1860    .content {
1861        display: flex;
1862
1863        .img_detail dl {
1864            display: grid;
1865            grid-template-columns: 4rem auto;
1866            align-items: center;
1867
1868            dt {
1869                font-weight: bold;
1870            }
1871        }
1872    }
1873}
1874
1875/* Plugin Patches */
1876/* FastWiki Plugin Patch - .mikio .content_partial */
1877.mikio .content_partial {
1878    .mikio-controls;
1879}
1880
1881/* Discussion Plugin Patch - .mikio .content_partial */
1882.mikio div.dokuwiki div.comment_wrapper {
1883    .mikio-controls;
1884    padding: 1em;
1885
1886    input[type=submit] {
1887        .mikio-control;
1888        .mikio-button;
1889    }
1890
1891    h2 {
1892        margin: 0;
1893    }
1894
1895    .comment_form {
1896        margin-top: 0;
1897    }
1898
1899    .comment_subscribe {
1900        input {
1901            float: none;
1902        }
1903
1904        label {
1905            float: none;
1906            display: inline-block;
1907        }
1908    }
1909
1910    .comment_buttons {
1911        float: none;
1912        text-align: right;
1913        margin-top: 1em;
1914    }
1915}
1916
1917
1918
1919/* Mobile */
1920@media (max-width: 768px) {
1921    .mikio-small-only {
1922        display: inline-block;
1923    }
1924
1925    .mikio-navbar {
1926        display: grid;
1927        grid-template-columns: auto 3rem;
1928
1929        .mikio-navbar-brand {
1930            grid-column: 1 / span 1;
1931            grid-row: 1 / span 1;
1932            margin-bottom: .5rem;
1933        }
1934
1935        .mikio-navbar-toggle {
1936            display: block;
1937            margin-bottom: .5rem;
1938            grid-column: 2 / span 1;
1939            grid-row: 1 / span 1;
1940        }
1941
1942        .mikio-navbar-toggle.closed + .mikio-navbar-collapse {
1943            display: none;
1944        }
1945
1946        .mikio-navbar-collapse {
1947            grid-column: 1 / span 2;
1948            grid-row: 2 / span 1;
1949            flex-direction: column;
1950            margin: 0 -2rem;
1951            padding-top: .5rem;
1952            padding-right: 1rem;
1953            border-top: 1px solid rgba(0, 0, 0, 0.1);
1954        }
1955
1956        .mikio-nav-item {
1957            display: block;
1958            width: 100%;
1959            padding: .5rem 2rem;
1960            box-sizing: border-box;
1961            text-align: center;
1962        }
1963
1964        .mikio-dropdown-item {
1965            justify-content: center;
1966        }
1967
1968        .mikio-nav {
1969            width: 100%;
1970        }
1971
1972        .mikio-nav-dropdown {
1973            width: 100%;
1974            text-align: center;
1975            margin: 0;
1976            box-sizing: border-box;
1977        }
1978
1979        .mikio-nav-dropdown .mikio-dropdown {
1980            position: relative;
1981            border: 0;
1982            box-shadow: none;
1983        }
1984    }
1985
1986    .mikio-hero {
1987        flex-direction: column;
1988
1989        .mikio-hero-image-resize {
1990            height: auto;
1991        }
1992
1993        .mikio-hero-image {
1994            background-image: none !important;
1995        }
1996    }
1997
1998    .mikio-page {
1999        display: grid;
2000        grid-template-columns: auto 2.5rem;
2001        // grid-template-rows: min-content auto;
2002    }
2003
2004    .mode_revisions,
2005    .mode_edit,
2006    .mode_login,
2007    .mode_denied,
2008    .mode_draft,
2009    .mode_preview,
2010    .mode_showtag,
2011    .mode_admin {
2012        .mikio-page {
2013            grid-template-columns: auto;
2014        }
2015    }
2016
2017    .mikio #config__manager td .input,
2018    .mikio #config__manager td input.edit,
2019    .mikio #config__manager tr select {
2020        width: auto;
2021    }
2022
2023    .mikio-content {
2024        grid-column: 1 / span 1;
2025        grid-row: 2 / span 1;
2026        padding-bottom: 1rem;
2027        // padding-right: 0;
2028        width: auto;
2029    }
2030
2031    /* Sidebar */
2032    .mikio-sidebar {
2033        grid-column: 1 / span 2;
2034        width: auto;
2035
2036        .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse {
2037            display: none;
2038        }
2039
2040        &.mikio-sidebar-left {
2041            grid-row: 1 / span 1;
2042            border-right: 0;
2043            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2044        }
2045
2046        &.mikio-sidebar-right {
2047            grid-row: 3 / span 1;
2048            border-left: 0;
2049            border-top: 1px solid rgba(0, 0, 0, 0.2);
2050        }
2051
2052        .mikio-sidebar-toggle {
2053            display: block;
2054        }
2055    }
2056
2057    /* Page Tools */
2058    #dw__pagetools {
2059        grid-column: 2 / span 1;
2060        grid-row: 2 / span 1;
2061    }
2062
2063    .mikio.dokuwiki div.ui-admin #admin__version {
2064        padding-right: 1rem;
2065    }
2066
2067    .mikio-page-fill {
2068        .mikio-sidebar {
2069            display: none;
2070        }
2071    }
2072}
2073
2074@media print {
2075    .mikio {
2076        .mikio-navbar-collapse,
2077        .mikio-toc,
2078        .mikio-sidebar,
2079        #dw__pagetools,
2080        .mikio-search {
2081            display: none !important;;
2082        }
2083
2084        .mikio-navbar {
2085            box-shadow: none !important;;
2086        }
2087
2088        .mikio-hero {
2089            .mikio-hero-text {
2090                min-height: auto;
2091                padding-bottom: 0;
2092            }
2093        }
2094
2095        .mikio-breadcrumbs, .mikio-hero, .mikio-footer {
2096            background-color: #fff !important;
2097        }
2098    }
2099}