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