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