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