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