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