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