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