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