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