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