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