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