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