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