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__site { 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-nav { 1245 cursor: pointer; 1246 position: relative; 1247 display: inline-block; 1248 1249 .mikiop-nav-title { 1250 display: inline-block; 1251 position: relative; 1252 padding-right: 1.5em; 1253 1254 &::after { 1255 content: ''; 1256 position: absolute; 1257 right: 5px; 1258 top: 40%; 1259 border: solid black; 1260 border-width: 0 2px 2px 0; 1261 display: inline-block; 1262 padding: 3px; 1263 transform: translateY(-50%) rotate(45deg); 1264 -webkit-transform: translateY(-50%) rotate(45deg); 1265 } 1266 } 1267 1268 .mikiop-nav-icon { 1269 display: inline-block; 1270 margin-right: 0.25em; 1271 } 1272 1273 ul { 1274 display: none; 1275 position: absolute; 1276 z-index: 1000; 1277 border-width: var(--mikiop-nav-dropdown-border-width); 1278 border-style: var(--mikiop-nav-dropdown-border-style); 1279 border-color: var(--mikiop-nav-dropdown-border-color); 1280 background-color: var(--mikiop-nav-dropdown-background-color); 1281 margin: 0; 1282 padding: 1rem; 1283 list-style-type: none; 1284 box-shadow: var(--mikiop-nav-dropdown-shadow); 1285 min-width: 12em; 1286 1287 li { 1288 padding: 0.25em 0.5em; 1289 1290 &:hover { 1291 background-color: var(--mikiop-nav-dropdown-hover-color); 1292 } 1293 1294 a, a:visited, a:hover { 1295 text-decoration: none; 1296 color: initial; 1297 margin: 0; 1298 } 1299 } 1300 } 1301 1302 &.mikiop-nav-open { 1303 ul { 1304 display: block; 1305 } 1306 } 1307 } 1308 1309 .mikiop-pagenation { 1310 text-align: center; 1311 1312 .mikiop-pagenation-inner { 1313 display: inline-block; 1314 list-style: none; 1315 padding-left: 0; 1316 1317 .mikiop-pagenation-item { 1318 display: inline-block; 1319 padding: 0; 1320 border: 1px solid var(--mikiop-border-color); 1321 border-radius: 0.25em; 1322 1323 a { 1324 padding: 0.5em 0.75em; 1325 color: #007bff; 1326 text-decoration: none; 1327 display: block; 1328 // background-color: var(--pagenation-link-background-color); 1329 1330 &:hover { 1331 text-decoration: none; 1332 background-color: var(--mikiop-background-color); 1333 } 1334 } 1335 1336 &:not(:last-child) { 1337 border-right-width: 0; 1338 border-bottom-right-radius: 0; 1339 border-top-right-radius: 0; 1340 } 1341 1342 &:not(:first-child) { 1343 border-bottom-left-radius: 0; 1344 border-top-left-radius: 0; 1345 } 1346 1347 &.mikiop-active { 1348 a { 1349 background-color: var(--mikiop-link-text-color); 1350 color: var(--pagenation-link-background-color); 1351 } 1352 } 1353 1354 &.mikiop-disabled { 1355 a { 1356 pointer-events: none; 1357 opacity: 0.65; 1358 } 1359 } 1360 } 1361 } 1362 } 1363 1364 .mikiop-placeholder { 1365 display: flex; 1366 1367 svg { 1368 width: 100%; 1369 height: 100%; 1370 } 1371 } 1372 1373 .mikiop-progress { 1374 .display-flex; 1375 overflow: hidden; 1376 line-height: 0; 1377 font-size: 0.75em; 1378 background-color: var(--mikiop-border-color); 1379 border-radius: 0.25em; 1380 margin-bottom: 1em; 1381 } 1382 1383 .mikiop-progress-bar { 1384 .display-flex; 1385 .flex-direction(column); 1386 .justify-content(center); 1387 text-align: center; 1388 overflow: hidden; 1389 white-space: no-wrap; 1390 ._mikiop-types; 1391 transition: all 0.6s ease; 1392 1393 &.mikiop-striped { 1394 background-image: linear-gradient( 1395 45deg, 1396 rgba(255, 255, 255, 0.15) 25%, 1397 transparent 25%, 1398 transparent 50%, 1399 rgba(255, 255, 255, 0.15) 50%, 1400 rgba(255, 255, 255, 0.15) 75%, 1401 transparent 75%, 1402 transparent 1403 ); 1404 background-size: 1em 1em; 1405 } 1406 1407 &.mikiop-animated { 1408 .animation(progress-bar-stripes 1s linear infinite); 1409 } 1410 } 1411 1412 .mikiop-row { 1413 .display-flex; 1414 1415 margin: 0; 1416 border-style: solid; 1417 border-width: 0; 1418 1419 &:first-child { 1420 padding-top: 0; 1421 } 1422 1423 &:last-child { 1424 padding-bottom: 0; 1425 margin-bottom: 2em; 1426 } 1427 1428 .mikiop-row { 1429 margin-bottom: 0; 1430 } 1431 } 1432 1433 .mikiop-statistic { 1434 font-size: 4em; 1435 text-align: center; 1436 display: inline-block; 1437 margin: 0 0.25em; 1438 1439 .mikiop-statistic-title { 1440 font-size: 0.3em; 1441 line-height: 0.3em; 1442 } 1443 } 1444 1445 .mikiop-steps { 1446 list-style: none; 1447 padding-left: 0; 1448 display: inline-flex; 1449 1450 ._mikiop-shadows; 1451 1452 .mikiop-step { 1453 position: relative; 1454 display: flex; 1455 align-items: center; 1456 padding: 1em 2em; 1457 border-width: 1px 0 1px 1px; 1458 border-style: solid; 1459 border-color: var(--mikiop-steps-border-color); 1460 border-radius: 0.25em; 1461 margin-left: 0; 1462 color: var(--mikiop-steps-step-text-color); 1463 background-color: var(--mikiop-steps-step-background-color); 1464 font-size: 0.9em; 1465 1466 ._mikiop-alert-types; 1467 1468 a { 1469 color: inherit; 1470 } 1471 1472 .mikiop-step-icon { 1473 margin-right: 0.5em; 1474 font-size: 2em; 1475 } 1476 1477 .mikiop-step-title { 1478 font-size: 1.25em; 1479 font-weight: 500; 1480 } 1481 1482 &.mikiop-complete { 1483 background-color: var(--mikiop-steps-step-background-complete-color); 1484 1485 &:after { 1486 background-color: inherit; 1487 } 1488 } 1489 1490 &:after { 1491 position: absolute; 1492 content: ''; 1493 z-index: 2; 1494 border-width: 0 1px 1px 0; 1495 border-style: solid; 1496 border-color: var(--mikiop-steps-border-color); 1497 background-color: inherit; 1498 top: 50%; 1499 right: 0; 1500 width: 16px; 1501 height: 16px; 1502 transform: translateY(-50%) translateX(50%) rotate(-45deg); 1503 } 1504 1505 &:not(:first-of-type) { 1506 border-top-left-radius: 0; 1507 border-bottom-left-radius: 0; 1508 } 1509 1510 &:not(:last-of-type) { 1511 border-top-right-radius: 0; 1512 border-bottom-right-radius: 0; 1513 } 1514 1515 &:last-of-type { 1516 border-right-width: 1px; 1517 } 1518 1519 &:last-of-type:after { 1520 display: none; 1521 } 1522 1523 p { 1524 margin-bottom: 0; 1525 } 1526 } 1527 } 1528 1529 .mikiop-tab-group { 1530 .display-flex; 1531 .flex-wrap(wrap); 1532 margin-bottom: 0; 1533 list-style: none; 1534 1535 background-color: var(--mikiop-header-background-color); 1536 border: 1px solid var(--mikiop-border-color); 1537 border-top-left-radius: 0.25em; 1538 border-top-right-radius: 0.25em; 1539 padding-left: 1em; 1540 padding-top: 0.5em; 1541 1542 .mikiop-tab-item { 1543 margin-left: 0; 1544 1545 a { 1546 color: var(--mikiop-link-text-color); 1547 text-decoration: none; 1548 border: 1px solid transparent; 1549 border-top-left-radius: 0.25em; 1550 border-top-right-radius: 0.25em; 1551 margin-bottom: -1px; 1552 display: block; 1553 padding: 0.5em 1em; 1554 transition: all 0.15s ease-in-out; 1555 1556 &:not(.mikiop-active):hover { 1557 border-color: var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-border-color); 1558 color: var(--mikiop-link-text-hover-color); 1559 } 1560 1561 &.mikiop-active { 1562 border-color: var(--mikiop-border-color) var(--mikiop-border-color) var(--mikiop-tabgroup-tab-background-active-color); 1563 background-color: var(--mikiop-tabgroup-tab-background-active-color); 1564 color: var(--mikiop-tabgroup-tab-text-active-color); 1565 } 1566 } 1567 1568 &.mikiop-disabled { 1569 a { 1570 opacity: 0.65; 1571 } 1572 1573 pointer-events: none; 1574 } 1575 } 1576 1577 &.mikiop-pills { 1578 padding-bottom: 0.5em; 1579 1580 .mikiop-tab-item { 1581 a { 1582 ._mikiop-button; 1583 margin-right: 0.5em; 1584 1585 &.mikiop-active { 1586 ._mikiop-btn-type('primary'); 1587 } 1588 1589 &:not(.mikiop-active):hover { 1590 border-color: transparent; 1591 } 1592 } 1593 } 1594 } 1595 } 1596 1597 .mikiop-tab-content { 1598 border-width: 0 1px 1px 1px; 1599 border-style: solid; 1600 border-color: var(--mikiop-border-color); 1601 border-bottom-left-radius: 0.25em; 1602 border-bottom-right-radius: 0.25em; 1603 padding: 0.5em 1em; 1604 margin-bottom: 1em; 1605 1606 .mikiop-tab-pane { 1607 display: none; 1608 1609 &.mikiop-show { 1610 display: block; 1611 } 1612 } 1613 } 1614 1615 .mikiop-quiz { 1616 border: 1px solid var(--mikiop-border-color); 1617 border-radius: 0.25em; 1618 margin-bottom: 2em; 1619 1620 // .mikiop-quiz-item {} 1621 1622 .mikiop-quiz-button-prev { 1623 ._mikiop-btn-type('secondary'); 1624 } 1625 1626 .mikiop-quiz-button-next { 1627 ._mikiop-btn-type('secondary'); 1628 } 1629 1630 .mikiop-quiz-button-submit { 1631 ._mikiop-btn-outline-type('secondary'); 1632 } 1633 1634 .mikiop-quiz-question { 1635 font-weight: 500; 1636 font-size: 1.25em; 1637 padding: 1.25em 0.75em 0 1.25em; 1638 } 1639 1640 p { 1641 padding: 0 1.5em; 1642 margin-bottom: 0; 1643 } 1644 1645 .mikiop-quiz-options { 1646 padding: 0.75em 1.25em; 1647 margin-bottom: 0.5em; 1648 } 1649 1650 .mikiop-quiz-result { 1651 margin-bottom: 1em; 1652 } 1653 1654 .mikiop-quiz-option { 1655 input { 1656 margin: 0 0.5em; 1657 } 1658 } 1659 1660 .mikiop-quiz-status { 1661 padding: 0.75em 1.25em; 1662 background-color: var(--mikiop-header-background-color); 1663 border-top: 1px solid rgba(0, 0, 0, 0.125); 1664 color: var(--mikiop-secondary-background-color); 1665 1666 button { 1667 margin-left: 1em; 1668 } 1669 } 1670 } 1671} 1672 1673._mikiop-custom-type(@type) { 1674 #dokuwiki__content { 1675 .mikiop-button { 1676 &.mikiop-type-@{type} { 1677 ._mikiop-btn-type('@{type}'); 1678 } 1679 } 1680 1681 .mikiop-badge, 1682 .mikiop-box, 1683 .mikiop-card, 1684 .mikiop-progress-bar { 1685 &.mikiop-type-@{type} { 1686 ._mikiop-type('@{type}'); 1687 } 1688 } 1689 1690 .mikiop-accordian-item, 1691 .mikiop-alert, 1692 .mikiop-list-group, 1693 .mikiop-step { 1694 &.mikiop-type-@{type} { 1695 ._mikiop-type('@{type}', 'alert'); 1696 } 1697 } 1698 1699 .mikiop-list-group-item { 1700 &.mikiop-type-@{type} { 1701 .mikiop-list-group-item-link:hover { 1702 background-color: inherit; 1703 } 1704 } 1705 } 1706 } 1707} 1708 1709@media (max-width: 768px) { 1710 #dokuwiki__content { 1711 .mikiop-row { 1712 .flex-wrap(wrap); 1713 } 1714 1715 .mikiop-col { 1716 .flex(0 0 100%); 1717 padding: 0; 1718 } 1719 1720 .mikiop-grid { 1721 .display-flex; 1722 .flex-direction(column); 1723 } 1724 } 1725} 1726 1727#dokuwiki__site .mikio-sidebar-content .mikiop-nav ul li { 1728 a, a:visited, a:hover { 1729 color: var(--sidebar-link-color); 1730 } 1731}