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