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