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 .mikio-article-content { 990 position: relative; 991 } 992} 993 994.mikio.dokuwiki div.preview { 995 background-color: var(--content-background); 996 padding: 1rem 2rem; 997} 998 999.mikio-footer { 1000 padding: 2rem; 1001 color: var(--footer-text-color); 1002 background-color: var(--footer-background-color); 1003 font-size: @ini_footer_font_size; 1004 text-align: @ini_footer_text_align; 1005 1006 a, 1007 a:visited, 1008 a:active { 1009 color: var(--footer-link-color); 1010 1011 &:hover { 1012 color: var(--footer-link-hover-color); 1013 } 1014 } 1015 1016 .dw__pagetools { 1017 margin-top: 1rem; 1018 1019 .tools { 1020 list-style-type: none; 1021 1022 li { 1023 display: inline-block; 1024 margin: 0 .5rem; 1025 } 1026 1027 a, 1028 a:visited, 1029 a:active { 1030 // margin: 0 .5rem; 1031 1032 svg { 1033 fill: var(--footer-link-color); 1034 } 1035 1036 &:hover { 1037 svg { 1038 fill: var(--footer-link-hover-color); 1039 } 1040 } 1041 } 1042 } 1043 } 1044 1045 .mikio-nav { 1046 margin-top: 1rem; 1047 } 1048 1049 .mikio-footer-search { 1050 margin-top: .5rem; 1051 display: inline-block; 1052 } 1053 1054 .license { 1055 margin-top: .5rem; 1056 1057 img { 1058 vertical-align: middle; 1059 margin: 0 1rem; 1060 } 1061 } 1062} 1063 1064.mikio .site>div.no { 1065 display: none; 1066} 1067 1068 1069/* Page Elements */ 1070.mikio-control { 1071 margin: 0; 1072 font-family: inherit; 1073 font-size: inherit; 1074 font-weight: 400; 1075 // line-height: inherit; 1076 border-width: 1px; 1077 border-style: solid; 1078 border-color: transparent; 1079 border-radius: .25rem; 1080 box-sizing: border-box; 1081 vertical-align: middle; 1082 padding: .375rem .75rem; 1083 color: var(--control-text-color); 1084 background-color: var(--control-background-color); 1085 1086 &[type=color] { 1087 padding: 0; 1088 } 1089} 1090 1091.mikio-button, 1092.mikio-button:visited, 1093.mikio-button:active { 1094 display: inline-block; 1095 text-align: center; 1096 color: var(--button-text-color); 1097 background-color: var(--button-background-color); 1098 border-color: var(--button-border-color); 1099 line-height: 1.5; 1100 .mikio-text-decoration(none); 1101 text-transform: capitalize; 1102 1103 transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; 1104 1105 &:hover:not(:disabled) { 1106 .mikio-text-decoration(none); 1107 color: var(--button-text-hover-color); 1108 background-color: var(--button-background-hover-color); 1109 border-color: var(--button-border-hover-color); 1110 } 1111 1112 &:disabled { 1113 opacity: .65; 1114 } 1115} 1116 1117.mikio-button-small { 1118 padding: .1rem .75rem; 1119 font-size: 80% !important; 1120 min-width: 3rem; 1121} 1122 1123.mikio-button-submit, 1124.mikio-button-submit:visited, 1125.mikio-button-submit:active { 1126 color: var(--button-default-text-color); 1127 background-color: var(--button-default-background-color); 1128 border-color: var(--button-default-border-color); 1129 1130 &:hover { 1131 color: var(--button-default-text-hover-color); 1132 background-color: var(--button-default-background-hover-color); 1133 border-color: var(--button-default-border-hover-color); 1134 } 1135} 1136 1137.mikio-button-danger, 1138.mikio-button-danger:visited, 1139.mikio-button-danger:active { 1140 color: #fff; 1141 border-color: #dc3545; 1142 background-color: #dc3545; 1143 1144 &:hover { 1145 color: #fff; 1146 background-color: #c03040; 1147 border-color: #c03040; 1148 } 1149} 1150 1151.mikio-input-text { 1152 color: var(--input-text-color); 1153 border-color: var(--input-border-color); 1154 background-color: var(--input-background-color); 1155 line-height: inherit; 1156} 1157 1158.mikio-select { 1159 .mikio-user-select(); 1160 height: 2.25rem; 1161} 1162 1163.mikio-toolbar-button { 1164 border-radius: 0; 1165 border-right-width: 0; 1166 border-color: var(--input-border-color); 1167 1168 &:first-of-type { 1169 border-radius: .25rem 0 0 .25rem; 1170 } 1171 1172 &:last-of-type { 1173 border-radius: 0 .25rem .25rem 0; 1174 border-right-width: 1px; 1175 } 1176} 1177 1178.mikio-dialog { 1179 .mikio-article { 1180 max-width: 40rem; 1181 } 1182 1183 fieldset { 1184 legend { 1185 font-size: 1.75rem; 1186 font-weight: 400; 1187 } 1188 1189 label.block input.edit, 1190 select { 1191 width: 100%; 1192 } 1193 1194 label { 1195 text-align: left; 1196 font-weight: normal; 1197 display: block; 1198 } 1199 1200 label.simple { 1201 text-align: center; 1202 } 1203 1204 label.block { 1205 position: relative; 1206 } 1207 1208 label.block span { 1209 position: absolute; 1210 padding: .4rem .9rem; 1211 color: rgba(0, 0, 0, 0.3); 1212 } 1213 1214 button { 1215 display: block; 1216 width: 100%; 1217 1218 &[type=submit] { 1219 .mikio-button-submit(); 1220 } 1221 } 1222 1223 input[type=checkbox] { 1224 vertical-align: middle; 1225 } 1226 } 1227} 1228 1229.mikio .mikio-navbar .mikio-search, 1230.mikio .mikio-sidebar .mikio-search, 1231.mikio .mikio-footer .mikio-search, 1232.mikio .mikio-search { 1233 display: flex; 1234 gap: 0.5rem; 1235 1236 div { 1237 display: flex; 1238 } 1239 1240 input { 1241 width: 100%; 1242 flex: 1 1 auto; 1243 border-radius: .25rem 0 0 .25rem; 1244 } 1245 1246 button { 1247 color: var(--button-search-text-color); 1248 background-color: var(--button-search-background-color); 1249 border-radius: 0 .25rem .25rem 0; 1250 border-color: var(--button-search-border-color); 1251 1252 &:hover { 1253 color: var(--button-search-text-hover-color); 1254 background-color: var(--button-search-background--hover-color); 1255 border-color: var(--button-search-border-hover-color); 1256 } 1257 } 1258 1259 .mikio-iicon { 1260 margin: 0 -4px 0 -4px; 1261 } 1262} 1263 1264#dw__pagetools { 1265 .mikio-sticky(); 1266 top: 0; 1267 align-self: flex-start; 1268 padding: 3rem .5rem 0 .5rem; 1269 1270 ul { 1271 list-style: none; 1272 padding: 0; 1273 margin: 0; 1274 } 1275 1276 a, 1277 a:visited, 1278 a:active { 1279 display: block; 1280 1281 svg { 1282 fill: var(--pagetools-color); 1283 } 1284 1285 &:hover { 1286 svg { 1287 fill: var(--pagetools-hover-color); 1288 } 1289 } 1290 } 1291} 1292 1293.toolbar.group { 1294 margin-bottom: .5rem; 1295} 1296 1297#wiki__editbar { 1298 overflow: hidden; 1299 margin-bottom: .5em; 1300 1301 #size__ctl { 1302 float: right; 1303 } 1304 1305 .editButtons { 1306 display: inline; 1307 margin-right: 1rem; 1308 1309 button { 1310 margin-right: 0.25rem; 1311 margin-bottom: 0.25rem; 1312 } 1313 } 1314 1315 .summary { 1316 display: inline; 1317 } 1318} 1319 1320.mode_admin .mikio-toc { 1321 background-color: var(--admin-background-color); 1322 1323 #dw__toc { 1324 background-color: var(--toc-background-color); 1325 } 1326} 1327 1328.mikio .mode_admin .mikio-toc #dw__toc { 1329 background-color: var(--toc-background-color); 1330} 1331 1332.mikio .mikio-toc { 1333 position: relative; 1334 z-index: 2; 1335 float: right; 1336 padding-left: 1rem; 1337 padding-bottom: 1rem; 1338 // background-color: var(--content-background); 1339 margin-top: 1rem; 1340 1341 #dw__toc { 1342 color: var(--toc-link-color); 1343 background-color: var(--toc-background-color); 1344 border: 1px solid var(--toc-border-color); 1345 border-radius: .25rem; 1346 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 1347 padding: .5rem; 1348 max-width: 12rem; 1349 float: none; 1350 width: auto; 1351 margin: 0; 1352 // background-color: transparent; 1353 1354 ul { 1355 padding-left: 0; 1356 margin: 0; 1357 list-style-type: none; 1358 1359 ul { 1360 padding-left: .5rem; 1361 } 1362 } 1363 1364 &>div { 1365 padding: .2em .5em; 1366 } 1367 } 1368 1369 h3.toggle { 1370 margin: 0; 1371 padding-right: 2rem; 1372 font-size: @ini_toc_font_size; 1373 position: relative; 1374 height: 1rem; 1375 white-space: nowrap; 1376 1377 .hamburger { 1378 width: 1rem; 1379 height: 1rem; 1380 } 1381 1382 .down-arrow { 1383 position: absolute; 1384 top: 0; 1385 bottom: 0; 1386 right: 0; 1387 margin: auto 0; 1388 // border: 1px solid red; 1389 background-color: var(--toc-background-color); 1390 } 1391 1392 &.open { 1393 .hamburger { 1394 display: none; 1395 } 1396 } 1397 1398 &.closed { 1399 font-size: 0; 1400 // height: 1rem; 1401 width: 2rem; 1402 padding-right: 0; 1403 1404 .down-arrow { 1405 right: -4px; 1406 } 1407 } 1408 1409 span { 1410 display: none; 1411 } 1412 } 1413 1414 a, 1415 a:visited, 1416 a:active { 1417 display: block; 1418 font-size: @ini_toc_font_size; 1419 color: var(--toc-link-color); 1420 .mikio-text-decoration(none); 1421 padding: .2rem 0; 1422 1423 &:hover { 1424 color: var(--toc-link-hover-color); 1425 } 1426 } 1427} 1428 1429.mikio-icon { 1430 margin-right: .25rem; 1431 1432 svg { 1433 vertical-align: middle; 1434 fill: currentColor; 1435 } 1436} 1437 1438.mikio-iicon { 1439 display: inline-block; 1440 width: 1.2rem; 1441 height: 1.2rem; 1442 background-size: 1.2rem; 1443 background-position: center; 1444 background-repeat: no-repeat; 1445 vertical-align: middle; 1446 margin-right: .25rem; 1447 fill: currentColor; 1448} 1449 1450.mikio .mode_show table, 1451.mikio.dokuwiki .mode_showtag table.ul, 1452.mikio .mode_admin table { 1453 width: 100%; 1454 border-collapse: collapse; 1455 margin-bottom: 1rem; 1456 font-size: @ini_table_font_size; 1457 border-bottom: 1px solid var(--table-row-border-color); 1458 1459 tr { 1460 border-top: 1px solid var(--table-row-border-color); 1461 } 1462 1463 td, 1464 th { 1465 padding: @ini_table_vertical_padding @ini_table_horizontal_padding; 1466 text-align: left; 1467 border-left: 1px solid var(--table-col-border-color); 1468 border-right: 1px solid var(--table-col-border-color); 1469 1470 &.centeralign { 1471 text-align: center; 1472 } 1473 1474 &.rightalign { 1475 text-align: right; 1476 } 1477 } 1478 1479 thead tr { 1480 background-color: var(--table-header-row-background-color); 1481 color: var(--table-header-row-text-color); 1482 } 1483 1484 tbody tr { 1485 &:nth-child(odd) { 1486 background-color: var(--table-odd-row-background-color); 1487 color: var(--table-odd-row-text-color); 1488 } 1489 1490 &:nth-child(even) { 1491 background-color: var(--table-even-row-background-color); 1492 color: var(--table-even-row-text-color); 1493 } 1494 } 1495} 1496 1497.mikio-nav { 1498 list-style: none; 1499 margin: 0; 1500 padding: 0; 1501 display: flex; 1502 1503 .mikio-nav-item, 1504 .mikio-nav-dropdown { 1505 display: inline-block; 1506 padding: .5rem .2rem; 1507 margin: 0 .5rem; 1508 } 1509 1510 .mikio-nav-link {} 1511 1512 .mikio-nav-dropdown { 1513 position: relative; 1514 } 1515 1516 .mikio-nav-dropdown>a { 1517 display: inline-block; 1518 padding: .2rem 1.2rem .2rem 0; 1519 position: relative; 1520 1521 &::after { 1522 position: absolute; 1523 content: ''; 1524 top: 10px; 1525 right: 6px; 1526 width: 6px; 1527 height: 6px; 1528 border-left: 2px solid var(--text); 1529 border-bottom: 2px solid var(--text); 1530 transform: rotateZ(-45deg); 1531 } 1532 } 1533 1534 a { 1535 .mikio-text-decoration(none); 1536 } 1537} 1538 1539.mikio-dropdown { 1540 display: block; 1541 position: absolute; 1542 z-index: 10000; 1543 min-width: 12rem; 1544 right: 0; 1545 padding: 1rem 1.5rem; 1546 border: 1px solid var(--dropdown-border-color); 1547 border-radius: 4px; 1548 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 1549 background-color: var(--dropdown-background-color); 1550 color: var(--dropdown-color); 1551 1552 &.closed { 1553 display: none; 1554 } 1555 1556 .mikio-dropdown-item { 1557 display: flex; 1558 align-items: center; 1559 margin-top: .5rem; 1560 margin-bottom: .5rem; 1561 } 1562 1563 .mikio-dropdown-header { 1564 margin: 0 0 1rem 0; 1565 } 1566 1567 .mikio-dropdown-divider { 1568 margin: 1rem -1rem; 1569 border-bottom: 1px solid var(--dropdown-border-color); 1570 } 1571 1572 .mikio-nav-link, 1573 .mikio-nav-link:visited, 1574 .mikio-nav-link.active { 1575 margin: 0rem -1rem 0rem -1rem; 1576 padding: .25rem 1rem .25rem 1rem; 1577 transition: all .15s ease-in-out; 1578 color: var(--dropdown-color); 1579 1580 &:hover { 1581 color: var(--dropdown-color); 1582 background-color: var(--dropdown-hover-color); 1583 } 1584 } 1585} 1586 1587.typeahead.mikio-dropdown { 1588 flex-direction: column; 1589 1590 a.mikio-dropdown-item { 1591 display: inline; 1592 } 1593 1594 .mikio-dropdown-header { 1595 margin-bottom: 0; 1596 overflow: hidden; 1597 text-overflow: ellipsis; 1598 // color: #999999; 1599 color: var(--dropdown-color); 1600 } 1601 1602 .mikio-dropdown-divider { 1603 margin-top: 0.5rem; 1604 margin-bottom: 0.5rem; 1605 } 1606} 1607 1608.mikio-tabs { 1609 padding: 0; 1610 margin-top: 1rem; 1611 margin-bottom: -1px; 1612 list-style-type: none; 1613 1614 li { 1615 float: none; 1616 display: inline-block; 1617 font-size: 1rem; 1618 display: inline-block; 1619 line-height: 1.4rem; 1620 position: relative; 1621 z-index: 2; 1622 1623 strong { 1624 .mikio-tab-active(); 1625 } 1626 1627 a, 1628 a:visited, 1629 a:active { 1630 display: inline-block; 1631 padding: .5rem 1rem; 1632 border: 1px solid var(--tab-border-color); 1633 color: var(--tab-color); 1634 .mikio-text-decoration(none); 1635 margin: 0; 1636 background-color: var(--tab-background-color); 1637 1638 &:hover { 1639 color: var(--tab-hover-color); 1640 border-color: var(--tab-border-hover-color) var(--tab-border-hover-color) transparent var(--tab-border-hover-color); 1641 border-radius: .5rem .5rem 0 0; 1642 background-color: var(--tab-background-hover-color); 1643 } 1644 } 1645 } 1646 1647 &:after { 1648 border-bottom: 0; 1649 } 1650} 1651 1652.mikio-tab-active { 1653 display: inline-block; 1654 background-color: var(--tab-active-background-color); 1655 font-weight: normal; 1656 color: var(--tab-active-color); 1657 border-color: var(--tab-active-border-color) var(--tab-active-border-color) var(--tab-active-background-color); 1658 border-radius: .5rem .5rem 0 0; 1659 border-width: 1px; 1660 border-style: solid; 1661 padding: .5rem 1rem; 1662 margin: 0; 1663 bottom: -1px; 1664 // margin-bottom: -1px; 1665} 1666 1667.mikio-tab { 1668 background-color: var(--tab-background-color); 1669 font-weight: normal; 1670 color: var(--tab-color); 1671 border-color: var(--tab-border-color) var(--tab-border-color) var(--tab-background-color); 1672 padding: .5rem 1rem; 1673 margin: 0; 1674 bottom: -1px; 1675 // margin-bottom: -1px; 1676} 1677 1678.mikio-tab-panel { 1679 margin-bottom: 0 !important; 1680 background-color: var(--tab-active-background-color); 1681 border-width: 1px 1px 1px 1px; 1682 border-style: solid; 1683 border-color: var(--tab-active-border-color) !important; 1684 word-wrap: break-word; 1685 word-break: break-word; 1686} 1687 1688.mikio.dokuwiki div.section_highlight { 1689 background-color: var(--section-edit-highlight); 1690 border-width: 0; 1691 margin: 0 -1rem; 1692 padding: 0 1rem; 1693} 1694 1695.mikio-input-file { 1696 position: absolute; 1697 margin-top: -.5rem; 1698 top: 0; 1699 right: 0; 1700 left: 0; 1701 z-index: 5; 1702 padding: .25rem 1rem; 1703 line-height: 1.5; 1704 text-align: left; 1705 color: var(--control-text-color); 1706 background-color: var(--control-background-color); 1707 border: .1px solid var(--input-border-color); 1708 border-radius: .25rem; 1709 -webkit-user-select: none; 1710 -moz-user-select: none; 1711 -ms-user-select: none; 1712 user-select: none; 1713 white-space: nowrap; 1714 overflow: hidden; 1715 text-overflow: ellipsis; 1716 box-sizing: border-box; 1717 1718 &:before { 1719 position: absolute; 1720 top: 0; 1721 right: 0; 1722 bottom: 0; 1723 z-index: 6; 1724 display: block; 1725 content: "Browse"; 1726 padding: .25rem 1rem; 1727 line-height: 1.5; 1728 color: var(--button-text-color); 1729 background-color: var(--button-background-color); 1730 border-radius: 0 .25rem .25rem 0; 1731 border: 1px solid var(--button-border-color); 1732 transition: all .15s ease-in-out; 1733 } 1734 1735 &:hover:before { 1736 background-color: var(--button-background-hover-color); 1737 border-color: var(--button-border-hover-color); 1738 color: var(--button-text-hover-color); 1739 } 1740} 1741 1742code, 1743pre { 1744 overflow-x: auto; 1745 font-family: @ini_code_font_family; 1746 font-size: @ini_code_font_size; 1747 color: var(--code-text-color); 1748 background-color: var(--code-background-color); 1749 word-wrap: @ini_code_word_wrap; 1750 .mikio-pre-wrap(); 1751 line-height: @ini_code_line_height; 1752} 1753 1754.mode_show { 1755 1756 code:not(.content_partial code), 1757 pre { 1758 border: 1px solid var(--code-border-color); 1759 padding: .2em; 1760 } 1761} 1762 1763/* Dokuwiki Patches */ 1764.mikio { 1765 1766 .mikio-search, 1767 &.dokuwiki fieldset, 1768 &.dokuwiki .secedit, 1769 #config__manager tr, 1770 .mode_revisions, 1771 .mode_edit, 1772 .mode_draft, 1773 .mode_preview, 1774 .mode_showtag, 1775 .mode_admin { 1776 .mikio-controls(); 1777 } 1778 1779 #config__manager { 1780 tr, tr.default { 1781 .input { 1782 background-color: transparent; 1783 } 1784 } 1785 } 1786 1787 .mikio-search.search button[type=submit] { 1788 border-left-width: 0; 1789 border-color: var(--search-button-border-color); 1790 } 1791} 1792 1793.mikio.dokuwiki .secedit { 1794 float: none; 1795 margin-top: 0; 1796 text-align: right; 1797} 1798 1799.mikio.dokuwiki fieldset { 1800 margin: 2rem auto; 1801 border: 0; 1802 width: auto; 1803 max-width: 40rem; 1804 1805 label.block { 1806 display: flex; 1807 flex-direction: row; 1808 text-align: right; 1809 1810 span { 1811 margin-right: 1rem; 1812 width: 15rem; 1813 align-self: center; 1814 } 1815 1816 input { 1817 flex-grow: 1 1818 } 1819 } 1820 1821 // span { 1822 // display: inline-block; 1823 // margin-right: 1rem; 1824 // max-width: 10rem; 1825 // } 1826 // } 1827} 1828 1829.mikio.dokuwiki .mode_login, 1830.mikio.dokuwiki .mode_denied { 1831 .mikio-dialog(); 1832} 1833 1834.mikio .mode_admin { 1835 1836 input[type=text], 1837 input[type=password], 1838 input[type=email] { 1839 width: 100%; 1840 } 1841 1842 div.mikio-color-picker { 1843 position: relative; 1844 1845 input[type=color] { 1846 height: 35px; 1847 border: 0; 1848 border-radius: 0; 1849 } 1850 1851 input[type=text] { 1852 width: auto; 1853 } 1854 } 1855 1856 div.mikio-color-button { 1857 position: absolute; 1858 top: 4px; 1859 right: 0; 1860 color: #999999; 1861 } 1862 1863 p { 1864 button+button { 1865 margin-left: .5rem; 1866 } 1867 } 1868 1869 div.ui-admin { 1870 display: flex; 1871 flex-direction: column; 1872 1873 #admin__version { 1874 font-size: 80%; 1875 } 1876 1877 ul.admin_tasks, 1878 ul.admin_plugins { 1879 float: none; 1880 display: grid; 1881 grid-template-columns: repeat(auto-fit, 15rem); 1882 width: auto; 1883 padding: 0; 1884 margin: 0; 1885 justify-content: center; 1886 1887 li { 1888 list-style-type: none; 1889 border: 1px solid var(--button-border-color); 1890 border-radius: .25rem; 1891 margin: 1rem 1rem; 1892 background-color: var(--button-background-color); 1893 1894 a, 1895 a:visited, 1896 a:active { 1897 display: flex; 1898 flex-direction: column; 1899 align-items: center; 1900 justify-content: center; 1901 text-align: center; 1902 height: 4rem; 1903 font-size: 1rem; 1904 font-weight: normal; 1905 padding: 1rem 2rem; 1906 color: var(--button-text-color); 1907 .mikio-text-decoration(none); 1908 overflow: hidden; 1909 transition: all .15s ease-in-out; 1910 1911 span.icon { 1912 width: auto; 1913 height: auto; 1914 min-height: auto; 1915 } 1916 1917 svg { 1918 fill: var(--button-text-color); 1919 } 1920 1921 &:hover { 1922 .mikio-text-decoration(none); 1923 color: var(--button-text-hover-color); 1924 background-color: var(--button-background-hover-color); 1925 border-color: var(--button-border-hover-color); 1926 1927 svg { 1928 fill: var(--button-text-hover-color); 1929 } 1930 } 1931 } 1932 } 1933 } 1934 } 1935 1936 .mikio-config-table-header { 1937 background-color: var(--table-header-row-background-color); 1938 color: var(--table-header-row-text-color); 1939 font-weight: bold; 1940 1941 .mikio-iicon { 1942 vertical-align: text-bottom; 1943 } 1944 } 1945 1946 #extension__list { 1947 ul.extensionList { 1948 li { 1949 border-width: 0 0 1px 0; 1950 border-style: solid; 1951 border-color: var(--table-row-border-color); 1952 padding: .75rem; 1953 margin: 0; 1954 text-align: left; 1955 1956 &:nth-child(odd) { 1957 background-color: var(--table-odd-row-background-color); 1958 color: var(--table-odd-row-text-color); 1959 } 1960 1961 &:nth-child(even) { 1962 background-color: var(--table-even-row-background-color); 1963 color: var(--table-even-row-text-color); 1964 } 1965 } 1966 } 1967 } 1968 1969 button#usrmgr__del { 1970 .mikio-button-danger(); 1971 margin-right: .5rem; 1972 } 1973 1974 #acl__detail div#acl__user { 1975 border-color: var(--toc-border-color); 1976 } 1977 1978 #acl__tree { 1979 background-color: var(--tree-background-color); 1980 border-color: var(--tree-border-color); 1981 color: var(--control-text-color); 1982 1983 // li[role=treeitem] { 1984 // padding-left: 2rem; 1985 // } 1986 1987 a.cur { 1988 background-color: var(--section-edit-highlight); 1989 } 1990 } 1991 1992 #acl_manager table tr { 1993 &:nth-child(odd) { 1994 background-color: var(--table-odd-row-background-color); 1995 color: var(--table-odd-row-text-color); 1996 } 1997 1998 &:nth-child(even) { 1999 background-color: var(--table-even-row-background-color); 2000 color: var(--table-even-row-text-color); 2001 } 2002 } 2003} 2004 2005.mode_admin, 2006.mode_login, 2007.mode_denied, 2008.mode_revisions, 2009.mode_recent, 2010.mode_backlink, 2011.mode_media, 2012.mode_index, 2013.mode_search, 2014.mode_edit, 2015.mode_draft, 2016.mode_preview, 2017.mode_showtag { 2018 2019 .mikio-content, 2020 .mikio-page-fill { 2021 .mikio-admin(); 2022 } 2023} 2024 2025.mikio #plugin__styling button.primary { 2026 font-weight: inherit; 2027} 2028 2029.mikio.dokuwiki .secedit { 2030 button { 2031 .mikio-button-small(); 2032 } 2033} 2034 2035.mikio img { 2036 max-width: 100%; 2037 2038 &.media { 2039 margin: .2rem 0; 2040 } 2041 2042 &.medialeft { 2043 margin: .2rem 1em .2rem 0; 2044 } 2045 2046 &.mediaright { 2047 margin: .2rem 0 .2rem 1rem; 2048 } 2049 2050 &.mediacenter { 2051 margin: .2rem auto; 2052 } 2053} 2054 2055.mikio div.dokuwiki div.inclmeta { 2056 margin-top: .5rem; 2057 padding-top: .5rem; 2058} 2059 2060.mikio #dw__login label[for=remember__me] { 2061 margin-left: 0; 2062} 2063 2064.mikio #config__manager { 2065 fieldset { 2066 color: var(--text); 2067 background-color: transparent; 2068 margin: 0; 2069 padding: 0; 2070 2071 legend { 2072 text-align: left; 2073 } 2074 } 2075 2076 tr { 2077 textarea { 2078 color: inherit; 2079 background-color: var(--control-background-color); 2080 } 2081 2082 select { 2083 width: 100%; 2084 background-color: var(--control-background-color); 2085 } 2086 } 2087 2088 td { 2089 &.label { 2090 display: grid; 2091 grid-template-columns: auto 2rem; 2092 2093 span.outkey { 2094 float: none; 2095 font-size: 100%; 2096 background-color: transparent; 2097 margin: 0; 2098 grid-column: 1 / span 1; 2099 grid-row: 1 / span 1; 2100 } 2101 2102 label { 2103 grid-column: 1 / span 1; 2104 grid-row: 2 / span 1; 2105 } 2106 2107 img { 2108 float: none; 2109 grid-column: 2 / span 1; 2110 grid-row: 1 / span 2; 2111 align-self: center; 2112 } 2113 } 2114 2115 input.edit { 2116 width: 100%; 2117 } 2118 } 2119 2120 button[type=submit] { 2121 .mikio-button-submit(); 2122 } 2123} 2124 2125.mode_revisions .mikio-article { 2126 li { 2127 padding: .5rem 1rem; 2128 border-top: 1px solid var(--table-row-border-color); 2129 background-color: var(--table-even-row-background-color); 2130 color: (--table-even-row-text-color); 2131 } 2132 2133 li:nth-child(odd) { 2134 background-color: var(--table-odd-row-background-color); 2135 color: var(--table-odd-row-text-color); 2136 } 2137 2138 .li { 2139 display: grid; 2140 grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem; 2141 align-items: center; 2142 text-align: center; 2143 font-size: 90%; 2144 2145 a.wikilink1 { 2146 text-align: left; 2147 } 2148 2149 span.sizechange { 2150 width: 100%; 2151 font-size: 80%; 2152 border-radius: .2em; 2153 padding: .1em .2em; 2154 color: var(--control-text-color) !important; 2155 } 2156 } 2157 2158 .sum { 2159 display: block; 2160 } 2161} 2162 2163.mode_recent .mikio-article { 2164 ul { 2165 list-style-type: none; 2166 } 2167 2168 li { 2169 padding: .5rem 1rem; 2170 border-top: 1px solid var(--table-row-border-color); 2171 background-color: var(--table-even-row-background-color); 2172 color: var(--table-even-row-text-color); 2173 } 2174 2175 li:nth-child(odd) { 2176 background-color: var(--table-odd-row-background-color); 2177 color: var(--table-odd-row-text-color); 2178 } 2179 2180 .li { 2181 display: grid; 2182 grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem; 2183 align-items: center; 2184 text-align: center; 2185 font-size: 90%; 2186 2187 a.wikilink1, 2188 span.curid { 2189 text-align: left; 2190 } 2191 2192 span.sizechange { 2193 width: 100%; 2194 font-size: 80%; 2195 border-radius: .2em; 2196 padding: .1em .2em; 2197 color: var(--control-text-color); 2198 2199 &.positive { 2200 background-color: #cfc; 2201 } 2202 2203 &.negative { 2204 background-color: #fdd; 2205 } 2206 } 2207 } 2208 2209 select { 2210 .mikio-control(); 2211 .mikio-select(); 2212 } 2213} 2214 2215 2216.mikio #mediamanager__page, 2217#media__manager { 2218 width: 100%; 2219 min-width: 100%; 2220 2221 button, 2222 .qq-upload-button, 2223 .qq-upload-list a { 2224 .mikio-control(); 2225 .mikio-button(); 2226 } 2227 2228 .qq-upload-list a.qq-upload-cancel { 2229 .mikio-button-danger(); 2230 } 2231 2232 button.qq-upload-action { 2233 .mikio-button-submit(); 2234 } 2235 2236 input[type=text], 2237 input[type=search], 2238 textarea { 2239 .mikio-control(); 2240 .mikio-input-text 2241 } 2242 2243 .ui-resizable-e { 2244 background: transparent; 2245 width: 6px; 2246 right: 2px; 2247 2248 &:hover { 2249 background-color: #999; 2250 } 2251 } 2252 2253 .namespaces { 2254 width: 20%; 2255 min-width: 10em; 2256 left: 0 !important; 2257 2258 h2 { 2259 .mikio-tab-active(); 2260 font-size: 1rem; 2261 } 2262 } 2263 2264 #media__tree { 2265 background-color: var(--tree-background-color); 2266 border-color: var(--tree-border-color); 2267 2268 ul, 2269 ul.idx { 2270 margin-top: 0; 2271 margin-bottom: 0; 2272 padding: 0; 2273 list-style-type: none; 2274 2275 ul { 2276 margin-left: 1rem; 2277 } 2278 2279 li { 2280 margin: .25rem 0; 2281 white-space: nowrap; 2282 2283 img { 2284 margin-right: .2rem; 2285 } 2286 } 2287 2288 a { 2289 .mikio-text-decoration(none); 2290 } 2291 2292 div { 2293 display: inline-block; 2294 } 2295 } 2296 } 2297 2298 .panelHeader { 2299 .mikio-tab-panel(); 2300 } 2301 2302 .filelist { 2303 width: 50%; 2304 min-width: 25em; 2305 left: 0 !important; 2306 } 2307 2308 .filelist, 2309 .qq-uploader { 2310 .panelHeader { 2311 .mikio-tab-panel(); 2312 2313 h3 { 2314 width: 100%; 2315 } 2316 } 2317 2318 form.options { 2319 margin-top: 0; 2320 2321 .ui-controlgroup-horizontal label { 2322 margin-right: 0; 2323 } 2324 } 2325 2326 .panelContent { 2327 // padding-top: 1rem; 2328 text-align: center; 2329 2330 ul li:hover { 2331 background-color: initial; 2332 } 2333 } 2334 2335 ul { 2336 margin: 1rem 0 -1px 0; 2337 2338 &.tabs { 2339 margin-top: 0; 2340 } 2341 2342 &.thumbs { 2343 margin: 0; 2344 2345 li { 2346 display: inline-block; 2347 width: 200px; 2348 background-color: var(--tab-active-background-color); 2349 color: var(--tab-active-color); 2350 2351 dt { 2352 text-align: center; 2353 2354 a { 2355 display: block; 2356 width: 100%; 2357 2358 img { 2359 min-height: 90px; 2360 min-width: 90px; 2361 } 2362 } 2363 } 2364 2365 dd { 2366 width: auto; 2367 font-size: 80%; 2368 // color: #666; 2369 margin-bottom: .25rem; 2370 margin-inline-start: 0; 2371 } 2372 2373 .name { 2374 font-weight: normal; 2375 2376 a { 2377 // color: #000; 2378 } 2379 } 2380 } 2381 } 2382 } 2383 2384 ul.rows { 2385 list-style-type: none; 2386 padding: 0; 2387 2388 li { 2389 background-color: var(--table-odd-row-background-color); 2390 color: var(--table-odd-row-text-color); 2391 max-height: none; 2392 font-size: 90%; 2393 // color: var(--text); 2394 overflow: auto; 2395 2396 &:nth-child(2n+1) { 2397 background-color: var(--table-even-row-background-color); 2398 color: var(--table-even-row-text-color); 2399 } 2400 2401 a { 2402 font-weight: normal; 2403 } 2404 2405 dl { 2406 display: flex; 2407 align-items: center; 2408 } 2409 2410 dt { 2411 display: flex; 2412 align-items: center; 2413 justify-content: center; 2414 width: 10%; 2415 2416 a { 2417 height: auto; 2418 width: auto; 2419 2420 img { 2421 display: block; 2422 max-width: 40px; 2423 max-height: 40px; 2424 } 2425 } 2426 } 2427 2428 dd.name { 2429 text-align: left; 2430 width: 30%; 2431 overflow: hidden; 2432 text-overflow: ellipsis; 2433 float: left; 2434 margin-left: 1%; 2435 white-space: nowrap; 2436 } 2437 2438 dd.size { 2439 width: 15%; 2440 } 2441 2442 dd.date { 2443 width: 20%; 2444 } 2445 2446 dd.filesize { 2447 width: 15%; 2448 } 2449 2450 dd { 2451 margin: 0; 2452 font-size: 90%; 2453 } 2454 } 2455 } 2456 2457 .qq-upload-list { 2458 margin-top: 1rem; 2459 2460 li { 2461 &:hover { 2462 background-color: transparent; 2463 } 2464 } 2465 } 2466 2467 .qq-action-container { 2468 margin-top: 1rem; 2469 padding-top: 1rem; 2470 border-top: 1px solid #dee2e6; 2471 } 2472 } 2473 2474 .file { 2475 padding: 0; 2476 background-color: transparent; 2477 border-radius: 0; 2478 2479 .panelHeader { 2480 .mikio-tab-panel(); 2481 2482 a { 2483 font-weight: normal; 2484 color: #333; 2485 } 2486 } 2487 2488 ul { 2489 &.tabs { 2490 .mikio-tabs(); 2491 margin-top: 0; 2492 } 2493 2494 &.actions { 2495 li { 2496 margin-left: 0.25rem; 2497 margin-right: 0.25rem; 2498 } 2499 } 2500 } 2501 2502 #mediamanager__btn_delete button { 2503 .mikio-button-danger(); 2504 } 2505 2506 dl { 2507 font-size: 90%; 2508 2509 dt { 2510 padding: .25rem .5rem; 2511 background-color: #f0f0f0; 2512 } 2513 2514 dd { 2515 padding: .25rem .5rem; 2516 background-color: #f8f8f8; 2517 } 2518 } 2519 2520 input[type=text], 2521 form.meta textarea.edit { 2522 width: 100%; 2523 min-width: 100%; 2524 max-width: 100%; 2525 } 2526 2527 button[name="mediado[save]"] { 2528 .mikio-button-submit(); 2529 } 2530 } 2531 2532 .panel { 2533 float: left; 2534 } 2535 2536 .panelHeader { 2537 margin: 0 10px 10px 0; 2538 padding: 10px 10px 8px; 2539 font-size: .9rem; 2540 overflow: hidden; 2541 2542 h3 { 2543 float: left; 2544 font-weight: normal; 2545 font-size: 1em; 2546 padding: 0; 2547 margin: 0 0 3px; 2548 } 2549 2550 form.options { 2551 float: right; 2552 } 2553 } 2554 2555 .panelContent { 2556 background-color: var(--tab-active-background-color); 2557 margin: 0 10px 0 0; 2558 border-width: 0 1px 1px 1px; 2559 border-style: solid; 2560 border-color: var(--tab-active-border-color); 2561 padding: .5rem; 2562 } 2563 2564 #media__opts { 2565 border-bottom: 1px solid var(--tab-active-border-color); 2566 padding-bottom: .75rem; 2567 } 2568 2569 #media__content { 2570 2571 .odd, 2572 .even { 2573 border-top: 1px solid var(--table-row-border-color); 2574 font-size: 90%; 2575 display: grid; 2576 grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem; 2577 align-items: center; 2578 2579 a.mediafile { 2580 grid-column: 2 / span 1; 2581 grid-row: 1 / span 1; 2582 margin: 0; 2583 word-break: break-word; 2584 } 2585 2586 span.info { 2587 grid-column: 3 / span 1; 2588 grid-row: 1 / span 1; 2589 text-align: center; 2590 2591 br { 2592 display: inline-block; 2593 } 2594 } 2595 2596 a:nth-child(2) { 2597 grid-column: 4 / span 1; 2598 grid-row: 1 / span 1; 2599 text-align: center; 2600 } 2601 2602 a:nth-child(3) { 2603 grid-column: 5 / span 1; 2604 grid-row: 1 / span 1; 2605 text-align: center; 2606 } 2607 2608 a.btn_media_delete { 2609 grid-column: 6 / span 1; 2610 grid-row: 1 / span 1; 2611 text-align: center; 2612 } 2613 2614 div.example, 2615 div.clearer, 2616 br { 2617 display: none; 2618 } 2619 2620 div.detail { 2621 grid-column: 1 / span 1; 2622 grid-row: 1 / span 1; 2623 padding: 0; 2624 2625 div.thumb { 2626 float: none; 2627 margin: 0; 2628 2629 img { 2630 max-width: 48px; 2631 max-height: 48px; 2632 } 2633 } 2634 } 2635 } 2636 2637 .odd { 2638 background-color: var(--table-odd-row-background-color); 2639 color: var(--table-odd-row-text-color); 2640 } 2641 2642 .even { 2643 background-color: var(--table-even-row-background-color); 2644 color: var(--table-even-row-text-color); 2645 } 2646 } 2647} 2648 2649.mikio.dokuwiki .mode_search .mikio-article { 2650 .search-results-form { 2651 fieldset.search-form { 2652 display: grid; 2653 margin: 0 auto; 2654 width: auto; 2655 max-width: 800px; 2656 grid-template-columns: auto 10rem 10rem; 2657 grid-gap: 1rem; 2658 2659 input[name=q] { 2660 grid-column: 1 / span 1; 2661 grid-row: 1 / span 1; 2662 width: 100%; 2663 } 2664 2665 button[type=submit] { 2666 .mikio-button-submit(); 2667 grid-column: 2 / span 1; 2668 grid-row: 1 / span 1; 2669 } 2670 2671 .toggleAssistant { 2672 .mikio-button-small(); 2673 grid-column: 3 / span 1; 2674 grid-row: 1 / span 1; 2675 flex: 0; 2676 } 2677 2678 .advancedOptions { 2679 grid-column: 1 / span 3; 2680 grid-row: 2 / span 1; 2681 text-align: center; 2682 2683 .toggle { 2684 position: relative; 2685 display: inline-block; 2686 border: 1px solid var(--dropdown-border-color); 2687 background-color: var(--dropdown-background-color); 2688 color: var(--dropdown-color); 2689 border-radius: .25rem; 2690 padding: .375rem .75rem; 2691 text-align: left; 2692 2693 .current { 2694 padding: .2rem 2.2rem .2rem .2rem; 2695 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>'); 2696 background-size: 1.2rem; 2697 background-position: right; 2698 background-repeat: no-repeat; 2699 2700 &:after { 2701 content: ""; 2702 } 2703 } 2704 2705 ul { 2706 position: absolute; 2707 right: 0; 2708 top: .5rem; 2709 padding: .5rem 2rem; 2710 border: 1px solid var(--dropdown-border-color); 2711 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 2712 background-color: var(--dropdown-background-color); 2713 color: #999; 2714 list-style-type: none; 2715 2716 li { 2717 margin: 0; 2718 white-space: nowrap; 2719 } 2720 2721 li.active { 2722 padding: .2rem 0; 2723 display: block; 2724 } 2725 2726 a, 2727 a:visited, 2728 a:active { 2729 transition: all 0.15s ease-in-out; 2730 color: var(--dropdown-color); 2731 .mikio-text-decoration(none); 2732 font-style: normal; 2733 display: block; 2734 padding: .2rem 2rem; 2735 margin: 0 -2rem; 2736 2737 &:hover { 2738 background-color: var(--dropdown-hover-color); 2739 } 2740 } 2741 } 2742 2743 ul[aria-expanded="false"] { 2744 display: none; 2745 } 2746 } 2747 2748 .toggle+.toggle { 2749 margin-left: 1rem; 2750 } 2751 } 2752 } 2753 } 2754 2755 h2 { 2756 margin-top: .5rem; 2757 padding-top: 1rem; 2758 border-top: 1px solid #dee2e6; 2759 } 2760 2761 .search_quickresult ul { 2762 background-color: #fff; 2763 padding: .5rem 1rem; 2764 list-style-type: none; 2765 2766 li { 2767 float: none; 2768 text-align: left; 2769 padding-left: 0; 2770 2771 &:before { 2772 font-size: 1.2rem; 2773 content: '\2022'; 2774 margin-right: 0.5em; 2775 } 2776 2777 .li { 2778 display: inline-block; 2779 } 2780 } 2781 } 2782 2783 div.search_quickresult ul li { 2784 width: auto; 2785 } 2786 2787 .search_fullpage_result { 2788 border-top: 1px solid var(--table-row-border-color); 2789 padding: .75rem; 2790 background-color: var(--table-odd-row-background-color); 2791 color: var(--table-odd-row-text-color); 2792 2793 &:nth-child(2n+1) { 2794 background-color: var(--table-even-row-background-color); 2795 color: var(--table-even-row-text-color); 2796 } 2797 2798 .snippet { 2799 font-size: 90%; 2800 margin-bottom: 0; 2801 } 2802 } 2803} 2804 2805#index__tree { 2806 background-color: var(--tree-background-color); 2807 border: 1px solid var(--tree-border-color); 2808 padding: 0 1rem; 2809 2810 ul { 2811 padding-left: 1rem; 2812 } 2813 2814 a { 2815 // color: var(--text); 2816 .mikio-text-decoration(none); 2817 } 2818 2819 .curid a { 2820 color: var(--section-edit-highlight); 2821 } 2822} 2823 2824.mikio.dokuwiki ul.tabs { 2825 .mikio-tabs(); 2826} 2827 2828.mikio .mode_draft { 2829 table { 2830 margin-bottom: 1rem; 2831 } 2832} 2833 2834#dokuwiki__detail { 2835 .mikio-admin(); 2836 height: 100vh; 2837 padding: 0 2rem; 2838 2839 .content { 2840 display: flex; 2841 2842 .img_detail dl { 2843 display: grid; 2844 grid-template-columns: 4rem auto; 2845 align-items: center; 2846 2847 dt { 2848 font-weight: bold; 2849 } 2850 } 2851 } 2852} 2853 2854.mikio { 2855 div.insitu-footnote { 2856 padding: @ini_footnote_popup_vertical_padding @ini_footnote_popup_horizontal_padding; 2857 border: 1px solid @ini_footnote_popup_border_color; 2858 border-radius: 0.25em; 2859 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 2860 font-size: @ini_footnote_popup_font_size; 2861 color: @ini_footnote_popup_text_color; 2862 background-color: @ini_footnote_popup_background_color 2863 } 2864 2865 .dokuwiki div.footnotes { 2866 font-size: @ini_footnote_popup_font_size; 2867 2868 div.fn sup a.fn_bot { 2869 font-weight: normal; 2870 } 2871 } 2872} 2873 2874/* Plugin Patches */ 2875/* FastWiki Plugin Patch - .mikio .content_partial */ 2876.mikio .content_partial { 2877 .mikio-controls(); 2878} 2879 2880/* Discussion Plugin Patch - .mikio .content_partial */ 2881.mikio div.dokuwiki div.comment_wrapper { 2882 .mikio-controls(); 2883 padding: 1em; 2884 2885 input[type=submit] { 2886 .mikio-control(); 2887 .mikio-button(); 2888 } 2889 2890 h2 { 2891 margin: 0; 2892 } 2893 2894 .comment_form { 2895 margin-top: 0; 2896 } 2897 2898 .comment_subscribe { 2899 input { 2900 float: none; 2901 } 2902 2903 label { 2904 float: none; 2905 display: inline-block; 2906 } 2907 } 2908 2909 .comment_buttons { 2910 float: none; 2911 text-align: right; 2912 margin-top: 1em; 2913 } 2914} 2915 2916/* VersionSwitch */ 2917.mikio ul.plugin_versionswitch { 2918 background-color: var(--control-background-color); 2919 border-radius: .25rem; 2920 margin-bottom: 1rem; 2921 2922 li { 2923 a { 2924 color: var(--control-text-color) !important; 2925 margin: 0; 2926 padding: .375rem .75rem; 2927 2928 &:hover { 2929 color: var(--dropdown-color); 2930 background-color: var(--dropdown-hover-color); 2931 } 2932 } 2933 } 2934} 2935 2936/* Approve */ 2937.mikio #plugin__approve { 2938 font-size: 80%; 2939} 2940 2941/* Mobile */ 2942@media (max-width: 768px) { 2943 .mikio-small-only { 2944 display: inline-block; 2945 } 2946 2947 .mikio-navbar { 2948 padding-bottom: 0; 2949 2950 .mikio-container { 2951 display: grid; 2952 grid-template-columns: auto 3rem; 2953 } 2954 2955 .mikio-navbar-brand { 2956 grid-column: 1 / span 1; 2957 grid-row: 1 / span 1; 2958 margin-bottom: .5rem; 2959 } 2960 2961 .mikio-navbar-toggle { 2962 display: block; 2963 margin-bottom: .5rem; 2964 grid-column: 2 / span 1; 2965 grid-row: 1 / span 1; 2966 } 2967 2968 .mikio-navbar-toggle.closed+.mikio-navbar-collapse { 2969 display: none; 2970 } 2971 2972 .mikio-navbar-collapse { 2973 grid-column: 1 / span 2; 2974 grid-row: 2 / span 1; 2975 flex-direction: column; 2976 margin: 0 -2rem; 2977 padding-top: .5rem; 2978 padding-right: 1rem; 2979 padding-bottom: .5rem; 2980 border-top: 1px solid rgba(0, 0, 0, 0.1); 2981 } 2982 2983 .mikio-nav-item { 2984 display: block; 2985 width: 100%; 2986 padding: .5rem 2rem; 2987 box-sizing: border-box; 2988 text-align: center; 2989 } 2990 2991 .mikio-dropdown-item { 2992 justify-content: center; 2993 } 2994 2995 .mikio-nav { 2996 width: 100%; 2997 flex-direction: column; 2998 } 2999 3000 .mikio-nav-dropdown { 3001 width: 100%; 3002 text-align: center; 3003 margin: 0; 3004 box-sizing: border-box; 3005 } 3006 3007 .mikio-nav-dropdown .mikio-dropdown { 3008 position: relative; 3009 border: 0; 3010 box-shadow: none; 3011 } 3012 } 3013 3014 .mikio-hero { 3015 .mikio-container { 3016 flex-direction: column; 3017 } 3018 3019 .mikio-hero-image-resize { 3020 height: auto; 3021 } 3022 3023 .mikio-hero-image { 3024 background-image: none !important; 3025 } 3026 } 3027 3028 .mode_show .mikio-page .mikio-container { 3029 display: grid; 3030 grid-template-columns: auto 2.5rem; 3031 } 3032 3033 .mode_revisions, 3034 .mode_edit, 3035 .mode_login, 3036 .mode_denied, 3037 .mode_draft, 3038 .mode_preview, 3039 .mode_showtag, 3040 .mode_admin { 3041 .mikio-page { 3042 grid-template-columns: auto; 3043 } 3044 } 3045 3046 .mikio #config__manager td .input, 3047 .mikio #config__manager td input.edit, 3048 .mikio #config__manager tr select { 3049 width: auto; 3050 } 3051 3052 .mikio-content { 3053 grid-column: 1 / span 1; 3054 grid-row: 2 / span 1; 3055 padding-bottom: 1rem; 3056 // padding-right: 0; 3057 // width: auto; 3058 } 3059 3060 /* TOC */ 3061 .mikio .mikio-content .mikio-article { 3062 &.toc-full { 3063 display: block; 3064 } 3065 3066 .mikio-toc { 3067 float: none; 3068 3069 #dw__toc { 3070 max-width: none; 3071 3072 .mikio-iicon.hamburger { 3073 display: none; 3074 } 3075 } 3076 3077 h3.toggle { 3078 background-position: 99% 50%; 3079 text-align: center; 3080 3081 &.closed { 3082 font-size: @ini_toc_font_size; 3083 width: auto; 3084 3085 &:before { 3086 display: none; 3087 } 3088 } 3089 } 3090 } 3091 } 3092 3093 /* Sidebar */ 3094 .mikio-sidebar { 3095 grid-column: 1 / span 2; 3096 width: auto; 3097 3098 .mikio-sidebar-toggle.closed+.mikio-sidebar-collapse { 3099 display: none; 3100 } 3101 3102 &.mikio-sidebar-left { 3103 grid-row: 1 / span 1; 3104 border-right: 0; 3105 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 3106 } 3107 3108 &.mikio-sidebar-right { 3109 grid-row: 3 / span 1; 3110 border-left: 0; 3111 border-top: 1px solid rgba(0, 0, 0, 0.2); 3112 } 3113 3114 .mikio-sidebar-toggle { 3115 display: block; 3116 } 3117 } 3118 3119 /* Page Tools */ 3120 #dw__pagetools { 3121 grid-column: 2 / span 1; 3122 grid-row: 2 / span 1; 3123 } 3124 3125 .mikio.dokuwiki div.ui-admin #admin__version { 3126 padding-right: 1rem; 3127 } 3128 3129 .mikio-page-fill { 3130 .mikio-sidebar { 3131 display: none; 3132 } 3133 } 3134 3135 /* Media Manager */ 3136 .mikio #mediamanager__page, 3137 #media__manager { 3138 display: flex; 3139 flex-direction: column; 3140 3141 .ui-resizable-e { 3142 display: none !important; 3143 } 3144 3145 .namespaces, 3146 .filelist { 3147 width: auto; 3148 min-width: auto; 3149 } 3150 3151 .panelHeader, 3152 .panelContent { 3153 margin-right: 0; 3154 } 3155 } 3156} 3157 3158@media print { 3159 .mikio { 3160 3161 .mikio-navbar-collapse, 3162 .mikio-toc, 3163 .mikio-sidebar, 3164 #dw__pagetools, 3165 .mikio-search { 3166 display: none !important; 3167 } 3168 3169 .mikio-navbar { 3170 box-shadow: none !important; 3171 } 3172 3173 .mikio-hero { 3174 .mikio-hero-text { 3175 min-height: auto; 3176 padding-bottom: 0; 3177 } 3178 } 3179 3180 .mikio-breadcrumbs, 3181 .mikio-youarehere, 3182 .mikio-hero, 3183 .mikio-footer { 3184 background-color: #fff !important; 3185 } 3186 } 3187} 3188 3189/* Plugin Patches */ 3190/* BookCreator */ 3191.mikio .bookcreator__bookbar { 3192 font-size: 0.8rem; 3193 display: flex; 3194 width: auto !important; 3195} 3196 3197/* Indexmenu */ 3198.mikio-sidebar .mikio-sidebar-content .dtree { 3199 font-size: inherit; 3200 3201 .dTreeNode { 3202 margin: 0.5rem 0; 3203 3204 .indexmenu_tocbullet { 3205 margin-top: 2px; 3206 margin-left: 2px; 3207 } 3208 3209 a, 3210 a.nodeUrl, 3211 a.nodeSel, 3212 a.node, 3213 a.navSel { 3214 display: initial; 3215 margin: initial; 3216 color: #666; 3217 background: transparent; 3218 3219 &:visited, 3220 &:active { 3221 display: initial; 3222 margin: initial; 3223 color: #666; 3224 background: transparent; 3225 } 3226 3227 &:hover, 3228 &:visited:hover { 3229 color: #333; 3230 text-decoration: none; 3231 background-color: transparent; 3232 } 3233 } 3234 3235 a.navSel { 3236 font-weight: bold; 3237 color: #333; 3238 } 3239 3240 img:last-of-type { 3241 margin-right: 0.2rem; 3242 opacity: 0.5; 3243 } 3244 } 3245} 3246 3247.mikio .indexmenu_toc { 3248 padding: 0 4px 4px 0; 3249 3250 &>div { 3251 border: 1px solid #999; 3252 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 3253 position: relative; 3254 z-index: 10; 3255 } 3256 3257 .tocheader { 3258 padding: 0.2rem; 3259 border-bottom: 1px solid #ccc; 3260 } 3261 3262 .indexmenu_toc_inside { 3263 border: 0; 3264 padding: 0.2rem; 3265 3266 ul { 3267 margin: 0; 3268 padding: 0 0 0 1.5rem; 3269 3270 .li { 3271 margin-bottom: 0.4rem; 3272 } 3273 } 3274 } 3275} 3276 3277/* struct */ 3278.mikio .mode_admin table { 3279 &.jsoneditor-values { 3280 width: auto; 3281 } 3282 3283 &.jsoneditor-tree, 3284 &.jsoneditor-values { 3285 border-bottom: 0; 3286 3287 tbody { 3288 tr { 3289 background: transparent; 3290 } 3291 3292 td { 3293 padding: 0; 3294 3295 &.jsoneditor-separator { 3296 vertical-align: middle; 3297 } 3298 } 3299 3300 } 3301 3302 button { 3303 background-color: transparent; 3304 border: 0; 3305 transition: none; 3306 3307 &:hover { 3308 transition: none; 3309 } 3310 } 3311 3312 div.jsoneditor-value { 3313 background-color: var(--background); 3314 } 3315 } 3316} 3317 3318.ui-controlgroup-horizontal { 3319 label { 3320 .mikio-button(); 3321 .mikio-button-small(); 3322 background-image: none; 3323 border-left-width: 0 !important; 3324 border-right-width: 0 !important; 3325 3326 &:first-of-type { 3327 border-left-width: 1px !important; 3328 } 3329 3330 &:last-of-type { 3331 border-right-width: 1px !important; 3332 } 3333 3334 &:hover { 3335 background-image: none !important; 3336 border-left-width: 0 !important; 3337 border-right-width: 0 !important; 3338 3339 &:first-of-type { 3340 border-left-width: 1px !important; 3341 } 3342 3343 &:last-of-type { 3344 border-right-width: 1px !important; 3345 } 3346 } 3347 } 3348 3349 label.ui-state-active { 3350 .mikio-button-submit(); 3351 } 3352} 3353 3354/* dark-light mode button */ 3355.mikio { 3356 .mikio-darklight { 3357 display: inline-block; 3358 align-self: center; 3359 3360 .mikio-darklight-light { 3361 display: var(--display-theme-light); 3362 } 3363 3364 .mikio-darklight-dark { 3365 display: var(--display-theme-dark); 3366 } 3367 3368 .mikio-darklight-auto { 3369 display: var(--display-theme-auto); 3370 } 3371 } 3372 3373 .mikio-darklight-button { 3374 display: flex; 3375 justify-content: center; 3376 align-items: center; 3377 width: 2.2rem; 3378 height: 2.2rem; 3379 padding: 0; 3380 3381 .mikio-iicon { 3382 margin: 0; 3383 } 3384 } 3385} 3386 3387.mikio.dokuwiki { 3388 #mikio__translate .mikio-dropdown { 3389 min-width: auto; 3390 } 3391 3392 div.plugin_translation { 3393 text-align: left; 3394 3395 &.is-dropdown { 3396 padding-bottom: 0; 3397 3398 ul { 3399 position: relative; 3400 display: block; 3401 3402 li { 3403 a { 3404 display: block; 3405 } 3406 } 3407 } 3408 } 3409 3410 .title { 3411 display: none; 3412 } 3413 3414 ul { 3415 li { 3416 margin: 0; 3417 display: block; 3418 3419 a, 3420 span { 3421 margin: 0 -1rem 0 -1rem; 3422 padding: .25rem 1rem .25rem 1rem !important; 3423 background-color: var(--dropdown-background-color) !important; 3424 color: var(--dropdown-color) !important; 3425 } 3426 3427 a:hover { 3428 background-color: var(--dropdown-hover-color) !important; 3429 } 3430 3431 span { 3432 margin-right: 0.1rem; 3433 position: relative; 3434 3435 &:after { 3436 content: ""; 3437 display: inline-block; 3438 position: absolute; 3439 height: 0.75rem; 3440 width: 0.25rem; 3441 margin-top: 0.2rem; 3442 margin-left: 0.75rem; 3443 border-right: 2px solid var(--dropdown-color); 3444 border-bottom: 2px solid var(--dropdown-color); 3445 transform: rotateZ(45deg); 3446 } 3447 } 3448 } 3449 } 3450 } 3451} 3452