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