1/** 2 * DokuWiki Mikio Template CSS 3 * 4 * @link http://dokuwiki.org/template:mikio 5 * @author James Collins <james.collins@outlook.com.au> 6 * @license GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html) 7 */ 8 9/* Vendor Prefixes */ 10.mikio-user-select(@value: none) { 11 -webkit-user-select: @value; 12 -moz-user-select: @value; 13 -ms-user-select: @value; 14} 15 16.mikio-appearance(@value: none) { 17 -webkit-appearance: @value; 18 -moz-appearance: @value; 19 -ms-appearance: @value; 20} 21 22.mikio-transition(@value: all 0s ease 0s) { 23 -webkit-transition: @value; 24 transition: @value; 25} 26 27.mikio-text-decoration(@value: none) { 28 -webkit-text-decoration: @value; 29 text-decoration: @value; 30} 31 32.mikio-sticky { 33 position: -webkit-sticky; 34 position: sticky; 35} 36 37.mikio-pre-wrap { 38 white-space: pre-wrap; 39 white-space: -moz-pre-wrap; 40 white-space: -pre-wrap; 41 white-space: -o-pre-wrap; 42} 43 44.mikio-controls { 45 button, input, optgroup, select, textarea { 46 .mikio-control; 47 .mikio-input-text; 48 } 49 50 button { 51 .mikio-button; 52 } 53 54 button#edbtn__save, button[name="run[save]"] { 55 .mikio-button-submit; 56 } 57 58 input[type=text], input[type=search], input[type=password], input[type=email] { 59 .mikio-appearance(); 60 } 61 62 textarea { 63 margin-bottom: 1rem; 64 width: 100%; 65 word-wrap: break-word; 66 overflow: auto; 67 resize: vertical; 68 white-space: pre-wrap; 69 } 70 71 select { 72 .mikio-select; 73 } 74 75 .toolbutton { 76 .mikio-toolbar-button; 77 } 78} 79 80 81/* Containers */ 82html { 83 overflow-x: auto; 84 overflow-y: scroll; 85 display: block; 86 padding: 0; 87 font-size: @ini_font_size; 88 line-height: @ini_line_height; 89} 90 91// body.mikio { 92body { 93 display: flex; 94 flex-direction: column; 95 min-height: 100vh; 96 font-family: @ini_font_family; 97 letter-spacing: -.01em; 98 padding: 0; 99} 100 101html, body { 102 background-color: @ini_background; 103 color: @ini_text; 104 margin: 0; 105} 106 107#dokuwiki__site { 108 min-height: 100vh; 109} 110 111.mikio .site { 112 min-height: 100vh; 113 display: flex; 114 flex-direction: column; 115} 116 117.mikio-container { 118 max-width: @ini_site_width; 119 margin: 0 auto; 120} 121 122.mikio-page-topheader { 123 padding: 0 2rem; 124 border-bottom: 1px solid @ini_navbar_border_color; 125 background-color: @ini_topheader_background_color; 126 box-sizing: border-box; 127 width: 100%; 128 z-index: 1001; 129} 130 131.mikio-page-header { 132 padding: 0 2rem; 133 background-color: @ini_header_background_color; 134 box-sizing: border-box; 135 width: 100%; 136 z-index: 999; 137} 138 139.mikio-sidebar-header { 140 border-bottom: 1px solid @ini_sidebar_border_color; 141} 142 143.mikio-sidebar-footer { 144 border-top: 1px solid @ini_sidebar_border_color; 145} 146 147.mikio-page-contentheader { 148 149} 150 151.mikio-page-contentfooter { 152 153} 154 155.mikio-page-footer { 156 157} 158 159.mikio-page-bottomfooter { 160 161} 162 163.mikio-admin { 164 background-color: @ini_admin_background_color; 165} 166 167.mikio-small-only { 168 display: none; 169} 170 171.mikio { 172 .mikio-breadcrumbs, .mikio-youarehere { 173 padding: .75rem 2rem; 174 background-color: @ini_breadcrumb_background_color; 175 font-size: @ini_breadcrumb_font_size; 176 color: @ini_breadcrumb_text_color; 177 178 span.curid a, a { 179 .mikio-text-decoration(none); 180 color: @ini_breadcrumb_link_color; 181 font-weight: normal; 182 183 &:hover { 184 color: @ini_breadcrumb_link_hover_color; 185 } 186 } 187 188 ul { 189 list-style: none; 190 margin: 0; 191 padding: 0; 192 } 193 194 bdi { 195 margin-left: .5rem; 196 margin-right: .5rem; 197 // vertical-align: text-bottom; 198 } 199 200 // li.sep { 201 // margin-right: .5rem; 202 // } 203 204 li, span.bchead { 205 display: inline-block; 206 // vertical-align: text-bottom; 207 // margin-right: .5rem; 208 } 209 210 svg { 211 width: .9rem; 212 height: .9rem; 213 } 214 } 215} 216 217.mikio-navbar { 218 position: relative; 219 padding: .5rem 1rem .5rem 2rem; 220 border-bottom-width: 1px; 221 border-bottom-style: solid; 222 border-bottom-color: @ini_navbar_border_color; 223 background-color: @ini_navbar_background_color; 224 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 225 width: 100%; 226 box-sizing: border-box; 227 z-index: 1000; 228 229 .mikio-container { 230 display: flex; 231 flex: 1; 232 align-items: center; 233 } 234 235 .mikio-navbar-brand { 236 display: flex; 237 238 .mikio-navbar-brand-image { 239 max-width: 3rem; 240 max-height: 3rem; 241 margin-right: .5rem; 242 } 243 244 .mikio-navbar-brand-title { 245 display: flex; 246 flex-direction: column; 247 align-items: stretch; 248 justify-content: center; 249 } 250 251 .mikio-navbar-brand-title-text { 252 color: @ini_navbar_brand_text_color; 253 margin: 0; 254 font-weight: 500; 255 font-size: 1.2rem; 256 } 257 258 .mikio-navbar-brand-title-tagline { 259 margin: 0; 260 color: @ini_navbar_brand_tagline_color; 261 } 262 } 263 264 .mikio-navbar-toggle { 265 display: none; 266 font-size: 1rem; 267 position: absolute; 268 top: 1.2rem; 269 right: 1.2rem; 270 271 width: 1rem; 272 height: 1rem; 273 padding: 0; 274 275 cursor: pointer; 276 transition: transform 0.2s ease-in-out; 277 vertical-align: middle; 278 279 border: 0 none; 280 background: transparent; 281 282 &:before, &:after { 283 content: ""; 284 } 285 286 &:before, .icon, &:after { 287 display: block; 288 289 width: 100%; 290 height: 0.2em; 291 margin: 0 0 0.2em; 292 293 transition: transform 0.2s ease-in-out; 294 295 border-radius: 0.05em; 296 background: @ini_control_text_color; 297 } 298 299 &.open { 300 .icon { 301 transform: scale(0); 302 } 303 304 &:before { 305 transform: translateY(0.4em) rotate(135deg); 306 } 307 308 &:after { 309 transform: translateY(-0.4em) rotate(-135deg); 310 } 311 } 312 } 313 314 .mikio-navbar-collapse { 315 display: flex; 316 flex: 1; 317 align-items: center; 318 justify-content: @ini_navbar_content_justify; 319 } 320 321 a { 322 .mikio-text-decoration(none); 323 color: inherit; 324 } 325 326 .mikio-search { 327 margin: 0 .5rem; 328 } 329} 330 331.mikio-sub-navbar { 332 color: @ini_subnavbar_text_color; 333 justify-content: @ini_subnavbar_content_justify; 334 padding: .75rem 1rem; 335 border-color: @ini_subnavbar_border_color; 336 background-color: @ini_subnavbar_background_color; 337 338 ul, ol, p { 339 list-style: none; 340 margin: 0; 341 padding: 0; 342 } 343 344 ul, ol { 345 list-style: none; 346 } 347 348 li { 349 display: inline-block; 350 padding: 0 .2rem; 351 margin: 0 .5rem; 352 } 353 354 a { 355 color: @ini_subnavbar_link_color; 356 357 &:hover { 358 color: @ini_subnavbar_link_hover_color; 359 } 360 } 361} 362 363.mikio-hero { 364 background-color: @ini_hero_background_color; 365 366 .mikio-container { 367 display: flex; 368 flex: 1; 369 } 370 371 .mikio-hero-text { 372 flex: 1; 373 min-height: 5rem; 374 padding: 2rem; 375 376 .mikio-breadcrumbs, .mikio-youarehere { 377 background-color: transparent; 378 padding: 0; 379 margin: 0; 380 } 381 382 h1 { 383 margin: .75rem 0 1rem 0; 384 color: @ini_hero_title_color; 385 line-height: 1.2 386 } 387 388 h2 { 389 margin: 0; 390 font-weight: normal; 391 font-size: 1.25rem; 392 color: @ini_hero_subtitle_color; 393 } 394 } 395 396 .mikio-hero-image { 397 display: flex; 398 flex: 0 0 33%; 399 background-repeat: no-repeat; 400 background-position: center; 401 background-size: cover; 402 align-items: flex-end; 403 } 404 405 .mikio-hero-image-resize { 406 height: 15rem; 407 } 408} 409 410.mikio-tags { 411 display: block; 412 width: 100%; 413 text-align: right; 414 padding-right: .5rem; 415 margin-bottom: .5rem; 416 417 a { 418 margin: 0 .25rem; 419 font-size: 80%; 420 padding: .25rem .75rem; 421 border: 1px solid @ini_tag_background_color; 422 border-radius: 1rem; 423 background-color: @ini_tag_background_color; 424 color: @ini_tag_text_color; 425 .mikio-text-decoration(none); 426 transition: all .15s ease-in-out; 427 428 &:hover { 429 background-color: transparent; 430 color: @ini_tag_background_color; 431 } 432 } 433} 434 435 436.mikio-sidebar { 437 width: @ini_sidebar_width; 438 flex-shrink: 0; 439 background-color: @ini_sidebar_background_color; 440 padding: 1rem; 441 font-size: @ini_sidebar_font_size; 442 color: @ini_sidebar_text_color; 443 444 &.mikio-sidebar-left { 445 border-left: 1px solid @ini_sidebar_border_color; 446 border-right: 1px solid @ini_sidebar_border_color; 447 } 448 449 &.mikio-sidebar-right { 450 border-left: 1px solid @ini_sidebar_border_color; 451 border-right: 1px solid @ini_sidebar_border_color; 452 } 453 454 .mikio-sidebar-toggle { 455 display: none; 456 margin: 0 1rem; 457 .mikio-text-decoration(none); 458 text-align: center; 459 color: rgba(0, 0, 0, 0.6); 460 461 .icon { 462 &:before, &:after { 463 content: ""; 464 display: inline-block; 465 width: 0.5rem; 466 height: 0.1em; 467 margin: 0 0 0.2em; 468 transition: transform 0.2s ease-in-out; 469 border-radius: 0.05em; 470 background: rgba(0,0,0,0.6); 471 } 472 473 &:before { 474 transform: translateX(0.1rem) translateY(0) rotate(-135deg); 475 } 476 477 &:after { 478 transform: translateX(-0.1rem) translateY(0) rotate(135deg); 479 } 480 } 481 482 .open .icon { 483 &:before { 484 transform: translateX(0.1rem) rotate(135deg); 485 } 486 487 &:after { 488 transform: translateX(-0.1rem) rotate(-135deg); 489 } 490 } 491 } 492 493 .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse { 494 display: block; 495 } 496 497 .mikio-user-info { 498 margin-bottom: 1rem; 499 margin: 0 -1rem; 500 padding: 0 1rem 1rem 1rem; 501 border-bottom: 1px solid @ini_sidebar_border_color; 502 } 503 504 .mikio-search { 505 margin: 1rem 0 1rem 0; 506 } 507 508 .mikio-sidebar-content { 509 overflow-wrap: break-word; 510 margin-bottom: 1rem; 511 512 a { 513 display: block; 514 margin: 1rem 0; 515 color: @ini_sidebar_link_color; 516 .mikio-text-decoration(none); 517 518 &:hover { 519 color: @ini_sidebar_link_hover_color; 520 } 521 } 522 523 ul, ul.idx { 524 margin: 0; 525 padding: 0; 526 527 ul { 528 padding-left: 1rem; 529 } 530 531 li, li.closed, li.open { 532 list-style: none; 533 } 534 } 535 } 536 537 .mikio-tags { 538 margin: 0 0 1rem 0; 539 text-align: center; 540 541 a { 542 display: inline-block; 543 margin: 0 .25rem .25rem .25rem; 544 } 545 } 546} 547 548.mikio-page { 549 .mikio-container { 550 display: flex; 551 // flex: 1; 552 padding: 0; 553 } 554 555 a { 556 color: @ini_link; 557 } 558} 559 560.mikio-page-fill { 561 display: flex; 562 flex: 1; 563} 564 565.mikio .mikio-content .mikio-article { 566 margin: 0 auto; 567 568 ul, ul.idx { 569 padding-left: 1rem; 570 } 571 572 &.toc-full { 573 display: flex; 574 575 .mikio-toc { 576 margin-top: 1rem; 577 order: 2; 578 position: sticky; 579 position: -webkit-sticky; 580 top: 1rem; 581 align-self: flex-start; 582 overflow: scroll; 583 max-height: 100vh; 584 } 585 586 .mikio-article-content { 587 flex: 1; 588 } 589 } 590} 591 592.mikio-content { 593 box-sizing: border-box; 594 width: 100%; 595 max-width: 100%; 596 background-color: @ini_content_background; 597 padding: .5rem 2rem; 598} 599 600.mikio.dokuwiki div.preview { 601 background-color: @ini_content_background; 602 padding: 1rem 2rem; 603} 604 605.mikio-footer { 606 padding: 2rem; 607 color: @ini_footer_text_color; 608 background-color: @ini_footer_background_color; 609 font-size: @ini_footer_font_size; 610 text-align: @ini_footer_text_align; 611 612 a { 613 color: @ini_footer_link_color; 614 615 &:hover { 616 color: @ini_footer_link_hover_color; 617 } 618 } 619 620 .dw__pagetools { 621 margin-top: 1rem; 622 623 .tools { 624 list-style-type: none; 625 626 li { 627 display: inline-block; 628 margin: 0 .5rem; 629 } 630 631 a { 632 // margin: 0 .5rem; 633 634 svg { 635 fill: @ini_footer_link_color; 636 } 637 638 &:hover { 639 svg { 640 fill: @ini_footer_link_hover_color; 641 } 642 } 643 } 644 } 645 } 646 647 .mikio-nav { 648 margin-top: 1rem; 649 } 650 651 .mikio-footer-search { 652 margin-top: .5rem; 653 display: inline-block; 654 } 655 656 .license { 657 margin-top: .5rem; 658 659 img { 660 vertical-align: middle; 661 margin: 0 1rem; 662 } 663 } 664} 665 666.mikio .site > div.no { 667 display: none; 668} 669 670 671/* Page Elements */ 672.mikio-control { 673 margin: 0; 674 font-family: inherit; 675 font-size: inherit; 676 font-weight: 400; 677 // line-height: inherit; 678 border-width: 1px; 679 border-style: solid; 680 border-color: transparent; 681 border-radius: .25rem; 682 box-sizing: border-box; 683 vertical-align: middle; 684 padding: .375rem .75rem; 685 color: @ini_control_text_color; 686 background-color: @ini_control_background_color; 687 688 &[type=color] { 689 padding: 0; 690 } 691} 692 693.mikio-button { 694 display: inline-block; 695 text-align: center; 696 border-color: @ini_control_border_color; 697 line-height: 1.5; 698 .mikio-text-decoration(none); 699 text-transform: capitalize; 700 701 transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; 702 703 &:hover:not(:disabled) { 704 .mikio-text-decoration(none); 705 color: @ini_control_background_color; 706 background-color: @ini_control_border_color; 707 border-color: @ini_control_border_color; 708 } 709 710 &:disabled { 711 opacity: .65; 712 } 713} 714 715.mikio-button-small { 716 padding: .1rem .2rem; 717 font-size: 80%; 718 min-width: 3rem; 719} 720 721.mikio-button-submit { 722 color: #fff; 723 background-color: #007bff; 724 border-color: #007bff; 725 726 &:hover { 727 color: #fff; 728 background-color: #0069d9; 729 border-color: #0062cc; 730 } 731} 732 733.mikio-button-danger { 734 color: #dc3545; 735 border-color: #dc3545; 736 737 &:hover { 738 color: #fff; 739 background-color: #dc3545; 740 border-color: #dc3545; 741 } 742} 743 744.mikio-input-text { 745 border-color: @ini_input_border_color; 746 line-height: inherit; 747} 748 749.mikio-select { 750 .mikio-user-select(); 751 height: 2.25rem; 752} 753 754.mikio-toolbar-button { 755 border-radius: 0; 756 border-right-width: 0; 757 border-color: @ini_input_border_color; 758 759 &:first-of-type { 760 border-radius: .25rem 0 0 .25rem; 761 } 762 763 &:last-of-type { 764 border-radius: 0 .25rem .25rem 0; 765 border-right-width: 1px; 766 } 767} 768 769.mikio-dialog { 770 .mikio-article { 771 max-width: 40rem; 772 } 773 774 fieldset { 775 legend { 776 font-size: 1.75rem; 777 font-weight: 400; 778 } 779 780 label.block input.edit, select { 781 width: 100%; 782 } 783 784 label { 785 text-align: left; 786 font-weight: normal; 787 display: block; 788 } 789 790 label.simple { 791 text-align: center; 792 } 793 794 label.block { 795 position: relative; 796 } 797 798 label.block span { 799 position: absolute; 800 padding: .4rem .9rem; 801 color: rgba(0, 0, 0, 0.3); 802 } 803 804 button { 805 display: block; 806 width: 100%; 807 808 &[type=submit] { 809 .mikio-button-submit; 810 } 811 } 812 813 input[type=checkbox] { 814 vertical-align: middle; 815 } 816 } 817} 818 819.mikio .mikio-navbar .mikio-search, 820.mikio .mikio-sidebar .mikio-search, 821.mikio .mikio-footer .mikio-search, 822.mikio .mikio-search { 823 display: flex; 824 825 input { 826 width: 1%; 827 flex: 1 1 auto; 828 border-radius: .25rem 0 0 .25rem; 829 } 830 831 button { 832 color: @ini_control_background_color; 833 background-color: @ini_control_border_color; 834 border-radius: 0 .25rem .25rem 0; 835 border-color: @ini_control_border_color; 836 837 &:hover { 838 background-color: @ini_control_background_color; 839 color: @ini_control_text_color; 840 } 841 } 842 843 .mikio-iicon { 844 // width: 1.4rem; 845 // height: 1.4rem; 846 margin: 0 -4px 0 -4px; 847 } 848} 849 850#dw__pagetools { 851 .mikio-sticky; 852 top: 0; 853 align-self: flex-start; 854 padding: 3rem .5rem 0 .5rem; 855 856 ul { 857 list-style: none; 858 padding: 0; 859 margin: 0; 860 } 861 862 a { 863 display: block; 864 865 svg { 866 fill: @ini_pagetools_color; 867 } 868 869 &:hover { 870 svg { 871 fill: @ini_pagetools_hover_color; 872 } 873 } 874 } 875} 876 877.mode_admin .mikio-toc { 878 background-color: @ini_admin_background_color; 879 880 #dw__toc { 881 background-color: #fff; 882 } 883} 884 885.mikio .mode_admin .mikio-toc #dw__toc { 886 background-color: @ini_content_background; 887} 888 889.mikio .mikio-toc { 890 float: right; 891 padding-left: 1rem; 892 padding-bottom: 1rem; 893 // background-color: @ini_content_background; 894 margin-top: 1rem; 895 896 #dw__toc { 897 background-color: @ini_toc_background_color; 898 border: 1px solid @ini_toc_border_color; 899 border-radius: .25rem; 900 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 901 padding: .5rem; 902 max-width: 12rem; 903 float: none; 904 width: auto; 905 margin: 0; 906 // background-color: transparent; 907 908 ul { 909 padding-left: 0; 910 margin: 0; 911 list-style-type: none; 912 913 ul { 914 padding-left: .5rem; 915 } 916 } 917 918 &> div { 919 padding: .2em .5em; 920 } 921 } 922 923 h3.toggle { 924 margin: 0; 925 padding-right: 2rem; 926 font-size: @ini_toc_font_size; 927 background-size: 1rem; 928 background-position: 95% 50%; 929 background-repeat: no-repeat; 930 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>'); 931 932 &.closed { 933 font-size: 0; 934 height: 1rem; 935 width: 2rem; 936 padding-right: 0; 937 938 &:before { 939 display: inline-block; 940 content: ""; 941 width: .8rem; 942 height: .8rem; 943 margin-right: .5rem; 944 margin-top: .1rem; 945 background-size: .8rem; 946 background-position: center; 947 background-repeat: no-repeat; 948 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill:inherit"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>'); 949 } 950 } 951 952 span { 953 display: none; 954 } 955 } 956 957 a { 958 display: block; 959 font-size: @ini_toc_font_size; 960 color: @ini_toc_link_color; 961 .mikio-text-decoration(none); 962 padding: .2rem 0; 963 964 &:hover { 965 color: @ini_toc_link_hover_color; 966 } 967 } 968} 969 970.mikio-icon { 971 margin-right: .25rem; 972 // max-width: 1.4rem; 973 // max-height: 1.4rem; 974 975 svg { 976 // max-width: 1.4rem; 977 // max-height: 1.4rem; 978 vertical-align: middle; 979 } 980} 981 982.mikio-iicon { 983 display: inline-block; 984 width: 1.2rem; 985 height: 1.2rem; 986 background-size: 1.2rem; 987 background-position: center; 988 background-repeat: no-repeat; 989 vertical-align: middle; 990 margin-right: .25rem; 991 fill: currentColor; 992} 993 994.mikio .mode_show table, 995.mikio.dokuwiki .mode_showtag table.ul, 996.mikio .mode_admin table { 997 width: 100%; 998 border-collapse: collapse; 999 margin-bottom: 1rem; 1000 font-size: @ini_table_font_size; 1001 border-bottom: 1px solid @ini_table_row_border_color; 1002 1003 tr { 1004 border-top: 1px solid @ini_table_row_border_color; 1005 } 1006 1007 td, th { 1008 // border-top: 1px solid @ini_table_row_border_color; 1009 padding: .75rem; 1010 text-align: left; 1011 } 1012 1013 tbody tr { 1014 &:nth-child(odd) { 1015 background-color: @ini_table_odd_row_background_color; 1016 } 1017 1018 &:nth-child(even) { 1019 background-color: @ini_table_even_row_background_color; 1020 } 1021 } 1022} 1023 1024.mikio-nav { 1025 list-style: none; 1026 margin: 0; 1027 padding: 0; 1028 1029 .mikio-nav-item, .mikio-nav-dropdown { 1030 display: inline-block; 1031 padding: .5rem .2rem; 1032 margin: 0 .5rem; 1033 } 1034 1035 .mikio-nav-link { 1036 1037 } 1038 1039 .mikio-nav-dropdown { 1040 position: relative; 1041 } 1042 1043 .mikio-nav-dropdown > a { 1044 display: inline-block; 1045 padding: .2rem 1.2rem .2rem 0rem; 1046 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>'); 1047 background-size: 1.2rem; 1048 background-position: right; 1049 background-repeat: no-repeat; 1050 } 1051 1052 a { 1053 .mikio-text-decoration(none); 1054 } 1055} 1056 1057.mikio-dropdown { 1058 display: block; 1059 position: absolute; 1060 z-index: 10000; 1061 min-width: 12rem; 1062 right: 0; 1063 padding: 1rem 1.5rem; 1064 border: 1px solid @ini_dropdown_border_color; 1065 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 1066 background-color: @ini_dropdown_background_color; 1067 color: @ini_dropdown_color; 1068 1069 &.closed { 1070 display: none; 1071 } 1072 1073 .mikio-dropdown-item { 1074 display: flex; 1075 align-items: center; 1076 margin-top: .5rem; 1077 margin-bottom: .5rem; 1078 } 1079 1080 .mikio-dropdown-header { 1081 margin: 0 0 1rem 0; 1082 } 1083 1084 .mikio-dropdown-divider { 1085 margin: 1rem -1rem; 1086 border-bottom: 1px solid @ini_dropdown_border_color; 1087 } 1088 1089 .mikio-nav-link { 1090 margin: 0rem -1rem 0rem -1rem; 1091 padding: .25rem 1rem .25rem 1rem; 1092 transition: all 0.15s ease-in-out; 1093 1094 &:hover { 1095 background-color: @ini_dropdown_hover_color; 1096 } 1097 } 1098} 1099 1100.typeahead.mikio-dropdown { 1101 a.mikio-dropdown-item { 1102 display: inline; 1103 } 1104 1105 .mikio-dropdown-header { 1106 margin-bottom: 0em; 1107 overflow: hidden; 1108 text-overflow: ellipsis; 1109 color: #999999; 1110 } 1111 1112 .mikio-dropdown-divider { 1113 margin-top: 0.5rem; 1114 margin-bottom: 0.5rem; 1115 } 1116} 1117 1118.mikio-tabs { 1119 padding: 0; 1120 margin-top: 1rem; 1121 margin-bottom: -1px; 1122 list-style-type: none; 1123 1124 li { 1125 float: none; 1126 display: inline-block; 1127 font-size: 1rem; 1128 display: inline-block; 1129 line-height: 1.4rem; 1130 position: relative; 1131 z-index: 2; 1132 1133 strong { 1134 .mikio-tab-active; 1135 } 1136 1137 a { 1138 display: inline-block; 1139 padding: .5rem 1rem; 1140 border: 1px solid transparent; 1141 color: #007bff; 1142 .mikio-text-decoration(none); 1143 margin: 0; 1144 background-color: transparent; 1145 1146 &:hover { 1147 color: #0056b3; 1148 border-color: #dee2e6 #dee2e6 transparent #dee2e6; 1149 border-radius: .5rem .5rem 0 0; 1150 background-color: transparent; 1151 } 1152 } 1153 } 1154 1155 &:after { 1156 border-bottom: 0; 1157 } 1158} 1159 1160.mikio-tab-active { 1161 display: inline-block; 1162 background-color: #fff; 1163 font-weight: normal; 1164 color: #495057; 1165 border-color: #dee2e6 #dee2e6 #fff; 1166 border-radius: .5rem .5rem 0 0; 1167 border-width: 1px; 1168 border-style: solid; 1169 padding: .5rem 1rem; 1170 margin: 0; 1171 bottom: -1px; 1172 // margin-bottom: -1px; 1173} 1174 1175.mikio-tab { 1176 background-color: #fff; 1177 font-weight: normal; 1178 color: #495057; 1179 border-color: #dee2e6 #dee2e6 #fff; 1180 padding: .5rem 1rem; 1181 margin: 0; 1182 bottom: -1px; 1183 // margin-bottom: -1px; 1184} 1185 1186.mikio-tab-panel { 1187 margin-bottom: 0; 1188 background-color: #fff; 1189 border-width: 1px 1px 1px 1px; 1190 border-style: solid; 1191 border-color: #dee2e6; 1192 word-wrap: break-word; 1193 word-break: break-word; 1194} 1195 1196.mikio.dokuwiki div.section_highlight { 1197 background-color: @ini_section_edit_highlight; 1198 border-width: 0; 1199 margin: 0 -1rem; 1200 padding: 0 1rem; 1201} 1202 1203.mikio-input-file { 1204 position: absolute; 1205 // margin-top: -.5rem; 1206 top: 0; 1207 right: 0; 1208 left: 0; 1209 z-index: 5; 1210 padding: .25rem 1rem; 1211 line-height: 1.5; 1212 text-align: left; 1213 color: @ini_control_text_color; 1214 background-color: @ini_control_background_color; 1215 // border: .1px solid @ini_control_border_color; 1216 border: .1px solid @ini_input_border_color; 1217 border-radius: .25rem; 1218 -webkit-user-select: none; 1219 -moz-user-select: none; 1220 -ms-user-select: none; 1221 user-select: none; 1222 white-space: nowrap; 1223 overflow: hidden; 1224 text-overflow: ellipsis; 1225 box-sizing: border-box; 1226 1227 &:before { 1228 position: absolute; 1229 top: 0; 1230 right: 0; 1231 bottom: 0; 1232 z-index: 6; 1233 display: block; 1234 content: "Browse"; 1235 padding: .25rem 1rem; 1236 line-height: 1.5; 1237 color: @ini_control_background_color; 1238 background-color: @ini_control_border_color; 1239 border-radius: 0 .25rem .25rem 0; 1240 border: 1px solid @ini_control_border_color; 1241 transition: all .15s ease-in-out; 1242 } 1243 1244 &:hover:before { 1245 background-color: @ini_control_background_color; 1246 color: @ini_control_text_color; 1247 } 1248} 1249 1250code, pre { 1251 overflow-x: auto; 1252 font-family: @ini_code_font_family; 1253 font-size: @ini_code_font_size; 1254 color: @ini_code_text_color; 1255 background-color: @ini_code_background_color; 1256 word-wrap: @ini_code_word_wrap; 1257 .mikio-pre-wrap; 1258 line-height: @ini_code_line_height; 1259} 1260 1261.mode_show { 1262 code, pre { 1263 border: 1px solid @ini_code_border_color; 1264 padding: 1em; 1265 } 1266} 1267 1268 1269/* Dokuwiki Patches */ 1270.mikio-search, 1271.mikio .dokuwiki fieldset, 1272.mikio.dokuwiki .secedit, 1273.mikio .mode_revisions, 1274.mikio .mode_edit, 1275.mikio .mode_draft, 1276.mikio .mode_preview, 1277.mikio .mode_showtag, 1278.mikio .mode_admin { 1279 .mikio-controls; 1280} 1281 1282.mikio.dokuwiki .secedit { 1283 float: none; 1284 margin-top: 0; 1285 text-align: right; 1286} 1287 1288.mikio.dokuwiki fieldset { 1289 margin: 2rem auto; 1290 border: 0; 1291} 1292 1293.mikio.dokuwiki .mode_login, 1294.mikio.dokuwiki .mode_denied { 1295 .mikio-dialog; 1296} 1297 1298.mikio .mode_admin { 1299 input[type=text], input[type=password], input[type=email] { 1300 width: 100%; 1301 } 1302 1303 p { 1304 button + button { 1305 margin-left: .5rem; 1306 } 1307 } 1308 1309 div.ui-admin { 1310 ul.admin_tasks, ul.admin_plugins { 1311 float: none; 1312 display: grid; 1313 grid-template-columns: repeat(auto-fit, 15rem); 1314 width: auto; 1315 padding: 0; 1316 margin: 0; 1317 justify-content: center; 1318 1319 li { 1320 border: 1px solid @ini_control_border_color; 1321 border-radius: .25rem; 1322 margin: 1rem 1rem; 1323 background-color: @ini_control_background_color; 1324 1325 a { 1326 display: flex; 1327 flex-direction: column; 1328 align-items: center; 1329 justify-content: center; 1330 text-align: center; 1331 height: 4rem; 1332 font-size: 1rem; 1333 font-weight: normal; 1334 padding: 1rem 2rem; 1335 color: #333; 1336 .mikio-text-decoration(none); 1337 overflow: hidden; 1338 transition: all .15s ease-in-out; 1339 1340 span.icon { 1341 width: auto; 1342 height: auto; 1343 min-height: auto; 1344 } 1345 1346 &:hover { 1347 .mikio-text-decoration(none); 1348 color: @ini_control_background_color; 1349 background-color: @ini_control_border_color; 1350 border-color: @ini_control_border_color; 1351 1352 svg { 1353 fill: @ini_control_background_color; 1354 } 1355 } 1356 } 1357 } 1358 } 1359 } 1360 1361 .mikio-config-table-header { 1362 background-color: #ddd; 1363 font-weight: bold; 1364 1365 .mikio-iicon { 1366 vertical-align: text-bottom; 1367 } 1368 } 1369 1370 #extension__list { 1371 ul.extensionList { 1372 li { 1373 border-width: 0 0 1px 0; 1374 border-style: solid; 1375 border-color: @ini_table_row_border_color; 1376 padding: .75rem; 1377 margin: 0; 1378 text-align: left; 1379 1380 &:nth-child(odd) { 1381 background-color: @ini_table_odd_row_background_color; 1382 } 1383 1384 &:nth-child(even) { 1385 background-color: @ini_table_even_row_background_color; 1386 } 1387 } 1388 } 1389 } 1390 1391 button#usrmgr__del { 1392 .mikio-button-danger; 1393 margin-right: .5rem; 1394 } 1395 1396 #acl__tree { 1397 background-color: #fff; 1398 } 1399 1400 #acl_manager table tr { 1401 &:nth-child(odd) { 1402 background-color: @ini_table_odd_row_background_color; 1403 } 1404 1405 &:nth-child(even) { 1406 background-color: @ini_table_even_row_background_color; 1407 } 1408 } 1409} 1410 1411.mode_admin, 1412.mode_login, 1413.mode_denied, 1414.mode_revisions, 1415.mode_recent, 1416.mode_backlink, 1417.mode_media, 1418.mode_index, 1419.mode_search, 1420.mode_edit, 1421.mode_draft, 1422.mode_preview, 1423.mode_showtag { 1424 .mikio-content, .mikio-page-fill { 1425 .mikio-admin; 1426 } 1427} 1428 1429.mikio #plugin__styling button.primary { 1430 font-weight: inherit; 1431} 1432 1433.mikio.dokuwiki .secedit { 1434 button { 1435 .mikio-button-small; 1436 } 1437} 1438 1439.mikio img { 1440 max-width: 100%; 1441 1442 &.media { 1443 margin: .2rem 0; 1444 } 1445 1446 &.medialeft { 1447 margin: .2rem 1em .2rem 0; 1448 } 1449 1450 &.mediaright { 1451 margin: .2rem 0 .2rem 1rem; 1452 } 1453 1454 &.mediacenter { 1455 margin: .2rem auto; 1456 } 1457} 1458 1459.mikio div.dokuwiki div.inclmeta { 1460 margin-top: .5rem; 1461 padding-top: .5rem; 1462} 1463 1464.mikio #dw__login label[for=remember__me] { 1465 margin-left: 0; 1466} 1467 1468.mikio #config__manager { 1469 fieldset { 1470 background-color: transparent; 1471 margin: 0; 1472 padding: 0; 1473 1474 legend { 1475 text-align: left; 1476 } 1477 } 1478 1479 tr { 1480 .input, input { 1481 color: inherit; 1482 background-color: transparent; 1483 } 1484 1485 textarea, select { 1486 color: inherit; 1487 background-color: #fff; 1488 } 1489 1490 select { 1491 width: 100%; 1492 } 1493 } 1494 1495 td { 1496 &.label { 1497 display: grid; 1498 grid-template-columns: auto 2rem; 1499 1500 span.outkey { 1501 float: none; 1502 font-size: 100%; 1503 background-color: transparent; 1504 margin: 0; 1505 grid-column: 1 / span 1; 1506 grid-row: 1 / span 1; 1507 } 1508 1509 label { 1510 grid-column: 1 / span 1; 1511 grid-row: 2 / span 1; 1512 } 1513 1514 img { 1515 float: none; 1516 grid-column: 2 / span 1; 1517 grid-row: 1 / span 2; 1518 align-self: center; 1519 } 1520 } 1521 1522 input.edit { 1523 width: 100%; 1524 } 1525 } 1526 1527 button[type=submit] { 1528 .mikio-button-submit; 1529 } 1530} 1531 1532.mode_revisions .mikio-article { 1533 li { 1534 padding: .5rem 1rem; 1535 border-top: 1px solid #e5e5e5; 1536 } 1537 1538 li:nth-child(odd) { 1539 background-color: #fff; 1540 } 1541 1542 .li { 1543 display: grid; 1544 grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem; 1545 align-items: center; 1546 text-align: center; 1547 font-size: 90%; 1548 1549 a.wikilink1 { 1550 text-align: left; 1551 } 1552 1553 span.sizechange { 1554 width: 100%; 1555 } 1556 } 1557 1558 .sum { 1559 display: block; 1560 } 1561} 1562 1563.mode_recent .mikio-article { 1564 li { 1565 padding: .5rem 1rem; 1566 border-top: 1px solid #e5e5e5; 1567 } 1568 1569 li:nth-child(odd) { 1570 background-color: #fff; 1571 } 1572 1573 .li { 1574 display: grid; 1575 grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem; 1576 align-items: center; 1577 text-align: center; 1578 font-size: 90%; 1579 1580 a.wikilink1, span.curid { 1581 text-align: left; 1582 } 1583 1584 span.sizechange { 1585 width: 100%; 1586 } 1587 } 1588 1589 select { 1590 .mikio-control; 1591 .mikio-select; 1592 } 1593} 1594 1595 1596.mikio #mediamanager__page, #media__manager { 1597 width: 100%; 1598 min-width: 100%; 1599 1600 button, .qq-upload-button, .qq-upload-list a { 1601 .mikio-control; 1602 .mikio-button; 1603 } 1604 1605 .qq-upload-list a.qq-upload-cancel { 1606 .mikio-button-danger; 1607 } 1608 1609 button.qq-upload-action { 1610 .mikio-button-submit; 1611 } 1612 1613 input[type=text], input[type=search], textarea { 1614 .mikio-control; 1615 .mikio-input-text 1616 } 1617 1618 .ui-resizable-e { 1619 background: transparent; 1620 width: 6px; 1621 right: 2px; 1622 1623 &:hover { 1624 background-color: #999; 1625 } 1626 } 1627 1628 .namespaces { 1629 width: 20%; 1630 min-width: 10em; 1631 left: 0 !important; 1632 } 1633 1634 .namespaces, #media__tree { 1635 h2 { 1636 .mikio-tab-active; 1637 font-size: 1rem; 1638 display: inline-block; 1639 border-radius: .5rem .5rem 0 0; 1640 border-width: 1px; 1641 border-style: solid; 1642 line-height: 1.4rem; 1643 position: relative; 1644 z-index: 2; 1645 } 1646 1647 .panelHeader { 1648 .mikio-tab-panel; 1649 } 1650 1651 ul, ul.idx { 1652 margin-top: 0; 1653 padding: 0; 1654 list-style-type: none; 1655 1656 ul { 1657 margin-left: 1rem; 1658 } 1659 1660 li { 1661 margin: .25rem 0; 1662 white-space: nowrap; 1663 1664 img { 1665 margin-right: .2rem; 1666 } 1667 } 1668 1669 a { 1670 .mikio-text-decoration(none); 1671 color: #333; 1672 } 1673 1674 div { 1675 display: inline-block; 1676 } 1677 } 1678 } 1679 1680 .filelist { 1681 width: 50%; 1682 min-width: 25em; 1683 left: 0 !important; 1684 } 1685 1686 .filelist, .qq-uploader { 1687 .panelHeader { 1688 .mikio-tab-panel; 1689 1690 h3 { 1691 width: 100%; 1692 } 1693 } 1694 1695 form.options { 1696 margin-top: 0; 1697 1698 .ui-controlgroup-horizontal label { 1699 margin-right: 0; 1700 } 1701 } 1702 1703 .panelContent { 1704 padding-top: 1rem; 1705 text-align: center; 1706 } 1707 1708 ul { 1709 margin: 1rem 0 -1px 0; 1710 1711 &.thumbs { 1712 margin: 0; 1713 1714 li { 1715 width: 200px; 1716 background-color: #fff; 1717 1718 dt a { 1719 display: inline; 1720 } 1721 1722 dd { 1723 width: auto; 1724 font-size: 90%; 1725 color: #666; 1726 margin-bottom: .25rem; 1727 } 1728 1729 .name { 1730 font-weight: normal; 1731 1732 a { 1733 color: #000; 1734 } 1735 } 1736 } 1737 } 1738 } 1739 1740 .rows { 1741 li { 1742 background-color: @ini_table_odd_row_background_color; 1743 max-height: none; 1744 font-size: 90%; 1745 1746 &:nth-child(2n+1) { 1747 background-color: @ini_table_even_row_background_color; 1748 } 1749 1750 a { 1751 font-weight: normal; 1752 color: #333; 1753 } 1754 1755 dt a { 1756 height: auto; 1757 } 1758 1759 dd.name { 1760 text-align: left; 1761 } 1762 } 1763 } 1764 1765 .qq-upload-list { 1766 margin-top: 1rem; 1767 1768 li { 1769 &:hover { 1770 background-color: transparent; 1771 } 1772 } 1773 } 1774 1775 .qq-action-container { 1776 margin-top: 1rem; 1777 padding-top: 1rem; 1778 border-top: 1px solid #dee2e6; 1779 } 1780 } 1781 1782 .file { 1783 .panelHeader { 1784 .mikio-tab-panel; 1785 1786 a { 1787 font-weight: normal; 1788 color: #333; 1789 } 1790 } 1791 1792 ul { 1793 &.tabs { 1794 .mikio-tabs; 1795 } 1796 } 1797 1798 #mediamanager__btn_delete button { 1799 .mikio-button-danger; 1800 } 1801 1802 dl { 1803 font-size: 90%; 1804 1805 dt { 1806 padding: .25rem .5rem; 1807 background-color: #f0f0f0; 1808 } 1809 1810 dd { 1811 padding: .25rem .5rem; 1812 background-color: #f8f8f8; 1813 } 1814 } 1815 1816 input[type=text], form.meta textarea.edit { 1817 width: 100%; 1818 min-width: 100%; 1819 max-width: 100%; 1820 } 1821 1822 button[name="mediado[save]"] { 1823 .mikio-button-submit; 1824 } 1825 } 1826 1827 .panel { 1828 float: left; 1829 } 1830 1831 .panelHeader { 1832 margin: 0 10px 10px 0; 1833 padding: 10px 10px 8px; 1834 font-size: .9rem; 1835 } 1836 1837 .panelContent { 1838 background-color: #fff; 1839 margin: 0 10px 0 0; 1840 border-width: 0 1px 1px 1px; 1841 border-style: solid; 1842 border-color: #dee2e6; 1843 padding: .5rem; 1844 } 1845 1846 #media__opts { 1847 border-bottom: 1px solid #dee2e6; 1848 padding-bottom: .75rem; 1849 } 1850 1851 #media__content { 1852 .odd, .even { 1853 border-top: 1px solid @ini_table_row_border_color; 1854 font-size: 90%; 1855 display: grid; 1856 grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem; 1857 align-items: center; 1858 1859 a.mediafile { 1860 grid-column: 2 / span 1; 1861 grid-row: 1 / span 1; 1862 margin: 0; 1863 word-break: break-word; 1864 } 1865 1866 span.info { 1867 grid-column: 3 / span 1; 1868 grid-row: 1 / span 1; 1869 text-align: center; 1870 1871 br { 1872 display: inline-block; 1873 } 1874 } 1875 1876 a:nth-child(2) { 1877 grid-column: 4 / span 1; 1878 grid-row: 1 / span 1; 1879 text-align: center; 1880 } 1881 1882 a:nth-child(3) { 1883 grid-column: 5 / span 1; 1884 grid-row: 1 / span 1; 1885 text-align: center; 1886 } 1887 1888 a.btn_media_delete { 1889 grid-column: 6 / span 1; 1890 grid-row: 1 / span 1; 1891 text-align: center; 1892 } 1893 1894 div.example, div.clearer, br { 1895 display: none; 1896 } 1897 1898 div.detail { 1899 grid-column: 1 / span 1; 1900 grid-row: 1 / span 1; 1901 padding: 0; 1902 1903 div.thumb { 1904 float: none; 1905 margin: 0; 1906 1907 img { 1908 max-width: 48px; 1909 max-height: 48px; 1910 } 1911 } 1912 } 1913 } 1914 1915 .odd { 1916 background-color: @ini_table_odd_row_background_color; 1917 } 1918 1919 .even { 1920 background-color: @ini_table_even_row_background_color; 1921 } 1922 } 1923} 1924 1925.mikio.dokuwiki .mode_search .mikio-article { 1926 .search-results-form { 1927 fieldset.search-form { 1928 display: grid; 1929 margin: 0 auto; 1930 width: auto; 1931 max-width: 800px; 1932 grid-template-columns: auto 10rem 10rem; 1933 grid-gap: 1rem; 1934 1935 input[name=q] { 1936 grid-column: 1 / span 1; 1937 grid-row: 1 / span 1; 1938 width: 100%; 1939 } 1940 1941 button[type=submit] { 1942 .mikio-button-submit; 1943 grid-column: 2 / span 1; 1944 grid-row: 1 / span 1; 1945 } 1946 1947 .toggleAssistant { 1948 .mikio-button-small; 1949 grid-column: 3 / span 1; 1950 grid-row: 1 / span 1; 1951 flex: 0; 1952 } 1953 1954 .advancedOptions { 1955 grid-column: 1 / span 3; 1956 grid-row: 2 / span 1; 1957 text-align: center; 1958 1959 .toggle { 1960 position: relative; 1961 display: inline-block; 1962 border: 1px solid @ini_dropdown_border_color; 1963 background-color: @ini_dropdown_background_color; 1964 color: @ini_dropdown_color; 1965 border-radius: .25rem; 1966 padding: .375rem .75rem; 1967 text-align: left; 1968 1969 .current { 1970 padding: .2rem 2.2rem .2rem .2rem; 1971 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>'); 1972 background-size: 1.2rem; 1973 background-position: right; 1974 background-repeat: no-repeat; 1975 1976 &:after { 1977 content: ""; 1978 } 1979 } 1980 1981 ul { 1982 position: absolute; 1983 right: 0; 1984 top: .5rem; 1985 padding: .5rem 2rem; 1986 border: 1px solid @ini_dropdown_border_color; 1987 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 1988 background-color: @ini_dropdown_background_color; 1989 color: #999; 1990 list-style-type: none; 1991 1992 li { 1993 margin: 0rem; 1994 white-space: nowrap; 1995 } 1996 1997 li.active { 1998 padding: .2rem 0; 1999 display: block; 2000 } 2001 2002 a { 2003 transition: all 0.15s ease-in-out; 2004 color: @ini_dropdown_color; 2005 .mikio-text-decoration(none); 2006 font-style: normal; 2007 display: block; 2008 padding: .2rem 2rem; 2009 margin: 0 -2rem; 2010 2011 &:hover { 2012 background-color: @ini_dropdown_hover_color; 2013 } 2014 } 2015 } 2016 2017 ul[aria-expanded="false"] { 2018 display: none; 2019 } 2020 } 2021 2022 .toggle + .toggle { 2023 margin-left: 1rem; 2024 } 2025 } 2026 } 2027 } 2028 2029 h2 { 2030 margin-top: .5rem; 2031 padding-top: 1rem; 2032 border-top: 1px solid #dee2e6; 2033 } 2034 2035 .search_quickresult ul { 2036 background-color: #fff; 2037 padding: .5rem 1rem; 2038 list-style-type: none; 2039 2040 li { 2041 float: none; 2042 text-align: left; 2043 padding-left: 0; 2044 2045 &:before { 2046 font-size: 1.2rem; 2047 content:'\2022'; 2048 margin-right:0.5em; 2049 } 2050 2051 .li { 2052 display: inline-block; 2053 } 2054 } 2055 } 2056 2057 div.search_quickresult ul li { 2058 width: auto; 2059 } 2060 2061 .search_fullpage_result { 2062 border-top: 1px solid @ini_table_row_border_color; 2063 padding: .75rem; 2064 background-color: @ini_table_odd_row_background_color; 2065 2066 &:nth-child(2n+1) { 2067 background-color: @ini_table_even_row_background_color; 2068 } 2069 2070 .snippet { 2071 font-size: 90%; 2072 margin-bottom: 0; 2073 } 2074 } 2075} 2076 2077#index__tree { 2078 background-color: #fff; 2079 border: 1px solid #dee2e6; 2080 padding: 0 .5rem; 2081 2082 a { 2083 color: #333; 2084 .mikio-text-decoration(none); 2085 } 2086 2087 .curid a { 2088 color: red; 2089 } 2090} 2091 2092.mikio.dokuwiki ul.tabs { 2093 .mikio-tabs; 2094} 2095 2096.mikio .mode_draft { 2097 table { 2098 margin-bottom: 1rem; 2099 } 2100} 2101 2102#dokuwiki__detail { 2103 .mikio-admin; 2104 height: 100vh; 2105 padding: 0 2rem; 2106 2107 .content { 2108 display: flex; 2109 2110 .img_detail dl { 2111 display: grid; 2112 grid-template-columns: 4rem auto; 2113 align-items: center; 2114 2115 dt { 2116 font-weight: bold; 2117 } 2118 } 2119 } 2120} 2121 2122/* Plugin Patches */ 2123/* FastWiki Plugin Patch - .mikio .content_partial */ 2124.mikio .content_partial { 2125 .mikio-controls; 2126} 2127 2128/* Discussion Plugin Patch - .mikio .content_partial */ 2129.mikio div.dokuwiki div.comment_wrapper { 2130 .mikio-controls; 2131 padding: 1em; 2132 2133 input[type=submit] { 2134 .mikio-control; 2135 .mikio-button; 2136 } 2137 2138 h2 { 2139 margin: 0; 2140 } 2141 2142 .comment_form { 2143 margin-top: 0; 2144 } 2145 2146 .comment_subscribe { 2147 input { 2148 float: none; 2149 } 2150 2151 label { 2152 float: none; 2153 display: inline-block; 2154 } 2155 } 2156 2157 .comment_buttons { 2158 float: none; 2159 text-align: right; 2160 margin-top: 1em; 2161 } 2162} 2163 2164/* Mobile */ 2165@media (max-width: 768px) { 2166 .mikio-small-only { 2167 display: inline-block; 2168 } 2169 2170 .mikio-navbar { 2171 padding-bottom: 0; 2172 2173 .mikio-container { 2174 display: grid; 2175 grid-template-columns: auto 3rem; 2176 } 2177 2178 .mikio-navbar-brand { 2179 grid-column: 1 / span 1; 2180 grid-row: 1 / span 1; 2181 margin-bottom: .5rem; 2182 } 2183 2184 .mikio-navbar-toggle { 2185 display: block; 2186 margin-bottom: .5rem; 2187 grid-column: 2 / span 1; 2188 grid-row: 1 / span 1; 2189 } 2190 2191 .mikio-navbar-toggle.closed + .mikio-navbar-collapse { 2192 display: none; 2193 } 2194 2195 .mikio-navbar-collapse { 2196 grid-column: 1 / span 2; 2197 grid-row: 2 / span 1; 2198 flex-direction: column; 2199 margin: 0 -2rem; 2200 padding-top: .5rem; 2201 padding-right: 1rem; 2202 padding-bottom: .5rem; 2203 border-top: 1px solid rgba(0, 0, 0, 0.1); 2204 } 2205 2206 .mikio-nav-item { 2207 display: block; 2208 width: 100%; 2209 padding: .5rem 2rem; 2210 box-sizing: border-box; 2211 text-align: center; 2212 } 2213 2214 .mikio-dropdown-item { 2215 justify-content: center; 2216 } 2217 2218 .mikio-nav { 2219 width: 100%; 2220 } 2221 2222 .mikio-nav-dropdown { 2223 width: 100%; 2224 text-align: center; 2225 margin: 0; 2226 box-sizing: border-box; 2227 } 2228 2229 .mikio-nav-dropdown .mikio-dropdown { 2230 position: relative; 2231 border: 0; 2232 box-shadow: none; 2233 } 2234 } 2235 2236 .mikio-hero { 2237 .mikio-container { 2238 flex-direction: column; 2239 } 2240 2241 .mikio-hero-image-resize { 2242 height: auto; 2243 } 2244 2245 .mikio-hero-image { 2246 background-image: none !important; 2247 } 2248 } 2249 2250 .mode_show .mikio-page .mikio-container { 2251 display: grid; 2252 grid-template-columns: auto 2.5rem; 2253 } 2254 2255 .mode_revisions, 2256 .mode_edit, 2257 .mode_login, 2258 .mode_denied, 2259 .mode_draft, 2260 .mode_preview, 2261 .mode_showtag, 2262 .mode_admin { 2263 .mikio-page { 2264 grid-template-columns: auto; 2265 } 2266 } 2267 2268 .mikio #config__manager td .input, 2269 .mikio #config__manager td input.edit, 2270 .mikio #config__manager tr select { 2271 width: auto; 2272 } 2273 2274 .mikio-content { 2275 grid-column: 1 / span 1; 2276 grid-row: 2 / span 1; 2277 padding-bottom: 1rem; 2278 // padding-right: 0; 2279 // width: auto; 2280 } 2281 2282 /* TOC */ 2283 .mikio .mikio-content .mikio-article { 2284 &.toc-full { 2285 display: block; 2286 } 2287 2288 .mikio-toc { 2289 float: none; 2290 2291 #dw__toc { 2292 max-width: none; 2293 } 2294 2295 h3.toggle { 2296 background-position: 99% 50%; 2297 text-align: center; 2298 2299 &.closed { 2300 font-size: @ini_toc_font_size; 2301 width: auto; 2302 2303 &:before { 2304 display: none; 2305 } 2306 } 2307 } 2308 } 2309 } 2310 2311 /* Sidebar */ 2312 .mikio-sidebar { 2313 grid-column: 1 / span 2; 2314 width: auto; 2315 2316 .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse { 2317 display: none; 2318 } 2319 2320 &.mikio-sidebar-left { 2321 grid-row: 1 / span 1; 2322 border-right: 0; 2323 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 2324 } 2325 2326 &.mikio-sidebar-right { 2327 grid-row: 3 / span 1; 2328 border-left: 0; 2329 border-top: 1px solid rgba(0, 0, 0, 0.2); 2330 } 2331 2332 .mikio-sidebar-toggle { 2333 display: block; 2334 } 2335 } 2336 2337 /* Page Tools */ 2338 #dw__pagetools { 2339 grid-column: 2 / span 1; 2340 grid-row: 2 / span 1; 2341 } 2342 2343 .mikio.dokuwiki div.ui-admin #admin__version { 2344 padding-right: 1rem; 2345 } 2346 2347 .mikio-page-fill { 2348 .mikio-sidebar { 2349 display: none; 2350 } 2351 } 2352 2353 /* Media Manager */ 2354 .mikio #mediamanager__page, #media__manager { 2355 display: flex; 2356 flex-direction: column; 2357 2358 .ui-resizable-e { 2359 display: none !important; 2360 } 2361 2362 .namespaces, .filelist { 2363 width: auto; 2364 min-width: auto; 2365 } 2366 2367 .panelHeader, .panelContent { 2368 margin-right: 0; 2369 } 2370 } 2371} 2372 2373@media print { 2374 .mikio { 2375 .mikio-navbar-collapse, 2376 .mikio-toc, 2377 .mikio-sidebar, 2378 #dw__pagetools, 2379 .mikio-search { 2380 display: none !important;; 2381 } 2382 2383 .mikio-navbar { 2384 box-shadow: none !important;; 2385 } 2386 2387 .mikio-hero { 2388 .mikio-hero-text { 2389 min-height: auto; 2390 padding-bottom: 0; 2391 } 2392 } 2393 2394 .mikio-breadcrumbs, .mikio-youarehere, .mikio-hero, .mikio-footer { 2395 background-color: #fff !important; 2396 } 2397 } 2398} 2399 2400/* Plugin Patches */ 2401/* BookCreator */ 2402.mikio .bookcreator__bookbar { 2403 font-size: 0.8rem; 2404 display: flex; 2405 width: auto !important; 2406} 2407 2408/* Indexmenu */ 2409.mikio-sidebar .mikio-sidebar-content .dtree { 2410 font-size: inherit; 2411 2412 .dTreeNode { 2413 margin: 0.5rem 0; 2414 2415 .indexmenu_tocbullet { 2416 margin-top: 2px; 2417 margin-left: 2px; 2418 } 2419 2420 a, a.nodeUrl, a.nodeSel, a.node, a.navSel { 2421 display: initial; 2422 margin: initial; 2423 color: #666; 2424 background: transparent; 2425 2426 &:hover { 2427 color: #333; 2428 text-decoration: none; 2429 background-color: transparent; 2430 } 2431 } 2432 2433 a.navSel { 2434 font-weight: bold; 2435 color: #333; 2436 } 2437 2438 img:last-of-type { 2439 margin-right: 0.2rem; 2440 opacity: 0.5; 2441 } 2442 } 2443} 2444 2445.mikio .indexmenu_toc { 2446 padding: 0 4px 4px 0; 2447 2448 &> div { 2449 border: 1px solid #999; 2450 box-shadow: 2px 2px 2px rgba(0,0,0,0.2); 2451 position: relative; 2452 z-index: 10; 2453 } 2454 2455 .tocheader { 2456 padding: 0.2rem; 2457 border-bottom: 1px solid #ccc; 2458 } 2459 2460 .indexmenu_toc_inside { 2461 border: 0; 2462 padding: 0.2rem; 2463 2464 ul { 2465 margin: 0; 2466 padding: 0 0 0 1.5rem; 2467 2468 .li { 2469 margin-bottom: 0.4rem; 2470 } 2471 } 2472 } 2473} 2474 2475/* struct */ 2476.mikio .mode_admin table { 2477 &.jsoneditor-values { 2478 width: auto; 2479 } 2480 2481 &.jsoneditor-tree, &.jsoneditor-values { 2482 border-bottom: 0; 2483 2484 tbody { 2485 tr { 2486 background: transparent; 2487 } 2488 2489 td { 2490 padding: 0; 2491 2492 &.jsoneditor-separator { 2493 vertical-align: middle; 2494 } 2495 } 2496 2497 } 2498 2499 button { 2500 background-color: transparent; 2501 border: 0; 2502 transition: none; 2503 2504 &:hover { 2505 transition: none; 2506 } 2507 } 2508 2509 div.jsoneditor-value { 2510 background-color: #fff; 2511 } 2512 } 2513} 2514 2515/* dark-light mode */ 2516.mikio { 2517 .mikio-theme-mode { 2518 display: inline-block; 2519 } 2520 2521 .mikio-theme-mode-button { 2522 border: 0; 2523 width: 2.2rem; 2524 height: 2.2rem; 2525 background-repeat: no-repeat; 2526 background-position: center; 2527 background-size: 75%; 2528 } 2529 2530 &.mikio-auto { 2531 .mikio-theme-mode-button { 2532 background-size: 50%; 2533 background-image: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill:inherit" viewBox="0 0 16 16"><path d="M4.414,6.493c-1.187,-0 -2.164,-0.977 -2.164,-2.165c-0,-1.187 0.977,-2.164 2.164,-2.164c1.187,0 2.164,0.977 2.164,2.164c0,1.188 -0.977,2.165 -2.164,2.165Zm0,0.721c1.583,0 2.886,-1.303 2.886,-2.886c-0,-1.583 -1.303,-2.885 -2.886,-2.885c-1.583,-0 -2.886,1.302 -2.886,2.885c0,1.583 1.303,2.886 2.886,2.886Zm0.361,-6.853c-0,0.198 -0.163,0.36 -0.361,0.36c-0.198,0 -0.361,-0.162 -0.361,-0.36c0,-0.198 0.163,-0.361 0.361,-0.361c0.198,-0 0.361,0.163 0.361,0.361Zm-0,7.935c-0,0.198 -0.163,0.361 -0.361,0.361c-0.198,-0 -0.361,-0.163 -0.361,-0.361c0,-0.198 0.163,-0.361 0.361,-0.361c0.198,0 0.361,0.163 0.361,0.361Zm3.607,-3.607c-0.198,0 -0.361,-0.163 -0.361,-0.361c0,-0.197 0.163,-0.36 0.361,-0.36c0.198,-0 0.36,0.163 0.36,0.36c0,0.198 -0.162,0.361 -0.36,0.361Zm-7.936,0c-0.198,0 -0.36,-0.163 -0.36,-0.361c-0,-0.197 0.162,-0.36 0.36,-0.36c0.198,-0 0.361,0.163 0.361,0.36c-0,0.198 -0.163,0.361 -0.361,0.361Zm7.029,-2.911c-0.068,0.07 -0.162,0.11 -0.26,0.11c-0.197,-0 -0.36,-0.163 -0.36,-0.361c-0,-0.098 0.04,-0.192 0.11,-0.259c0.067,-0.065 0.157,-0.102 0.25,-0.102c0.198,0 0.361,0.163 0.361,0.361c0,0.093 -0.036,0.183 -0.101,0.251Zm-5.612,5.611c-0.068,0.071 -0.162,0.11 -0.259,0.11c-0.198,0 -0.361,-0.162 -0.361,-0.36c-0,-0.098 0.04,-0.192 0.11,-0.26c0.067,-0.065 0.157,-0.101 0.251,-0.101c0.198,0 0.36,0.163 0.36,0.361c0,0.093 -0.036,0.183 -0.101,0.25Zm5.102,0c-0.07,-0.068 -0.11,-0.161 -0.11,-0.259c-0,-0.198 0.163,-0.361 0.36,-0.361c0.098,0 0.192,0.04 0.26,0.11c0.065,0.068 0.101,0.157 0.101,0.251c0,0.198 -0.163,0.361 -0.361,0.361c-0.093,-0 -0.183,-0.037 -0.25,-0.102Zm-5.612,-5.611c-0.07,-0.068 -0.11,-0.162 -0.11,-0.26c-0,-0.198 0.163,-0.361 0.361,-0.361c0.097,0 0.191,0.04 0.259,0.111c0.065,0.067 0.101,0.157 0.101,0.25c0,0.198 -0.162,0.361 -0.36,0.361c-0.094,-0 -0.184,-0.037 -0.251,-0.101Z" style="fill-rule:nonzero;" /><path d="M11.646,8.393c0.096,0.117 0.111,0.282 0.038,0.415c-0.279,0.513 -0.426,1.089 -0.425,1.674c0,1.946 1.587,3.521 3.541,3.521c0.255,0 0.504,-0.027 0.742,-0.077c0.149,-0.033 0.304,0.028 0.392,0.153c0.093,0.13 0.087,0.308 -0.015,0.432c-0.768,0.943 -1.923,1.491 -3.139,1.489c-2.231,-0 -4.038,-1.797 -4.038,-4.011c0,-1.667 1.023,-3.096 2.48,-3.702c0.148,-0.063 0.322,-0.019 0.424,0.106Zm-0.553,0.5c-1.139,0.611 -1.853,1.803 -1.855,3.096c0,1.945 1.587,3.52 3.542,3.52c0.945,0.002 1.852,-0.375 2.518,-1.046c-0.163,0.021 -0.329,0.031 -0.498,0.031c-2.23,-0 -4.036,-1.797 -4.036,-4.011c-0,-0.565 0.117,-1.103 0.329,-1.59Z" /></svg>') !important; 2534 } 2535 } 2536 2537 &.mikio-light { 2538 .mikio-theme-mode-button { 2539 background-size: 50%; 2540 background-image: url('data: image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill:inherit" viewBox="0 0 16 16"><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z" /></svg>'); 2541 } 2542 } 2543 2544 &.mikio-dark { 2545 .mikio-theme-mode-button { 2546 background-size: 50%; 2547 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill:inherit" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z" /></svg>'); 2548 } 2549 } 2550} 2551