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