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