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/* CSS Variables */
33:root[data-theme-auto="true"] {
34    --display-theme-light: none !important;
35    --display-theme-dark: none !important;
36    --display-theme-auto: inline-block !important;
37}
38
39:root[data-theme="theme-light"] {
40    --text: @ini_text;
41    --link: @ini_link;
42    --link-hover: @ini_link_hover;
43    --link-visited: @ini_link_visited;
44    --link-active: @ini_link_active;
45    --existing: @ini_existing;
46    --existing-hover: @ini_existing_hover;
47    --existing-visited: @ini_existing_visited;
48    --existing-active: @ini_existing_active;
49    --missing: @ini_missing;
50    --missing-hover: @ini_missing_hover;
51    --missing-visited: @ini_missing_visited;
52    --missing-active: @ini_missing_active;
53    --background: @ini_background;
54    --admin-background-color: @ini_admin_background_color;
55    --code-text-color: @ini_code_text_color;
56    --code-border-color: @ini_code_border_color;
57    --code-background-color: @ini_code_background_color;
58    --control-text-color: @ini_control_text_color;
59    --control-border-color: @ini_control_border_color;
60    --control-background-color: @ini_control_background_color;
61    --input-border-color: @ini_input_border_color;
62    --button-text-color: @ini_button_text_color;
63    --button-background-color: @ini_button_background_color;
64    --button-border-color: @ini_button_border_color;
65    --button-text-hover-color: @ini_button_text_hover_color;
66    --button-background-hover-color: @ini_button_background_hover_color;
67    --button-border-hover-color: @ini_button_border_hover_color;
68    --button-search-text-color: @ini_button_search_text_color;
69    --button-search-background-color: @ini_button_search_background_color;
70    --button-search-border-color: @ini_button_search_border_color;
71    --button-search-text-hover-color: @ini_button_search_text_hover_color;
72    --button-search-background-hover-color: @ini_button_search_background_hover_color;
73    --button-search-border-hover-color: @ini_button_search_border_hover_color;
74    --button-default-text-color: @ini_button_default_text_color;
75    --button-default-background-color: @ini_button_default_background_color;
76    --button-default-border-color: @ini_button_default_border_color;
77    --button-default-text-hover-color: @ini_button_default_text_hover_color;
78    --button-default-background-hover-color: @ini_button_default_background_hover_color;
79    --button-default-border-hover-color: @ini_button_default_border_hover_color;
80    --topheader-background-color: @ini_topheader_background_color;
81    --header-background-color: @ini_header_background_color;
82    --navbar-background-color: @ini_navbar_background_color;
83    --navbar-border-color: @ini_navbar_border_color;
84    --navbar-brand-text-color: @ini_navbar_brand_text_color;
85    --navbar-brand-tagline-color: @ini_navbar_brand_tagline_color;
86    --navbar-link-color: @ini_navbar_link_color;
87    --navbar-link-hover-color: @ini_navbar_link_hover_color;
88    --subnavbar-text-color: @ini_subnavbar_text_color;
89    --subnavbar-link-color: @ini_subnavbar_link_color;
90    --subnavbar-link-hover-color: @ini_subnavbar_link_hover_color;
91    --subnavbar-background-color: @ini_subnavbar_background_color;
92    --subnavbar-border-color: @ini_subnavbar_border_color;
93    --tag-background-color: @ini_tag_background_color;
94    --tag-text-color: @ini_tag_text_color;
95    --breadcrumb-background-color: @ini_breadcrumb_background_color;
96    --breadcrumb-text-color: @ini_breadcrumb_text_color;
97    --breadcrumb-link-color: @ini_breadcrumb_link_color;
98    --breadcrumb-link-hover-color: @ini_breadcrumb_link_hover_color;
99    --hero-title-color: @ini_hero_title_color;
100    --hero-subtitle-color: @ini_hero_subtitle_color;
101    --hero-background-color: @ini_hero_background_color;
102    --sidebar-text-color: @ini_sidebar_text_color;
103    --sidebar-link-color: @ini_sidebar_link_color;
104    --sidebar-link-hover-color: @ini_sidebar_link_hover_color;
105    --sidebar-background-color: @ini_sidebar_background_color;
106    --sidebar-border-color: @ini_sidebar_border_color;
107    --content-background: @ini_content_background;
108    --toc-background-color: @ini_toc_background_color;
109    --toc-border-color: @ini_toc_border_color;
110    --toc-link-color: @ini_toc_link_color;
111    --toc-link-hover-color: @ini_toc_link_hover_color;
112    --pagetools-color: @ini_pagetools_color;
113    --pagetools-hover-color: @ini_pagetools_hover_color;
114    --footer-text-color: @ini_footer_text_color;
115    --footer-link-color: @ini_footer_link_color;
116    --footer-link-hover-color: @ini_footer_link_hover_color;
117    --footer-background-color: @ini_footer_background_color;
118    --table-header-row-background-color: @ini_table_header_row_background_color;
119    --table-header-row-text-color: @ini_table_header_row_text_color;
120    --table-row-border-color: @ini_table_row_border_color;
121    --table-odd-row-background-color: @ini_table_odd_row_background_color;
122    --table-odd-row-text-color: @ini_table_odd_row_text_color;
123    --table-even-row-background-color: @ini_table_even_row_background_color;
124    --table-even-row-text-color: @ini_table_even_row_text_color;
125    --dropdown-color: @ini_dropdown_color;
126    --dropdown-hover-color: @ini_dropdown_hover_color;
127    --dropdown-border-color: @ini_dropdown_border_color;
128    --dropdown-background-color: @ini_dropdown_background_color;
129    --section-edit-highlight: @ini_section_edit_highlight;
130    --tree-background-color: @ini_tree_background_color;
131    --tree-border-color: @ini_tree_border_color;
132    --tab-color: @ini_tab_color;
133    --tab-background-color: @ini_tab_background_color;
134    --tab-border-color: @ini_tab_border_color;
135    --tab-hover-color: @ini_tab_hover_color;
136    --tab-background-hover-color: @ini_tab_background_hover_color;
137    --tab-border-hover-color: @ini_tab_border_hover_color;
138    --tab-active-color: @ini_tab_active_color;
139    --tab-active-background-color: @ini_tab_active_background_color;
140    --tab-active-border-color: @ini_tab_active_border_color;
141    --display-theme-light: inline-block;
142    --display-theme-dark: none;
143    --display-theme-auto: none;
144}
145
146:root[data-theme="theme-dark"] {
147    --text: @ini_darkmode_text;
148    --link: @ini_darkmode_link;
149    --link-hover: @ini_darkmode_link_hover;
150    --link-visited: @ini_darkmode_link_visited;
151    --link-active: @ini_darkmode_link_active;
152    --existing: @ini_darkmode_existing;
153    --existing-hover: @ini_darkmode_existing_hover;
154    --existing-visited: @ini_darkmode_existing_visited;
155    --existing-active: @ini_darkmode_existing_active;
156    --missing: @ini_darkmode_missing;
157    --missing-hover: @ini_darkmode_missing_hover;
158    --missing-visited: @ini_darkmode_missing_visited;
159    --missing-active: @ini_darkmode_missing_active;
160    --background: @ini_darkmode_background;
161    --admin-background-color: @ini_darkmode_admin_background_color;
162    --code-text-color: @ini_darkmode_code_text_color;
163    --code-border-color: @ini_darkmode_code_border_color;
164    --code-background-color: @ini_darkmode_code_background_color;
165    --control-text-color: @ini_darkmode_control_text_color;
166    --control-border-color: @ini_darkmode_control_border_color;
167    --control-background-color: @ini_darkmode_control_background_color;
168    --input-border-color: @ini_darkmode_input_border_color;
169    --button-text-color: @ini_darkmode_button_text_color;
170    --button-background-color: @ini_darkmode_button_background_color;
171    --button-border-color: @ini_darkmode_button_border_color;
172    --button-text-hover-color: @ini_darkmode_button_text_hover_color;
173    --button-background-hover-color: @ini_darkmode_button_background_hover_color;
174    --button-border-hover-color: @ini_darkmode_button_border_hover_color;
175    --button-search-text-color: @ini_darkmode_button_search_text_color;
176    --button-search-background-color: @ini_darkmode_button_search_background_color;
177    --button-search-border-color: @ini_darkmode_button_search_border_color;
178    --button-search-text-hover-color: @ini_darkmode_button_search_text_hover_color;
179    --button-search-background-hover-color: @ini_darkmode_button_search_background_hover_color;
180    --button-search-border-hover-color: @ini_darkmode_button_search_border_hover_color;
181    --button-default-text-color: @ini_darkmode_button_default_text_color;
182    --button-default-background-color: @ini_darkmode_button_default_background_color;
183    --button-default-border-color: @ini_darkmode_button_default_border_color;
184    --button-default-text-hover-color: @ini_darkmode_button_default_text_hover_color;
185    --button-default-background-hover-color: @ini_darkmode_button_default_background_hover_color;
186    --button-default-border-hover-color: @ini_darkmode_button_default_border_hover_color;
187    --topheader-background-color: @ini_darkmode_topheader_background_color;
188    --header-background-color: @ini_darkmode_header_background_color;
189    --navbar-background-color: @ini_darkmode_navbar_background_color;
190    --navbar-border-color: @ini_darkmode_navbar_border_color;
191    --navbar-brand-text-color: @ini_darkmode_navbar_brand_text_color;
192    --navbar-brand-tagline-color: @ini_darkmode_navbar_brand_tagline_color;
193    --navbar-link-color: @ini_darkmode_navbar_link_color;
194    --navbar-link-hover-color: @ini_darkmode_navbar_link_hover_color;
195    --subnavbar-text-color: @ini_darkmode_subnavbar_text_color;
196    --subnavbar-link-color: @ini_darkmode_subnavbar_link_color;
197    --subnavbar-link-hover-color: @ini_darkmode_subnavbar_link_hover_color;
198    --subnavbar-background-color: @ini_darkmode_subnavbar_background_color;
199    --subnavbar-border-color: @ini_darkmode_subnavbar_border_color;
200    --tag-background-color: @ini_darkmode_tag_background_color;
201    --tag-text-color: @ini_darkmode_tag_text_color;
202    --breadcrumb-background-color: @ini_darkmode_breadcrumb_background_color;
203    --breadcrumb-text-color: @ini_darkmode_breadcrumb_text_color;
204    --breadcrumb-link-color: @ini_darkmode_breadcrumb_link_color;
205    --breadcrumb-link-hover-color: @ini_darkmode_breadcrumb_link_hover_color;
206    --hero-title-color: @ini_darkmode_hero_title_color;
207    --hero-subtitle-color: @ini_darkmode_hero_subtitle_color;
208    --hero-background-color: @ini_darkmode_hero_background_color;
209    --sidebar-text-color: @ini_darkmode_sidebar_text_color;
210    --sidebar-link-color: @ini_darkmode_sidebar_link_color;
211    --sidebar-link-hover-color: @ini_darkmode_sidebar_link_hover_color;
212    --sidebar-background-color: @ini_darkmode_sidebar_background_color;
213    --sidebar-border-color: @ini_darkmode_sidebar_border_color;
214    --content-background: @ini_darkmode_content_background;
215    --toc-background-color: @ini_darkmode_toc_background_color;
216    --toc-border-color: @ini_darkmode_toc_border_color;
217    --toc-link-color: @ini_darkmode_toc_link_color;
218    --toc-link-hover-color: @ini_darkmode_toc_link_hover_color;
219    --pagetools-color: @ini_darkmode_pagetools_color;
220    --pagetools-hover-color: @ini_darkmode_pagetools_hover_color;
221    --footer-text-color: @ini_darkmode_footer_text_color;
222    --footer-link-color: @ini_darkmode_footer_link_color;
223    --footer-link-hover-color: @ini_darkmode_footer_link_hover_color;
224    --footer-background-color: @ini_darkmode_footer_background_color;
225    --table-header-row-background-color: @ini_darkmode_table_header_row_background_color;
226    --table-header-row-text-color: @ini_darkmode_table_header_row_text_color;
227    --table-row-border-color: @ini_darkmode_table_row_border_color;
228    --table-odd-row-background-color: @ini_darkmode_table_odd_row_background_color;
229    --table-odd-row-text-color: @ini_darkmode_table_odd_row_text_color;
230    --table-even-row-background-color: @ini_darkmode_table_even_row_background_color;
231    --table-even-row-text-color: @ini_darkmode_table_even_row_text_color;
232    --dropdown-color: @ini_darkmode_dropdown_color;
233    --dropdown-hover-color: @ini_darkmode_dropdown_hover_color;
234    --dropdown-border-color: @ini_darkmode_dropdown_border_color;
235    --dropdown-background-color: @ini_darkmode_dropdown_background_color;
236    --section-edit-highlight: @ini_darkmode_section_edit_highlight;
237    --tree-background-color: @ini_darkmode_tree_background_color;
238    --tree-border-color: @ini_darkmode_tree_border_color;
239    --tab-color: @ini_darkmode_tab_color;
240    --tab-background-color: @ini_darkmode_tab_background_color;
241    --tab-border-color: @ini_darkmode_tab_border_color;
242    --tab-hover-color: @ini_darkmode_tab_hover_color;
243    --tab-background-hover-color: @ini_darkmode_tab_background_hover_color;
244    --tab-border-hover-color: @ini_darkmode_tab_border_hover_color;
245    --tab-active-color: @ini_darkmode_tab_active_color;
246    --tab-active-background-color: @ini_darkmode_tab_active_background_color;
247    --tab-active-border-color: @ini_darkmode_tab_active_border_color;
248    --display-theme-light: none;
249    --display-theme-dark: inline-block;
250    --display-theme-auto: none;
251}
252
253.mikio-sticky {
254    position: -webkit-sticky;
255    position: sticky;
256}
257
258.mikio-pre-wrap {
259    white-space: pre-wrap;
260    white-space: -moz-pre-wrap;
261    white-space: -pre-wrap;
262    white-space: -o-pre-wrap;
263}
264
265.mikio-controls {
266
267    button,
268    input,
269    optgroup,
270    select,
271    textarea {
272        .mikio-control();
273        .mikio-input-text();
274    }
275
276    button,
277    input[type=button],
278    input[type=image] {
279        .mikio-button();
280    }
281
282    button#edbtn__save,
283    button[name="run[save]"] {
284        .mikio-button-submit();
285    }
286
287    input[type=text],
288    input[type=search],
289    input[type=password],
290    input[type=email] {
291        .mikio-appearance();
292    }
293
294    textarea {
295        margin-bottom: 1rem;
296        width: 100%;
297        word-wrap: break-word;
298        overflow: auto;
299        resize: vertical;
300        white-space: pre-wrap;
301    }
302
303    select {
304        .mikio-select();
305    }
306
307    .toolbutton {
308        .mikio-toolbar-button();
309    }
310}
311
312
313/* Containers */
314html {
315    overflow-x: auto;
316    overflow-y: scroll;
317    display: block;
318    padding: 0;
319    font-size: @ini_font_size;
320    line-height: @ini_line_height;
321}
322
323// body.mikio {
324body {
325    display: flex;
326    flex-direction: column;
327    min-height: 100vh;
328    font-family: @ini_font_family;
329    letter-spacing: -.01em;
330    padding: 0;
331}
332
333html,
334body {
335    background-color: var(--background);
336    color: var(--text);
337    margin: 0;
338}
339
340#dokuwiki__site {
341    min-height: 100vh;
342}
343
344.mikio .site {
345    min-height: 100vh;
346    display: flex;
347    flex-direction: column;
348}
349
350.mikio-container {
351    max-width: @ini_site_width;
352    margin: 0 auto;
353}
354
355.mikio-page-topheader {
356    padding: 0 2rem;
357    border-bottom: 1px solid var(--navbar-border-color);
358    background-color: var(--topheader-background-color);
359    box-sizing: border-box;
360    width: 100%;
361    z-index: 1001;
362}
363
364.mikio-page-header {
365    padding: 0 2rem;
366    background-color: var(--header-background-color);
367    box-sizing: border-box;
368    width: 100%;
369    z-index: 999;
370}
371
372.mikio-sidebar-header {
373    border-bottom: 1px solid var(--sidebar-border-color);
374}
375
376.mikio-sidebar-footer {
377    border-top: 1px solid var(--sidebar-border-color);
378}
379
380.mikio-page-contentheader {}
381
382.mikio-page-contentfooter {}
383
384.mikio-page-footer {}
385
386.mikio-page-bottomfooter {}
387
388.mikio-admin {
389    background-color: var(--admin-background-color);
390}
391
392.mikio-small-only {
393    display: none;
394}
395
396.mikio {
397
398    .mikio-breadcrumbs,
399    .mikio-youarehere {
400        .mikio-container {
401            flex-direction: row;
402        }
403
404        padding: .5rem 1rem;
405        background-color: var(--breadcrumb-background-color);
406        border: 1px solid var(--breadcrumb-background-color);
407        border-radius: 4px;
408        font-size: @ini_breadcrumb_font_size;
409        color: var(--breadcrumb-text-color);
410
411        span.curid a,
412        span.curid a:visited,
413        span.curid a:active,
414        a,
415        a:visited,
416        a:active {
417            .mikio-text-decoration(none);
418            color: var(--breadcrumb-link-color);
419            font-weight: normal;
420
421            &:hover {
422                color: var(--breadcrumb-link-hover-color);
423            }
424        }
425
426        ul {
427            list-style: none;
428            margin: 0;
429            padding: 0;
430        }
431
432        bdi {
433            margin-left: .5rem;
434            margin-right: .5rem;
435            // vertical-align: text-bottom;
436        }
437
438        // li.sep {
439        //     margin-right: .5rem;
440        // }
441
442        li,
443        span.bchead {
444            display: inline-block;
445            // vertical-align: text-bottom;
446            // margin-right: .5rem;
447        }
448
449        svg {
450            width: .9rem;
451            height: .9rem;
452        }
453    }
454}
455
456.mikio-navbar {
457    position: relative;
458    padding: .5rem 1rem .5rem 2rem;
459    border-bottom-width: 1px;
460    border-bottom-style: solid;
461    border-bottom-color: var(--navbar-border-color);
462    background-color: var(--navbar-background-color);
463    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
464    width: 100%;
465    box-sizing: border-box;
466    z-index: 1000;
467
468    .mikio-container {
469        display: flex;
470        flex: 1;
471        align-items: center;
472    }
473
474    .mikio-navbar-brand {
475        display: flex;
476
477        .mikio-navbar-brand-image {
478            max-width: 3rem;
479            max-height: 3rem;
480            margin-right: .5rem;
481        }
482
483        .mikio-navbar-brand-title {
484            display: flex;
485            flex-direction: column;
486            align-items: stretch;
487            justify-content: center;
488        }
489
490        .mikio-navbar-brand-title-text {
491            color: var(--navbar-brand-text-color);
492            margin: 0;
493            font-weight: 500;
494            font-size: 1.2rem;
495        }
496
497        .mikio-navbar-brand-title-tagline {
498            margin: 0;
499            color: var(--navbar-brand-tagline-color);
500        }
501    }
502
503    .mikio-navbar-toggle {
504        display: none;
505        font-size: 1rem;
506        position: absolute;
507        top: 1.2rem;
508        right: 1.2rem;
509
510        width: 1rem;
511        height: 1rem;
512        padding: 0;
513
514        cursor: pointer;
515        transition: transform .15s ease-in-out;
516        vertical-align: middle;
517
518        border: 0 none;
519        background: transparent;
520
521        &:before,
522        &:after {
523            content: "";
524        }
525
526        &:before,
527        .icon,
528        &:after {
529            display: block;
530
531            width: 100%;
532            height: 0.2em;
533            margin: 0 0 0.2em;
534
535            transition: transform .15s ease-in-out;
536
537            border-radius: 0.05em;
538            background: var(--control-text-color);
539        }
540
541        &.open {
542            .icon {
543                transform: scale(0);
544            }
545
546            &:before {
547                transform: translateY(0.4em) rotate(135deg);
548            }
549
550            &:after {
551                transform: translateY(-0.4em) rotate(-135deg);
552            }
553        }
554    }
555
556    .mikio-navbar-collapse {
557        display: flex;
558        flex: 1;
559        align-items: center;
560        justify-content: @ini_navbar_content_justify;
561    }
562
563    a,
564    a:visited,
565    a:active {
566        .mikio-text-decoration(none);
567        color: var(--navbar-link-color);
568        transition: all .15s ease-in-out;
569
570        &:hover {
571            color: var(--navbar-link-hover-color);
572        }
573    }
574
575    .mikio-nav-dropdown a,
576    .mikio-nav-dropdown a:visited,
577    .mikio-nav-dropdown a:active {
578        &:after {
579            border-color: var(--navbar-link-color) !important;
580        }
581
582        &:hover:after {
583            border-color: var(--navbar-link-hover-color) !important;
584        }
585    }
586
587    .mikio-search {
588        margin: 0 .5rem;
589    }
590
591    .mikio-button,
592    .mikio-button:visited,
593    .mikio-button:active {
594        background-color: transparent;
595        border-color: transparent;
596
597        &:hover:not(:disabled) {
598            background-color: transparent;
599            border-color: transparent;
600            color: var(--navbar-link-hover-color);
601        }
602    }
603}
604
605.mikio-navbar.mikio-sub-navbar {
606    color: var(--subnavbar-text-color);
607    justify-content: @ini_subnavbar_content_justify;
608    padding: .75rem 1rem;
609    border-color: var(--subnavbar-border-color);
610    background-color: var(--subnavbar-background-color);
611    z-index: 999;
612
613    ul,
614    ol,
615    p {
616        list-style: none;
617        margin: 0;
618        padding: 0;
619    }
620
621    ul,
622    ol {
623        list-style: none;
624    }
625
626    li {
627        display: inline-block;
628        padding: 0 .2rem;
629        margin: 0 .5rem;
630    }
631
632    a,
633    a:visited,
634    a:active {
635        color: var(--subnavbar-link-color);
636
637        &:hover {
638            color: var(--subnavbar-link-hover-color);
639        }
640    }
641}
642
643.mikio-hero {
644    background-color: var(--hero-background-color);
645
646    .mikio-container {
647        display: flex;
648        flex: 1;
649    }
650
651    .mikio-hero-text {
652        flex: 1;
653        min-height: 5rem;
654        padding: 2rem;
655
656        .mikio-breadcrumbs,
657        .mikio-youarehere {
658            background-color: transparent;
659            border-color: transparent;
660            padding: 0;
661            margin: 0;
662        }
663
664        h1 {
665            margin: .75rem 0 1rem 0;
666            color: var(--hero-title-color);
667            line-height: 1.2
668        }
669
670        h2 {
671            margin: 0;
672            font-weight: normal;
673            font-size: 1.25rem;
674            color: var(--hero-subtitle-color);
675        }
676    }
677
678    .mikio-hero-image {
679        display: flex;
680        flex: 0 0 33%;
681        background-repeat: no-repeat;
682        background-position: center;
683        background-size: cover;
684        align-items: flex-end;
685    }
686
687    .mikio-hero-image-resize {
688        height: 15rem;
689    }
690}
691
692.mikio .mikio-tags {
693    display: block;
694    width: 100%;
695    text-align: right;
696    padding-right: .5rem;
697    margin-bottom: .5rem;
698
699    a,
700    a:visited,
701    a:active {
702        margin: 0 .25rem;
703        font-size: 80%;
704        padding: .25rem .75rem;
705        border: 1px solid var(--tag-background-color);
706        border-radius: 1rem;
707        background-color: var(--tag-background-color);
708        color: var(--tag-text-color);
709        .mikio-text-decoration(none);
710        transition: all .15s ease-in-out;
711
712        &:hover {
713            background-color: transparent;
714            color: var(--tag-background-color);
715        }
716    }
717}
718
719
720.mikio-sidebar {
721    width: @ini_sidebar_width;
722    flex-shrink: 0;
723    background-color: var(--sidebar-background-color);
724    padding: 1rem;
725    font-size: @ini_sidebar_font_size;
726    color: var(--sidebar-text-color);
727
728    &.mikio-sidebar-left {
729        border-left-width: 0;
730        border-right: 1px solid var(--sidebar-border-color);
731    }
732
733    &.mikio-sidebar-right {
734        border-left: 1px solid var(--sidebar-border-color);
735        border-right-width: 0;
736    }
737
738    .mikio-sidebar-toggle {
739        display: none;
740        margin: 0 1rem;
741        .mikio-text-decoration(none);
742        text-align: center;
743        color: rgba(0, 0, 0, 0.6);
744
745        .icon {
746
747            &:before,
748            &:after {
749                content: "";
750                display: inline-block;
751                width: 0.5rem;
752                height: 0.1em;
753                margin: 0 0 0.2em;
754                transition: transform .15s ease-in-out;
755                border-radius: 0.05em;
756                background: rgba(0, 0, 0, 0.6);
757            }
758
759            &:before {
760                transform: translateX(0.1rem) translateY(0) rotate(-135deg);
761            }
762
763            &:after {
764                transform: translateX(-0.1rem) translateY(0) rotate(135deg);
765            }
766        }
767
768        .open .icon {
769            &:before {
770                transform: translateX(0.1rem) rotate(135deg);
771            }
772
773            &:after {
774                transform: translateX(-0.1rem) rotate(-135deg);
775            }
776        }
777    }
778
779    .mikio-sidebar-toggle.closed+.mikio-sidebar-collapse {
780        display: block;
781    }
782
783    .mikio-user-info {
784        margin-bottom: 1rem;
785        margin: 0 -1rem;
786        padding: 0 1rem 1rem 1rem;
787        border-bottom: 1px solid var(--sidebar-border-color);
788    }
789
790    .mikio-search {
791        margin: 1rem 0 1rem 0;
792    }
793
794    .mikio-sidebar-content {
795        overflow-wrap: break-word;
796        margin-bottom: 1rem;
797
798        a,
799        a:visited,
800        a:active {
801            display: block;
802            margin: 1rem 0;
803            color: var(--sidebar-link-color);
804            .mikio-text-decoration(none);
805
806            &:hover {
807                color: var(--sidebar-link-hover-color);
808            }
809        }
810
811        ul,
812        ul.idx {
813            margin: 0;
814            padding: 0;
815
816            ul {
817                padding-left: 1rem;
818            }
819
820            li,
821            li.closed,
822            li.open {
823                list-style: none;
824            }
825        }
826    }
827
828    .mikio-tags {
829        margin: 0 0 1rem 0;
830        text-align: center;
831
832        a {
833            display: inline-block;
834            margin: 0 .25rem .25rem .25rem;
835        }
836    }
837}
838
839.mikio-page {
840    .mikio-container {
841        display: flex;
842        // flex: 1;
843        padding: 0;
844    }
845
846    a {
847        color: var(--link);
848        transition: all .15s ease-in-out;
849
850        &.wikilink1 {
851            color: var(--existing);
852
853            &:hover {
854                color: var(--existing-hover);
855            }
856
857            &:visited {
858                color: var(--existing-visited);
859
860                &:hover {
861                    color: var(--existing-hover);
862                }
863            }
864
865            &:active {
866                color: var(--existing-active);
867            }
868        }
869
870        &.wikilink2 {
871            color: var(--missing);
872
873            &:hover {
874                color: var(--missing-hover);
875            }
876
877            &:visited {
878                color: var(--missing-visited);
879
880                &:hover {
881                    color: var(--missing-hover);
882                }
883            }
884
885            &:active {
886                color: var(--missing-active);
887            }
888        }
889
890        &:hover {
891            color: var(--link-hover);
892        }
893
894        &:visited {
895            color: var(--link-visited);
896
897            &:hover {
898                color: var(--link-hover);
899            }
900        }
901
902        &:active {
903            color: var(--link-active);
904        }
905    }
906}
907
908.mikio-page-fill {
909    display: flex;
910    flex: 1;
911}
912
913.mikio .mikio-content .mikio-article {
914    margin: 0 auto;
915
916    ul,
917    ul.idx {
918        // padding-left: 1rem;
919    }
920
921    &.toc-full {
922        display: flex;
923
924        .mikio-toc {
925            margin-top: 1rem;
926            order: 2;
927            position: sticky;
928            position: -webkit-sticky;
929            top: 1rem;
930            align-self: flex-start;
931            overflow: scroll;
932            max-height: 95vh;
933
934            scroll-behavior: smooth;
935            scrollbar-width: none;
936
937            &::-webkit-scrollbar {
938                display: none;
939            }
940        }
941
942        .mikio-article-content {
943            flex: 1;
944        }
945    }
946}
947
948.mikio-content {
949    box-sizing: border-box;
950    width: 100%;
951    max-width: 100%;
952    background-color: var(--content-background);
953    padding: .5rem 2rem;
954}
955
956.mikio.dokuwiki div.preview {
957    background-color: var(--content-background);
958    padding: 1rem 2rem;
959}
960
961.mikio-footer {
962    padding: 2rem;
963    color: var(--footer-text-color);
964    background-color: var(--footer-background-color);
965    font-size: @ini_footer_font_size;
966    text-align: @ini_footer_text_align;
967
968    a,
969    a:visited,
970    a:active {
971        color: var(--footer-link-color);
972
973        &:hover {
974            color: var(--footer-link-hover-color);
975        }
976    }
977
978    .dw__pagetools {
979        margin-top: 1rem;
980
981        .tools {
982            list-style-type: none;
983
984            li {
985                display: inline-block;
986                margin: 0 .5rem;
987            }
988
989            a,
990            a:visited,
991            a:active {
992                // margin: 0 .5rem;
993
994                svg {
995                    fill: var(--footer-link-color);
996                }
997
998                &:hover {
999                    svg {
1000                        fill: var(--footer-link-hover-color);
1001                    }
1002                }
1003            }
1004        }
1005    }
1006
1007    .mikio-nav {
1008        margin-top: 1rem;
1009    }
1010
1011    .mikio-footer-search {
1012        margin-top: .5rem;
1013        display: inline-block;
1014    }
1015
1016    .license {
1017        margin-top: .5rem;
1018
1019        img {
1020            vertical-align: middle;
1021            margin: 0 1rem;
1022        }
1023    }
1024}
1025
1026.mikio .site>div.no {
1027    display: none;
1028}
1029
1030
1031/* Page Elements */
1032.mikio-control {
1033    margin: 0;
1034    font-family: inherit;
1035    font-size: inherit;
1036    font-weight: 400;
1037    // line-height: inherit;
1038    border-width: 1px;
1039    border-style: solid;
1040    border-color: transparent;
1041    border-radius: .25rem;
1042    box-sizing: border-box;
1043    vertical-align: middle;
1044    padding: .375rem .75rem;
1045    color: var(--control-text-color);
1046    background-color: var(--control-background-color);
1047
1048    &[type=color] {
1049        padding: 0;
1050    }
1051}
1052
1053.mikio-button,
1054.mikio-button:visited,
1055.mikio-button:active {
1056    display: inline-block;
1057    text-align: center;
1058    color: var(--button-text-color);
1059    background-color: var(--button-background-color);
1060    border-color: var(--button-border-color);
1061    line-height: 1.5;
1062    .mikio-text-decoration(none);
1063    text-transform: capitalize;
1064
1065    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1066
1067    &:hover:not(:disabled) {
1068        .mikio-text-decoration(none);
1069        color: var(--button-text-hover-color);
1070        background-color: var(--button-background-hover-color);
1071        border-color: var(--button-border-hover-color);
1072    }
1073
1074    &:disabled {
1075        opacity: .65;
1076    }
1077}
1078
1079.mikio-button-small {
1080    padding: .1rem .75rem;
1081    font-size: 80% !important;
1082    min-width: 3rem;
1083}
1084
1085.mikio-button-submit,
1086.mikio-button-submit:visited,
1087.mikio-button-submit:active {
1088    color: var(--button-default-text-color);
1089    background-color: var(--button-default-background-color);
1090    border-color: var(--button-default-border-color);
1091
1092    &:hover {
1093        color: var(--button-default-text-hover-color);
1094        background-color: var(--button-default-background-hover-color);
1095        border-color: var(--button-default-border-hover-color);
1096    }
1097}
1098
1099.mikio-button-danger,
1100.mikio-button-danger:visited,
1101.mikio-button-danger:active {
1102    color: #fff;
1103    border-color: #dc3545;
1104    background-color: #dc3545;
1105
1106    &:hover {
1107        color: #fff;
1108        background-color: #c03040;
1109        border-color: #c03040;
1110    }
1111}
1112
1113.mikio-input-text {
1114    border-color: var(--input-border-color);
1115    line-height: inherit;
1116}
1117
1118.mikio-select {
1119    .mikio-user-select();
1120    height: 2.25rem;
1121}
1122
1123.mikio-toolbar-button {
1124    border-radius: 0;
1125    border-right-width: 0;
1126    border-color: var(--input-border-color);
1127
1128    &:first-of-type {
1129        border-radius: .25rem 0 0 .25rem;
1130    }
1131
1132    &:last-of-type {
1133        border-radius: 0 .25rem .25rem 0;
1134        border-right-width: 1px;
1135    }
1136}
1137
1138.mikio-dialog {
1139    .mikio-article {
1140        max-width: 40rem;
1141    }
1142
1143    fieldset {
1144        legend {
1145            font-size: 1.75rem;
1146            font-weight: 400;
1147        }
1148
1149        label.block input.edit,
1150        select {
1151            width: 100%;
1152        }
1153
1154        label {
1155            text-align: left;
1156            font-weight: normal;
1157            display: block;
1158        }
1159
1160        label.simple {
1161            text-align: center;
1162        }
1163
1164        label.block {
1165            position: relative;
1166        }
1167
1168        label.block span {
1169            position: absolute;
1170            padding: .4rem .9rem;
1171            color: rgba(0, 0, 0, 0.3);
1172        }
1173
1174        button {
1175            display: block;
1176            width: 100%;
1177
1178            &[type=submit] {
1179                .mikio-button-submit();
1180            }
1181        }
1182
1183        input[type=checkbox] {
1184            vertical-align: middle;
1185        }
1186    }
1187}
1188
1189.mikio .mikio-navbar .mikio-search,
1190.mikio .mikio-sidebar .mikio-search,
1191.mikio .mikio-footer .mikio-search,
1192.mikio .mikio-search {
1193    display: flex;
1194
1195    input {
1196        width: 1%;
1197        flex: 1 1 auto;
1198        border-radius: .25rem 0 0 .25rem;
1199    }
1200
1201    button {
1202        color: var(--button-search-text-color);
1203        background-color: var(--button-search-background-color);
1204        border-radius: 0 .25rem .25rem 0;
1205        border-color: var(--button-search-border-color);
1206
1207        &:hover {
1208            color: var(--button-search-text-hover-color);
1209            background-color: var(--button-search-background--hover-color);
1210            border-color: var(--button-search-border-hover-color);
1211        }
1212    }
1213
1214    .mikio-iicon {
1215        margin: 0 -4px 0 -4px;
1216    }
1217}
1218
1219#dw__pagetools {
1220    .mikio-sticky();
1221    top: 0;
1222    align-self: flex-start;
1223    padding: 3rem .5rem 0 .5rem;
1224
1225    ul {
1226        list-style: none;
1227        padding: 0;
1228        margin: 0;
1229    }
1230
1231    a,
1232    a:visited,
1233    a:active {
1234        display: block;
1235
1236        svg {
1237            fill: var(--pagetools-color);
1238        }
1239
1240        &:hover {
1241            svg {
1242                fill: var(--pagetools-hover-color);
1243            }
1244        }
1245    }
1246}
1247
1248.toolbar.group {
1249    margin-bottom: .5rem;
1250}
1251
1252#wiki__editbar {
1253    overflow: hidden;
1254    margin-bottom: .5em;
1255
1256    #size__ctl {
1257        float: right;
1258    }
1259
1260    .editButtons {
1261        display: inline;
1262        margin-right: 1rem;
1263
1264        button {
1265            margin-right: 0.25rem;
1266            margin-bottom: 0.25rem;
1267        }
1268    }
1269
1270    .summary {
1271        display: inline;
1272    }
1273}
1274
1275.mode_admin .mikio-toc {
1276    background-color: var(--admin-background-color);
1277
1278    #dw__toc {
1279        background-color: var(--toc-background-color);
1280    }
1281}
1282
1283.mikio .mode_admin .mikio-toc #dw__toc {
1284    background-color: var(--toc-background-color);
1285}
1286
1287.mikio .mikio-toc {
1288    float: right;
1289    padding-left: 1rem;
1290    padding-bottom: 1rem;
1291    // background-color: var(--content-background);
1292    margin-top: 1rem;
1293
1294    #dw__toc {
1295        color: var(--toc-link-color);
1296        background-color: var(--toc-background-color);
1297        border: 1px solid var(--toc-border-color);
1298        border-radius: .25rem;
1299        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
1300        padding: .5rem;
1301        max-width: 12rem;
1302        float: none;
1303        width: auto;
1304        margin: 0;
1305        // background-color: transparent;
1306
1307        ul {
1308            padding-left: 0;
1309            margin: 0;
1310            list-style-type: none;
1311
1312            ul {
1313                padding-left: .5rem;
1314            }
1315        }
1316
1317        &>div {
1318            padding: .2em .5em;
1319        }
1320    }
1321
1322    h3.toggle {
1323        margin: 0;
1324        padding-right: 2rem;
1325        font-size: @ini_toc_font_size;
1326        position: relative;
1327        height: 1rem;
1328        white-space: nowrap;
1329
1330        .hamburger {
1331            width: 1rem;
1332            height: 1rem;
1333        }
1334
1335        .down-arrow {
1336            position: absolute;
1337            top: 0;
1338            bottom: 0;
1339            right: 0;
1340            margin: auto 0;
1341            // border: 1px solid red;
1342            background-color: var(--toc-background-color);
1343        }
1344
1345        &.open {
1346            .hamburger {
1347                display: none;
1348            }
1349        }
1350
1351        &.closed {
1352            font-size: 0;
1353            // height: 1rem;
1354            width: 2rem;
1355            padding-right: 0;
1356
1357            .down-arrow {
1358                right: -4px;
1359            }
1360        }
1361
1362        span {
1363            display: none;
1364        }
1365    }
1366
1367    a,
1368    a:visited,
1369    a:active {
1370        display: block;
1371        font-size: @ini_toc_font_size;
1372        color: var(--toc-link-color);
1373        .mikio-text-decoration(none);
1374        padding: .2rem 0;
1375
1376        &:hover {
1377            color: var(--toc-link-hover-color);
1378        }
1379    }
1380}
1381
1382.mikio-icon {
1383    margin-right: .25rem;
1384
1385    svg {
1386        vertical-align: middle;
1387        fill: currentColor;
1388    }
1389}
1390
1391.mikio-iicon {
1392    display: inline-block;
1393    width: 1.2rem;
1394    height: 1.2rem;
1395    background-size: 1.2rem;
1396    background-position: center;
1397    background-repeat: no-repeat;
1398    vertical-align: middle;
1399    margin-right: .25rem;
1400    fill: currentColor;
1401}
1402
1403.mikio .mode_show table,
1404.mikio.dokuwiki .mode_showtag table.ul,
1405.mikio .mode_admin table {
1406    width: 100%;
1407    border-collapse: collapse;
1408    margin-bottom: 1rem;
1409    font-size: @ini_table_font_size;
1410    border-bottom: 1px solid var(--table-row-border-color);
1411
1412    tr {
1413        border-top: 1px solid var(--table-row-border-color);
1414    }
1415
1416    td,
1417    th {
1418        padding: .75rem;
1419        text-align: left;
1420    }
1421
1422    thead tr {
1423        background-color: var(--table-header-row-background-color);
1424        color: var(--table-header-row-text-color);
1425    }
1426
1427    tbody tr {
1428        &:nth-child(odd) {
1429            background-color: var(--table-odd-row-background-color);
1430            color: var(--table-odd-row-text-color);
1431        }
1432
1433        &:nth-child(even) {
1434            background-color: var(--table-even-row-background-color);
1435            color: var(--table-even-row-text-color);
1436        }
1437    }
1438}
1439
1440.mikio-nav {
1441    list-style: none;
1442    margin: 0;
1443    padding: 0;
1444    display: flex;
1445
1446    .mikio-nav-item,
1447    .mikio-nav-dropdown {
1448        display: inline-block;
1449        padding: .5rem .2rem;
1450        margin: 0 .5rem;
1451    }
1452
1453    .mikio-nav-link {}
1454
1455    .mikio-nav-dropdown {
1456        position: relative;
1457    }
1458
1459    .mikio-nav-dropdown>a {
1460        display: inline-block;
1461        padding: .2rem 1.2rem .2rem 0rem;
1462        position: relative;
1463
1464        &::after {
1465            position: absolute;
1466            content: '';
1467            top: 10px;
1468            right: 6px;
1469            width: 6px;
1470            height: 6px;
1471            border-left: 2px solid var(--text);
1472            border-bottom: 2px solid var(--text);
1473            transform: rotateZ(-45deg);
1474        }
1475    }
1476
1477    a {
1478        .mikio-text-decoration(none);
1479    }
1480}
1481
1482.mikio-dropdown {
1483    display: block;
1484    position: absolute;
1485    z-index: 10000;
1486    min-width: 12rem;
1487    right: 0;
1488    padding: 1rem 1.5rem;
1489    border: 1px solid var(--dropdown-border-color);
1490    border-radius: 4px;
1491    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1492    background-color: var(--dropdown-background-color);
1493    color: var(--dropdown-color);
1494
1495    &.closed {
1496        display: none;
1497    }
1498
1499    .mikio-dropdown-item {
1500        display: flex;
1501        align-items: center;
1502        margin-top: .5rem;
1503        margin-bottom: .5rem;
1504    }
1505
1506    .mikio-dropdown-header {
1507        margin: 0 0 1rem 0;
1508    }
1509
1510    .mikio-dropdown-divider {
1511        margin: 1rem -1rem;
1512        border-bottom: 1px solid var(--dropdown-border-color);
1513    }
1514
1515    .mikio-nav-link,
1516    .mikio-nav-link:visited,
1517    .mikio-nav-link.active {
1518        margin: 0rem -1rem 0rem -1rem;
1519        padding: .25rem 1rem .25rem 1rem;
1520        transition: all .15s ease-in-out;
1521        color: var(--dropdown-color);
1522
1523        &:hover {
1524            color: var(--dropdown-color);
1525            background-color: var(--dropdown-hover-color);
1526        }
1527    }
1528}
1529
1530.typeahead.mikio-dropdown {
1531    a.mikio-dropdown-item {
1532        display: inline;
1533    }
1534
1535    .mikio-dropdown-header {
1536        margin-bottom: 0em;
1537        overflow: hidden;
1538        text-overflow: ellipsis;
1539        // color: #999999;
1540        color: var(--dropdown-color);
1541    }
1542
1543    .mikio-dropdown-divider {
1544        margin-top: 0.5rem;
1545        margin-bottom: 0.5rem;
1546    }
1547}
1548
1549.mikio-tabs {
1550    padding: 0;
1551    margin-top: 1rem;
1552    margin-bottom: -1px;
1553    list-style-type: none;
1554
1555    li {
1556        float: none;
1557        display: inline-block;
1558        font-size: 1rem;
1559        display: inline-block;
1560        line-height: 1.4rem;
1561        position: relative;
1562        z-index: 2;
1563
1564        strong {
1565            .mikio-tab-active();
1566        }
1567
1568        a,
1569        a:visited,
1570        a:active {
1571            display: inline-block;
1572            padding: .5rem 1rem;
1573            border: 1px solid var(--tab-border-color);
1574            color: var(--tab-color);
1575            .mikio-text-decoration(none);
1576            margin: 0;
1577            background-color: var(--tab-background-color);
1578
1579            &:hover {
1580                color: var(--tab-hover-color);
1581                border-color: var(--tab-border-hover-color) var(--tab-border-hover-color) transparent var(--tab-border-hover-color);
1582                border-radius: .5rem .5rem 0 0;
1583                background-color: var(--tab-background-hover-color);
1584            }
1585        }
1586    }
1587
1588    &:after {
1589        border-bottom: 0;
1590    }
1591}
1592
1593.mikio-tab-active {
1594    display: inline-block;
1595    background-color: var(--tab-active-background-color);
1596    font-weight: normal;
1597    color: var(--tab-active-color);
1598    border-color: var(--tab-active-border-color) var(--tab-active-border-color) var(--tab-active-background-color);
1599    border-radius: .5rem .5rem 0 0;
1600    border-width: 1px;
1601    border-style: solid;
1602    padding: .5rem 1rem;
1603    margin: 0;
1604    bottom: -1px;
1605    // margin-bottom: -1px;
1606}
1607
1608.mikio-tab {
1609    background-color: var(--tab-background-color);
1610    font-weight: normal;
1611    color: var(--tab-color);
1612    border-color: var(--tab-border-color) var(--tab-border-color) var(--tab-background-color);
1613    padding: .5rem 1rem;
1614    margin: 0;
1615    bottom: -1px;
1616    // margin-bottom: -1px;
1617}
1618
1619.mikio-tab-panel {
1620    margin-bottom: 0 !important;
1621    background-color: var(--tab-active-background-color);
1622    border-width: 1px 1px 1px 1px;
1623    border-style: solid;
1624    border-color: var(--tab-active-border-color) !important;
1625    word-wrap: break-word;
1626    word-break: break-word;
1627}
1628
1629.mikio.dokuwiki div.section_highlight {
1630    background-color: var(--section-edit-highlight);
1631    border-width: 0;
1632    margin: 0 -1rem;
1633    padding: 0 1rem;
1634}
1635
1636.mikio-input-file {
1637    position: absolute;
1638    margin-top: -.5rem;
1639    top: 0;
1640    right: 0;
1641    left: 0;
1642    z-index: 5;
1643    padding: .25rem 1rem;
1644    line-height: 1.5;
1645    text-align: left;
1646    color: var(--control-text-color);
1647    background-color: var(--control-background-color);
1648    border: .1px solid var(--input-border-color);
1649    border-radius: .25rem;
1650    -webkit-user-select: none;
1651    -moz-user-select: none;
1652    -ms-user-select: none;
1653    user-select: none;
1654    white-space: nowrap;
1655    overflow: hidden;
1656    text-overflow: ellipsis;
1657    box-sizing: border-box;
1658
1659    &:before {
1660        position: absolute;
1661        top: 0;
1662        right: 0;
1663        bottom: 0;
1664        z-index: 6;
1665        display: block;
1666        content: "Browse";
1667        padding: .25rem 1rem;
1668        line-height: 1.5;
1669        color: var(--button-text-color);
1670        background-color: var(--button-background-color);
1671        border-radius: 0 .25rem .25rem 0;
1672        border: 1px solid var(--button-border-color);
1673        transition: all .15s ease-in-out;
1674    }
1675
1676    &:hover:before {
1677        background-color: var(--button-background-hover-color);
1678        border-color: var(--button-border-hover-color);
1679        color: var(--button-text-hover-color);
1680    }
1681}
1682
1683code,
1684pre {
1685    overflow-x: auto;
1686    font-family: @ini_code_font_family;
1687    font-size: @ini_code_font_size;
1688    color: var(--code-text-color);
1689    background-color: var(--code-background-color);
1690    word-wrap: @ini_code_word_wrap;
1691    .mikio-pre-wrap();
1692    line-height: @ini_code_line_height;
1693}
1694
1695.mode_show {
1696
1697    code:not(.content_partial code),
1698    pre {
1699        border: 1px solid var(--code-border-color);
1700        padding: 1em;
1701    }
1702}
1703
1704/* Dokuwiki Patches */
1705.mikio {
1706
1707    .mikio-search,
1708    &.dokuwiki fieldset,
1709    &.dokuwiki .secedit,
1710    .mode_revisions,
1711    .mode_edit,
1712    .mode_draft,
1713    .mode_preview,
1714    .mode_showtag,
1715    .mode_admin {
1716        .mikio-controls();
1717    }
1718}
1719
1720.mikio.dokuwiki .secedit {
1721    float: none;
1722    margin-top: 0;
1723    text-align: right;
1724}
1725
1726.mikio.dokuwiki fieldset {
1727    margin: 2rem auto;
1728    border: 0;
1729    width: auto;
1730    max-width: 40rem;
1731
1732    label.block {
1733        display: flex;
1734        flex-direction: row;
1735        text-align: right;
1736
1737        span {
1738            margin-right: 1rem;
1739            width: 15rem;
1740            align-self: center;
1741        }
1742
1743        input {
1744            flex-grow: 1
1745        }
1746    }
1747
1748    //     span {
1749    //         display: inline-block;
1750    //         margin-right: 1rem;
1751    //         max-width: 10rem;
1752    //     }
1753    // }
1754}
1755
1756.mikio.dokuwiki .mode_login,
1757.mikio.dokuwiki .mode_denied {
1758    .mikio-dialog();
1759}
1760
1761.mikio .mode_admin {
1762
1763    input[type=text],
1764    input[type=password],
1765    input[type=email] {
1766        width: 100%;
1767    }
1768
1769    div.mikio-color-picker {
1770        position: relative;
1771
1772        input[type=color] {
1773            height: 35px;
1774            border: 0;
1775            border-radius: 0;
1776        }
1777
1778        input[type=text] {
1779            width: auto;
1780        }
1781    }
1782
1783    div.mikio-color-button {
1784        position: absolute;
1785        top: 4px;
1786        right: 0;
1787        color: #999999;
1788    }
1789
1790    p {
1791        button+button {
1792            margin-left: .5rem;
1793        }
1794    }
1795
1796    div.ui-admin {
1797
1798        ul.admin_tasks,
1799        ul.admin_plugins {
1800            float: none;
1801            display: grid;
1802            grid-template-columns: repeat(auto-fit, 15rem);
1803            width: auto;
1804            padding: 0;
1805            margin: 0;
1806            justify-content: center;
1807
1808            li {
1809                list-style-type: none;
1810                border: 1px solid var(--button-border-color);
1811                border-radius: .25rem;
1812                margin: 1rem 1rem;
1813                background-color: var(--button-background-color);
1814
1815                a,
1816                a:visited,
1817                a:active {
1818                    display: flex;
1819                    flex-direction: column;
1820                    align-items: center;
1821                    justify-content: center;
1822                    text-align: center;
1823                    height: 4rem;
1824                    font-size: 1rem;
1825                    font-weight: normal;
1826                    padding: 1rem 2rem;
1827                    color: var(--button-text-color);
1828                    .mikio-text-decoration(none);
1829                    overflow: hidden;
1830                    transition: all .15s ease-in-out;
1831
1832                    span.icon {
1833                        width: auto;
1834                        height: auto;
1835                        min-height: auto;
1836                    }
1837
1838                    svg {
1839                        fill: var(--button-text-color);
1840                    }
1841
1842                    &:hover {
1843                        .mikio-text-decoration(none);
1844                        color: var(--button-text-hover-color);
1845                        background-color: var(--button-background-hover-color);
1846                        border-color: var(--button-border-hover-color);
1847
1848                        svg {
1849                            fill: var(--button-text-hover-color);
1850                        }
1851                    }
1852                }
1853            }
1854        }
1855    }
1856
1857    .mikio-config-table-header {
1858        background-color: var(--table-header-row-background-color);
1859        color: var(--table-header-row-text-color);
1860        font-weight: bold;
1861
1862        .mikio-iicon {
1863            vertical-align: text-bottom;
1864        }
1865    }
1866
1867    #extension__list {
1868        ul.extensionList {
1869            li {
1870                border-width: 0 0 1px 0;
1871                border-style: solid;
1872                border-color: var(--table-row-border-color);
1873                padding: .75rem;
1874                margin: 0;
1875                text-align: left;
1876
1877                &:nth-child(odd) {
1878                    background-color: var(--table-odd-row-background-color);
1879                    color: var(--table-odd-row-text-color);
1880                }
1881
1882                &:nth-child(even) {
1883                    background-color: var(--table-even-row-background-color);
1884                    color: var(--table-even-row-text-color);
1885                }
1886            }
1887        }
1888    }
1889
1890    button#usrmgr__del {
1891        .mikio-button-danger();
1892        margin-right: .5rem;
1893    }
1894
1895    #acl__detail div#acl__user {
1896        border-color: var(--toc-border-color);
1897    }
1898
1899    #acl__tree {
1900        background-color: var(--tree-background-color);
1901        border-color: var(--tree-border-color);
1902        color: var(--control-text-color);
1903
1904        // li[role=treeitem] {
1905        // padding-left: 2rem;
1906        // }
1907
1908        a.cur {
1909            background-color: var(--section-edit-highlight);
1910        }
1911    }
1912
1913    #acl_manager table tr {
1914        &:nth-child(odd) {
1915            background-color: var(--table-odd-row-background-color);
1916            color: var(--table-odd-row-text-color);
1917        }
1918
1919        &:nth-child(even) {
1920            background-color: var(--table-even-row-background-color);
1921            color: var(--table-even-row-text-color);
1922        }
1923    }
1924}
1925
1926.mode_admin,
1927.mode_login,
1928.mode_denied,
1929.mode_revisions,
1930.mode_recent,
1931.mode_backlink,
1932.mode_media,
1933.mode_index,
1934.mode_search,
1935.mode_edit,
1936.mode_draft,
1937.mode_preview,
1938.mode_showtag {
1939
1940    .mikio-content,
1941    .mikio-page-fill {
1942        .mikio-admin();
1943    }
1944}
1945
1946.mikio #plugin__styling button.primary {
1947    font-weight: inherit;
1948}
1949
1950.mikio.dokuwiki .secedit {
1951    button {
1952        .mikio-button-small();
1953    }
1954}
1955
1956.mikio img {
1957    max-width: 100%;
1958
1959    &.media {
1960        margin: .2rem 0;
1961    }
1962
1963    &.medialeft {
1964        margin: .2rem 1em .2rem 0;
1965    }
1966
1967    &.mediaright {
1968        margin: .2rem 0 .2rem 1rem;
1969    }
1970
1971    &.mediacenter {
1972        margin: .2rem auto;
1973    }
1974}
1975
1976.mikio div.dokuwiki div.inclmeta {
1977    margin-top: .5rem;
1978    padding-top: .5rem;
1979}
1980
1981.mikio #dw__login label[for=remember__me] {
1982    margin-left: 0;
1983}
1984
1985.mikio #config__manager {
1986    fieldset {
1987        color: var(--text);
1988        background-color: transparent;
1989        margin: 0;
1990        padding: 0;
1991
1992        legend {
1993            text-align: left;
1994        }
1995    }
1996
1997    tr {
1998        textarea {
1999            color: inherit;
2000            background-color: var(--control-background-color);
2001        }
2002
2003        select {
2004            width: 100%;
2005            background-color: var(--control-background-color);
2006        }
2007    }
2008
2009    td {
2010        &.label {
2011            display: grid;
2012            grid-template-columns: auto 2rem;
2013
2014            span.outkey {
2015                float: none;
2016                font-size: 100%;
2017                background-color: transparent;
2018                margin: 0;
2019                grid-column: 1 / span 1;
2020                grid-row: 1 / span 1;
2021            }
2022
2023            label {
2024                grid-column: 1 / span 1;
2025                grid-row: 2 / span 1;
2026            }
2027
2028            img {
2029                float: none;
2030                grid-column: 2 / span 1;
2031                grid-row: 1 / span 2;
2032                align-self: center;
2033            }
2034        }
2035
2036        input.edit {
2037            width: 100%;
2038        }
2039    }
2040
2041    button[type=submit] {
2042        .mikio-button-submit();
2043    }
2044}
2045
2046.mode_revisions .mikio-article {
2047    li {
2048        padding: .5rem 1rem;
2049        border-top: 1px solid var(--table-row-border-color);
2050        background-color: var(--table-even-row-background-color);
2051        color: (--table-even-row-text-color);
2052    }
2053
2054    li:nth-child(odd) {
2055        background-color: var(--table-odd-row-background-color);
2056        color: var(--table-odd-row-text-color);
2057    }
2058
2059    .li {
2060        display: grid;
2061        grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem;
2062        align-items: center;
2063        text-align: center;
2064        font-size: 90%;
2065
2066        a.wikilink1 {
2067            text-align: left;
2068        }
2069
2070        span.sizechange {
2071            width: 100%;
2072            font-size: 80%;
2073            border-radius: .2em;
2074            padding: .1em .2em;
2075            color: var(--control-text-color) !important;
2076        }
2077    }
2078
2079    .sum {
2080        display: block;
2081    }
2082}
2083
2084.mode_recent .mikio-article {
2085    ul {
2086        list-style-type: none;
2087    }
2088
2089    li {
2090        padding: .5rem 1rem;
2091        border-top: 1px solid var(--table-row-border-color);
2092        background-color: var(--table-even-row-background-color);
2093        color: var(--table-even-row-text-color);
2094    }
2095
2096    li:nth-child(odd) {
2097        background-color: var(--table-odd-row-background-color);
2098        color: var(--table-odd-row-text-color);
2099    }
2100
2101    .li {
2102        display: grid;
2103        grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem;
2104        align-items: center;
2105        text-align: center;
2106        font-size: 90%;
2107
2108        a.wikilink1,
2109        span.curid {
2110            text-align: left;
2111        }
2112
2113        span.sizechange {
2114            width: 100%;
2115            font-size: 80%;
2116            border-radius: .2em;
2117            padding: .1em .2em;
2118            color: var(--control-text-color);
2119
2120            &.positive {
2121                background-color: #cfc;
2122            }
2123
2124            &.negative {
2125                background-color: #fdd;
2126            }
2127        }
2128    }
2129
2130    select {
2131        .mikio-control();
2132        .mikio-select();
2133    }
2134}
2135
2136
2137.mikio #mediamanager__page,
2138#media__manager {
2139    width: 100%;
2140    min-width: 100%;
2141
2142    button,
2143    .qq-upload-button,
2144    .qq-upload-list a {
2145        .mikio-control();
2146        .mikio-button();
2147    }
2148
2149    .qq-upload-list a.qq-upload-cancel {
2150        .mikio-button-danger();
2151    }
2152
2153    button.qq-upload-action {
2154        .mikio-button-submit();
2155    }
2156
2157    input[type=text],
2158    input[type=search],
2159    textarea {
2160        .mikio-control();
2161        .mikio-input-text
2162    }
2163
2164    .ui-resizable-e {
2165        background: transparent;
2166        width: 6px;
2167        right: 2px;
2168
2169        &:hover {
2170            background-color: #999;
2171        }
2172    }
2173
2174    .namespaces {
2175        width: 20%;
2176        min-width: 10em;
2177        left: 0 !important;
2178
2179        h2 {
2180            .mikio-tab-active();
2181            font-size: 1rem;
2182        }
2183    }
2184
2185    #media__tree {
2186        background-color: var(--tree-background-color);
2187        border-color: var(--tree-border-color);
2188
2189        ul,
2190        ul.idx {
2191            margin-top: 0;
2192            margin-bottom: 0;
2193            padding: 0;
2194            list-style-type: none;
2195
2196            ul {
2197                margin-left: 1rem;
2198            }
2199
2200            li {
2201                margin: .25rem 0;
2202                white-space: nowrap;
2203
2204                img {
2205                    margin-right: .2rem;
2206                }
2207            }
2208
2209            a {
2210                .mikio-text-decoration(none);
2211            }
2212
2213            div {
2214                display: inline-block;
2215            }
2216        }
2217    }
2218
2219    // .namespaces, #media__tree {
2220    //     h2 {
2221    //         .mikio-tab-active();
2222    //         font-size: 1rem;
2223    //         display: inline-block;
2224    //         border-radius: .5rem .5rem 0 0;
2225    //         border-width: 1px;
2226    //         border-style: solid;
2227    //         line-height: 1.4rem;
2228    //         position: relative;
2229    //         z-index: 2;
2230    //     }
2231
2232    .panelHeader {
2233        .mikio-tab-panel();
2234    }
2235
2236
2237
2238    //     }
2239    // }
2240
2241    .filelist {
2242        width: 50%;
2243        min-width: 25em;
2244        left: 0 !important;
2245    }
2246
2247    .filelist,
2248    .qq-uploader {
2249        .panelHeader {
2250            .mikio-tab-panel();
2251
2252            h3 {
2253                width: 100%;
2254            }
2255        }
2256
2257        form.options {
2258            margin-top: 0;
2259
2260            .ui-controlgroup-horizontal label {
2261                margin-right: 0;
2262            }
2263        }
2264
2265        .panelContent {
2266            // padding-top: 1rem;
2267            text-align: center;
2268
2269            ul li:hover {
2270                background-color: initial;
2271            }
2272        }
2273
2274        ul {
2275            margin: 1rem 0 -1px 0;
2276
2277            &.thumbs {
2278                margin: 0;
2279
2280                li {
2281                    display: inline-block;
2282                    width: 200px;
2283                    background-color: var(--tab-active-background-color);
2284                    color: var(--tab-active-color);
2285
2286                    dt {
2287                        text-align: center;
2288
2289                        a {
2290                            display: block;
2291                            width: 100%;
2292
2293                            img {
2294                                min-height: 90px;
2295                                min-width: 90px;
2296                            }
2297                        }
2298                    }
2299
2300                    dd {
2301                        width: auto;
2302                        font-size: 80%;
2303                        // color: #666;
2304                        margin-bottom: .25rem;
2305                        margin-inline-start: 0;
2306                    }
2307
2308                    .name {
2309                        font-weight: normal;
2310
2311                        a {
2312                            // color: #000;
2313                        }
2314                    }
2315                }
2316            }
2317        }
2318
2319        ul.rows {
2320            list-style-type: none;
2321            padding: 0;
2322
2323            li {
2324                background-color: var(--table-odd-row-background-color);
2325                color: var(--table-odd-row-text-color);
2326                max-height: none;
2327                font-size: 90%;
2328                // color: var(--text);
2329                overflow: auto;
2330
2331                &:nth-child(2n+1) {
2332                    background-color: var(--table-even-row-background-color);
2333                    color: var(--table-even-row-text-color);
2334                }
2335
2336                a {
2337                    font-weight: normal;
2338                }
2339
2340                dl {
2341                    display: flex;
2342                    align-items: center;
2343                }
2344
2345                dt {
2346                    display: flex;
2347                    align-items: center;
2348                    justify-content: center;
2349                    width: 10%;
2350
2351                    a {
2352                        height: auto;
2353                        width: auto;
2354
2355                        img {
2356                            display: block;
2357                            max-width: 40px;
2358                            max-height: 40px;
2359                        }
2360                    }
2361                }
2362
2363                dd.name {
2364                    text-align: left;
2365                    width: 30%;
2366                    overflow: hidden;
2367                    text-overflow: ellipsis;
2368                    float: left;
2369                    margin-left: 1%;
2370                    white-space: nowrap;
2371                }
2372
2373                dd.size {
2374                    width: 15%;
2375                }
2376
2377                dd.date {
2378                    width: 20%;
2379                }
2380
2381                dd.filesize {
2382                    width: 15%;
2383                }
2384
2385                dd {
2386                    margin: 0;
2387                    font-size: 90%;
2388                }
2389            }
2390        }
2391
2392        .qq-upload-list {
2393            margin-top: 1rem;
2394
2395            li {
2396                &:hover {
2397                    background-color: transparent;
2398                }
2399            }
2400        }
2401
2402        .qq-action-container {
2403            margin-top: 1rem;
2404            padding-top: 1rem;
2405            border-top: 1px solid #dee2e6;
2406        }
2407    }
2408
2409    .file {
2410        .panelHeader {
2411            .mikio-tab-panel();
2412
2413            a {
2414                font-weight: normal;
2415                color: #333;
2416            }
2417        }
2418
2419        ul {
2420            &.tabs {
2421                .mikio-tabs();
2422            }
2423        }
2424
2425        #mediamanager__btn_delete button {
2426            .mikio-button-danger();
2427        }
2428
2429        dl {
2430            font-size: 90%;
2431
2432            dt {
2433                padding: .25rem .5rem;
2434                background-color: #f0f0f0;
2435            }
2436
2437            dd {
2438                padding: .25rem .5rem;
2439                background-color: #f8f8f8;
2440            }
2441        }
2442
2443        input[type=text],
2444        form.meta textarea.edit {
2445            width: 100%;
2446            min-width: 100%;
2447            max-width: 100%;
2448        }
2449
2450        button[name="mediado[save]"] {
2451            .mikio-button-submit();
2452        }
2453    }
2454
2455    .panel {
2456        float: left;
2457    }
2458
2459    .panelHeader {
2460        margin: 0 10px 10px 0;
2461        padding: 10px 10px 8px;
2462        font-size: .9rem;
2463        overflow: hidden;
2464
2465        h3 {
2466            float: left;
2467            font-weight: normal;
2468            font-size: 1em;
2469            padding: 0;
2470            margin: 0 0 3px;
2471        }
2472
2473        form.options {
2474            float: right;
2475        }
2476    }
2477
2478    .panelContent {
2479        background-color: var(--tab-active-background-color);
2480        margin: 0 10px 0 0;
2481        border-width: 0 1px 1px 1px;
2482        border-style: solid;
2483        border-color: var(--tab-active-border-color);
2484        padding: .5rem;
2485    }
2486
2487    #media__opts {
2488        border-bottom: 1px solid var(--tab-active-border-color);
2489        padding-bottom: .75rem;
2490    }
2491
2492    #media__content {
2493
2494        .odd,
2495        .even {
2496            border-top: 1px solid var(--table-row-border-color);
2497            font-size: 90%;
2498            display: grid;
2499            grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem;
2500            align-items: center;
2501
2502            a.mediafile {
2503                grid-column: 2 / span 1;
2504                grid-row: 1 / span 1;
2505                margin: 0;
2506                word-break: break-word;
2507            }
2508
2509            span.info {
2510                grid-column: 3 / span 1;
2511                grid-row: 1 / span 1;
2512                text-align: center;
2513
2514                br {
2515                    display: inline-block;
2516                }
2517            }
2518
2519            a:nth-child(2) {
2520                grid-column: 4 / span 1;
2521                grid-row: 1 / span 1;
2522                text-align: center;
2523            }
2524
2525            a:nth-child(3) {
2526                grid-column: 5 / span 1;
2527                grid-row: 1 / span 1;
2528                text-align: center;
2529            }
2530
2531            a.btn_media_delete {
2532                grid-column: 6 / span 1;
2533                grid-row: 1 / span 1;
2534                text-align: center;
2535            }
2536
2537            div.example,
2538            div.clearer,
2539            br {
2540                display: none;
2541            }
2542
2543            div.detail {
2544                grid-column: 1 / span 1;
2545                grid-row: 1 / span 1;
2546                padding: 0;
2547
2548                div.thumb {
2549                    float: none;
2550                    margin: 0;
2551
2552                    img {
2553                        max-width: 48px;
2554                        max-height: 48px;
2555                    }
2556                }
2557            }
2558        }
2559
2560        .odd {
2561            background-color: var(--table-odd-row-background-color);
2562            color: var(--table-odd-row-text-color);
2563        }
2564
2565        .even {
2566            background-color: var(--table-even-row-background-color);
2567            color: var(--table-even-row-text-color);
2568        }
2569    }
2570}
2571
2572.mikio.dokuwiki .mode_search .mikio-article {
2573    .search-results-form {
2574        fieldset.search-form {
2575            display: grid;
2576            margin: 0 auto;
2577            width: auto;
2578            max-width: 800px;
2579            grid-template-columns: auto 10rem 10rem;
2580            grid-gap: 1rem;
2581
2582            input[name=q] {
2583                grid-column: 1 / span 1;
2584                grid-row: 1 / span 1;
2585                width: 100%;
2586            }
2587
2588            button[type=submit] {
2589                .mikio-button-submit();
2590                grid-column: 2 / span 1;
2591                grid-row: 1 / span 1;
2592            }
2593
2594            .toggleAssistant {
2595                .mikio-button-small();
2596                grid-column: 3 / span 1;
2597                grid-row: 1 / span 1;
2598                flex: 0;
2599            }
2600
2601            .advancedOptions {
2602                grid-column: 1 / span 3;
2603                grid-row: 2 / span 1;
2604                text-align: center;
2605
2606                .toggle {
2607                    position: relative;
2608                    display: inline-block;
2609                    border: 1px solid var(--dropdown-border-color);
2610                    background-color: var(--dropdown-background-color);
2611                    color: var(--dropdown-color);
2612                    border-radius: .25rem;
2613                    padding: .375rem .75rem;
2614                    text-align: left;
2615
2616                    .current {
2617                        padding: .2rem 2.2rem .2rem .2rem;
2618                        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>');
2619                        background-size: 1.2rem;
2620                        background-position: right;
2621                        background-repeat: no-repeat;
2622
2623                        &:after {
2624                            content: "";
2625                        }
2626                    }
2627
2628                    ul {
2629                        position: absolute;
2630                        right: 0;
2631                        top: .5rem;
2632                        padding: .5rem 2rem;
2633                        border: 1px solid var(--dropdown-border-color);
2634                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
2635                        background-color: var(--dropdown-background-color);
2636                        color: #999;
2637                        list-style-type: none;
2638
2639                        li {
2640                            margin: 0rem;
2641                            white-space: nowrap;
2642                        }
2643
2644                        li.active {
2645                            padding: .2rem 0;
2646                            display: block;
2647                        }
2648
2649                        a,
2650                        a:visited,
2651                        a:active {
2652                            transition: all 0.15s ease-in-out;
2653                            color: var(--dropdown-color);
2654                            .mikio-text-decoration(none);
2655                            font-style: normal;
2656                            display: block;
2657                            padding: .2rem 2rem;
2658                            margin: 0 -2rem;
2659
2660                            &:hover {
2661                                background-color: var(--dropdown-hover-color);
2662                            }
2663                        }
2664                    }
2665
2666                    ul[aria-expanded="false"] {
2667                        display: none;
2668                    }
2669                }
2670
2671                .toggle+.toggle {
2672                    margin-left: 1rem;
2673                }
2674            }
2675        }
2676    }
2677
2678    h2 {
2679        margin-top: .5rem;
2680        padding-top: 1rem;
2681        border-top: 1px solid #dee2e6;
2682    }
2683
2684    .search_quickresult ul {
2685        background-color: #fff;
2686        padding: .5rem 1rem;
2687        list-style-type: none;
2688
2689        li {
2690            float: none;
2691            text-align: left;
2692            padding-left: 0;
2693
2694            &:before {
2695                font-size: 1.2rem;
2696                content: '\2022';
2697                margin-right: 0.5em;
2698            }
2699
2700            .li {
2701                display: inline-block;
2702            }
2703        }
2704    }
2705
2706    div.search_quickresult ul li {
2707        width: auto;
2708    }
2709
2710    .search_fullpage_result {
2711        border-top: 1px solid var(--table-row-border-color);
2712        padding: .75rem;
2713        background-color: var(--table-odd-row-background-color);
2714        color: var(--table-odd-row-text-color);
2715
2716        &:nth-child(2n+1) {
2717            background-color: var(--table-even-row-background-color);
2718            color: var(--table-even-row-text-color);
2719        }
2720
2721        .snippet {
2722            font-size: 90%;
2723            margin-bottom: 0;
2724        }
2725    }
2726}
2727
2728#index__tree {
2729    background-color: var(--tree-background-color);
2730    border: 1px solid var(--tree-border-color);
2731    padding: 0 1rem;
2732
2733    ul {
2734        padding-left: 1rem;
2735    }
2736
2737    a {
2738        // color: var(--text);
2739        .mikio-text-decoration(none);
2740    }
2741
2742    .curid a {
2743        color: var(--section-edit-highlight);
2744    }
2745}
2746
2747.mikio.dokuwiki ul.tabs {
2748    .mikio-tabs();
2749}
2750
2751.mikio .mode_draft {
2752    table {
2753        margin-bottom: 1rem;
2754    }
2755}
2756
2757#dokuwiki__detail {
2758    .mikio-admin();
2759    height: 100vh;
2760    padding: 0 2rem;
2761
2762    .content {
2763        display: flex;
2764
2765        .img_detail dl {
2766            display: grid;
2767            grid-template-columns: 4rem auto;
2768            align-items: center;
2769
2770            dt {
2771                font-weight: bold;
2772            }
2773        }
2774    }
2775}
2776
2777/* Plugin Patches */
2778/* FastWiki Plugin Patch - .mikio .content_partial */
2779.mikio .content_partial {
2780    .mikio-controls();
2781}
2782
2783/* Discussion Plugin Patch - .mikio .content_partial */
2784.mikio div.dokuwiki div.comment_wrapper {
2785    .mikio-controls();
2786    padding: 1em;
2787
2788    input[type=submit] {
2789        .mikio-control();
2790        .mikio-button();
2791    }
2792
2793    h2 {
2794        margin: 0;
2795    }
2796
2797    .comment_form {
2798        margin-top: 0;
2799    }
2800
2801    .comment_subscribe {
2802        input {
2803            float: none;
2804        }
2805
2806        label {
2807            float: none;
2808            display: inline-block;
2809        }
2810    }
2811
2812    .comment_buttons {
2813        float: none;
2814        text-align: right;
2815        margin-top: 1em;
2816    }
2817}
2818
2819/* Mobile */
2820@media (max-width: 768px) {
2821    .mikio-small-only {
2822        display: inline-block;
2823    }
2824
2825    .mikio-navbar {
2826        padding-bottom: 0;
2827
2828        .mikio-container {
2829            display: grid;
2830            grid-template-columns: auto 3rem;
2831        }
2832
2833        .mikio-navbar-brand {
2834            grid-column: 1 / span 1;
2835            grid-row: 1 / span 1;
2836            margin-bottom: .5rem;
2837        }
2838
2839        .mikio-navbar-toggle {
2840            display: block;
2841            margin-bottom: .5rem;
2842            grid-column: 2 / span 1;
2843            grid-row: 1 / span 1;
2844        }
2845
2846        .mikio-navbar-toggle.closed+.mikio-navbar-collapse {
2847            display: none;
2848        }
2849
2850        .mikio-navbar-collapse {
2851            grid-column: 1 / span 2;
2852            grid-row: 2 / span 1;
2853            flex-direction: column;
2854            margin: 0 -2rem;
2855            padding-top: .5rem;
2856            padding-right: 1rem;
2857            padding-bottom: .5rem;
2858            border-top: 1px solid rgba(0, 0, 0, 0.1);
2859        }
2860
2861        .mikio-nav-item {
2862            display: block;
2863            width: 100%;
2864            padding: .5rem 2rem;
2865            box-sizing: border-box;
2866            text-align: center;
2867        }
2868
2869        .mikio-dropdown-item {
2870            justify-content: center;
2871        }
2872
2873        .mikio-nav {
2874            width: 100%;
2875            flex-direction: column;
2876        }
2877
2878        .mikio-nav-dropdown {
2879            width: 100%;
2880            text-align: center;
2881            margin: 0;
2882            box-sizing: border-box;
2883        }
2884
2885        .mikio-nav-dropdown .mikio-dropdown {
2886            position: relative;
2887            border: 0;
2888            box-shadow: none;
2889        }
2890    }
2891
2892    .mikio-hero {
2893        .mikio-container {
2894            flex-direction: column;
2895        }
2896
2897        .mikio-hero-image-resize {
2898            height: auto;
2899        }
2900
2901        .mikio-hero-image {
2902            background-image: none !important;
2903        }
2904    }
2905
2906    .mode_show .mikio-page .mikio-container {
2907        display: grid;
2908        grid-template-columns: auto 2.5rem;
2909    }
2910
2911    .mode_revisions,
2912    .mode_edit,
2913    .mode_login,
2914    .mode_denied,
2915    .mode_draft,
2916    .mode_preview,
2917    .mode_showtag,
2918    .mode_admin {
2919        .mikio-page {
2920            grid-template-columns: auto;
2921        }
2922    }
2923
2924    .mikio #config__manager td .input,
2925    .mikio #config__manager td input.edit,
2926    .mikio #config__manager tr select {
2927        width: auto;
2928    }
2929
2930    .mikio-content {
2931        grid-column: 1 / span 1;
2932        grid-row: 2 / span 1;
2933        padding-bottom: 1rem;
2934        // padding-right: 0;
2935        // width: auto;
2936    }
2937
2938    /* TOC */
2939    .mikio .mikio-content .mikio-article {
2940        &.toc-full {
2941            display: block;
2942        }
2943
2944        .mikio-toc {
2945            float: none;
2946
2947            #dw__toc {
2948                max-width: none;
2949
2950                .mikio-iicon.hamburger {
2951                    display: none;
2952                }
2953            }
2954
2955            h3.toggle {
2956                background-position: 99% 50%;
2957                text-align: center;
2958
2959                &.closed {
2960                    font-size: @ini_toc_font_size;
2961                    width: auto;
2962
2963                    &:before {
2964                        display: none;
2965                    }
2966                }
2967            }
2968        }
2969    }
2970
2971    /* Sidebar */
2972    .mikio-sidebar {
2973        grid-column: 1 / span 2;
2974        width: auto;
2975
2976        .mikio-sidebar-toggle.closed+.mikio-sidebar-collapse {
2977            display: none;
2978        }
2979
2980        &.mikio-sidebar-left {
2981            grid-row: 1 / span 1;
2982            border-right: 0;
2983            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
2984        }
2985
2986        &.mikio-sidebar-right {
2987            grid-row: 3 / span 1;
2988            border-left: 0;
2989            border-top: 1px solid rgba(0, 0, 0, 0.2);
2990        }
2991
2992        .mikio-sidebar-toggle {
2993            display: block;
2994        }
2995    }
2996
2997    /* Page Tools */
2998    #dw__pagetools {
2999        grid-column: 2 / span 1;
3000        grid-row: 2 / span 1;
3001    }
3002
3003    .mikio.dokuwiki div.ui-admin #admin__version {
3004        padding-right: 1rem;
3005    }
3006
3007    .mikio-page-fill {
3008        .mikio-sidebar {
3009            display: none;
3010        }
3011    }
3012
3013    /* Media Manager */
3014    .mikio #mediamanager__page,
3015    #media__manager {
3016        display: flex;
3017        flex-direction: column;
3018
3019        .ui-resizable-e {
3020            display: none !important;
3021        }
3022
3023        .namespaces,
3024        .filelist {
3025            width: auto;
3026            min-width: auto;
3027        }
3028
3029        .panelHeader,
3030        .panelContent {
3031            margin-right: 0;
3032        }
3033    }
3034}
3035
3036@media print {
3037    .mikio {
3038
3039        .mikio-navbar-collapse,
3040        .mikio-toc,
3041        .mikio-sidebar,
3042        #dw__pagetools,
3043        .mikio-search {
3044            display: none !important;
3045            ;
3046        }
3047
3048        .mikio-navbar {
3049            box-shadow: none !important;
3050            ;
3051        }
3052
3053        .mikio-hero {
3054            .mikio-hero-text {
3055                min-height: auto;
3056                padding-bottom: 0;
3057            }
3058        }
3059
3060        .mikio-breadcrumbs,
3061        .mikio-youarehere,
3062        .mikio-hero,
3063        .mikio-footer {
3064            background-color: #fff !important;
3065        }
3066    }
3067}
3068
3069/* Plugin Patches */
3070/* BookCreator */
3071.mikio .bookcreator__bookbar {
3072    font-size: 0.8rem;
3073    display: flex;
3074    width: auto !important;
3075}
3076
3077/* Indexmenu */
3078.mikio-sidebar .mikio-sidebar-content .dtree {
3079    font-size: inherit;
3080
3081    .dTreeNode {
3082        margin: 0.5rem 0;
3083
3084        .indexmenu_tocbullet {
3085            margin-top: 2px;
3086            margin-left: 2px;
3087        }
3088
3089        a,
3090        a.nodeUrl,
3091        a.nodeSel,
3092        a.node,
3093        a.navSel {
3094            display: initial;
3095            margin: initial;
3096            color: #666;
3097            background: transparent;
3098
3099            &:visited,
3100            &:active {
3101                display: initial;
3102                margin: initial;
3103                color: #666;
3104                background: transparent;
3105            }
3106
3107            &:hover,
3108            &:visited:hover {
3109                color: #333;
3110                text-decoration: none;
3111                background-color: transparent;
3112            }
3113        }
3114
3115        a.navSel {
3116            font-weight: bold;
3117            color: #333;
3118        }
3119
3120        img:last-of-type {
3121            margin-right: 0.2rem;
3122            opacity: 0.5;
3123        }
3124    }
3125}
3126
3127.mikio .indexmenu_toc {
3128    padding: 0 4px 4px 0;
3129
3130    &>div {
3131        border: 1px solid #999;
3132        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
3133        position: relative;
3134        z-index: 10;
3135    }
3136
3137    .tocheader {
3138        padding: 0.2rem;
3139        border-bottom: 1px solid #ccc;
3140    }
3141
3142    .indexmenu_toc_inside {
3143        border: 0;
3144        padding: 0.2rem;
3145
3146        ul {
3147            margin: 0;
3148            padding: 0 0 0 1.5rem;
3149
3150            .li {
3151                margin-bottom: 0.4rem;
3152            }
3153        }
3154    }
3155}
3156
3157/* struct */
3158.mikio .mode_admin table {
3159    &.jsoneditor-values {
3160        width: auto;
3161    }
3162
3163    &.jsoneditor-tree,
3164    &.jsoneditor-values {
3165        border-bottom: 0;
3166
3167        tbody {
3168            tr {
3169                background: transparent;
3170            }
3171
3172            td {
3173                padding: 0;
3174
3175                &.jsoneditor-separator {
3176                    vertical-align: middle;
3177                }
3178            }
3179
3180        }
3181
3182        button {
3183            background-color: transparent;
3184            border: 0;
3185            transition: none;
3186
3187            &:hover {
3188                transition: none;
3189            }
3190        }
3191
3192        div.jsoneditor-value {
3193            background-color: var(--background);
3194        }
3195    }
3196}
3197
3198.ui-controlgroup-horizontal {
3199    label {
3200        .mikio-button();
3201        .mikio-button-small();
3202        background-image: none;
3203        border-left-width: 0 !important;
3204        border-right-width: 0 !important;
3205
3206        &:first-of-type {
3207            border-left-width: 1px !important;
3208        }
3209
3210        &:last-of-type {
3211            border-right-width: 1px !important;
3212        }
3213
3214        &:hover {
3215            background-image: none !important;
3216            border-left-width: 0 !important;
3217            border-right-width: 0 !important;
3218
3219            &:first-of-type {
3220                border-left-width: 1px !important;
3221            }
3222
3223            &:last-of-type {
3224                border-right-width: 1px !important;
3225            }
3226        }
3227    }
3228
3229    label.ui-state-active {
3230        .mikio-button-submit();
3231    }
3232}
3233
3234/* dark-light mode button */
3235.mikio {
3236    .mikio-darklight {
3237        display: inline-block;
3238        align-self: center;
3239
3240        .mikio-darklight-light {
3241            display: var(--display-theme-light);
3242        }
3243
3244        .mikio-darklight-dark {
3245            display: var(--display-theme-dark);
3246        }
3247
3248        .mikio-darklight-auto {
3249            display: var(--display-theme-auto);
3250        }
3251    }
3252
3253    .mikio-darklight-button {
3254        display: flex;
3255        justify-content: center;
3256        align-items: center;
3257        width: 2.2rem;
3258        height: 2.2rem;
3259        padding: 0;
3260
3261        .mikio-iicon {
3262            margin: 0;
3263        }
3264    }
3265}
3266
3267.mikio.dokuwiki {
3268    #mikio__translate .mikio-dropdown {
3269        min-width: auto;
3270    }
3271
3272    div.plugin_translation {
3273        text-align: left;
3274
3275        &.is-dropdown {
3276            padding-bottom: 0;
3277
3278            ul {
3279                position: relative;
3280                display: block;
3281
3282                li {
3283                    a {
3284                        display: block;
3285                    }
3286                }
3287            }
3288        }
3289
3290        .title {
3291            display: none;
3292        }
3293
3294        ul {
3295            li {
3296                margin: 0;
3297                display: block;
3298
3299                a,
3300                span {
3301                    margin: 0 -1rem 0 -1rem;
3302                    padding: .25rem 1rem .25rem 1rem !important;
3303                    background-color: var(--dropdown-background-color) !important;
3304                    color: var(--dropdown-color) !important;
3305                }
3306
3307                a:hover {
3308                    background-color: var(--dropdown-hover-color) !important;
3309                }
3310
3311                span {
3312                    margin-right: 0.1rem;
3313                    position: relative;
3314
3315                    &:after {
3316                        content: "";
3317                        display: inline-block;
3318                        position: absolute;
3319                        height: 0.75rem;
3320                        width: 0.25rem;
3321                        margin-top: 0.2rem;
3322                        margin-left: 0.75rem;
3323                        border-right: 2px solid var(--dropdown-color);
3324                        border-bottom: 2px solid var(--dropdown-color);
3325                        transform: rotateZ(45deg);
3326                    }
3327                }
3328            }
3329        }
3330    }
3331}