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