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