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