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 // .namespaces, #media__tree { 2281 // h2 { 2282 // .mikio-tab-active(); 2283 // font-size: 1rem; 2284 // display: inline-block; 2285 // border-radius: .5rem .5rem 0 0; 2286 // border-width: 1px; 2287 // border-style: solid; 2288 // line-height: 1.4rem; 2289 // position: relative; 2290 // z-index: 2; 2291 // } 2292 2293 .panelHeader { 2294 .mikio-tab-panel(); 2295 } 2296 2297 2298 2299 // } 2300 // } 2301 2302 .filelist { 2303 width: 50%; 2304 min-width: 25em; 2305 left: 0 !important; 2306 } 2307 2308 .filelist, 2309 .qq-uploader { 2310 .panelHeader { 2311 .mikio-tab-panel(); 2312 2313 h3 { 2314 width: 100%; 2315 } 2316 } 2317 2318 form.options { 2319 margin-top: 0; 2320 2321 .ui-controlgroup-horizontal label { 2322 margin-right: 0; 2323 } 2324 } 2325 2326 .panelContent { 2327 // padding-top: 1rem; 2328 text-align: center; 2329 2330 ul li:hover { 2331 background-color: initial; 2332 } 2333 } 2334 2335 ul { 2336 margin: 1rem 0 -1px 0; 2337 2338 &.thumbs { 2339 margin: 0; 2340 2341 li { 2342 display: inline-block; 2343 width: 200px; 2344 background-color: var(--tab-active-background-color); 2345 color: var(--tab-active-color); 2346 2347 dt { 2348 text-align: center; 2349 2350 a { 2351 display: block; 2352 width: 100%; 2353 2354 img { 2355 min-height: 90px; 2356 min-width: 90px; 2357 } 2358 } 2359 } 2360 2361 dd { 2362 width: auto; 2363 font-size: 80%; 2364 // color: #666; 2365 margin-bottom: .25rem; 2366 margin-inline-start: 0; 2367 } 2368 2369 .name { 2370 font-weight: normal; 2371 2372 a { 2373 // color: #000; 2374 } 2375 } 2376 } 2377 } 2378 } 2379 2380 ul.rows { 2381 list-style-type: none; 2382 padding: 0; 2383 2384 li { 2385 background-color: var(--table-odd-row-background-color); 2386 color: var(--table-odd-row-text-color); 2387 max-height: none; 2388 font-size: 90%; 2389 // color: var(--text); 2390 overflow: auto; 2391 2392 &:nth-child(2n+1) { 2393 background-color: var(--table-even-row-background-color); 2394 color: var(--table-even-row-text-color); 2395 } 2396 2397 a { 2398 font-weight: normal; 2399 } 2400 2401 dl { 2402 display: flex; 2403 align-items: center; 2404 } 2405 2406 dt { 2407 display: flex; 2408 align-items: center; 2409 justify-content: center; 2410 width: 10%; 2411 2412 a { 2413 height: auto; 2414 width: auto; 2415 2416 img { 2417 display: block; 2418 max-width: 40px; 2419 max-height: 40px; 2420 } 2421 } 2422 } 2423 2424 dd.name { 2425 text-align: left; 2426 width: 30%; 2427 overflow: hidden; 2428 text-overflow: ellipsis; 2429 float: left; 2430 margin-left: 1%; 2431 white-space: nowrap; 2432 } 2433 2434 dd.size { 2435 width: 15%; 2436 } 2437 2438 dd.date { 2439 width: 20%; 2440 } 2441 2442 dd.filesize { 2443 width: 15%; 2444 } 2445 2446 dd { 2447 margin: 0; 2448 font-size: 90%; 2449 } 2450 } 2451 } 2452 2453 .qq-upload-list { 2454 margin-top: 1rem; 2455 2456 li { 2457 &:hover { 2458 background-color: transparent; 2459 } 2460 } 2461 } 2462 2463 .qq-action-container { 2464 margin-top: 1rem; 2465 padding-top: 1rem; 2466 border-top: 1px solid #dee2e6; 2467 } 2468 } 2469 2470 .file { 2471 .panelHeader { 2472 .mikio-tab-panel(); 2473 2474 a { 2475 font-weight: normal; 2476 color: #333; 2477 } 2478 } 2479 2480 ul { 2481 &.tabs { 2482 .mikio-tabs(); 2483 } 2484 } 2485 2486 #mediamanager__btn_delete button { 2487 .mikio-button-danger(); 2488 } 2489 2490 dl { 2491 font-size: 90%; 2492 2493 dt { 2494 padding: .25rem .5rem; 2495 background-color: #f0f0f0; 2496 } 2497 2498 dd { 2499 padding: .25rem .5rem; 2500 background-color: #f8f8f8; 2501 } 2502 } 2503 2504 input[type=text], 2505 form.meta textarea.edit { 2506 width: 100%; 2507 min-width: 100%; 2508 max-width: 100%; 2509 } 2510 2511 button[name="mediado[save]"] { 2512 .mikio-button-submit(); 2513 } 2514 } 2515 2516 .panel { 2517 float: left; 2518 } 2519 2520 .panelHeader { 2521 margin: 0 10px 10px 0; 2522 padding: 10px 10px 8px; 2523 font-size: .9rem; 2524 overflow: hidden; 2525 2526 h3 { 2527 float: left; 2528 font-weight: normal; 2529 font-size: 1em; 2530 padding: 0; 2531 margin: 0 0 3px; 2532 } 2533 2534 form.options { 2535 float: right; 2536 } 2537 } 2538 2539 .panelContent { 2540 background-color: var(--tab-active-background-color); 2541 margin: 0 10px 0 0; 2542 border-width: 0 1px 1px 1px; 2543 border-style: solid; 2544 border-color: var(--tab-active-border-color); 2545 padding: .5rem; 2546 } 2547 2548 #media__opts { 2549 border-bottom: 1px solid var(--tab-active-border-color); 2550 padding-bottom: .75rem; 2551 } 2552 2553 #media__content { 2554 2555 .odd, 2556 .even { 2557 border-top: 1px solid var(--table-row-border-color); 2558 font-size: 90%; 2559 display: grid; 2560 grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem; 2561 align-items: center; 2562 2563 a.mediafile { 2564 grid-column: 2 / span 1; 2565 grid-row: 1 / span 1; 2566 margin: 0; 2567 word-break: break-word; 2568 } 2569 2570 span.info { 2571 grid-column: 3 / span 1; 2572 grid-row: 1 / span 1; 2573 text-align: center; 2574 2575 br { 2576 display: inline-block; 2577 } 2578 } 2579 2580 a:nth-child(2) { 2581 grid-column: 4 / span 1; 2582 grid-row: 1 / span 1; 2583 text-align: center; 2584 } 2585 2586 a:nth-child(3) { 2587 grid-column: 5 / span 1; 2588 grid-row: 1 / span 1; 2589 text-align: center; 2590 } 2591 2592 a.btn_media_delete { 2593 grid-column: 6 / span 1; 2594 grid-row: 1 / span 1; 2595 text-align: center; 2596 } 2597 2598 div.example, 2599 div.clearer, 2600 br { 2601 display: none; 2602 } 2603 2604 div.detail { 2605 grid-column: 1 / span 1; 2606 grid-row: 1 / span 1; 2607 padding: 0; 2608 2609 div.thumb { 2610 float: none; 2611 margin: 0; 2612 2613 img { 2614 max-width: 48px; 2615 max-height: 48px; 2616 } 2617 } 2618 } 2619 } 2620 2621 .odd { 2622 background-color: var(--table-odd-row-background-color); 2623 color: var(--table-odd-row-text-color); 2624 } 2625 2626 .even { 2627 background-color: var(--table-even-row-background-color); 2628 color: var(--table-even-row-text-color); 2629 } 2630 } 2631} 2632 2633.mikio.dokuwiki .mode_search .mikio-article { 2634 .search-results-form { 2635 fieldset.search-form { 2636 display: grid; 2637 margin: 0 auto; 2638 width: auto; 2639 max-width: 800px; 2640 grid-template-columns: auto 10rem 10rem; 2641 grid-gap: 1rem; 2642 2643 input[name=q] { 2644 grid-column: 1 / span 1; 2645 grid-row: 1 / span 1; 2646 width: 100%; 2647 } 2648 2649 button[type=submit] { 2650 .mikio-button-submit(); 2651 grid-column: 2 / span 1; 2652 grid-row: 1 / span 1; 2653 } 2654 2655 .toggleAssistant { 2656 .mikio-button-small(); 2657 grid-column: 3 / span 1; 2658 grid-row: 1 / span 1; 2659 flex: 0; 2660 } 2661 2662 .advancedOptions { 2663 grid-column: 1 / span 3; 2664 grid-row: 2 / span 1; 2665 text-align: center; 2666 2667 .toggle { 2668 position: relative; 2669 display: inline-block; 2670 border: 1px solid var(--dropdown-border-color); 2671 background-color: var(--dropdown-background-color); 2672 color: var(--dropdown-color); 2673 border-radius: .25rem; 2674 padding: .375rem .75rem; 2675 text-align: left; 2676 2677 .current { 2678 padding: .2rem 2.2rem .2rem .2rem; 2679 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>'); 2680 background-size: 1.2rem; 2681 background-position: right; 2682 background-repeat: no-repeat; 2683 2684 &:after { 2685 content: ""; 2686 } 2687 } 2688 2689 ul { 2690 position: absolute; 2691 right: 0; 2692 top: .5rem; 2693 padding: .5rem 2rem; 2694 border: 1px solid var(--dropdown-border-color); 2695 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 2696 background-color: var(--dropdown-background-color); 2697 color: #999; 2698 list-style-type: none; 2699 2700 li { 2701 margin: 0rem; 2702 white-space: nowrap; 2703 } 2704 2705 li.active { 2706 padding: .2rem 0; 2707 display: block; 2708 } 2709 2710 a, 2711 a:visited, 2712 a:active { 2713 transition: all 0.15s ease-in-out; 2714 color: var(--dropdown-color); 2715 .mikio-text-decoration(none); 2716 font-style: normal; 2717 display: block; 2718 padding: .2rem 2rem; 2719 margin: 0 -2rem; 2720 2721 &:hover { 2722 background-color: var(--dropdown-hover-color); 2723 } 2724 } 2725 } 2726 2727 ul[aria-expanded="false"] { 2728 display: none; 2729 } 2730 } 2731 2732 .toggle+.toggle { 2733 margin-left: 1rem; 2734 } 2735 } 2736 } 2737 } 2738 2739 h2 { 2740 margin-top: .5rem; 2741 padding-top: 1rem; 2742 border-top: 1px solid #dee2e6; 2743 } 2744 2745 .search_quickresult ul { 2746 background-color: #fff; 2747 padding: .5rem 1rem; 2748 list-style-type: none; 2749 2750 li { 2751 float: none; 2752 text-align: left; 2753 padding-left: 0; 2754 2755 &:before { 2756 font-size: 1.2rem; 2757 content: '\2022'; 2758 margin-right: 0.5em; 2759 } 2760 2761 .li { 2762 display: inline-block; 2763 } 2764 } 2765 } 2766 2767 div.search_quickresult ul li { 2768 width: auto; 2769 } 2770 2771 .search_fullpage_result { 2772 border-top: 1px solid var(--table-row-border-color); 2773 padding: .75rem; 2774 background-color: var(--table-odd-row-background-color); 2775 color: var(--table-odd-row-text-color); 2776 2777 &:nth-child(2n+1) { 2778 background-color: var(--table-even-row-background-color); 2779 color: var(--table-even-row-text-color); 2780 } 2781 2782 .snippet { 2783 font-size: 90%; 2784 margin-bottom: 0; 2785 } 2786 } 2787} 2788 2789#index__tree { 2790 background-color: var(--tree-background-color); 2791 border: 1px solid var(--tree-border-color); 2792 padding: 0 1rem; 2793 2794 ul { 2795 padding-left: 1rem; 2796 } 2797 2798 a { 2799 // color: var(--text); 2800 .mikio-text-decoration(none); 2801 } 2802 2803 .curid a { 2804 color: var(--section-edit-highlight); 2805 } 2806} 2807 2808.mikio.dokuwiki ul.tabs { 2809 .mikio-tabs(); 2810} 2811 2812.mikio .mode_draft { 2813 table { 2814 margin-bottom: 1rem; 2815 } 2816} 2817 2818#dokuwiki__detail { 2819 .mikio-admin(); 2820 height: 100vh; 2821 padding: 0 2rem; 2822 2823 .content { 2824 display: flex; 2825 2826 .img_detail dl { 2827 display: grid; 2828 grid-template-columns: 4rem auto; 2829 align-items: center; 2830 2831 dt { 2832 font-weight: bold; 2833 } 2834 } 2835 } 2836} 2837 2838.mikio { 2839 div.insitu-footnote { 2840 padding: @ini_footnote_popup_vertical_padding @ini_footnote_popup_horizontal_padding; 2841 border: 1px solid @ini_footnote_popup_border_color; 2842 border-radius: 0.25em; 2843 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 2844 font-size: @ini_footnote_popup_font_size; 2845 color: @ini_footnote_popup_text_color; 2846 background-color: @ini_footnote_popup_background_color 2847 } 2848 2849 .dokuwiki div.footnotes { 2850 font-size: @ini_footnote_popup_font_size; 2851 2852 div.fn sup a.fn_bot { 2853 font-weight: normal; 2854 } 2855 } 2856} 2857 2858/* Plugin Patches */ 2859/* FastWiki Plugin Patch - .mikio .content_partial */ 2860.mikio .content_partial { 2861 .mikio-controls(); 2862} 2863 2864/* Discussion Plugin Patch - .mikio .content_partial */ 2865.mikio div.dokuwiki div.comment_wrapper { 2866 .mikio-controls(); 2867 padding: 1em; 2868 2869 input[type=submit] { 2870 .mikio-control(); 2871 .mikio-button(); 2872 } 2873 2874 h2 { 2875 margin: 0; 2876 } 2877 2878 .comment_form { 2879 margin-top: 0; 2880 } 2881 2882 .comment_subscribe { 2883 input { 2884 float: none; 2885 } 2886 2887 label { 2888 float: none; 2889 display: inline-block; 2890 } 2891 } 2892 2893 .comment_buttons { 2894 float: none; 2895 text-align: right; 2896 margin-top: 1em; 2897 } 2898} 2899 2900/* VersionSwitch */ 2901.mikio ul.plugin_versionswitch { 2902 background-color: var(--control-background-color); 2903 border-radius: .25rem; 2904 margin-bottom: 1rem; 2905 2906 li { 2907 a { 2908 color: var(--control-text-color) !important; 2909 margin: 0; 2910 padding: .375rem .75rem; 2911 2912 &:hover { 2913 color: var(--dropdown-color); 2914 background-color: var(--dropdown-hover-color); 2915 } 2916 } 2917 } 2918} 2919 2920/* Mobile */ 2921@media (max-width: 768px) { 2922 .mikio-small-only { 2923 display: inline-block; 2924 } 2925 2926 .mikio-navbar { 2927 padding-bottom: 0; 2928 2929 .mikio-container { 2930 display: grid; 2931 grid-template-columns: auto 3rem; 2932 } 2933 2934 .mikio-navbar-brand { 2935 grid-column: 1 / span 1; 2936 grid-row: 1 / span 1; 2937 margin-bottom: .5rem; 2938 } 2939 2940 .mikio-navbar-toggle { 2941 display: block; 2942 margin-bottom: .5rem; 2943 grid-column: 2 / span 1; 2944 grid-row: 1 / span 1; 2945 } 2946 2947 .mikio-navbar-toggle.closed+.mikio-navbar-collapse { 2948 display: none; 2949 } 2950 2951 .mikio-navbar-collapse { 2952 grid-column: 1 / span 2; 2953 grid-row: 2 / span 1; 2954 flex-direction: column; 2955 margin: 0 -2rem; 2956 padding-top: .5rem; 2957 padding-right: 1rem; 2958 padding-bottom: .5rem; 2959 border-top: 1px solid rgba(0, 0, 0, 0.1); 2960 } 2961 2962 .mikio-nav-item { 2963 display: block; 2964 width: 100%; 2965 padding: .5rem 2rem; 2966 box-sizing: border-box; 2967 text-align: center; 2968 } 2969 2970 .mikio-dropdown-item { 2971 justify-content: center; 2972 } 2973 2974 .mikio-nav { 2975 width: 100%; 2976 flex-direction: column; 2977 } 2978 2979 .mikio-nav-dropdown { 2980 width: 100%; 2981 text-align: center; 2982 margin: 0; 2983 box-sizing: border-box; 2984 } 2985 2986 .mikio-nav-dropdown .mikio-dropdown { 2987 position: relative; 2988 border: 0; 2989 box-shadow: none; 2990 } 2991 } 2992 2993 .mikio-hero { 2994 .mikio-container { 2995 flex-direction: column; 2996 } 2997 2998 .mikio-hero-image-resize { 2999 height: auto; 3000 } 3001 3002 .mikio-hero-image { 3003 background-image: none !important; 3004 } 3005 } 3006 3007 .mode_show .mikio-page .mikio-container { 3008 display: grid; 3009 grid-template-columns: auto 2.5rem; 3010 } 3011 3012 .mode_revisions, 3013 .mode_edit, 3014 .mode_login, 3015 .mode_denied, 3016 .mode_draft, 3017 .mode_preview, 3018 .mode_showtag, 3019 .mode_admin { 3020 .mikio-page { 3021 grid-template-columns: auto; 3022 } 3023 } 3024 3025 .mikio #config__manager td .input, 3026 .mikio #config__manager td input.edit, 3027 .mikio #config__manager tr select { 3028 width: auto; 3029 } 3030 3031 .mikio-content { 3032 grid-column: 1 / span 1; 3033 grid-row: 2 / span 1; 3034 padding-bottom: 1rem; 3035 // padding-right: 0; 3036 // width: auto; 3037 } 3038 3039 /* TOC */ 3040 .mikio .mikio-content .mikio-article { 3041 &.toc-full { 3042 display: block; 3043 } 3044 3045 .mikio-toc { 3046 float: none; 3047 3048 #dw__toc { 3049 max-width: none; 3050 3051 .mikio-iicon.hamburger { 3052 display: none; 3053 } 3054 } 3055 3056 h3.toggle { 3057 background-position: 99% 50%; 3058 text-align: center; 3059 3060 &.closed { 3061 font-size: @ini_toc_font_size; 3062 width: auto; 3063 3064 &:before { 3065 display: none; 3066 } 3067 } 3068 } 3069 } 3070 } 3071 3072 /* Sidebar */ 3073 .mikio-sidebar { 3074 grid-column: 1 / span 2; 3075 width: auto; 3076 3077 .mikio-sidebar-toggle.closed+.mikio-sidebar-collapse { 3078 display: none; 3079 } 3080 3081 &.mikio-sidebar-left { 3082 grid-row: 1 / span 1; 3083 border-right: 0; 3084 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 3085 } 3086 3087 &.mikio-sidebar-right { 3088 grid-row: 3 / span 1; 3089 border-left: 0; 3090 border-top: 1px solid rgba(0, 0, 0, 0.2); 3091 } 3092 3093 .mikio-sidebar-toggle { 3094 display: block; 3095 } 3096 } 3097 3098 /* Page Tools */ 3099 #dw__pagetools { 3100 grid-column: 2 / span 1; 3101 grid-row: 2 / span 1; 3102 } 3103 3104 .mikio.dokuwiki div.ui-admin #admin__version { 3105 padding-right: 1rem; 3106 } 3107 3108 .mikio-page-fill { 3109 .mikio-sidebar { 3110 display: none; 3111 } 3112 } 3113 3114 /* Media Manager */ 3115 .mikio #mediamanager__page, 3116 #media__manager { 3117 display: flex; 3118 flex-direction: column; 3119 3120 .ui-resizable-e { 3121 display: none !important; 3122 } 3123 3124 .namespaces, 3125 .filelist { 3126 width: auto; 3127 min-width: auto; 3128 } 3129 3130 .panelHeader, 3131 .panelContent { 3132 margin-right: 0; 3133 } 3134 } 3135} 3136 3137@media print { 3138 .mikio { 3139 3140 .mikio-navbar-collapse, 3141 .mikio-toc, 3142 .mikio-sidebar, 3143 #dw__pagetools, 3144 .mikio-search { 3145 display: none !important; 3146 } 3147 3148 .mikio-navbar { 3149 box-shadow: none !important; 3150 } 3151 3152 .mikio-hero { 3153 .mikio-hero-text { 3154 min-height: auto; 3155 padding-bottom: 0; 3156 } 3157 } 3158 3159 .mikio-breadcrumbs, 3160 .mikio-youarehere, 3161 .mikio-hero, 3162 .mikio-footer { 3163 background-color: #fff !important; 3164 } 3165 } 3166} 3167 3168/* Plugin Patches */ 3169/* BookCreator */ 3170.mikio .bookcreator__bookbar { 3171 font-size: 0.8rem; 3172 display: flex; 3173 width: auto !important; 3174} 3175 3176/* Indexmenu */ 3177.mikio-sidebar .mikio-sidebar-content .dtree { 3178 font-size: inherit; 3179 3180 .dTreeNode { 3181 margin: 0.5rem 0; 3182 3183 .indexmenu_tocbullet { 3184 margin-top: 2px; 3185 margin-left: 2px; 3186 } 3187 3188 a, 3189 a.nodeUrl, 3190 a.nodeSel, 3191 a.node, 3192 a.navSel { 3193 display: initial; 3194 margin: initial; 3195 color: #666; 3196 background: transparent; 3197 3198 &:visited, 3199 &:active { 3200 display: initial; 3201 margin: initial; 3202 color: #666; 3203 background: transparent; 3204 } 3205 3206 &:hover, 3207 &:visited:hover { 3208 color: #333; 3209 text-decoration: none; 3210 background-color: transparent; 3211 } 3212 } 3213 3214 a.navSel { 3215 font-weight: bold; 3216 color: #333; 3217 } 3218 3219 img:last-of-type { 3220 margin-right: 0.2rem; 3221 opacity: 0.5; 3222 } 3223 } 3224} 3225 3226.mikio .indexmenu_toc { 3227 padding: 0 4px 4px 0; 3228 3229 &>div { 3230 border: 1px solid #999; 3231 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); 3232 position: relative; 3233 z-index: 10; 3234 } 3235 3236 .tocheader { 3237 padding: 0.2rem; 3238 border-bottom: 1px solid #ccc; 3239 } 3240 3241 .indexmenu_toc_inside { 3242 border: 0; 3243 padding: 0.2rem; 3244 3245 ul { 3246 margin: 0; 3247 padding: 0 0 0 1.5rem; 3248 3249 .li { 3250 margin-bottom: 0.4rem; 3251 } 3252 } 3253 } 3254} 3255 3256/* struct */ 3257.mikio .mode_admin table { 3258 &.jsoneditor-values { 3259 width: auto; 3260 } 3261 3262 &.jsoneditor-tree, 3263 &.jsoneditor-values { 3264 border-bottom: 0; 3265 3266 tbody { 3267 tr { 3268 background: transparent; 3269 } 3270 3271 td { 3272 padding: 0; 3273 3274 &.jsoneditor-separator { 3275 vertical-align: middle; 3276 } 3277 } 3278 3279 } 3280 3281 button { 3282 background-color: transparent; 3283 border: 0; 3284 transition: none; 3285 3286 &:hover { 3287 transition: none; 3288 } 3289 } 3290 3291 div.jsoneditor-value { 3292 background-color: var(--background); 3293 } 3294 } 3295} 3296 3297.ui-controlgroup-horizontal { 3298 label { 3299 .mikio-button(); 3300 .mikio-button-small(); 3301 background-image: none; 3302 border-left-width: 0 !important; 3303 border-right-width: 0 !important; 3304 3305 &:first-of-type { 3306 border-left-width: 1px !important; 3307 } 3308 3309 &:last-of-type { 3310 border-right-width: 1px !important; 3311 } 3312 3313 &:hover { 3314 background-image: none !important; 3315 border-left-width: 0 !important; 3316 border-right-width: 0 !important; 3317 3318 &:first-of-type { 3319 border-left-width: 1px !important; 3320 } 3321 3322 &:last-of-type { 3323 border-right-width: 1px !important; 3324 } 3325 } 3326 } 3327 3328 label.ui-state-active { 3329 .mikio-button-submit(); 3330 } 3331} 3332 3333/* dark-light mode button */ 3334.mikio { 3335 .mikio-darklight { 3336 display: inline-block; 3337 align-self: center; 3338 3339 .mikio-darklight-light { 3340 display: var(--display-theme-light); 3341 } 3342 3343 .mikio-darklight-dark { 3344 display: var(--display-theme-dark); 3345 } 3346 3347 .mikio-darklight-auto { 3348 display: var(--display-theme-auto); 3349 } 3350 } 3351 3352 .mikio-darklight-button { 3353 display: flex; 3354 justify-content: center; 3355 align-items: center; 3356 width: 2.2rem; 3357 height: 2.2rem; 3358 padding: 0; 3359 3360 .mikio-iicon { 3361 margin: 0; 3362 } 3363 } 3364} 3365 3366.mikio.dokuwiki { 3367 #mikio__translate .mikio-dropdown { 3368 min-width: auto; 3369 } 3370 3371 div.plugin_translation { 3372 text-align: left; 3373 3374 &.is-dropdown { 3375 padding-bottom: 0; 3376 3377 ul { 3378 position: relative; 3379 display: block; 3380 3381 li { 3382 a { 3383 display: block; 3384 } 3385 } 3386 } 3387 } 3388 3389 .title { 3390 display: none; 3391 } 3392 3393 ul { 3394 li { 3395 margin: 0; 3396 display: block; 3397 3398 a, 3399 span { 3400 margin: 0 -1rem 0 -1rem; 3401 padding: .25rem 1rem .25rem 1rem !important; 3402 background-color: var(--dropdown-background-color) !important; 3403 color: var(--dropdown-color) !important; 3404 } 3405 3406 a:hover { 3407 background-color: var(--dropdown-hover-color) !important; 3408 } 3409 3410 span { 3411 margin-right: 0.1rem; 3412 position: relative; 3413 3414 &:after { 3415 content: ""; 3416 display: inline-block; 3417 position: absolute; 3418 height: 0.75rem; 3419 width: 0.25rem; 3420 margin-top: 0.2rem; 3421 margin-left: 0.75rem; 3422 border-right: 2px solid var(--dropdown-color); 3423 border-bottom: 2px solid var(--dropdown-color); 3424 transform: rotateZ(45deg); 3425 } 3426 } 3427 } 3428 } 3429 } 3430} 3431