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