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