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