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