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