1/* Utilites */ 2@-webkit-keyframes progress-bar-stripes { 3 from { 4 background-position: 1rem 0; 5 } 6 7 to { 8 background-position: 0 0; 9 } 10} 11 12@keyframes progress-bar-stripes { 13 from { 14 background-position: 1rem 0; 15 } 16 17 to { 18 background-position: 0 0; 19 } 20} 21 22.user-select(@select: none) { 23 -webkit-user-select: @select; 24 -moz-user-select: @select; 25 -ms-user-select: @select; 26 user-select: @select; 27} 28 29.appearance(@appearance: none) { 30 -webkit-appearance: @appearance; 31 -moz-appearance: @appearance; 32} 33 34.display-flex { 35 display: -ms-flexbox; 36 display: flex; 37} 38 39.flex(@val) { 40 -ms-flex: @val; 41 flex: @val; 42} 43 44.flex-direction(@direction) { 45 -ms-flex-direction: @direction; 46 flex-direction: @direction; 47} 48 49.justify-content(@justify) { 50 -ms-flex-pack: @justify; 51 justify-content: @justify; 52} 53 54.align-items(@align) { 55 -ms-align-items: @align; 56 align-items: @align; 57} 58 59.flex-wrap(@wrap) { 60 -webkit-flex-wrap: @wrap; 61 -moz-flex-wrap: @wrap; 62 flex-wrap: @wrap; 63} 64 65.animation(@val) { 66 -webkit-animation: @val; 67 animation: @val; 68} 69 70._mikiop-btn-type(@type: 'primary') { 71 @color: var(~'--mikiop-@{type}-text-color'); 72 @background: var(~'--mikiop-@{type}-background-color'); 73 @border: var(~'--mikiop-@{type}-border-color'); 74 @hovercolor: var(~'--mikiop-@{type}-text-hover-color'); 75 @hoverbackground: var(~'--mikiop-@{type}-background-hover-color'); 76 @hoverborder: var(~'--mikiop-@{type}-border-hover-color'); 77 78 color: @color; 79 background-color: @background; 80 border-color: @border; 81 82 &.mikiop-active { 83 color: @hovercolor; 84 background-color: @hoverbackground; 85 border-color: @hoverborder; 86 } 87 88 &:disabled, 89 &.mikiop-disabled { 90 opacity: 0.65; 91 } 92 93 &:hover:not(.mikiop-disabled) { 94 color: @hovercolor; 95 background-color: @hoverbackground; 96 border-color: @hoverborder; 97 } 98 99 &.mikiop-disabled:hover { 100 cursor: default; 101 } 102} 103 104._mikiop-btn-outline-type(@type: 'primary') { 105 @color: var(~'--mikiop-@{type}-background-color'); 106 @background: transparent; 107 @border: var(~'--mikiop-@{type}-border-color'); 108 @hovercolor: var(~'--mikiop-@{type}-background-hover-color'); 109 @hoverbackground: var(--mikiop-background-color); 110 @hoverborder: var(~'--mikiop-@{type}-border-hover-color'); 111 112 color: @color; 113 background-color: @background; 114 border-color: @border; 115 116 &.mikiop-active { 117 color: @hovercolor; 118 background-color: @hoverbackground; 119 border-color: @hoverborder; 120 } 121 122 &:disabled, 123 &.mikiop-disabled { 124 opacity: 0.65; 125 } 126 127 &:hover:not(.mikiop-disabled) { 128 color: @hovercolor; 129 background-color: @hoverbackground; 130 border-color: @hoverborder; 131 } 132 133 &.mikiop-disabled:hover { 134 cursor: default; 135 } 136} 137 138._mikiop-btn-types { 139 &.mikiop-type-primary { 140 ._mikiop-btn-type('primary'); 141 } 142 143 &.mikiop-type-outline-primary { 144 ._mikiop-btn-outline-type('primary'); 145 } 146 147 &.mikiop-type-secondary { 148 ._mikiop-btn-type('secondary'); 149 } 150 151 &.mikiop-type-outline-secondary { 152 ._mikiop-btn-outline-type('secondary'); 153 } 154 155 &.mikiop-type-success { 156 ._mikiop-btn-type('success'); 157 } 158 159 &.mikiop-type-outline-success { 160 ._mikiop-btn-outline-type('success'); 161 } 162 163 &.mikiop-type-danger { 164 ._mikiop-btn-type('danger'); 165 } 166 167 &.mikiop-type-outline-danger { 168 ._mikiop-btn-outline-type('danger'); 169 } 170 171 &.mikiop-type-warning { 172 ._mikiop-btn-type('warning'); 173 } 174 175 &.mikiop-type-outline-warning { 176 ._mikiop-btn-outline-type('warning'); 177 } 178 179 &.mikiop-type-info { 180 ._mikiop-btn-type('info'); 181 } 182 183 &.mikiop-type-outline-info { 184 ._mikiop-btn-outline-type('info'); 185 } 186 187 &.mikiop-type-light { 188 ._mikiop-btn-type('light'); 189 } 190 191 &.mikiop-type-outline-light { 192 ._mikiop-btn-outline-type('light'); 193 } 194 195 &.mikiop-type-dark { 196 ._mikiop-btn-type('dark'); 197 } 198 199 &.mikiop-type-outline-dark { 200 ._mikiop-btn-outline-type('dark'); 201 } 202 203 &.mikiop-type-link { 204 ._mikiop-btn-type('link'); 205 206 &:hover { 207 text-decoration: underline; 208 } 209 } 210} 211 212._mikiop-btn-sizes(@padding: 1) { 213 &.mikiop-size-small { 214 font-size: 0.875em; 215 border-radius: 0.2em; 216 } 217 218 &.mikiop-size-small when (@padding =0) { 219 padding: 0; 220 } 221 222 &.mikiop-size-small when (@padding =1) { 223 padding: 0.25em 0.5em; 224 } 225 226 &.mikiop-size-large { 227 font-size: 1.25em; 228 border-radius: 0.3em; 229 } 230 231 &.mikiop-size-large when (@padding =0) { 232 padding: 0; 233 } 234 235 &.mikiop-size-large when (@padding =1) { 236 padding: 0.5em 1em; 237 } 238} 239 240._mikiop-type(@type: 'primary') { 241 @color: var(~'--mikiop-@{type}-text-color'); 242 @background: var(~'--mikiop-@{type}-background-color'); 243 @border: var(~'--mikiop-@{type}-border-color'); 244 245 color: @color; 246 background-color: @background; 247 border-color: @border; 248 249 a { 250 color: @color; 251 } 252} 253 254._mikiop-types { 255 &.mikiop-type-primary { 256 ._mikiop-type('primary'); 257 } 258 259 &.mikiop-type-secondary { 260 ._mikiop-type('secondary'); 261 } 262 263 &.mikiop-type-success { 264 ._mikiop-type('success'); 265 } 266 267 &.mikiop-type-danger { 268 ._mikiop-type('danger'); 269 } 270 271 &.mikiop-type-warning { 272 ._mikiop-type('warning'); 273 } 274 275 &.mikiop-type-info { 276 ._mikiop-type('info'); 277 } 278 279 &.mikiop-type-light { 280 ._mikiop-type('light'); 281 } 282 283 &.mikiop-type-dark { 284 ._mikiop-type('dark'); 285 } 286} 287 288._mikiop-alert-types { 289 &.mikiop-type-primary { 290 ._mikiop-type('primary-light'); 291 } 292 293 &.mikiop-type-secondary { 294 ._mikiop-type('secondary-light'); 295 } 296 297 &.mikiop-type-success { 298 ._mikiop-type('success-light'); 299 } 300 301 &.mikiop-type-danger { 302 ._mikiop-type('danger-light'); 303 } 304 305 &.mikiop-type-warning { 306 ._mikiop-type('warning-light'); 307 } 308 309 &.mikiop-type-info { 310 ._mikiop-type('info-light'); 311 } 312 313 &.mikiop-type-light { 314 ._mikiop-type('light-light'); 315 } 316 317 &.mikiop-type-dark { 318 ._mikiop-type('dark-light'); 319 } 320} 321 322._mikiop-col(@width) { 323 .flex(0 0 @width); 324 max-width: @width; 325} 326 327._mikiop-shadows { 328 &.mikiop-shadow { 329 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); 330 } 331 332 &.mikiop-shadow-small { 333 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.275); 334 } 335 336 &.mikiop-shadow-large { 337 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.375); 338 } 339} 340 341._mikiop-text-align { 342 &.mikiop-text-align-left { 343 text-align: left; 344 } 345 346 &.mikiop-text-align-center { 347 text-align: center; 348 } 349 350 &.mikiop-text-align-right { 351 text-align: right; 352 } 353} 354 355._mikiop-flex-text-align { 356 &.mikiop-text-align-left { 357 .align-items(flex-start); 358 } 359 360 &.mikiop-text-align-center { 361 .align-items(center); 362 } 363 364 &.mikiop-text-align-right { 365 .align-items(flex-end); 366 } 367} 368 369._mikiop-align { 370 &.mikiop-align-left { 371 margin-right: auto; 372 } 373 374 &.mikiop-align-center { 375 margin-left: auto; 376 margin-right: auto; 377 } 378 379 &.mikiop-align-right { 380 margin-left: auto; 381 } 382} 383 384._mikiop-vertical-align { 385 &.mikiop-vertical-align-top { 386 .justify-content(flex-start); 387 } 388 389 &.mikiop-vertical-align-middle { 390 .justify-content(center); 391 } 392 393 &.mikiop-vertical-align-bottom { 394 .justify-content(flex-end); 395 } 396 397 &.mikiop-vertical-align-justify { 398 .justify-content(space-between); 399 } 400} 401 402._mikiop-nowrap { 403 white-space: nowrap; 404} 405 406._mikiop-button { 407 display: inline-block; 408 text-decoration: none; 409 font-weight: 400; 410 text-align: center; 411 vertical-align: center; 412 .user-select(none); 413 .appearance(none); 414 background-color: transparent; 415 background-image: none; 416 border: 1px solid transparent; 417 padding: 0.375em 0.75em; 418 font-size: 1em; 419 line-height: 1.5; 420 border-radius: 0.25em; 421 transition: all 0.15s ease-in-out; 422 margin-top: 0.25em; 423 margin-bottom: 0.25em; 424 margin-left: 0.25em; 425 margin-right: 0.25em; 426} 427 428.mikiop-tooltip-banner { 429 position: absolute; 430 z-index: 100000; 431 padding: 0.25em 0.5em; 432 background: var(--mikiop-tooltip-background-color); 433 color: var(--mikiop-tooltip-text-color); 434 border: 1px solid var(--mikiop-tooltip-border-color); 435 border-radius: 0.25em; 436 font-size: 80%; 437 box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.35); 438} 439 440#dokuwiki__site { 441 .mikiop-links-match a { 442 color: inherit; 443 } 444 445 .mikiop-accordian { 446 border: 1px solid var(--mikiop-border-color); 447 border-radius: 0.25em; 448 margin-bottom: 1em; 449 overflow: hidden; 450 451 ._mikiop-shadows; 452 453 .mikiop-accordian-item { 454 ._mikiop-alert-types; 455 ._mikiop-text-align; 456 457 .mikiop-accordian-title { 458 text-decoration: none; 459 display: block; 460 padding: 0.75em 1.25em; 461 background-color: var(--mikiop-header-background-color); 462 border-bottom: 1px solid var(--mikiop-border-color); 463 } 464 465 .mikiop-accordian-body { 466 display: none; 467 min-height: 1px; 468 padding: 1.25em; 469 470 p:last-child { 471 margin: 0; 472 } 473 } 474 } 475 476 .mikiop-accordian-item.mikiop-show { 477 .mikiop-accordian-body { 478 display: block; 479 } 480 } 481 482 .mikiop-accordian-item:not(:last-child) { 483 .mikiop-accordian-body { 484 border-bottom: 1px solid var(--mikiop-border-color); 485 } 486 } 487 488 .mikiop-accordian-item:last-child { 489 .mikiop-accordian-title { 490 border-bottom: 0; 491 } 492 493 .mikiop-accordian-body { 494 border-top: 1px solid var(--mikiop-border-color); 495 } 496 } 497 } 498 499 .mikiop-alert { 500 .display-flex; 501 .flex-direction(row); 502 ._mikiop-alert-types; 503 ._mikiop-shadows; 504 ._mikiop-align; 505 ._mikiop-text-align; 506 padding: 0.75em 1.25em; 507 margin-bottom: 1em; 508 border: 1px solid transparent; 509 border-radius: 0.25em; 510 position: relative; 511 512 .mikiop-alert-icon { 513 padding-right: 0.5em; 514 } 515 516 &.mikiop-dismissible .mikiop-alert-content { 517 padding-right: 2em; 518 } 519 520 .mikiop-alert-content { 521 width: 100%; 522 ._mikiop-text-align; 523 ._mikiop-align; 524 525 span.curid a, 526 a { 527 text-decoration: none; 528 color: inherit; 529 font-weight: 700; 530 531 &:hover { 532 text-decoration: underline; 533 } 534 } 535 536 p:last-child { 537 margin-bottom: 0; 538 } 539 540 .mikiop-alert-close { 541 position: absolute; 542 top: 0; 543 right: 0; 544 padding: 0.5em 0.75em; 545 background-color: transparent; 546 border: 0; 547 font-size: 1.5em; 548 font-weight: 700; 549 line-height: 1; 550 opacity: 0.5; 551 text-decoration: none; 552 transition: all 0.15s ease-in-out; 553 554 &:hover { 555 opacity: 1; 556 text-decoration: none; 557 } 558 } 559 560 ul { 561 list-style: disc; 562 563 li, 564 .li { 565 color: inherit; 566 } 567 } 568 } 569 } 570 571 .mikiop-badge { 572 display: inline-block; 573 padding: 0.25em 0.4em; 574 font-size: 70%; 575 font-weight: 700; 576 line-height: 1; 577 text-align: center; 578 white-space: nowrap; 579 vertical-align: baseline; 580 border-radius: 0.25em; 581 transition: all 0.15s ease-in-out; 582 ._mikiop-types; 583 text-decoration: none; 584 585 &.mikiop-badge-pill { 586 padding-right: 0.6em; 587 padding-left: 0.6em; 588 border-radius: 10em; 589 } 590 591 ._mikiop-shadows; 592 ._mikiop-text-align; 593 } 594 595 .mikiop-blockquote { 596 margin-bottom: 1em; 597 padding: 0; 598 font-size: 1.25em; 599 border: 0; 600 ._mikiop-text-align; 601 602 p { 603 margin-bottom: 0; 604 } 605 606 .mikiop-blockquote-footer { 607 &:before { 608 content: '\2014\00A0'; 609 } 610 611 display: block; 612 font-size: 80%; 613 color: var(--mikiop-secondary-background-color); 614 } 615 } 616 617 .mikiop-box { 618 position: relative; 619 .display-flex; 620 .flex-direction(column); 621 padding: 0; 622 border: 1px solid transparent; 623 margin-bottom: 1em; 624 625 ._mikiop-types; 626 ._mikiop-shadows; 627 ._mikiop-text-align; 628 ._mikiop-vertical-align; 629 630 p, 631 img, 632 a.media, 633 svg, 634 span.curid, 635 .mikiop-placeholder { 636 width: 100%; 637 height: 100%; 638 object-fit: cover; 639 overflow: hidden; 640 border-radius: inherit; 641 margin: 0; 642 } 643 644 p:last-child { 645 margin-bottom: 0; 646 } 647 648 .mikiop-reveal { 649 position: absolute; 650 display: flex; 651 justify-content: center; 652 align-items: center; 653 top: 0; 654 left: 0; 655 height: 100%; 656 width: 100%; 657 background-color: var(--mikiop-secondary-background-color); 658 color: var(--mikiop-secondary-text-color); 659 font-weight: 500; 660 } 661 } 662 663 a.mikiop-box { 664 text-decoration: none; 665 transition: all 0.15s ease-in-out; 666 667 &:hover { 668 background-color: var(--mikiop-border-color); 669 } 670 } 671 672 .mikiop-button { 673 ._mikiop-button; 674 color: var(--mikiop-secondary-text-color); 675 676 &:hover { 677 color: var(--mikiop-secondary-text-hover-color); 678 text-decoration: none; 679 } 680 681 ._mikiop-btn-types; 682 ._mikiop-btn-sizes; 683 ._mikiop-shadows; 684 ._mikiop-text-align; 685 ._mikiop-align; 686 687 .mikiop-nowrap { 688 ._mikiop-nowrap; 689 } 690 691 &.mikiop-block { 692 display: block; 693 } 694 695 .mikiop-badge { 696 position: relative; 697 top: -1px; 698 } 699 } 700 701 .mikiop-button-group { 702 ._mikiop-btn-sizes(0); 703 704 &.mikiop-shadow .mikiop-button-group-inner { 705 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); 706 } 707 708 &.mikiop-shadow-small .mikiop-button-group-inner { 709 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.275); 710 } 711 712 &.mikiop-shadow-large .mikiop-button-group-inner { 713 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.375); 714 } 715 716 &.mikiop-align-left { 717 text-align: left; 718 } 719 720 &.mikiop-align-center { 721 text-align: center; 722 } 723 724 &.mikiop-align-right { 725 text-align: right; 726 } 727 728 &.mikiop-vertical .mikiop-button-group-inner { 729 .flex-direction(column); 730 .justify-content(center); 731 732 .mikiop-button:not(:last-child) { 733 border-bottom-left-radius: 0; 734 border-bottom-right-radius: 0; 735 } 736 737 .mikiop-button:not(:first-child) { 738 border-top-left-radius: 0; 739 border-top-right-radius: 0; 740 } 741 } 742 743 &:not(.mikiop-vertical) .mikiop-button:not(:last-child) { 744 border-top-right-radius: 0; 745 border-bottom-right-radius: 0; 746 } 747 748 &:not(.mikiop-vertical) .mikiop-button:not(:first-child) { 749 border-top-left-radius: 0; 750 border-bottom-left-radius: 0; 751 } 752 753 .mikiop-button-group-inner { 754 position: relative; 755 display: inline-flex; 756 vertical-align: middle; 757 margin-top: 0.25em; 758 margin-bottom: 0.25em; 759 760 .mikiop-button { 761 position: relative; 762 flex: 1 1 auto; 763 margin: 0; 764 } 765 } 766 } 767 768 .mikiop-card { 769 position: relative; 770 .display-flex; 771 .flex-direction(column); 772 word-wrap: break-word; 773 background-color: var(--mikiop-background-color); 774 background-clip: border-box; 775 border: 1px solid var(--mikiop-border-color); 776 border-radius: 0.25em; 777 margin-bottom: 2em; 778 overflow: hidden; 779 margin: 0.75em; 780 .flex(1); 781 height: 100%; 782 783 ._mikiop-shadows; 784 ._mikiop-types; 785 ._mikiop-text-align; 786 787 .mikiop-card-body { 788 .display-flex; 789 .flex(1 1 100%); 790 .flex-direction(column); 791 ._mikiop-vertical-align; 792 ._mikiop-text-align; 793 // min-height: 1px; 794 padding: 1.25em; 795 box-sizing: border-box; 796 797 p { 798 margin-top: 0; 799 } 800 801 .mikiop-card-footer { 802 display: flex; 803 flex: 1; 804 flex-direction: column; 805 justify-content: flex-end; 806 border-top: 0; 807 padding: 0; 808 } 809 } 810 811 .mikiop-card-header { 812 ._mikiop-text-align; 813 padding: 0.75em 1.25em; 814 background-color: var(--mikiop-header-background-color); 815 border-bottom: 1px solid var(--mikiop-border-color); 816 } 817 818 .mikiop-card-footer { 819 ._mikiop-text-align; 820 padding: 0.75em 1.25em; 821 background-color: var(--mikiop-footer-background-color); 822 border-top: 1px solid var(--mikiop-border-color); 823 color: var(--mikiop-secondary-background-color); 824 825 small { 826 font-size: 80%; 827 } 828 } 829 830 .mikiop-card-title { 831 ._mikiop-text-align; 832 font-size: 1.25em; 833 font-weight: 600; 834 margin-bottom: 0.75em; 835 margin-top: 0; 836 } 837 838 .mikiop-card-subtitle { 839 ._mikiop-text-align; 840 color: var(--mikiop-secondary-background-color); 841 font-weight: 600; 842 margin-top: -1em; 843 margin-bottom: 0.5em; 844 } 845 846 &.mikiop-horizontal { 847 display: grid; 848 grid-template-columns: 33.333333% 66.666667%; 849 850 .mikiop-card-horizontal-image { 851 overflow: hidden; 852 margin-bottom: -1px; 853 854 .mikiop-placeholder { 855 height: 101%; 856 } 857 } 858 859 .mikiop-card-header, 860 .mikiop-card-footer { 861 border: 0; 862 background-color: transparent; 863 } 864 865 .mikiop-card-body { 866 justify-content: center; 867 height: 100%; 868 } 869 } 870 871 &.mikiop-overlay { 872 873 img, 874 a.media, 875 svg, 876 span.curid, 877 .mikiop-placeholder { 878 position: absolute; 879 border-radius: inherit; 880 } 881 882 .mikiop-placeholder { 883 height: 101%; 884 } 885 886 .mikiop-card-header, 887 .mikiop-card-footer { 888 border: 0; 889 background-color: transparent; 890 } 891 892 div, 893 p { 894 z-index: 2; 895 } 896 } 897 898 p:last-child, 899 .mikiop-blockquote { 900 margin-bottom: 0; 901 } 902 903 img, 904 a.media, 905 svg, 906 span.curid, 907 .mikiop-placeholder { 908 width: 100%; 909 height: 100%; 910 object-fit: contain; 911 overflow: hidden; 912 margin: 0; 913 914 &:first-child { 915 border-top-left-radius: inherit; 916 border-top-right-radius: inherit; 917 } 918 919 &:last-child { 920 border-bottom-left-radius: inherit; 921 border-bottom-right-radius: inherit; 922 } 923 924 &.mikiop-image-cover { 925 object-fit: cover; 926 } 927 } 928 929 .mikiop-placeholder { 930 margin-top: -1px; 931 margin-left: -1px; 932 width: 101%; 933 } 934 } 935 936 .mikiop-carousel { 937 position: relative; 938 margin-bottom: 2em; 939 height: 40em; 940 941 &.mikiop-image-cover { 942 .mikiop-carousel-inner img { 943 object-fit: cover; 944 } 945 } 946 947 .mikiop-carousel-inner { 948 position: relative; 949 width: 100%; 950 height: 100%; 951 overflow: hidden; 952 } 953 954 .mikiop-carousel-item { 955 display: none; 956 position: absolute; 957 top: 0; 958 left: 0; 959 bottom: 0; 960 width: 100%; 961 962 &.mikiop-active { 963 z-index: 1; 964 display: block; 965 } 966 967 .mikiop-placeholder { 968 width: 100%; 969 height: 100%; 970 } 971 972 .mikiop-carousel-caption { 973 background-color: var(--mikiop-carousel-caption-background-color); 974 position: absolute; 975 bottom: 0; 976 left: 0; 977 right: 0; 978 text-align: center; 979 padding: 2em; 980 981 .mikiop-carousel-caption-title, 982 .mikiop-carousel-caption-title a { 983 font-size: 1.25em; 984 margin-bottom: 0.5em; 985 font-weight: 500; 986 line-height: 1.2; 987 color: var(--mikiop-carousel-text-color); 988 } 989 990 .mikiop-carousel-caption-title a { 991 &:hover { 992 text-decoration: underline; 993 } 994 } 995 996 p { 997 color: var(--mikiop-carousel-caption-text-color); 998 margin-bottom: 0; 999 } 1000 } 1001 1002 img { 1003 width: 100%; 1004 height: 100%; 1005 object-fit: contain; 1006 overflow: hidden; 1007 } 1008 } 1009 1010 .mikiop-carousel-control { 1011 position: absolute; 1012 z-index: 1; 1013 top: 40%; 1014 bottom: 40%; 1015 .display-flex; 1016 .justify-content(center); 1017 .align-items(center); 1018 width: 15%; 1019 text-align: center; 1020 opacity: 0.5; 1021 transition: all 0.15s ease; 1022 background-repeat: no-repeat; 1023 background-size: 2em; 1024 background-position: 50%; 1025 1026 &.mikiop-carousel-control-next { 1027 right: 0; 1028 } 1029 1030 svg { 1031 fill: var(--mikiop-carousel-control-fill-color); 1032 stroke: var(--mikiop-carousel-control-stroke-color); 1033 stroke-width: 0.2px; 1034 } 1035 1036 &:hover { 1037 opacity: 1; 1038 } 1039 } 1040 1041 .mikiop-carousel-indicators { 1042 position: absolute; 1043 right: 0; 1044 bottom: 0; 1045 left: 0; 1046 z-index: 15; 1047 margin: 0.5em 0 0 0; 1048 padding: 0; 1049 .display-flex; 1050 .justify-content(center); 1051 list-style: none; 1052 1053 .mikiop-carousel-indicator { 1054 width: 30px; 1055 height: 3px; 1056 margin: 1em 0.25em; 1057 padding: 0; 1058 background-color: var(--mikiop-carousel-indicator-color); 1059 transition: all 0.6s ease; 1060 opacity: 0.5; 1061 1062 &.mikiop-active { 1063 opacity: 1; 1064 } 1065 } 1066 1067 &.mikiop-carousel-indicators-circle { 1068 .mikiop-carousel-indicator { 1069 border: 1px solid var(--mikiop-carousel-indicator-color); 1070 border-radius: 50%; 1071 width: 10px; 1072 height: 10px; 1073 } 1074 } 1075 } 1076 } 1077 1078 .mikiop-col { 1079 .flex(1 0 0); 1080 .display-flex; 1081 .flex-direction(column); 1082 // .justify-content(space-between); 1083 ._mikiop-vertical-align; 1084 margin: 0; 1085 box-sizing: border-box; 1086 border-style: solid; 1087 border-width: 0; 1088 1089 &.mikiop-col-1 { 1090 ._mikiop-col(8.333333%); 1091 } 1092 1093 &.mikiop-col-2 { 1094 ._mikiop-col(16.666667%); 1095 } 1096 1097 &.mikiop-col-3 { 1098 ._mikiop-col(25%); 1099 } 1100 1101 &.mikiop-col-4 { 1102 ._mikiop-col(33.333333%); 1103 } 1104 1105 &.mikiop-col-5 { 1106 ._mikiop-col(41.666667%); 1107 } 1108 1109 &.mikiop-col-6 { 1110 ._mikiop-col(50%); 1111 } 1112 1113 &.mikiop-col-7 { 1114 ._mikiop-col(58.333333%); 1115 } 1116 1117 &.mikiop-col-8 { 1118 ._mikiop-col(66.666667%); 1119 } 1120 1121 &.mikiop-col-9 { 1122 ._mikiop-col(75%); 1123 } 1124 1125 &.mikiop-col-10 { 1126 ._mikiop-col(83.333333%); 1127 } 1128 1129 &.mikiop-col-11 { 1130 ._mikiop-col(91.666667%); 1131 } 1132 1133 &.mikiop-col-12 { 1134 ._mikiop-col(100%); 1135 } 1136 1137 &:first-child { 1138 padding-left: 0; 1139 } 1140 1141 &:last-child { 1142 padding-right: 0; 1143 } 1144 1145 .mikiop-card { 1146 margin-bottom: 0; 1147 } 1148 1149 &.mikiop-col-full { 1150 .flex(0 0 100%); 1151 } 1152 } 1153 1154 .mikiop-grid { 1155 display: grid; 1156 box-sizing: border-box; 1157 1158 .mikiop-box { 1159 margin: 0; 1160 } 1161 } 1162 1163 .mikiop-heading { 1164 margin-top: 0; 1165 margin-bottom: 0.5em; 1166 } 1167 1168 .mikiop-hr { 1169 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1170 border-top: 1px solid rgba(0, 0, 0, 0.1); 1171 } 1172 1173 .mikiop-list-group { 1174 .display-flex; 1175 .flex-direction(column); 1176 1177 list-style: none; 1178 border-radius: 0.25em; 1179 padding-left: 0; 1180 1181 ._mikiop-shadows; 1182 1183 .mikiop-list-group-item { 1184 // .display-flex; 1185 // .align-items(center); 1186 // .justify-content(space-between); 1187 1188 color: inherit; 1189 padding: 0.75rem 1.25rem; 1190 margin: 0; 1191 border: 1px solid var(--mikiop-border-color); 1192 box-sizing: border-box; 1193 1194 ._mikiop-alert-types; 1195 1196 &.mikiop-content-vertical { 1197 .flex-direction(column); 1198 .align-items(flex-start); 1199 ._mikiop-flex-text-align; 1200 } 1201 1202 &+.mikiop-list-group-item { 1203 border-top-width: 0; 1204 } 1205 1206 &:first-child { 1207 border-top-left-radius: 0.25em; 1208 border-top-right-radius: 0.25em; 1209 } 1210 1211 &:last-child { 1212 border-bottom-left-radius: 0.25em; 1213 border-bottom-right-radius: 0.25em; 1214 } 1215 1216 &.mikiop-active { 1217 ._mikiop-type('primary'); 1218 } 1219 1220 &.mikiop-disabled { 1221 opacity: 0.65; 1222 pointer-events: none; 1223 } 1224 1225 .mikiop-list-group-item-link { 1226 display: block; 1227 width: 100%; 1228 color: inherit; 1229 text-decoration: none; 1230 padding: 0.75rem 1.25rem; 1231 margin: -0.75rem -1.25rem; 1232 1233 &:hover { 1234 background-color: var(--mikiop-light-background-hover-color); 1235 } 1236 } 1237 1238 &.mikiop-active, 1239 &.mikiop-type-primary, 1240 &.mikiop-type-secondary, 1241 &.mikiop-type-success, 1242 &.mikiop-type-warning, 1243 &.mikiop-type-danger, 1244 &.mikiop-type-light, 1245 &.mikiop-type-dark { 1246 .mikiop-list-group-item-link:hover { 1247 background-color: inherit; 1248 } 1249 } 1250 1251 p:last-child { 1252 margin-bottom: 0; 1253 } 1254 } 1255 1256 &.mikiop-flush { 1257 margin-bottom: 0; 1258 1259 .mikiop-list-group-item { 1260 border-left-width: 0; 1261 border-right-width: 0; 1262 1263 &:first-child { 1264 border-top-width: 0; 1265 } 1266 1267 &:last-child { 1268 border-bottom-width: 0; 1269 } 1270 } 1271 } 1272 1273 &.mikiop-horizontal { 1274 .flex-direction(row); 1275 1276 .mikiop-list-group-item { 1277 &+.mikiop-list-group-item { 1278 border-top-width: 1px; 1279 border-left-width: 0; 1280 } 1281 1282 &:first-child { 1283 border-top-left-radius: 0.25em; 1284 border-top-right-radius: 0; 1285 border-bottom-left-radius: 0.25em; 1286 } 1287 1288 &:last-child { 1289 border-top-left-radius: 0; 1290 border-top-right-radius: 0.25em; 1291 border-bottom-right-radius: 0.25em; 1292 } 1293 } 1294 } 1295 } 1296 1297 .mikiop-nav { 1298 cursor: pointer; 1299 position: relative; 1300 display: inline-block; 1301 1302 .mikiop-nav-title { 1303 display: inline-block; 1304 position: relative; 1305 padding-right: 1.5em; 1306 1307 &::after { 1308 content: ''; 1309 position: absolute; 1310 right: 5px; 1311 top: 40%; 1312 border: solid black; 1313 border-width: 0 2px 2px 0; 1314 display: inline-block; 1315 padding: 3px; 1316 transform: translateY(-50%) rotate(45deg); 1317 -webkit-transform: translateY(-50%) rotate(45deg); 1318 } 1319 } 1320 1321 .mikiop-nav-icon { 1322 display: inline-block; 1323 margin-right: 0.25em; 1324 } 1325 1326 ul { 1327 display: none; 1328 position: absolute; 1329 z-index: 1000; 1330 border-width: var(--mikiop-nav-dropdown-border-width); 1331 border-style: var(--mikiop-nav-dropdown-border-style); 1332 border-color: var(--mikiop-nav-dropdown-border-color); 1333 background-color: var(--mikiop-nav-dropdown-background-color); 1334 margin: 0; 1335 padding: 1rem; 1336 list-style-type: none; 1337 box-shadow: var(--mikiop-nav-dropdown-shadow); 1338 min-width: 12em; 1339 1340 li { 1341 padding: 0.25em 0.5em; 1342 1343 &:hover { 1344 background-color: var(--mikiop-nav-dropdown-hover-color); 1345 } 1346 1347 a, 1348 a:visited, 1349 a:hover { 1350 text-decoration: none; 1351 color: initial; 1352 margin: 0; 1353 } 1354 } 1355 } 1356 1357 &.mikiop-nav-open { 1358 ul { 1359 display: block; 1360 } 1361 } 1362 } 1363 1364 .mikiop-pagination, 1365 .mikiop-pagenation { 1366 text-align: center; 1367 1368 .mikiop-pagination-inner, 1369 .mikiop-pagenation-inner { 1370 display: inline-block; 1371 list-style: none; 1372 padding-left: 0; 1373 1374 .mikiop-pagination-item, 1375 .mikiop-pagenation-item { 1376 display: inline-block; 1377 padding: 0; 1378 border: 1px solid var(--mikiop-pagination-border-color); 1379 border-radius: 0.25em; 1380 margin: 0; 1381 1382 a { 1383 padding: 0.5em 0.75em; 1384 color: var(--mikiop-pagination-text-color); 1385 text-decoration: none; 1386 display: block; 1387 1388 &:hover { 1389 text-decoration: none; 1390 color: var(--mikiop-pagination-text-hover-color); 1391 background-color: var(--mikiop-pagination-background-hover-color); 1392 } 1393 } 1394 1395 &:not(:last-child) { 1396 border-right-width: 0; 1397 border-bottom-right-radius: 0; 1398 border-top-right-radius: 0; 1399 } 1400 1401 &:not(:first-child) { 1402 border-bottom-left-radius: 0; 1403 border-top-left-radius: 0; 1404 } 1405 1406 &:first-child a { 1407 border-bottom-left-radius: 0.25em; 1408 border-top-left-radius: 0.25em; 1409 } 1410 1411 &:last-child a { 1412 border-bottom-right-radius: 0.25em; 1413 border-top-right-radius: 0.25em; 1414 } 1415 1416 &.mikiop-active { 1417 a { 1418 color: var(--mikiop-pagination-text-active-color); 1419 background-color: var(--mikiop-pagination-background-active-color); 1420 } 1421 } 1422 1423 &.mikiop-disabled { 1424 a { 1425 pointer-events: none; 1426 opacity: var(--mikiop-pagination-background-disabled-opacity); 1427 background-color: var(--mikiop-pagination-background-disabled-color); 1428 color: var(--mikiop-pagination-text-disabled-color); 1429 } 1430 } 1431 } 1432 } 1433 } 1434 1435 .mikiop-placeholder { 1436 display: flex; 1437 1438 svg { 1439 width: 100%; 1440 height: 100%; 1441 } 1442 } 1443 1444 .mikiop-progress { 1445 .display-flex; 1446 overflow: hidden; 1447 line-height: 0; 1448 font-size: 0.75em; 1449 background-color: var(--mikiop-border-color); 1450 border-radius: 0.25em; 1451 margin-bottom: 1em; 1452 } 1453 1454 .mikiop-progress-bar { 1455 .display-flex; 1456 .flex-direction(column); 1457 .justify-content(center); 1458 text-align: center; 1459 overflow: hidden; 1460 white-space: no-wrap; 1461 ._mikiop-types; 1462 transition: all 0.6s ease; 1463 1464 &.mikiop-striped { 1465 background-image: linear-gradient(45deg, 1466 rgba(255, 255, 255, 0.15) 25%, 1467 transparent 25%, 1468 transparent 50%, 1469 rgba(255, 255, 255, 0.15) 50%, 1470 rgba(255, 255, 255, 0.15) 75%, 1471 transparent 75%, 1472 transparent); 1473 background-size: 1em 1em; 1474 } 1475 1476 &.mikiop-animated { 1477 .animation(progress-bar-stripes 1s linear infinite); 1478 } 1479 } 1480 1481 .mikiop-row { 1482 .display-flex; 1483 1484 margin: 0; 1485 border-style: solid; 1486 border-width: 0; 1487 1488 &:first-child { 1489 padding-top: 0; 1490 } 1491 1492 &:last-child { 1493 padding-bottom: 0; 1494 margin-bottom: 2em; 1495 } 1496 1497 .mikiop-row { 1498 margin-bottom: 0; 1499 } 1500 } 1501 1502 .mikiop-statistic { 1503 font-size: 4em; 1504 text-align: center; 1505 display: inline-block; 1506 margin: 0 0.25em; 1507 1508 .mikiop-statistic-title { 1509 font-size: 0.3em; 1510 line-height: 0.3em; 1511 } 1512 } 1513 1514 .mikiop-steps { 1515 list-style: none; 1516 padding-left: 0; 1517 display: inline-flex; 1518 1519 ._mikiop-shadows; 1520 1521 .mikiop-step { 1522 position: relative; 1523 display: flex; 1524 align-items: center; 1525 padding: 1em 2em; 1526 border-width: 1px 0 1px 1px; 1527 border-style: solid; 1528 border-color: var(--mikiop-steps-border-color); 1529 border-radius: 0.25em; 1530 margin-left: 0; 1531 color: var(--mikiop-steps-step-text-color); 1532 background-color: var(--mikiop-steps-step-background-color); 1533 font-size: 0.9em; 1534 1535 ._mikiop-alert-types; 1536 1537 a { 1538 color: inherit; 1539 } 1540 1541 .mikiop-step-icon { 1542 margin-right: 0.5em; 1543 font-size: 2em; 1544 } 1545 1546 .mikiop-step-title { 1547 font-size: 1.25em; 1548 font-weight: 500; 1549 } 1550 1551 &.mikiop-complete { 1552 background-color: var(--mikiop-steps-step-background-complete-color); 1553 1554 &:after { 1555 background-color: inherit; 1556 } 1557 } 1558 1559 &:after { 1560 position: absolute; 1561 content: ''; 1562 z-index: 2; 1563 border-width: 0 1px 1px 0; 1564 border-style: solid; 1565 border-color: var(--mikiop-steps-border-color); 1566 background-color: inherit; 1567 top: 50%; 1568 right: 0; 1569 width: 16px; 1570 height: 16px; 1571 transform: translateY(-50%) translateX(50%) rotate(-45deg); 1572 } 1573 1574 &:not(:first-of-type) { 1575 border-top-left-radius: 0; 1576 border-bottom-left-radius: 0; 1577 } 1578 1579 &:not(:last-of-type) { 1580 border-top-right-radius: 0; 1581 border-bottom-right-radius: 0; 1582 } 1583 1584 &:last-of-type { 1585 border-right-width: 1px; 1586 } 1587 1588 &:last-of-type:after { 1589 display: none; 1590 } 1591 1592 p { 1593 margin-bottom: 0; 1594 } 1595 } 1596 } 1597 1598 .mikiop-tab-group { 1599 .display-flex; 1600 .flex-wrap(wrap); 1601 margin-bottom: 0; 1602 list-style: none; 1603 1604 background-color: var(--mikiop-header-background-color); 1605 border: 1px solid var(--mikiop-border-color); 1606 border-top-left-radius: 0.25em; 1607 border-top-right-radius: 0.25em; 1608 padding-left: 1em; 1609 padding-top: 0.5em; 1610 1611 .mikiop-tab-item { 1612 margin-left: 0; 1613 1614 a { 1615 color: var(--mikiop-link-text-color); 1616 text-decoration: none; 1617 border: 1px solid transparent; 1618 border-top-left-radius: 0.25em; 1619 border-top-right-radius: 0.25em; 1620 margin-bottom: -1px; 1621 display: block; 1622 padding: 0.5em 1em; 1623 transition: all 0.15s ease-in-out; 1624 1625 &:not(.mikiop-active):hover { 1626 border-color: var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-border-color); 1627 color: var(--mikiop-link-text-hover-color); 1628 } 1629 1630 &.mikiop-active { 1631 border-color: var(--mikiop-border-color) var(--mikiop-border-color) var(--mikiop-tabgroup-tab-background-active-color); 1632 background-color: var(--mikiop-tabgroup-tab-background-active-color); 1633 color: var(--mikiop-tabgroup-tab-text-active-color); 1634 } 1635 } 1636 1637 &.mikiop-disabled { 1638 a { 1639 opacity: 0.65; 1640 } 1641 1642 pointer-events: none; 1643 } 1644 } 1645 1646 &.mikiop-pills { 1647 padding-bottom: 0.5em; 1648 1649 .mikiop-tab-item { 1650 a { 1651 ._mikiop-button; 1652 margin-right: 0.5em; 1653 1654 &.mikiop-active { 1655 ._mikiop-btn-type('primary'); 1656 } 1657 1658 &:not(.mikiop-active):hover { 1659 border-color: transparent; 1660 } 1661 } 1662 } 1663 } 1664 } 1665 1666 .mikiop-tab-content { 1667 border-width: 0 1px 1px 1px; 1668 border-style: solid; 1669 border-color: var(--mikiop-border-color); 1670 border-bottom-left-radius: 0.25em; 1671 border-bottom-right-radius: 0.25em; 1672 padding: 0.5em 1em; 1673 margin-bottom: 1em; 1674 1675 .mikiop-tab-pane { 1676 display: none; 1677 1678 &.mikiop-show { 1679 display: block; 1680 } 1681 } 1682 } 1683 1684 .mikiop-quiz { 1685 border: 1px solid var(--mikiop-border-color); 1686 border-radius: 0.25em; 1687 margin-bottom: 2em; 1688 1689 .mikiop-quiz-question { 1690 font-weight: 500; 1691 font-size: 1.25em; 1692 padding: 1.25em 0.75em 0 1.25em; 1693 } 1694 1695 p { 1696 padding: 0 1.5em; 1697 margin-bottom: 0; 1698 } 1699 1700 .mikiop-quiz-options { 1701 padding: 0.75em 1.25em; 1702 margin-bottom: 0.5em; 1703 } 1704 1705 .mikiop-quiz-result { 1706 margin-bottom: 1em; 1707 } 1708 1709 .mikiop-quiz-option { 1710 input { 1711 margin: 0 0.5em; 1712 } 1713 } 1714 1715 .mikiop-quiz-status { 1716 padding: 0.75em 1.25em; 1717 background-color: var(--mikiop-header-background-color); 1718 border-top: 1px solid rgba(0, 0, 0, 0.125); 1719 color: var(--mikiop-secondary-background-color); 1720 display: flex; 1721 align-items: center; 1722 1723 button { 1724 margin-left: 1em; 1725 } 1726 } 1727 } 1728 1729 .mikiop-right-sidebar { 1730 float: right; 1731 } 1732} 1733 1734._mikiop-custom-type(@type) { 1735 #dokuwiki__content { 1736 .mikiop-button { 1737 &.mikiop-type-@{type} { 1738 ._mikiop-btn-type('@{type}'); 1739 } 1740 1741 &.mikiop-type-outline-@{type} { 1742 ._mikiop-btn-outline-type('@{type}'); 1743 } 1744 } 1745 1746 .mikiop-badge, 1747 .mikiop-box, 1748 .mikiop-card, 1749 .mikiop-progress-bar { 1750 &.mikiop-type-@{type} { 1751 ._mikiop-type('@{type}'); 1752 } 1753 } 1754 1755 .mikiop-accordian-item, 1756 .mikiop-alert, 1757 .mikiop-list-group, 1758 .mikiop-step { 1759 &.mikiop-type-@{type} { 1760 ._mikiop-type('@{type}'); 1761 } 1762 } 1763 1764 .mikiop-list-group-item { 1765 &.mikiop-type-@{type} { 1766 .mikiop-list-group-item-link:hover { 1767 background-color: inherit; 1768 } 1769 } 1770 } 1771 } 1772} 1773 1774@media (max-width: 960px) { 1775 #dokuwiki__content { 1776 .mikiop-row { 1777 .flex-wrap(wrap); 1778 } 1779 1780 .mikiop-col { 1781 .flex(0 0 100%) !important; 1782 max-width: 100% !important; 1783 padding: 0; 1784 } 1785 1786 .mikiop-grid { 1787 .display-flex; 1788 .flex-direction(column); 1789 } 1790 1791 .mikiop-card { 1792 height: auto; 1793 } 1794 } 1795} 1796 1797#dokuwiki__site .mikio-sidebar-content .mikiop-nav ul li { 1798 1799 a, 1800 a:visited, 1801 a:hover { 1802 color: var(--sidebar-link-color); 1803 } 1804}