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