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 button { 1214 margin-right: 0.25rem; 1215 margin-bottom: 0.25rem; 1216 } 1217 } 1218 1219 .summary { 1220 display: inline; 1221 } 1222} 1223 1224.mode_admin .mikio-toc { 1225 background-color: var(--admin-background-color); 1226 1227 #dw__toc { 1228 background-color: var(--toc-background-color); 1229 } 1230} 1231 1232.mikio .mode_admin .mikio-toc #dw__toc { 1233 background-color: var(--toc-background-color); 1234} 1235 1236.mikio .mikio-toc { 1237 float: right; 1238 padding-left: 1rem; 1239 padding-bottom: 1rem; 1240 // background-color: var(--content-background); 1241 margin-top: 1rem; 1242 1243 #dw__toc { 1244 color: var(--toc-link-color); 1245 background-color: var(--toc-background-color); 1246 border: 1px solid var(--toc-border-color); 1247 border-radius: .25rem; 1248 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); 1249 padding: .5rem; 1250 max-width: 12rem; 1251 float: none; 1252 width: auto; 1253 margin: 0; 1254 // background-color: transparent; 1255 1256 ul { 1257 padding-left: 0; 1258 margin: 0; 1259 list-style-type: none; 1260 1261 ul { 1262 padding-left: .5rem; 1263 } 1264 } 1265 1266 &> div { 1267 padding: .2em .5em; 1268 } 1269 } 1270 1271 h3.toggle { 1272 margin: 0; 1273 padding-right: 2rem; 1274 font-size: @ini_toc_font_size; 1275 position: relative; 1276 height: 1rem; 1277 white-space: nowrap; 1278 1279 .hamburger { 1280 width: 1rem; 1281 height: 1rem; 1282 } 1283 1284 .down-arrow { 1285 position: absolute; 1286 top: 0; 1287 bottom: 0; 1288 right: 0; 1289 margin: auto 0; 1290 // border: 1px solid red; 1291 background-color: var(--toc-background-color); 1292 } 1293 1294 &.open { 1295 .hamburger { 1296 display: none; 1297 } 1298 } 1299 1300 &.closed { 1301 font-size: 0; 1302 // height: 1rem; 1303 width: 2rem; 1304 padding-right: 0; 1305 1306 .down-arrow { 1307 right: -4px; 1308 } 1309 } 1310 1311 span { 1312 display: none; 1313 } 1314 } 1315 1316 a, a:visited, a:active { 1317 display: block; 1318 font-size: @ini_toc_font_size; 1319 color: var(--toc-link-color); 1320 .mikio-text-decoration(none); 1321 padding: .2rem 0; 1322 1323 &:hover { 1324 color: var(--toc-link-hover-color); 1325 } 1326 } 1327} 1328 1329.mikio-icon { 1330 margin-right: .25rem; 1331 1332 svg { 1333 vertical-align: middle; 1334 fill: currentColor; 1335 } 1336} 1337 1338.mikio-iicon { 1339 display: inline-block; 1340 width: 1.2rem; 1341 height: 1.2rem; 1342 background-size: 1.2rem; 1343 background-position: center; 1344 background-repeat: no-repeat; 1345 vertical-align: middle; 1346 margin-right: .25rem; 1347 fill: currentColor; 1348} 1349 1350.mikio .mode_show table, 1351.mikio.dokuwiki .mode_showtag table.ul, 1352.mikio .mode_admin table { 1353 width: 100%; 1354 border-collapse: collapse; 1355 margin-bottom: 1rem; 1356 font-size: @ini_table_font_size; 1357 border-bottom: 1px solid var(--table-row-border-color); 1358 1359 tr { 1360 border-top: 1px solid var(--table-row-border-color); 1361 } 1362 1363 td, th { 1364 padding: .75rem; 1365 text-align: left; 1366 } 1367 1368 thead tr { 1369 background-color: var(--table-header-row-background-color); 1370 color: var(--table-header-row-text-color); 1371 } 1372 1373 tbody tr { 1374 &:nth-child(odd) { 1375 background-color: var(--table-odd-row-background-color); 1376 color: var(--table-odd-row-text-color); 1377 } 1378 1379 &:nth-child(even) { 1380 background-color: var(--table-even-row-background-color); 1381 color: var(--table-even-row-text-color); 1382 } 1383 } 1384} 1385 1386.mikio-nav { 1387 list-style: none; 1388 margin: 0; 1389 padding: 0; 1390 display: flex; 1391 1392 .mikio-nav-item, .mikio-nav-dropdown { 1393 display: inline-block; 1394 padding: .5rem .2rem; 1395 margin: 0 .5rem; 1396 } 1397 1398 .mikio-nav-link { 1399 1400 } 1401 1402 .mikio-nav-dropdown { 1403 position: relative; 1404 } 1405 1406 .mikio-nav-dropdown > a { 1407 display: inline-block; 1408 padding: .2rem 1.2rem .2rem 0rem; 1409 position: relative; 1410 1411 &::after { 1412 position: absolute; 1413 content: ''; 1414 top: 10px; 1415 right: 6px; 1416 width: 6px; 1417 height: 6px; 1418 border-left: 2px solid var(--text); 1419 border-bottom: 2px solid var(--text); 1420 transform: rotateZ(-45deg); 1421 } 1422 } 1423 1424 a { 1425 .mikio-text-decoration(none); 1426 } 1427} 1428 1429.mikio-dropdown { 1430 display: block; 1431 position: absolute; 1432 z-index: 10000; 1433 min-width: 12rem; 1434 right: 0; 1435 padding: 1rem 1.5rem; 1436 border: 1px solid var(--dropdown-border-color); 1437 border-radius: 4px; 1438 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 1439 background-color: var(--dropdown-background-color); 1440 color: var(--dropdown-color); 1441 1442 &.closed { 1443 display: none; 1444 } 1445 1446 .mikio-dropdown-item { 1447 display: flex; 1448 align-items: center; 1449 margin-top: .5rem; 1450 margin-bottom: .5rem; 1451 } 1452 1453 .mikio-dropdown-header { 1454 margin: 0 0 1rem 0; 1455 } 1456 1457 .mikio-dropdown-divider { 1458 margin: 1rem -1rem; 1459 border-bottom: 1px solid var(--dropdown-border-color); 1460 } 1461 1462 .mikio-nav-link, .mikio-nav-link:visited, .mikio-nav-link.active { 1463 margin: 0rem -1rem 0rem -1rem; 1464 padding: .25rem 1rem .25rem 1rem; 1465 transition: all .15s ease-in-out; 1466 color: var(--dropdown-color); 1467 1468 &:hover { 1469 color: var(--dropdown-color); 1470 background-color: var(--dropdown-hover-color); 1471 } 1472 } 1473} 1474 1475.typeahead.mikio-dropdown { 1476 a.mikio-dropdown-item { 1477 display: inline; 1478 } 1479 1480 .mikio-dropdown-header { 1481 margin-bottom: 0em; 1482 overflow: hidden; 1483 text-overflow: ellipsis; 1484 // color: #999999; 1485 color: var(--dropdown-color); 1486 } 1487 1488 .mikio-dropdown-divider { 1489 margin-top: 0.5rem; 1490 margin-bottom: 0.5rem; 1491 } 1492} 1493 1494.mikio-tabs { 1495 padding: 0; 1496 margin-top: 1rem; 1497 margin-bottom: -1px; 1498 list-style-type: none; 1499 1500 li { 1501 float: none; 1502 display: inline-block; 1503 font-size: 1rem; 1504 display: inline-block; 1505 line-height: 1.4rem; 1506 position: relative; 1507 z-index: 2; 1508 1509 strong { 1510 .mikio-tab-active(); 1511 } 1512 1513 a, a:visited, a:active { 1514 display: inline-block; 1515 padding: .5rem 1rem; 1516 border: 1px solid var(--tab-border-color); 1517 color: var(--tab-color); 1518 .mikio-text-decoration(none); 1519 margin: 0; 1520 background-color: var(--tab-background-color); 1521 1522 &:hover { 1523 color: var(--tab-hover-color); 1524 border-color: var(--tab-border-hover-color) var(--tab-border-hover-color) transparent var(--tab-border-hover-color); 1525 border-radius: .5rem .5rem 0 0; 1526 background-color: var(--tab-background-hover-color); 1527 } 1528 } 1529 } 1530 1531 &:after { 1532 border-bottom: 0; 1533 } 1534} 1535 1536.mikio-tab-active { 1537 display: inline-block; 1538 background-color: var(--tab-active-background-color); 1539 font-weight: normal; 1540 color: var(--tab-active-color); 1541 border-color: var(--tab-active-border-color) var(--tab-active-border-color) var(--tab-active-background-color); 1542 border-radius: .5rem .5rem 0 0; 1543 border-width: 1px; 1544 border-style: solid; 1545 padding: .5rem 1rem; 1546 margin: 0; 1547 bottom: -1px; 1548 // margin-bottom: -1px; 1549} 1550 1551.mikio-tab { 1552 background-color: var(--tab-background-color); 1553 font-weight: normal; 1554 color: var(--tab-color); 1555 border-color: var(--tab-border-color) var(--tab-border-color) var(--tab-background-color); 1556 padding: .5rem 1rem; 1557 margin: 0; 1558 bottom: -1px; 1559 // margin-bottom: -1px; 1560} 1561 1562.mikio-tab-panel { 1563 margin-bottom: 0 !important; 1564 background-color: var(--tab-active-background-color); 1565 border-width: 1px 1px 1px 1px; 1566 border-style: solid; 1567 border-color: var(--tab-active-border-color) !important; 1568 word-wrap: break-word; 1569 word-break: break-word; 1570} 1571 1572.mikio.dokuwiki div.section_highlight { 1573 background-color: var(--section-edit-highlight); 1574 border-width: 0; 1575 margin: 0 -1rem; 1576 padding: 0 1rem; 1577} 1578 1579.mikio-input-file { 1580 position: absolute; 1581 margin-top: -.5rem; 1582 top: 0; 1583 right: 0; 1584 left: 0; 1585 z-index: 5; 1586 padding: .25rem 1rem; 1587 line-height: 1.5; 1588 text-align: left; 1589 color: var(--control-text-color); 1590 background-color: var(--control-background-color); 1591 border: .1px solid var(--input-border-color); 1592 border-radius: .25rem; 1593 -webkit-user-select: none; 1594 -moz-user-select: none; 1595 -ms-user-select: none; 1596 user-select: none; 1597 white-space: nowrap; 1598 overflow: hidden; 1599 text-overflow: ellipsis; 1600 box-sizing: border-box; 1601 1602 &:before { 1603 position: absolute; 1604 top: 0; 1605 right: 0; 1606 bottom: 0; 1607 z-index: 6; 1608 display: block; 1609 content: "Browse"; 1610 padding: .25rem 1rem; 1611 line-height: 1.5; 1612 color: var(--button-text-color); 1613 background-color: var(--button-background-color); 1614 border-radius: 0 .25rem .25rem 0; 1615 border: 1px solid var(--button-border-color); 1616 transition: all .15s ease-in-out; 1617 } 1618 1619 &:hover:before { 1620 background-color: var(--button-background-hover-color); 1621 border-color: var(--button-border-hover-color); 1622 color: var(--button-text-hover-color); 1623 } 1624} 1625 1626code, pre { 1627 overflow-x: auto; 1628 font-family: @ini_code_font_family; 1629 font-size: @ini_code_font_size; 1630 color: var(--code-text-color); 1631 background-color: var(--code-background-color); 1632 word-wrap: @ini_code_word_wrap; 1633 .mikio-pre-wrap(); 1634 line-height: @ini_code_line_height; 1635} 1636 1637.mode_show { 1638 code:not(.content_partial code), pre { 1639 border: 1px solid var(--code-border-color); 1640 padding: 1em; 1641 } 1642} 1643 1644/* Dokuwiki Patches */ 1645.mikio { 1646 .mikio-search, 1647 &.dokuwiki fieldset, 1648 &.dokuwiki .secedit, 1649 .mode_revisions, 1650 .mode_edit, 1651 .mode_draft, 1652 .mode_preview, 1653 .mode_showtag, 1654 .mode_admin { 1655 .mikio-controls(); 1656 } 1657} 1658 1659.mikio.dokuwiki .secedit { 1660 float: none; 1661 margin-top: 0; 1662 text-align: right; 1663} 1664 1665.mikio.dokuwiki fieldset { 1666 margin: 2rem auto; 1667 border: 0; 1668 width: auto; 1669 max-width: 40rem; 1670 1671 label.block { 1672 display: flex; 1673 flex-direction: row; 1674 text-align: right; 1675 1676 span { 1677 margin-right: 1rem; 1678 width: 15rem; 1679 align-self: center; 1680 } 1681 1682 input { 1683 flex-grow: 1 1684 } 1685 } 1686 // span { 1687 // display: inline-block; 1688 // margin-right: 1rem; 1689 // max-width: 10rem; 1690 // } 1691 // } 1692} 1693 1694.mikio.dokuwiki .mode_login, 1695.mikio.dokuwiki .mode_denied { 1696 .mikio-dialog(); 1697} 1698 1699.mikio .mode_admin { 1700 input[type=text], input[type=password], input[type=email] { 1701 width: 100%; 1702 } 1703 1704 div.mikio-color-picker { 1705 position: relative; 1706 1707 input[type=color] { 1708 height: 35px; 1709 border: 0; 1710 border-radius: 0; 1711 } 1712 1713 input[type=text] { 1714 width: auto; 1715 } 1716 } 1717 1718 div.mikio-color-button { 1719 position: absolute; 1720 top: 4px; 1721 right: 0; 1722 color: #999999; 1723 } 1724 1725 p { 1726 button + button { 1727 margin-left: .5rem; 1728 } 1729 } 1730 1731 div.ui-admin { 1732 ul.admin_tasks, ul.admin_plugins { 1733 float: none; 1734 display: grid; 1735 grid-template-columns: repeat(auto-fit, 15rem); 1736 width: auto; 1737 padding: 0; 1738 margin: 0; 1739 justify-content: center; 1740 1741 li { 1742 list-style-type: none; 1743 border: 1px solid var(--button-border-color); 1744 border-radius: .25rem; 1745 margin: 1rem 1rem; 1746 background-color: var(--button-background-color); 1747 1748 a, a:visited, a:active { 1749 display: flex; 1750 flex-direction: column; 1751 align-items: center; 1752 justify-content: center; 1753 text-align: center; 1754 height: 4rem; 1755 font-size: 1rem; 1756 font-weight: normal; 1757 padding: 1rem 2rem; 1758 color: var(--button-text-color); 1759 .mikio-text-decoration(none); 1760 overflow: hidden; 1761 transition: all .15s ease-in-out; 1762 1763 span.icon { 1764 width: auto; 1765 height: auto; 1766 min-height: auto; 1767 } 1768 1769 svg { 1770 fill: var(--button-text-color); 1771 } 1772 1773 &:hover { 1774 .mikio-text-decoration(none); 1775 color: var(--button-text-hover-color); 1776 background-color: var(--button-background-hover-color); 1777 border-color: var(--button-border-hover-color); 1778 1779 svg { 1780 fill: var(--button-text-hover-color); 1781 } 1782 } 1783 } 1784 } 1785 } 1786 } 1787 1788 .mikio-config-table-header { 1789 background-color: var(--table-header-row-background-color); 1790 color: var(--table-header-row-text-color); 1791 font-weight: bold; 1792 1793 .mikio-iicon { 1794 vertical-align: text-bottom; 1795 } 1796 } 1797 1798 #extension__list { 1799 ul.extensionList { 1800 li { 1801 border-width: 0 0 1px 0; 1802 border-style: solid; 1803 border-color: var(--table-row-border-color); 1804 padding: .75rem; 1805 margin: 0; 1806 text-align: left; 1807 1808 &:nth-child(odd) { 1809 background-color: var(--table-odd-row-background-color); 1810 color: var(--table-odd-row-text-color); 1811 } 1812 1813 &:nth-child(even) { 1814 background-color: var(--table-even-row-background-color); 1815 color: var(--table-even-row-text-color); 1816 } 1817 } 1818 } 1819 } 1820 1821 button#usrmgr__del { 1822 .mikio-button-danger(); 1823 margin-right: .5rem; 1824 } 1825 1826 #acl__detail div#acl__user { 1827 border-color: var(--toc-border-color); 1828 } 1829 1830 #acl__tree { 1831 background-color: var(--tree-background-color); 1832 border-color: var(--tree-border-color); 1833 color: var(--control-text-color); 1834 1835 // li[role=treeitem] { 1836 // padding-left: 2rem; 1837 // } 1838 1839 a.cur { 1840 background-color: var(--section-edit-highlight); 1841 } 1842 } 1843 1844 #acl_manager table tr { 1845 &:nth-child(odd) { 1846 background-color: var(--table-odd-row-background-color); 1847 color: var(--table-odd-row-text-color); 1848 } 1849 1850 &:nth-child(even) { 1851 background-color: var(--table-even-row-background-color); 1852 color: var(--table-even-row-text-color); 1853 } 1854 } 1855} 1856 1857.mode_admin, 1858.mode_login, 1859.mode_denied, 1860.mode_revisions, 1861.mode_recent, 1862.mode_backlink, 1863.mode_media, 1864.mode_index, 1865.mode_search, 1866.mode_edit, 1867.mode_draft, 1868.mode_preview, 1869.mode_showtag { 1870 .mikio-content, .mikio-page-fill { 1871 .mikio-admin(); 1872 } 1873} 1874 1875.mikio #plugin__styling button.primary { 1876 font-weight: inherit; 1877} 1878 1879.mikio.dokuwiki .secedit { 1880 button { 1881 .mikio-button-small(); 1882 } 1883} 1884 1885.mikio img { 1886 max-width: 100%; 1887 1888 &.media { 1889 margin: .2rem 0; 1890 } 1891 1892 &.medialeft { 1893 margin: .2rem 1em .2rem 0; 1894 } 1895 1896 &.mediaright { 1897 margin: .2rem 0 .2rem 1rem; 1898 } 1899 1900 &.mediacenter { 1901 margin: .2rem auto; 1902 } 1903} 1904 1905.mikio div.dokuwiki div.inclmeta { 1906 margin-top: .5rem; 1907 padding-top: .5rem; 1908} 1909 1910.mikio #dw__login label[for=remember__me] { 1911 margin-left: 0; 1912} 1913 1914.mikio #config__manager { 1915 fieldset { 1916 color: var(--text); 1917 background-color: transparent; 1918 margin: 0; 1919 padding: 0; 1920 1921 legend { 1922 text-align: left; 1923 } 1924 } 1925 1926 tr { 1927 textarea { 1928 color: inherit; 1929 background-color: var(--control-background-color); 1930 } 1931 1932 select { 1933 width: 100%; 1934 background-color: var(--control-background-color); 1935 } 1936 } 1937 1938 td { 1939 &.label { 1940 display: grid; 1941 grid-template-columns: auto 2rem; 1942 1943 span.outkey { 1944 float: none; 1945 font-size: 100%; 1946 background-color: transparent; 1947 margin: 0; 1948 grid-column: 1 / span 1; 1949 grid-row: 1 / span 1; 1950 } 1951 1952 label { 1953 grid-column: 1 / span 1; 1954 grid-row: 2 / span 1; 1955 } 1956 1957 img { 1958 float: none; 1959 grid-column: 2 / span 1; 1960 grid-row: 1 / span 2; 1961 align-self: center; 1962 } 1963 } 1964 1965 input.edit { 1966 width: 100%; 1967 } 1968 } 1969 1970 button[type=submit] { 1971 .mikio-button-submit(); 1972 } 1973} 1974 1975.mode_revisions .mikio-article { 1976 li { 1977 padding: .5rem 1rem; 1978 border-top: 1px solid var(--table-row-border-color); 1979 background-color: var(--table-even-row-background-color); 1980 color: (--table-even-row-text-color); 1981 } 1982 1983 li:nth-child(odd) { 1984 background-color: var(--table-odd-row-background-color); 1985 color: var(--table-odd-row-text-color); 1986 } 1987 1988 .li { 1989 display: grid; 1990 grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem; 1991 align-items: center; 1992 text-align: center; 1993 font-size: 90%; 1994 1995 a.wikilink1 { 1996 text-align: left; 1997 } 1998 1999 span.sizechange { 2000 width: 100%; 2001 font-size: 80%; 2002 border-radius: .2em; 2003 padding: .1em .2em; 2004 color: var(--control-text-color) !important; 2005 } 2006 } 2007 2008 .sum { 2009 display: block; 2010 } 2011} 2012 2013.mode_recent .mikio-article { 2014 ul { 2015 list-style-type: none; 2016 } 2017 2018 li { 2019 padding: .5rem 1rem; 2020 border-top: 1px solid var(--table-row-border-color); 2021 background-color: var(--table-even-row-background-color); 2022 color: var(--table-even-row-text-color); 2023 } 2024 2025 li:nth-child(odd) { 2026 background-color: var(--table-odd-row-background-color); 2027 color: var(--table-odd-row-text-color); 2028 } 2029 2030 .li { 2031 display: grid; 2032 grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem; 2033 align-items: center; 2034 text-align: center; 2035 font-size: 90%; 2036 2037 a.wikilink1, span.curid { 2038 text-align: left; 2039 } 2040 2041 span.sizechange { 2042 width: 100%; 2043 font-size: 80%; 2044 border-radius: .2em; 2045 padding: .1em .2em; 2046 color: var(--control-text-color); 2047 2048 &.positive { 2049 background-color: #cfc; 2050 } 2051 2052 &.negative { 2053 background-color: #fdd; 2054 } 2055 } 2056 } 2057 2058 select { 2059 .mikio-control(); 2060 .mikio-select(); 2061 } 2062} 2063 2064 2065.mikio #mediamanager__page, #media__manager { 2066 width: 100%; 2067 min-width: 100%; 2068 2069 button, .qq-upload-button, .qq-upload-list a { 2070 .mikio-control(); 2071 .mikio-button(); 2072 } 2073 2074 .qq-upload-list a.qq-upload-cancel { 2075 .mikio-button-danger(); 2076 } 2077 2078 button.qq-upload-action { 2079 .mikio-button-submit(); 2080 } 2081 2082 input[type=text], input[type=search], textarea { 2083 .mikio-control(); 2084 .mikio-input-text 2085 } 2086 2087 .ui-resizable-e { 2088 background: transparent; 2089 width: 6px; 2090 right: 2px; 2091 2092 &:hover { 2093 background-color: #999; 2094 } 2095 } 2096 2097 .namespaces { 2098 width: 20%; 2099 min-width: 10em; 2100 left: 0 !important; 2101 2102 h2 { 2103 .mikio-tab-active(); 2104 font-size: 1rem; 2105 } 2106 } 2107 2108 #media__tree { 2109 background-color: var(--tree-background-color); 2110 border-color: var(--tree-border-color); 2111 2112 ul, ul.idx { 2113 margin-top: 0; 2114 margin-bottom: 0; 2115 padding: 0; 2116 list-style-type: none; 2117 2118 ul { 2119 margin-left: 1rem; 2120 } 2121 2122 li { 2123 margin: .25rem 0; 2124 white-space: nowrap; 2125 2126 img { 2127 margin-right: .2rem; 2128 } 2129 } 2130 2131 a { 2132 .mikio-text-decoration(none); 2133 } 2134 2135 div { 2136 display: inline-block; 2137 } 2138 } 2139 } 2140 2141 // .namespaces, #media__tree { 2142 // h2 { 2143 // .mikio-tab-active(); 2144 // font-size: 1rem; 2145 // display: inline-block; 2146 // border-radius: .5rem .5rem 0 0; 2147 // border-width: 1px; 2148 // border-style: solid; 2149 // line-height: 1.4rem; 2150 // position: relative; 2151 // z-index: 2; 2152 // } 2153 2154 .panelHeader { 2155 .mikio-tab-panel(); 2156 } 2157 2158 2159 2160 // } 2161 // } 2162 2163 .filelist { 2164 width: 50%; 2165 min-width: 25em; 2166 left: 0 !important; 2167 } 2168 2169 .filelist, .qq-uploader { 2170 .panelHeader { 2171 .mikio-tab-panel(); 2172 2173 h3 { 2174 width: 100%; 2175 } 2176 } 2177 2178 form.options { 2179 margin-top: 0; 2180 2181 .ui-controlgroup-horizontal label { 2182 margin-right: 0; 2183 } 2184 } 2185 2186 .panelContent { 2187 // padding-top: 1rem; 2188 text-align: center; 2189 2190 ul li:hover { 2191 background-color: initial; 2192 } 2193 } 2194 2195 ul { 2196 margin: 1rem 0 -1px 0; 2197 2198 &.thumbs { 2199 margin: 0; 2200 2201 li { 2202 display: inline-block; 2203 width: 200px; 2204 background-color: var(--tab-active-background-color); 2205 color: var(--tab-active-color); 2206 2207 dt { 2208 text-align: center; 2209 2210 a { 2211 display: block; 2212 width: 100%; 2213 2214 img { 2215 min-height: 90px; 2216 min-width: 90px; 2217 } 2218 } 2219 } 2220 2221 dd { 2222 width: auto; 2223 font-size: 80%; 2224 // color: #666; 2225 margin-bottom: .25rem; 2226 margin-inline-start: 0; 2227 } 2228 2229 .name { 2230 font-weight: normal; 2231 2232 a { 2233 // color: #000; 2234 } 2235 } 2236 } 2237 } 2238 } 2239 2240 ul.rows { 2241 list-style-type: none; 2242 padding: 0; 2243 2244 li { 2245 background-color: var(--table-odd-row-background-color); 2246 color: var(--table-odd-row-text-color); 2247 max-height: none; 2248 font-size: 90%; 2249 // color: var(--text); 2250 overflow: auto; 2251 2252 &:nth-child(2n+1) { 2253 background-color: var(--table-even-row-background-color); 2254 color: var(--table-even-row-text-color); 2255 } 2256 2257 a { 2258 font-weight: normal; 2259 } 2260 2261 dl { 2262 display: flex; 2263 align-items: center; 2264 } 2265 2266 dt { 2267 display: flex; 2268 align-items: center; 2269 justify-content: center; 2270 width: 10%; 2271 2272 a { 2273 height: auto; 2274 width: auto; 2275 2276 img { 2277 display: block; 2278 max-width: 40px; 2279 max-height: 40px; 2280 } 2281 } 2282 } 2283 2284 dd.name { 2285 text-align: left; 2286 width: 30%; 2287 overflow: hidden; 2288 text-overflow: ellipsis; 2289 float: left; 2290 margin-left: 1%; 2291 white-space: nowrap; 2292 } 2293 2294 dd.size { 2295 width: 15%; 2296 } 2297 2298 dd.date { 2299 width: 20%; 2300 } 2301 2302 dd.filesize { 2303 width: 15%; 2304 } 2305 2306 dd { 2307 margin: 0; 2308 font-size: 90%; 2309 } 2310 } 2311 } 2312 2313 .qq-upload-list { 2314 margin-top: 1rem; 2315 2316 li { 2317 &:hover { 2318 background-color: transparent; 2319 } 2320 } 2321 } 2322 2323 .qq-action-container { 2324 margin-top: 1rem; 2325 padding-top: 1rem; 2326 border-top: 1px solid #dee2e6; 2327 } 2328 } 2329 2330 .file { 2331 .panelHeader { 2332 .mikio-tab-panel(); 2333 2334 a { 2335 font-weight: normal; 2336 color: #333; 2337 } 2338 } 2339 2340 ul { 2341 &.tabs { 2342 .mikio-tabs(); 2343 } 2344 } 2345 2346 #mediamanager__btn_delete button { 2347 .mikio-button-danger(); 2348 } 2349 2350 dl { 2351 font-size: 90%; 2352 2353 dt { 2354 padding: .25rem .5rem; 2355 background-color: #f0f0f0; 2356 } 2357 2358 dd { 2359 padding: .25rem .5rem; 2360 background-color: #f8f8f8; 2361 } 2362 } 2363 2364 input[type=text], form.meta textarea.edit { 2365 width: 100%; 2366 min-width: 100%; 2367 max-width: 100%; 2368 } 2369 2370 button[name="mediado[save]"] { 2371 .mikio-button-submit(); 2372 } 2373 } 2374 2375 .panel { 2376 float: left; 2377 } 2378 2379 .panelHeader { 2380 margin: 0 10px 10px 0; 2381 padding: 10px 10px 8px; 2382 font-size: .9rem; 2383 overflow: hidden; 2384 2385 h3 { 2386 float: left; 2387 font-weight: normal; 2388 font-size: 1em; 2389 padding: 0; 2390 margin: 0 0 3px; 2391 } 2392 2393 form.options { 2394 float: right; 2395 } 2396 } 2397 2398 .panelContent { 2399 background-color: var(--tab-active-background-color); 2400 margin: 0 10px 0 0; 2401 border-width: 0 1px 1px 1px; 2402 border-style: solid; 2403 border-color: var(--tab-active-border-color); 2404 padding: .5rem; 2405 } 2406 2407 #media__opts { 2408 border-bottom: 1px solid var(--tab-active-border-color); 2409 padding-bottom: .75rem; 2410 } 2411 2412 #media__content { 2413 .odd, .even { 2414 border-top: 1px solid var(--table-row-border-color); 2415 font-size: 90%; 2416 display: grid; 2417 grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem; 2418 align-items: center; 2419 2420 a.mediafile { 2421 grid-column: 2 / span 1; 2422 grid-row: 1 / span 1; 2423 margin: 0; 2424 word-break: break-word; 2425 } 2426 2427 span.info { 2428 grid-column: 3 / span 1; 2429 grid-row: 1 / span 1; 2430 text-align: center; 2431 2432 br { 2433 display: inline-block; 2434 } 2435 } 2436 2437 a:nth-child(2) { 2438 grid-column: 4 / span 1; 2439 grid-row: 1 / span 1; 2440 text-align: center; 2441 } 2442 2443 a:nth-child(3) { 2444 grid-column: 5 / span 1; 2445 grid-row: 1 / span 1; 2446 text-align: center; 2447 } 2448 2449 a.btn_media_delete { 2450 grid-column: 6 / span 1; 2451 grid-row: 1 / span 1; 2452 text-align: center; 2453 } 2454 2455 div.example, div.clearer, br { 2456 display: none; 2457 } 2458 2459 div.detail { 2460 grid-column: 1 / span 1; 2461 grid-row: 1 / span 1; 2462 padding: 0; 2463 2464 div.thumb { 2465 float: none; 2466 margin: 0; 2467 2468 img { 2469 max-width: 48px; 2470 max-height: 48px; 2471 } 2472 } 2473 } 2474 } 2475 2476 .odd { 2477 background-color: var(--table-odd-row-background-color); 2478 color: var(--table-odd-row-text-color); 2479 } 2480 2481 .even { 2482 background-color: var(--table-even-row-background-color); 2483 color: var(--table-even-row-text-color); 2484 } 2485 } 2486} 2487 2488.mikio.dokuwiki .mode_search .mikio-article { 2489 .search-results-form { 2490 fieldset.search-form { 2491 display: grid; 2492 margin: 0 auto; 2493 width: auto; 2494 max-width: 800px; 2495 grid-template-columns: auto 10rem 10rem; 2496 grid-gap: 1rem; 2497 2498 input[name=q] { 2499 grid-column: 1 / span 1; 2500 grid-row: 1 / span 1; 2501 width: 100%; 2502 } 2503 2504 button[type=submit] { 2505 .mikio-button-submit(); 2506 grid-column: 2 / span 1; 2507 grid-row: 1 / span 1; 2508 } 2509 2510 .toggleAssistant { 2511 .mikio-button-small(); 2512 grid-column: 3 / span 1; 2513 grid-row: 1 / span 1; 2514 flex: 0; 2515 } 2516 2517 .advancedOptions { 2518 grid-column: 1 / span 3; 2519 grid-row: 2 / span 1; 2520 text-align: center; 2521 2522 .toggle { 2523 position: relative; 2524 display: inline-block; 2525 border: 1px solid var(--dropdown-border-color); 2526 background-color: var(--dropdown-background-color); 2527 color: var(--dropdown-color); 2528 border-radius: .25rem; 2529 padding: .375rem .75rem; 2530 text-align: left; 2531 2532 .current { 2533 padding: .2rem 2.2rem .2rem .2rem; 2534 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>'); 2535 background-size: 1.2rem; 2536 background-position: right; 2537 background-repeat: no-repeat; 2538 2539 &:after { 2540 content: ""; 2541 } 2542 } 2543 2544 ul { 2545 position: absolute; 2546 right: 0; 2547 top: .5rem; 2548 padding: .5rem 2rem; 2549 border: 1px solid var(--dropdown-border-color); 2550 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); 2551 background-color: var(--dropdown-background-color); 2552 color: #999; 2553 list-style-type: none; 2554 2555 li { 2556 margin: 0rem; 2557 white-space: nowrap; 2558 } 2559 2560 li.active { 2561 padding: .2rem 0; 2562 display: block; 2563 } 2564 2565 a, a:visited, a:active { 2566 transition: all 0.15s ease-in-out; 2567 color: var(--dropdown-color); 2568 .mikio-text-decoration(none); 2569 font-style: normal; 2570 display: block; 2571 padding: .2rem 2rem; 2572 margin: 0 -2rem; 2573 2574 &:hover { 2575 background-color: var(--dropdown-hover-color); 2576 } 2577 } 2578 } 2579 2580 ul[aria-expanded="false"] { 2581 display: none; 2582 } 2583 } 2584 2585 .toggle + .toggle { 2586 margin-left: 1rem; 2587 } 2588 } 2589 } 2590 } 2591 2592 h2 { 2593 margin-top: .5rem; 2594 padding-top: 1rem; 2595 border-top: 1px solid #dee2e6; 2596 } 2597 2598 .search_quickresult ul { 2599 background-color: #fff; 2600 padding: .5rem 1rem; 2601 list-style-type: none; 2602 2603 li { 2604 float: none; 2605 text-align: left; 2606 padding-left: 0; 2607 2608 &:before { 2609 font-size: 1.2rem; 2610 content:'\2022'; 2611 margin-right:0.5em; 2612 } 2613 2614 .li { 2615 display: inline-block; 2616 } 2617 } 2618 } 2619 2620 div.search_quickresult ul li { 2621 width: auto; 2622 } 2623 2624 .search_fullpage_result { 2625 border-top: 1px solid var(--table-row-border-color); 2626 padding: .75rem; 2627 background-color: var(--table-odd-row-background-color); 2628 color: var(--table-odd-row-text-color); 2629 2630 &:nth-child(2n+1) { 2631 background-color: var(--table-even-row-background-color); 2632 color: var(--table-even-row-text-color); 2633 } 2634 2635 .snippet { 2636 font-size: 90%; 2637 margin-bottom: 0; 2638 } 2639 } 2640} 2641 2642#index__tree { 2643 background-color: var(--tree-background-color); 2644 border: 1px solid var(--tree-border-color); 2645 padding: 0 1rem; 2646 2647 ul { 2648 padding-left: 1rem; 2649 } 2650 2651 a { 2652 // color: var(--text); 2653 .mikio-text-decoration(none); 2654 } 2655 2656 .curid a { 2657 color: var(--section-edit-highlight); 2658 } 2659} 2660 2661.mikio.dokuwiki ul.tabs { 2662 .mikio-tabs(); 2663} 2664 2665.mikio .mode_draft { 2666 table { 2667 margin-bottom: 1rem; 2668 } 2669} 2670 2671#dokuwiki__detail { 2672 .mikio-admin(); 2673 height: 100vh; 2674 padding: 0 2rem; 2675 2676 .content { 2677 display: flex; 2678 2679 .img_detail dl { 2680 display: grid; 2681 grid-template-columns: 4rem auto; 2682 align-items: center; 2683 2684 dt { 2685 font-weight: bold; 2686 } 2687 } 2688 } 2689} 2690 2691/* Plugin Patches */ 2692/* FastWiki Plugin Patch - .mikio .content_partial */ 2693.mikio .content_partial { 2694 .mikio-controls(); 2695} 2696 2697/* Discussion Plugin Patch - .mikio .content_partial */ 2698.mikio div.dokuwiki div.comment_wrapper { 2699 .mikio-controls(); 2700 padding: 1em; 2701 2702 input[type=submit] { 2703 .mikio-control(); 2704 .mikio-button(); 2705 } 2706 2707 h2 { 2708 margin: 0; 2709 } 2710 2711 .comment_form { 2712 margin-top: 0; 2713 } 2714 2715 .comment_subscribe { 2716 input { 2717 float: none; 2718 } 2719 2720 label { 2721 float: none; 2722 display: inline-block; 2723 } 2724 } 2725 2726 .comment_buttons { 2727 float: none; 2728 text-align: right; 2729 margin-top: 1em; 2730 } 2731} 2732 2733/* Mobile */ 2734@media (max-width: 768px) { 2735 .mikio-small-only { 2736 display: inline-block; 2737 } 2738 2739 .mikio-navbar { 2740 padding-bottom: 0; 2741 2742 .mikio-container { 2743 display: grid; 2744 grid-template-columns: auto 3rem; 2745 } 2746 2747 .mikio-navbar-brand { 2748 grid-column: 1 / span 1; 2749 grid-row: 1 / span 1; 2750 margin-bottom: .5rem; 2751 } 2752 2753 .mikio-navbar-toggle { 2754 display: block; 2755 margin-bottom: .5rem; 2756 grid-column: 2 / span 1; 2757 grid-row: 1 / span 1; 2758 } 2759 2760 .mikio-navbar-toggle.closed + .mikio-navbar-collapse { 2761 display: none; 2762 } 2763 2764 .mikio-navbar-collapse { 2765 grid-column: 1 / span 2; 2766 grid-row: 2 / span 1; 2767 flex-direction: column; 2768 margin: 0 -2rem; 2769 padding-top: .5rem; 2770 padding-right: 1rem; 2771 padding-bottom: .5rem; 2772 border-top: 1px solid rgba(0, 0, 0, 0.1); 2773 } 2774 2775 .mikio-nav-item { 2776 display: block; 2777 width: 100%; 2778 padding: .5rem 2rem; 2779 box-sizing: border-box; 2780 text-align: center; 2781 } 2782 2783 .mikio-dropdown-item { 2784 justify-content: center; 2785 } 2786 2787 .mikio-nav { 2788 width: 100%; 2789 flex-direction: column; 2790 } 2791 2792 .mikio-nav-dropdown { 2793 width: 100%; 2794 text-align: center; 2795 margin: 0; 2796 box-sizing: border-box; 2797 } 2798 2799 .mikio-nav-dropdown .mikio-dropdown { 2800 position: relative; 2801 border: 0; 2802 box-shadow: none; 2803 } 2804 } 2805 2806 .mikio-hero { 2807 .mikio-container { 2808 flex-direction: column; 2809 } 2810 2811 .mikio-hero-image-resize { 2812 height: auto; 2813 } 2814 2815 .mikio-hero-image { 2816 background-image: none !important; 2817 } 2818 } 2819 2820 .mode_show .mikio-page .mikio-container { 2821 display: grid; 2822 grid-template-columns: auto 2.5rem; 2823 } 2824 2825 .mode_revisions, 2826 .mode_edit, 2827 .mode_login, 2828 .mode_denied, 2829 .mode_draft, 2830 .mode_preview, 2831 .mode_showtag, 2832 .mode_admin { 2833 .mikio-page { 2834 grid-template-columns: auto; 2835 } 2836 } 2837 2838 .mikio #config__manager td .input, 2839 .mikio #config__manager td input.edit, 2840 .mikio #config__manager tr select { 2841 width: auto; 2842 } 2843 2844 .mikio-content { 2845 grid-column: 1 / span 1; 2846 grid-row: 2 / span 1; 2847 padding-bottom: 1rem; 2848 // padding-right: 0; 2849 // width: auto; 2850 } 2851 2852 /* TOC */ 2853 .mikio .mikio-content .mikio-article { 2854 &.toc-full { 2855 display: block; 2856 } 2857 2858 .mikio-toc { 2859 float: none; 2860 2861 #dw__toc { 2862 max-width: none; 2863 .mikio-iicon.hamburger { 2864 display: none; 2865 } 2866 } 2867 2868 h3.toggle { 2869 background-position: 99% 50%; 2870 text-align: center; 2871 2872 &.closed { 2873 font-size: @ini_toc_font_size; 2874 width: auto; 2875 2876 &:before { 2877 display: none; 2878 } 2879 } 2880 } 2881 } 2882 } 2883 2884 /* Sidebar */ 2885 .mikio-sidebar { 2886 grid-column: 1 / span 2; 2887 width: auto; 2888 2889 .mikio-sidebar-toggle.closed + .mikio-sidebar-collapse { 2890 display: none; 2891 } 2892 2893 &.mikio-sidebar-left { 2894 grid-row: 1 / span 1; 2895 border-right: 0; 2896 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 2897 } 2898 2899 &.mikio-sidebar-right { 2900 grid-row: 3 / span 1; 2901 border-left: 0; 2902 border-top: 1px solid rgba(0, 0, 0, 0.2); 2903 } 2904 2905 .mikio-sidebar-toggle { 2906 display: block; 2907 } 2908 } 2909 2910 /* Page Tools */ 2911 #dw__pagetools { 2912 grid-column: 2 / span 1; 2913 grid-row: 2 / span 1; 2914 } 2915 2916 .mikio.dokuwiki div.ui-admin #admin__version { 2917 padding-right: 1rem; 2918 } 2919 2920 .mikio-page-fill { 2921 .mikio-sidebar { 2922 display: none; 2923 } 2924 } 2925 2926 /* Media Manager */ 2927 .mikio #mediamanager__page, #media__manager { 2928 display: flex; 2929 flex-direction: column; 2930 2931 .ui-resizable-e { 2932 display: none !important; 2933 } 2934 2935 .namespaces, .filelist { 2936 width: auto; 2937 min-width: auto; 2938 } 2939 2940 .panelHeader, .panelContent { 2941 margin-right: 0; 2942 } 2943 } 2944} 2945 2946@media print { 2947 .mikio { 2948 .mikio-navbar-collapse, 2949 .mikio-toc, 2950 .mikio-sidebar, 2951 #dw__pagetools, 2952 .mikio-search { 2953 display: none !important;; 2954 } 2955 2956 .mikio-navbar { 2957 box-shadow: none !important;; 2958 } 2959 2960 .mikio-hero { 2961 .mikio-hero-text { 2962 min-height: auto; 2963 padding-bottom: 0; 2964 } 2965 } 2966 2967 .mikio-breadcrumbs, .mikio-youarehere, .mikio-hero, .mikio-footer { 2968 background-color: #fff !important; 2969 } 2970 } 2971} 2972 2973/* Plugin Patches */ 2974/* BookCreator */ 2975.mikio .bookcreator__bookbar { 2976 font-size: 0.8rem; 2977 display: flex; 2978 width: auto !important; 2979} 2980 2981/* Indexmenu */ 2982.mikio-sidebar .mikio-sidebar-content .dtree { 2983 font-size: inherit; 2984 2985 .dTreeNode { 2986 margin: 0.5rem 0; 2987 2988 .indexmenu_tocbullet { 2989 margin-top: 2px; 2990 margin-left: 2px; 2991 } 2992 2993 a, a.nodeUrl, a.nodeSel, a.node, a.navSel { 2994 display: initial; 2995 margin: initial; 2996 color: #666; 2997 background: transparent; 2998 2999 &:visited, &:active { 3000 display: initial; 3001 margin: initial; 3002 color: #666; 3003 background: transparent; 3004 } 3005 3006 &:hover, &:visited:hover { 3007 color: #333; 3008 text-decoration: none; 3009 background-color: transparent; 3010 } 3011 } 3012 3013 a.navSel { 3014 font-weight: bold; 3015 color: #333; 3016 } 3017 3018 img:last-of-type { 3019 margin-right: 0.2rem; 3020 opacity: 0.5; 3021 } 3022 } 3023} 3024 3025.mikio .indexmenu_toc { 3026 padding: 0 4px 4px 0; 3027 3028 &> div { 3029 border: 1px solid #999; 3030 box-shadow: 2px 2px 2px rgba(0,0,0,0.2); 3031 position: relative; 3032 z-index: 10; 3033 } 3034 3035 .tocheader { 3036 padding: 0.2rem; 3037 border-bottom: 1px solid #ccc; 3038 } 3039 3040 .indexmenu_toc_inside { 3041 border: 0; 3042 padding: 0.2rem; 3043 3044 ul { 3045 margin: 0; 3046 padding: 0 0 0 1.5rem; 3047 3048 .li { 3049 margin-bottom: 0.4rem; 3050 } 3051 } 3052 } 3053} 3054 3055/* struct */ 3056.mikio .mode_admin table { 3057 &.jsoneditor-values { 3058 width: auto; 3059 } 3060 3061 &.jsoneditor-tree, &.jsoneditor-values { 3062 border-bottom: 0; 3063 3064 tbody { 3065 tr { 3066 background: transparent; 3067 } 3068 3069 td { 3070 padding: 0; 3071 3072 &.jsoneditor-separator { 3073 vertical-align: middle; 3074 } 3075 } 3076 3077 } 3078 3079 button { 3080 background-color: transparent; 3081 border: 0; 3082 transition: none; 3083 3084 &:hover { 3085 transition: none; 3086 } 3087 } 3088 3089 div.jsoneditor-value { 3090 background-color: var(--background); 3091 } 3092 } 3093} 3094 3095.ui-controlgroup-horizontal { 3096 label { 3097 .mikio-button(); 3098 .mikio-button-small(); 3099 background-image: none; 3100 border-left-width: 0 !important; 3101 border-right-width: 0 !important; 3102 3103 &:first-of-type { 3104 border-left-width: 1px !important; 3105 } 3106 3107 &:last-of-type { 3108 border-right-width: 1px !important; 3109 } 3110 3111 &:hover { 3112 background-image: none !important; 3113 border-left-width: 0 !important; 3114 border-right-width: 0 !important; 3115 3116 &:first-of-type { 3117 border-left-width: 1px !important; 3118 } 3119 3120 &:last-of-type { 3121 border-right-width: 1px !important; 3122 } 3123 } 3124 } 3125 3126 label.ui-state-active { 3127 .mikio-button-submit(); 3128 } 3129} 3130 3131/* dark-light mode button */ 3132.mikio { 3133 .mikio-darklight { 3134 display: inline-block; 3135 align-self: center; 3136 3137 .mikio-darklight-light { 3138 display: var(--display-theme-light); 3139 } 3140 3141 .mikio-darklight-dark { 3142 display: var(--display-theme-dark); 3143 } 3144 3145 .mikio-darklight-auto { 3146 display: var(--display-theme-auto); 3147 } 3148 } 3149 3150 .mikio-darklight-button { 3151 display: flex; 3152 justify-content: center; 3153 align-items: center; 3154 width: 2.2rem; 3155 height: 2.2rem; 3156 padding: 0; 3157 3158 .mikio-iicon { 3159 margin: 0; 3160 } 3161 } 3162} 3163 3164.mikio.dokuwiki { 3165 #mikio__translate .mikio-dropdown { 3166 min-width: auto; 3167 } 3168 3169 div.plugin_translation { 3170 text-align: left; 3171 3172 &.is-dropdown { 3173 padding-bottom: 0; 3174 3175 ul { 3176 position: relative; 3177 display: block; 3178 3179 li { 3180 a { 3181 display: block; 3182 } 3183 } 3184 } 3185 } 3186 3187 .title { 3188 display: none; 3189 } 3190 3191 ul { 3192 li { 3193 margin: 0; 3194 display: block; 3195 3196 a, span { 3197 margin: 0 -1rem 0 -1rem; 3198 padding: .25rem 1rem .25rem 1rem !important; 3199 background-color: var(--dropdown-background-color) !important; 3200 color: var(--dropdown-color) !important; 3201 } 3202 3203 a:hover { 3204 background-color: var(--dropdown-hover-color) !important; 3205 } 3206 3207 span { 3208 margin-right: 0.1rem; 3209 position: relative; 3210 3211 &:after { 3212 content: ""; 3213 display: inline-block; 3214 position: absolute; 3215 height: 0.75rem; 3216 width: 0.25rem; 3217 margin-top: 0.2rem; 3218 margin-left: 0.75rem; 3219 border-right: 2px solid var(--dropdown-color); 3220 border-bottom: 2px solid var(--dropdown-color); 3221 transform: rotateZ(45deg); 3222 } 3223 } 3224 } 3225 } 3226 } 3227} 3228