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 div.mikio-color-picker { 1700 position: relative; 1701 1702 input[type=color] { 1703 height: 35px; 1704 border: 0; 1705 border-radius: 0; 1706 } 1707 1708 input[type=text] { 1709 width: auto; 1710 } 1711 } 1712 1713 div.mikio-color-button { 1714 position: absolute; 1715 top: 4px; 1716 right: 0; 1717 color: #999999; 1718 } 1719 1720 p { 1721 button + button { 1722 margin-left: .5rem; 1723 } 1724 } 1725 1726 div.ui-admin { 1727 ul.admin_tasks, ul.admin_plugins { 1728 float: none; 1729 display: grid; 1730 grid-template-columns: repeat(auto-fit, 15rem); 1731 width: auto; 1732 padding: 0; 1733 margin: 0; 1734 justify-content: center; 1735 1736 li { 1737 border: 1px solid var(--button-border-color); 1738 border-radius: .25rem; 1739 margin: 1rem 1rem; 1740 background-color: var(--button-background-color); 1741 1742 a, a:visited, a:active { 1743 display: flex; 1744 flex-direction: column; 1745 align-items: center; 1746 justify-content: center; 1747 text-align: center; 1748 height: 4rem; 1749 font-size: 1rem; 1750 font-weight: normal; 1751 padding: 1rem 2rem; 1752 color: var(--button-text-color); 1753 .mikio-text-decoration(none); 1754 overflow: hidden; 1755 transition: all .15s ease-in-out; 1756 1757 span.icon { 1758 width: auto; 1759 height: auto; 1760 min-height: auto; 1761 } 1762 1763 svg { 1764 fill: var(--button-text-color); 1765 } 1766 1767 &:hover { 1768 .mikio-text-decoration(none); 1769 color: var(--button-text-hover-color); 1770 background-color: var(--button-background-hover-color); 1771 border-color: var(--button-border-hover-color); 1772 1773 svg { 1774 fill: var(--button-text-hover-color); 1775 } 1776 } 1777 } 1778 } 1779 } 1780 } 1781 1782 .mikio-config-table-header { 1783 background-color: var(--table-header-row-background-color); 1784 color: var(--table-header-row-text-color); 1785 font-weight: bold; 1786 1787 .mikio-iicon { 1788 vertical-align: text-bottom; 1789 } 1790 } 1791 1792 #extension__list { 1793 ul.extensionList { 1794 li { 1795 border-width: 0 0 1px 0; 1796 border-style: solid; 1797 border-color: var(--table-row-border-color); 1798 padding: .75rem; 1799 margin: 0; 1800 text-align: left; 1801 1802 &:nth-child(odd) { 1803 background-color: var(--table-odd-row-background-color); 1804 color: var(--table-odd-row-text-color); 1805 } 1806 1807 &:nth-child(even) { 1808 background-color: var(--table-even-row-background-color); 1809 color: var(--table-even-row-text-color); 1810 } 1811 } 1812 } 1813 } 1814 1815 button#usrmgr__del { 1816 .mikio-button-danger(); 1817 margin-right: .5rem; 1818 } 1819 1820 #acl__detail div#acl__user { 1821 border-color: var(--toc-border-color); 1822 } 1823 1824 #acl__tree { 1825 background-color: var(--tree-background-color); 1826 border-color: var(--tree-border-color); 1827 color: var(--control-text-color); 1828 1829 // li[role=treeitem] { 1830 // padding-left: 2rem; 1831 // } 1832 1833 a.cur { 1834 background-color: var(--section-edit-highlight); 1835 } 1836 } 1837 1838 #acl_manager table tr { 1839 &:nth-child(odd) { 1840 background-color: var(--table-odd-row-background-color); 1841 color: var(--table-odd-row-text-color); 1842 } 1843 1844 &:nth-child(even) { 1845 background-color: var(--table-even-row-background-color); 1846 color: var(--table-even-row-text-color); 1847 } 1848 } 1849} 1850 1851.mode_admin, 1852.mode_login, 1853.mode_denied, 1854.mode_revisions, 1855.mode_recent, 1856.mode_backlink, 1857.mode_media, 1858.mode_index, 1859.mode_search, 1860.mode_edit, 1861.mode_draft, 1862.mode_preview, 1863.mode_showtag { 1864 .mikio-content, .mikio-page-fill { 1865 .mikio-admin(); 1866 } 1867} 1868 1869.mikio #plugin__styling button.primary { 1870 font-weight: inherit; 1871} 1872 1873.mikio.dokuwiki .secedit { 1874 button { 1875 .mikio-button-small(); 1876 } 1877} 1878 1879.mikio img { 1880 max-width: 100%; 1881 1882 &.media { 1883 margin: .2rem 0; 1884 } 1885 1886 &.medialeft { 1887 margin: .2rem 1em .2rem 0; 1888 } 1889 1890 &.mediaright { 1891 margin: .2rem 0 .2rem 1rem; 1892 } 1893 1894 &.mediacenter { 1895 margin: .2rem auto; 1896 } 1897} 1898 1899.mikio div.dokuwiki div.inclmeta { 1900 margin-top: .5rem; 1901 padding-top: .5rem; 1902} 1903 1904.mikio #dw__login label[for=remember__me] { 1905 margin-left: 0; 1906} 1907 1908.mikio #config__manager { 1909 fieldset { 1910 color: var(--text); 1911 background-color: transparent; 1912 margin: 0; 1913 padding: 0; 1914 1915 legend { 1916 text-align: left; 1917 } 1918 } 1919 1920 tr { 1921 textarea { 1922 color: inherit; 1923 background-color: var(--control-background-color); 1924 } 1925 1926 select { 1927 width: 100%; 1928 background-color: var(--control-background-color); 1929 } 1930 } 1931 1932 td { 1933 &.label { 1934 display: grid; 1935 grid-template-columns: auto 2rem; 1936 1937 span.outkey { 1938 float: none; 1939 font-size: 100%; 1940 background-color: transparent; 1941 margin: 0; 1942 grid-column: 1 / span 1; 1943 grid-row: 1 / span 1; 1944 } 1945 1946 label { 1947 grid-column: 1 / span 1; 1948 grid-row: 2 / span 1; 1949 } 1950 1951 img { 1952 float: none; 1953 grid-column: 2 / span 1; 1954 grid-row: 1 / span 2; 1955 align-self: center; 1956 } 1957 } 1958 1959 input.edit { 1960 width: 100%; 1961 } 1962 } 1963 1964 button[type=submit] { 1965 .mikio-button-submit(); 1966 } 1967} 1968 1969.mode_revisions .mikio-article { 1970 li { 1971 padding: .5rem 1rem; 1972 border-top: 1px solid var(--table-row-border-color); 1973 background-color: var(--table-even-row-background-color); 1974 color: (--table-even-row-text-color); 1975 } 1976 1977 li:nth-child(odd) { 1978 background-color: var(--table-odd-row-background-color); 1979 color: var(--table-odd-row-text-color); 1980 } 1981 1982 .li { 1983 display: grid; 1984 grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem; 1985 align-items: center; 1986 text-align: center; 1987 font-size: 90%; 1988 1989 a.wikilink1 { 1990 text-align: left; 1991 } 1992 1993 span.sizechange { 1994 width: 100%; 1995 font-size: 80%; 1996 border-radius: .2em; 1997 padding: .1em .2em; 1998 color: var(--control-text-color) !important; 1999 } 2000 } 2001 2002 .sum { 2003 display: block; 2004 } 2005} 2006 2007.mode_recent .mikio-article { 2008 ul { 2009 list-style-type: none; 2010 } 2011 2012 li { 2013 padding: .5rem 1rem; 2014 border-top: 1px solid var(--table-row-border-color); 2015 background-color: var(--table-even-row-background-color); 2016 color: var(--table-even-row-text-color); 2017 } 2018 2019 li:nth-child(odd) { 2020 background-color: var(--table-odd-row-background-color); 2021 color: var(--table-odd-row-text-color); 2022 } 2023 2024 .li { 2025 display: grid; 2026 grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem; 2027 align-items: center; 2028 text-align: center; 2029 font-size: 90%; 2030 2031 a.wikilink1, span.curid { 2032 text-align: left; 2033 } 2034 2035 span.sizechange { 2036 width: 100%; 2037 font-size: 80%; 2038 border-radius: .2em; 2039 padding: .1em .2em; 2040 color: var(--control-text-color); 2041 2042 &.positive { 2043 background-color: #cfc; 2044 } 2045 2046 &.negative { 2047 background-color: #fdd; 2048 } 2049 } 2050 } 2051 2052 select { 2053 .mikio-control(); 2054 .mikio-select(); 2055 } 2056} 2057 2058 2059.mikio #mediamanager__page, #media__manager { 2060 width: 100%; 2061 min-width: 100%; 2062 2063 button, .qq-upload-button, .qq-upload-list a { 2064 .mikio-control(); 2065 .mikio-button(); 2066 } 2067 2068 .qq-upload-list a.qq-upload-cancel { 2069 .mikio-button-danger(); 2070 } 2071 2072 button.qq-upload-action { 2073 .mikio-button-submit(); 2074 } 2075 2076 input[type=text], input[type=search], textarea { 2077 .mikio-control(); 2078 .mikio-input-text 2079 } 2080 2081 .ui-resizable-e { 2082 background: transparent; 2083 width: 6px; 2084 right: 2px; 2085 2086 &:hover { 2087 background-color: #999; 2088 } 2089 } 2090 2091 .namespaces { 2092 width: 20%; 2093 min-width: 10em; 2094 left: 0 !important; 2095 2096 h2 { 2097 .mikio-tab-active(); 2098 font-size: 1rem; 2099 } 2100 } 2101 2102 #media__tree { 2103 background-color: var(--tree-background-color); 2104 border-color: var(--tree-border-color); 2105 2106 ul, ul.idx { 2107 margin-top: 0; 2108 margin-bottom: 0; 2109 padding: 0; 2110 list-style-type: none; 2111 2112 ul { 2113 margin-left: 1rem; 2114 } 2115 2116 li { 2117 margin: .25rem 0; 2118 white-space: nowrap; 2119 2120 img { 2121 margin-right: .2rem; 2122 } 2123 } 2124 2125 a { 2126 .mikio-text-decoration(none); 2127 } 2128 2129 div { 2130 display: inline-block; 2131 } 2132 } 2133 } 2134 2135 // .namespaces, #media__tree { 2136 // h2 { 2137 // .mikio-tab-active(); 2138 // font-size: 1rem; 2139 // display: inline-block; 2140 // border-radius: .5rem .5rem 0 0; 2141 // border-width: 1px; 2142 // border-style: solid; 2143 // line-height: 1.4rem; 2144 // position: relative; 2145 // z-index: 2; 2146 // } 2147 2148 .panelHeader { 2149 .mikio-tab-panel(); 2150 } 2151 2152 2153 2154 // } 2155 // } 2156 2157 .filelist { 2158 width: 50%; 2159 min-width: 25em; 2160 left: 0 !important; 2161 } 2162 2163 .filelist, .qq-uploader { 2164 .panelHeader { 2165 .mikio-tab-panel(); 2166 2167 h3 { 2168 width: 100%; 2169 } 2170 } 2171 2172 form.options { 2173 margin-top: 0; 2174 2175 .ui-controlgroup-horizontal label { 2176 margin-right: 0; 2177 } 2178 } 2179 2180 .panelContent { 2181 // padding-top: 1rem; 2182 text-align: center; 2183 2184 ul li:hover { 2185 background-color: initial; 2186 } 2187 } 2188 2189 ul { 2190 margin: 1rem 0 -1px 0; 2191 2192 &.thumbs { 2193 margin: 0; 2194 2195 li { 2196 display: inline-block; 2197 width: 200px; 2198 background-color: var(--tab-active-background-color); 2199 color: var(--tab-active-color); 2200 2201 dt { 2202 text-align: center; 2203 2204 a { 2205 display: block; 2206 width: 100%; 2207 2208 img { 2209 min-height: 90px; 2210 min-width: 90px; 2211 } 2212 } 2213 } 2214 2215 dd { 2216 width: auto; 2217 font-size: 80%; 2218 // color: #666; 2219 margin-bottom: .25rem; 2220 margin-inline-start: 0; 2221 } 2222 2223 .name { 2224 font-weight: normal; 2225 2226 a { 2227 // color: #000; 2228 } 2229 } 2230 } 2231 } 2232 } 2233 2234 ul.rows { 2235 list-style-type: none; 2236 padding: 0; 2237 2238 li { 2239 background-color: var(--table-odd-row-background-color); 2240 color: var(--table-odd-row-text-color); 2241 max-height: none; 2242 font-size: 90%; 2243 // color: var(--text); 2244 overflow: auto; 2245 2246 &:nth-child(2n+1) { 2247 background-color: var(--table-even-row-background-color); 2248 color: var(--table-even-row-text-color); 2249 } 2250 2251 a { 2252 font-weight: normal; 2253 } 2254 2255 dl { 2256 display: flex; 2257 align-items: center; 2258 } 2259 2260 dt { 2261 display: flex; 2262 align-items: center; 2263 justify-content: center; 2264 width: 10%; 2265 2266 a { 2267 height: auto; 2268 width: auto; 2269 2270 img { 2271 display: block; 2272 max-width: 40px; 2273 max-height: 40px; 2274 } 2275 } 2276 } 2277 2278 dd.name { 2279 text-align: left; 2280 width: 30%; 2281 overflow: hidden; 2282 text-overflow: ellipsis; 2283 float: left; 2284 margin-left: 1%; 2285 white-space: nowrap; 2286 } 2287 2288 dd.size { 2289 width: 15%; 2290 } 2291 2292 dd.date { 2293 width: 20%; 2294 } 2295 2296 dd.filesize { 2297 width: 15%; 2298 } 2299 2300 dd { 2301 margin: 0; 2302 font-size: 90%; 2303 } 2304 } 2305 } 2306 2307 .qq-upload-list { 2308 margin-top: 1rem; 2309 2310 li { 2311 &:hover { 2312 background-color: transparent; 2313 } 2314 } 2315 } 2316 2317 .qq-action-container { 2318 margin-top: 1rem; 2319 padding-top: 1rem; 2320 border-top: 1px solid #dee2e6; 2321 } 2322 } 2323 2324 .file { 2325 .panelHeader { 2326 .mikio-tab-panel(); 2327 2328 a { 2329 font-weight: normal; 2330 color: #333; 2331 } 2332 } 2333 2334 ul { 2335 &.tabs { 2336 .mikio-tabs(); 2337 } 2338 } 2339 2340 #mediamanager__btn_delete button { 2341 .mikio-button-danger(); 2342 } 2343 2344 dl { 2345 font-size: 90%; 2346 2347 dt { 2348 padding: .25rem .5rem; 2349 background-color: #f0f0f0; 2350 } 2351 2352 dd { 2353 padding: .25rem .5rem; 2354 background-color: #f8f8f8; 2355 } 2356 } 2357 2358 input[type=text], form.meta textarea.edit { 2359 width: 100%; 2360 min-width: 100%; 2361 max-width: 100%; 2362 } 2363 2364 button[name="mediado[save]"] { 2365 .mikio-button-submit(); 2366 } 2367 } 2368 2369 .panel { 2370 float: left; 2371 } 2372 2373 .panelHeader { 2374 margin: 0 10px 10px 0; 2375 padding: 10px 10px 8px; 2376 font-size: .9rem; 2377 overflow: hidden; 2378 2379 h3 { 2380 float: left; 2381 font-weight: normal; 2382 font-size: 1em; 2383 padding: 0; 2384 margin: 0 0 3px; 2385 } 2386 2387 form.options { 2388 float: right; 2389 } 2390 } 2391 2392 .panelContent { 2393 background-color: var(--tab-active-background-color); 2394 margin: 0 10px 0 0; 2395 border-width: 0 1px 1px 1px; 2396 border-style: solid; 2397 border-color: var(--tab-active-border-color); 2398 padding: .5rem; 2399 } 2400 2401 #media__opts { 2402 border-bottom: 1px solid var(--tab-active-border-color); 2403 padding-bottom: .75rem; 2404 } 2405 2406 #media__content { 2407 .odd, .even { 2408 border-top: 1px solid var(--table-row-border-color); 2409 font-size: 90%; 2410 display: grid; 2411 grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem; 2412 align-items: center; 2413 2414 a.mediafile { 2415 grid-column: 2 / span 1; 2416 grid-row: 1 / span 1; 2417 margin: 0; 2418 word-break: break-word; 2419 } 2420 2421 span.info { 2422 grid-column: 3 / span 1; 2423 grid-row: 1 / span 1; 2424 text-align: center; 2425 2426 br { 2427 display: inline-block; 2428 } 2429 } 2430 2431 a:nth-child(2) { 2432 grid-column: 4 / span 1; 2433 grid-row: 1 / span 1; 2434 text-align: center; 2435 } 2436 2437 a:nth-child(3) { 2438 grid-column: 5 / span 1; 2439 grid-row: 1 / span 1; 2440 text-align: center; 2441 } 2442 2443 a.btn_media_delete { 2444 grid-column: 6 / span 1; 2445 grid-row: 1 / span 1; 2446 text-align: center; 2447 } 2448 2449 div.example, div.clearer, br { 2450 display: none; 2451 } 2452 2453 div.detail { 2454 grid-column: 1 / span 1; 2455 grid-row: 1 / span 1; 2456 padding: 0; 2457 2458 div.thumb { 2459 float: none; 2460 margin: 0; 2461 2462 img { 2463 max-width: 48px; 2464 max-height: 48px; 2465 } 2466 } 2467 } 2468 } 2469 2470 .odd { 2471 background-color: var(--table-odd-row-background-color); 2472 color: var(--table-odd-row-text-color); 2473 } 2474 2475 .even { 2476 background-color: var(--table-even-row-background-color); 2477 color: var(--table-even-row-text-color); 2478 } 2479 } 2480} 2481 2482.mikio.dokuwiki .mode_search .mikio-article { 2483 .search-results-form { 2484 fieldset.search-form { 2485 display: grid; 2486 margin: 0 auto; 2487 width: auto; 2488 max-width: 800px; 2489 grid-template-columns: auto 10rem 10rem; 2490 grid-gap: 1rem; 2491 2492 input[name=q] { 2493 grid-column: 1 / span 1; 2494 grid-row: 1 / span 1; 2495 width: 100%; 2496 } 2497 2498 button[type=submit] { 2499 .mikio-button-submit(); 2500 grid-column: 2 / span 1; 2501 grid-row: 1 / span 1; 2502 } 2503 2504 .toggleAssistant { 2505 .mikio-button-small(); 2506 grid-column: 3 / span 1; 2507 grid-row: 1 / span 1; 2508 flex: 0; 2509 } 2510 2511 .advancedOptions { 2512 grid-column: 1 / span 3; 2513 grid-row: 2 / span 1; 2514 text-align: center; 2515 2516 .toggle { 2517 position: relative; 2518 display: inline-block; 2519 border: 1px solid var(--dropdown-border-color); 2520 background-color: var(--dropdown-background-color); 2521 color: var(--dropdown-color); 2522 border-radius: .25rem; 2523 padding: .375rem .75rem; 2524 text-align: left; 2525 2526 .current { 2527 padding: .2rem 2.2rem .2rem .2rem; 2528 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>'); 2529 background-size: 1.2rem; 2530 background-position: right; 2531 background-repeat: no-repeat; 2532 2533 &:after { 2534 content: ""; 2535 } 2536 } 2537 2538 ul { 2539 position: absolute; 2540 right: 0; 2541 top: .5rem; 2542 padding: .5rem 2rem; 2543 border: 1px solid var(--dropdown-border-color); 2544 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 2545 background-color: var(--dropdown-background-color); 2546 color: #999; 2547 list-style-type: none; 2548 2549 li { 2550 margin: 0rem; 2551 white-space: nowrap; 2552 } 2553 2554 li.active { 2555 padding: .2rem 0; 2556 display: block; 2557 } 2558 2559 a, a:visited, a:active { 2560 transition: all 0.15s ease-in-out; 2561 color: var(--dropdown-color); 2562 .mikio-text-decoration(none); 2563 font-style: normal; 2564 display: block; 2565 padding: .2rem 2rem; 2566 margin: 0 -2rem; 2567 2568 &:hover { 2569 background-color: var(--dropdown-hover-color); 2570 } 2571 } 2572 } 2573 2574 ul[aria-expanded="false"] { 2575 display: none; 2576 } 2577 } 2578 2579 .toggle + .toggle { 2580 margin-left: 1rem; 2581 } 2582 } 2583 } 2584 } 2585 2586 h2 { 2587 margin-top: .5rem; 2588 padding-top: 1rem; 2589 border-top: 1px solid #dee2e6; 2590 } 2591 2592 .search_quickresult ul { 2593 background-color: #fff; 2594 padding: .5rem 1rem; 2595 list-style-type: none; 2596 2597 li { 2598 float: none; 2599 text-align: left; 2600 padding-left: 0; 2601 2602 &:before { 2603 font-size: 1.2rem; 2604 content:'\2022'; 2605 margin-right:0.5em; 2606 } 2607 2608 .li { 2609 display: inline-block; 2610 } 2611 } 2612 } 2613 2614 div.search_quickresult ul li { 2615 width: auto; 2616 } 2617 2618 .search_fullpage_result { 2619 border-top: 1px solid var(--table-row-border-color); 2620 padding: .75rem; 2621 background-color: var(--table-odd-row-background-color); 2622 color: var(--table-odd-row-text-color); 2623 2624 &:nth-child(2n+1) { 2625 background-color: var(--table-even-row-background-color); 2626 color: var(--table-even-row-text-color); 2627 } 2628 2629 .snippet { 2630 font-size: 90%; 2631 margin-bottom: 0; 2632 } 2633 } 2634} 2635 2636#index__tree { 2637 background-color: var(--tree-background-color); 2638 border: 1px solid var(--tree-border-color); 2639 padding: 0 1rem; 2640 2641 ul { 2642 padding-left: 1rem; 2643 } 2644 2645 a { 2646 // color: var(--text); 2647 .mikio-text-decoration(none); 2648 } 2649 2650 .curid a { 2651 color: var(--section-edit-highlight); 2652 } 2653} 2654 2655.mikio.dokuwiki ul.tabs { 2656 .mikio-tabs(); 2657} 2658 2659.mikio .mode_draft { 2660 table { 2661 margin-bottom: 1rem; 2662 } 2663} 2664 2665#dokuwiki__detail { 2666 .mikio-admin(); 2667 height: 100vh; 2668 padding: 0 2rem; 2669 2670 .content { 2671 display: flex; 2672 2673 .img_detail dl { 2674 display: grid; 2675 grid-template-columns: 4rem auto; 2676 align-items: center; 2677 2678 dt { 2679 font-weight: bold; 2680 } 2681 } 2682 } 2683} 2684 2685/* Plugin Patches */ 2686/* FastWiki Plugin Patch - .mikio .content_partial */ 2687.mikio .content_partial { 2688 .mikio-controls(); 2689} 2690 2691/* Discussion Plugin Patch - .mikio .content_partial */ 2692.mikio div.dokuwiki div.comment_wrapper { 2693 .mikio-controls(); 2694 padding: 1em; 2695 2696 input[type=submit] { 2697 .mikio-control(); 2698 .mikio-button(); 2699 } 2700 2701 h2 { 2702 margin: 0; 2703 } 2704 2705 .comment_form { 2706 margin-top: 0; 2707 } 2708 2709 .comment_subscribe { 2710 input { 2711 float: none; 2712 } 2713 2714 label { 2715 float: none; 2716 display: inline-block; 2717 } 2718 } 2719 2720 .comment_buttons { 2721 float: none; 2722 text-align: right; 2723 margin-top: 1em; 2724 } 2725} 2726 2727/* Mobile */ 2728@media (max-width: 768px) { 2729 .mikio-small-only { 2730 display: inline-block; 2731 } 2732 2733 .mikio-navbar { 2734 padding-bottom: 0; 2735 2736 .mikio-container { 2737 display: grid; 2738 grid-template-columns: auto 3rem; 2739 } 2740 2741 .mikio-navbar-brand { 2742 grid-column: 1 / span 1; 2743 grid-row: 1 / span 1; 2744 margin-bottom: .5rem; 2745 } 2746 2747 .mikio-navbar-toggle { 2748 display: block; 2749 margin-bottom: .5rem; 2750 grid-column: 2 / span 1; 2751 grid-row: 1 / span 1; 2752 } 2753 2754 .mikio-navbar-toggle.closed + .mikio-navbar-collapse { 2755 display: none; 2756 } 2757 2758 .mikio-navbar-collapse { 2759 grid-column: 1 / span 2; 2760 grid-row: 2 / span 1; 2761 flex-direction: column; 2762 margin: 0 -2rem; 2763 padding-top: .5rem; 2764 padding-right: 1rem; 2765 padding-bottom: .5rem; 2766 border-top: 1px solid rgba(0, 0, 0, 0.1); 2767 } 2768 2769 .mikio-nav-item { 2770 display: block; 2771 width: 100%; 2772 padding: .5rem 2rem; 2773 box-sizing: border-box; 2774 text-align: center; 2775 } 2776 2777 .mikio-dropdown-item { 2778 justify-content: center; 2779 } 2780 2781 .mikio-nav { 2782 width: 100%; 2783 flex-direction: column; 2784 } 2785 2786 .mikio-nav-dropdown { 2787 width: 100%; 2788 text-align: center; 2789 margin: 0; 2790 box-sizing: border-box; 2791 } 2792 2793 .mikio-nav-dropdown .mikio-dropdown { 2794 position: relative; 2795 border: 0; 2796 box-shadow: none; 2797 } 2798 } 2799 2800 .mikio-hero { 2801 .mikio-container { 2802 flex-direction: column; 2803 } 2804 2805 .mikio-hero-image-resize { 2806 height: auto; 2807 } 2808 2809 .mikio-hero-image { 2810 background-image: none !important; 2811 } 2812 } 2813 2814 .mode_show .mikio-page .mikio-container { 2815 display: grid; 2816 grid-template-columns: auto 2.5rem; 2817 } 2818 2819 .mode_revisions, 2820 .mode_edit, 2821 .mode_login, 2822 .mode_denied, 2823 .mode_draft, 2824 .mode_preview, 2825 .mode_showtag, 2826 .mode_admin { 2827 .mikio-page { 2828 grid-template-columns: auto; 2829 } 2830 } 2831 2832 .mikio #config__manager td .input, 2833 .mikio #config__manager td input.edit, 2834 .mikio #config__manager tr select { 2835 width: auto; 2836 } 2837 2838 .mikio-content { 2839 grid-column: 1 / span 1; 2840 grid-row: 2 / span 1; 2841 padding-bottom: 1rem; 2842 // padding-right: 0; 2843 // width: auto; 2844 } 2845 2846 /* TOC */ 2847 .mikio .mikio-content .mikio-article { 2848 &.toc-full { 2849 display: block; 2850 } 2851 2852 .mikio-toc { 2853 float: none; 2854 2855 #dw__toc { 2856 max-width: none; 2857 .mikio-iicon.hamburger { 2858 display: none; 2859 } 2860 } 2861 2862 h3.toggle { 2863 background-position: 99% 50%; 2864 text-align: center; 2865 2866 &.closed { 2867 font-size: @ini_toc_font_size; 2868 width: auto; 2869 2870 &:before { 2871 display: none; 2872 } 2873 } 2874 } 2875 } 2876 } 2877 2878 /* Sidebar */ 2879 .mikio-sidebar { 2880 grid-column: 1 / span 2; 2881 width: auto; 2882 2883 .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse { 2884 display: none; 2885 } 2886 2887 &.mikio-sidebar-left { 2888 grid-row: 1 / span 1; 2889 border-right: 0; 2890 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 2891 } 2892 2893 &.mikio-sidebar-right { 2894 grid-row: 3 / span 1; 2895 border-left: 0; 2896 border-top: 1px solid rgba(0, 0, 0, 0.2); 2897 } 2898 2899 .mikio-sidebar-toggle { 2900 display: block; 2901 } 2902 } 2903 2904 /* Page Tools */ 2905 #dw__pagetools { 2906 grid-column: 2 / span 1; 2907 grid-row: 2 / span 1; 2908 } 2909 2910 .mikio.dokuwiki div.ui-admin #admin__version { 2911 padding-right: 1rem; 2912 } 2913 2914 .mikio-page-fill { 2915 .mikio-sidebar { 2916 display: none; 2917 } 2918 } 2919 2920 /* Media Manager */ 2921 .mikio #mediamanager__page, #media__manager { 2922 display: flex; 2923 flex-direction: column; 2924 2925 .ui-resizable-e { 2926 display: none !important; 2927 } 2928 2929 .namespaces, .filelist { 2930 width: auto; 2931 min-width: auto; 2932 } 2933 2934 .panelHeader, .panelContent { 2935 margin-right: 0; 2936 } 2937 } 2938} 2939 2940@media print { 2941 .mikio { 2942 .mikio-navbar-collapse, 2943 .mikio-toc, 2944 .mikio-sidebar, 2945 #dw__pagetools, 2946 .mikio-search { 2947 display: none !important;; 2948 } 2949 2950 .mikio-navbar { 2951 box-shadow: none !important;; 2952 } 2953 2954 .mikio-hero { 2955 .mikio-hero-text { 2956 min-height: auto; 2957 padding-bottom: 0; 2958 } 2959 } 2960 2961 .mikio-breadcrumbs, .mikio-youarehere, .mikio-hero, .mikio-footer { 2962 background-color: #fff !important; 2963 } 2964 } 2965} 2966 2967/* Plugin Patches */ 2968/* BookCreator */ 2969.mikio .bookcreator__bookbar { 2970 font-size: 0.8rem; 2971 display: flex; 2972 width: auto !important; 2973} 2974 2975/* Indexmenu */ 2976.mikio-sidebar .mikio-sidebar-content .dtree { 2977 font-size: inherit; 2978 2979 .dTreeNode { 2980 margin: 0.5rem 0; 2981 2982 .indexmenu_tocbullet { 2983 margin-top: 2px; 2984 margin-left: 2px; 2985 } 2986 2987 a, a.nodeUrl, a.nodeSel, a.node, a.navSel { 2988 display: initial; 2989 margin: initial; 2990 color: #666; 2991 background: transparent; 2992 2993 &:visited, &:active { 2994 display: initial; 2995 margin: initial; 2996 color: #666; 2997 background: transparent; 2998 } 2999 3000 &:hover, &:visited:hover { 3001 color: #333; 3002 text-decoration: none; 3003 background-color: transparent; 3004 } 3005 } 3006 3007 a.navSel { 3008 font-weight: bold; 3009 color: #333; 3010 } 3011 3012 img:last-of-type { 3013 margin-right: 0.2rem; 3014 opacity: 0.5; 3015 } 3016 } 3017} 3018 3019.mikio .indexmenu_toc { 3020 padding: 0 4px 4px 0; 3021 3022 &> div { 3023 border: 1px solid #999; 3024 box-shadow: 2px 2px 2px rgba(0,0,0,0.2); 3025 position: relative; 3026 z-index: 10; 3027 } 3028 3029 .tocheader { 3030 padding: 0.2rem; 3031 border-bottom: 1px solid #ccc; 3032 } 3033 3034 .indexmenu_toc_inside { 3035 border: 0; 3036 padding: 0.2rem; 3037 3038 ul { 3039 margin: 0; 3040 padding: 0 0 0 1.5rem; 3041 3042 .li { 3043 margin-bottom: 0.4rem; 3044 } 3045 } 3046 } 3047} 3048 3049/* struct */ 3050.mikio .mode_admin table { 3051 &.jsoneditor-values { 3052 width: auto; 3053 } 3054 3055 &.jsoneditor-tree, &.jsoneditor-values { 3056 border-bottom: 0; 3057 3058 tbody { 3059 tr { 3060 background: transparent; 3061 } 3062 3063 td { 3064 padding: 0; 3065 3066 &.jsoneditor-separator { 3067 vertical-align: middle; 3068 } 3069 } 3070 3071 } 3072 3073 button { 3074 background-color: transparent; 3075 border: 0; 3076 transition: none; 3077 3078 &:hover { 3079 transition: none; 3080 } 3081 } 3082 3083 div.jsoneditor-value { 3084 background-color: var(--background); 3085 } 3086 } 3087} 3088 3089.ui-controlgroup-horizontal { 3090 label { 3091 .mikio-button(); 3092 .mikio-button-small(); 3093 background-image: none; 3094 border-left-width: 0 !important; 3095 border-right-width: 0 !important; 3096 3097 &:first-of-type { 3098 border-left-width: 1px !important; 3099 } 3100 3101 &:last-of-type { 3102 border-right-width: 1px !important; 3103 } 3104 3105 &:hover { 3106 background-image: none !important; 3107 border-left-width: 0 !important; 3108 border-right-width: 0 !important; 3109 3110 &:first-of-type { 3111 border-left-width: 1px !important; 3112 } 3113 3114 &:last-of-type { 3115 border-right-width: 1px !important; 3116 } 3117 } 3118 } 3119 3120 label.ui-state-active { 3121 .mikio-button-submit(); 3122 } 3123} 3124 3125/* dark-light mode button */ 3126.mikio { 3127 .mikio-darklight { 3128 display: inline-block; 3129 align-self: center; 3130 3131 .mikio-darklight-light { 3132 display: var(--display-theme-light); 3133 } 3134 3135 .mikio-darklight-dark { 3136 display: var(--display-theme-dark); 3137 } 3138 3139 .mikio-darklight-auto { 3140 display: var(--display-theme-auto); 3141 } 3142 } 3143 3144 .mikio-darklight-button { 3145 display: flex; 3146 justify-content: center; 3147 align-items: center; 3148 width: 2.2rem; 3149 height: 2.2rem; 3150 padding: 0; 3151 3152 .mikio-iicon { 3153 margin: 0; 3154 } 3155 } 3156} 3157 3158.mikio.dokuwiki { 3159 #mikio__translate .mikio-dropdown { 3160 min-width: auto; 3161 } 3162 3163 div.plugin_translation { 3164 text-align: left; 3165 3166 &.is-dropdown { 3167 padding-bottom: 0; 3168 3169 ul { 3170 position: relative; 3171 display: block; 3172 3173 li { 3174 a { 3175 display: block; 3176 } 3177 } 3178 } 3179 } 3180 3181 .title { 3182 display: none; 3183 } 3184 3185 ul { 3186 li { 3187 margin: 0; 3188 display: block; 3189 3190 a, span { 3191 margin: 0 -1rem 0 -1rem; 3192 padding: .25rem 1rem .25rem 1rem !important; 3193 background-color: var(--dropdown-background-color) !important; 3194 color: var(--dropdown-color) !important; 3195 } 3196 3197 a:hover { 3198 background-color: var(--dropdown-hover-color) !important; 3199 } 3200 3201 span { 3202 margin-right: 0.1rem; 3203 position: relative; 3204 3205 &:after { 3206 content: ""; 3207 display: inline-block; 3208 position: absolute; 3209 height: 0.75rem; 3210 width: 0.25rem; 3211 margin-top: 0.2rem; 3212 margin-left: 0.75rem; 3213 border-right: 2px solid var(--dropdown-color); 3214 border-bottom: 2px solid var(--dropdown-color); 3215 transform: rotateZ(45deg); 3216 } 3217 } 3218 } 3219 } 3220 } 3221} 3222