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