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    ._mikiop-align;
787
788    .mikiop-card-body {
789      .display-flex;
790      .flex(1 1 100%);
791      .flex-direction(column);
792      ._mikiop-vertical-align;
793      ._mikiop-text-align;
794      // min-height: 1px;
795      padding: 1.25em;
796      box-sizing: border-box;
797
798      p {
799        margin-top: 0;
800      }
801
802      .mikiop-card-footer {
803        display: flex;
804        flex: 1;
805        flex-direction: column;
806        justify-content: flex-end;
807        border-top: 0;
808        padding: 0;
809      }
810    }
811
812    .mikiop-card-header {
813      ._mikiop-text-align;
814      padding: 0.75em 1.25em;
815      background-color: var(--mikiop-header-background-color);
816      border-bottom: 1px solid var(--mikiop-border-color);
817    }
818
819    .mikiop-card-footer {
820      ._mikiop-text-align;
821      padding: 0.75em 1.25em;
822      background-color: var(--mikiop-footer-background-color);
823      border-top: 1px solid var(--mikiop-border-color);
824      color: var(--mikiop-secondary-background-color);
825
826      small {
827        font-size: 80%;
828      }
829    }
830
831    .mikiop-card-title {
832      ._mikiop-text-align;
833      font-size: 1.25em;
834      font-weight: 600;
835      margin-bottom: 0.75em;
836      margin-top: 0;
837    }
838
839    .mikiop-card-subtitle {
840      ._mikiop-text-align;
841      color: var(--mikiop-secondary-background-color);
842      font-weight: 600;
843      margin-top: -1em;
844      margin-bottom: 0.5em;
845    }
846
847    &.mikiop-horizontal {
848      display: grid;
849      grid-template-columns: 33.333333% 66.666667%;
850
851      .mikiop-card-horizontal-image {
852        overflow: hidden;
853        margin-bottom: -1px;
854
855        .mikiop-placeholder {
856          height: 101%;
857        }
858      }
859
860      .mikiop-card-header,
861      .mikiop-card-footer {
862        border: 0;
863        background-color: transparent;
864      }
865
866      .mikiop-card-body {
867        justify-content: center;
868        height: 100%;
869      }
870    }
871
872    &.mikiop-overlay {
873
874      //img,
875      a.media,
876      svg,
877      span.curid,
878      .mikiop-placeholder {
879        position: absolute;
880        border-radius: inherit;
881      }
882
883      .mikiop-placeholder {
884        height: 101%;
885      }
886
887      .mikiop-card-header,
888      .mikiop-card-footer {
889        border: 0;
890        background-color: transparent;
891      }
892
893      div,
894      p {
895        z-index: 2;
896      }
897    }
898
899    p:last-child,
900    .mikiop-blockquote {
901      margin-bottom: 0;
902    }
903
904    img,
905    a.media,
906    svg,
907    span.curid,
908    .mikiop-placeholder {
909      width: 100%;
910      height: 100%;
911      object-fit: contain;
912      overflow: hidden;
913      margin: 0;
914
915      &:first-child {
916        border-top-left-radius: inherit;
917        border-top-right-radius: inherit;
918      }
919
920      &:last-child {
921        border-bottom-left-radius: inherit;
922        border-bottom-right-radius: inherit;
923      }
924
925      &.mikiop-image-cover {
926        object-fit: cover;
927      }
928    }
929
930    .mikiop-placeholder {
931      margin-top: -1px;
932      margin-left: -1px;
933      width: 101%;
934    }
935  }
936
937  .mikiop-carousel {
938    position: relative;
939    margin-bottom: 2em;
940    height: 40em;
941
942    &.mikiop-image-cover {
943      .mikiop-carousel-inner img {
944        object-fit: cover;
945      }
946    }
947
948    .mikiop-carousel-inner {
949      position: relative;
950      width: 100%;
951      height: 100%;
952      overflow: hidden;
953    }
954
955    .mikiop-carousel-item {
956      display: none;
957      position: absolute;
958      top: 0;
959      left: 0;
960      bottom: 0;
961      width: 100%;
962
963      &.mikiop-active {
964        z-index: 1;
965        display: block;
966      }
967
968      .mikiop-placeholder {
969        width: 100%;
970        height: 100%;
971      }
972
973      .mikiop-carousel-caption {
974        background-color: var(--mikiop-carousel-caption-background-color);
975        position: absolute;
976        bottom: 0;
977        left: 0;
978        right: 0;
979        text-align: center;
980        padding: 2em;
981
982        .mikiop-carousel-caption-title,
983        .mikiop-carousel-caption-title a {
984          font-size: 1.25em;
985          margin-bottom: 0.5em;
986          font-weight: 500;
987          line-height: 1.2;
988          color: var(--mikiop-carousel-text-color);
989        }
990
991        .mikiop-carousel-caption-title a {
992          &:hover {
993            text-decoration: underline;
994          }
995        }
996
997        p {
998          color: var(--mikiop-carousel-caption-text-color);
999          margin-bottom: 0;
1000        }
1001      }
1002
1003      img {
1004        width: 100%;
1005        height: 100%;
1006        object-fit: contain;
1007        overflow: hidden;
1008      }
1009    }
1010
1011    .mikiop-carousel-control {
1012      position: absolute;
1013      z-index: 1;
1014      top: 40%;
1015      bottom: 40%;
1016      .display-flex;
1017      .justify-content(center);
1018      .align-items(center);
1019      width: 15%;
1020      text-align: center;
1021      opacity: 0.5;
1022      transition: all 0.15s ease;
1023      background-repeat: no-repeat;
1024      background-size: 2em;
1025      background-position: 50%;
1026
1027      &.mikiop-carousel-control-next {
1028        right: 0;
1029      }
1030
1031      svg {
1032        fill: var(--mikiop-carousel-control-fill-color);
1033        stroke: var(--mikiop-carousel-control-stroke-color);
1034        stroke-width: 0.2px;
1035      }
1036
1037      &:hover {
1038        opacity: 1;
1039      }
1040    }
1041
1042    .mikiop-carousel-indicators {
1043      position: absolute;
1044      right: 0;
1045      bottom: 0;
1046      left: 0;
1047      z-index: 15;
1048      margin: 0.5em 0 0 0;
1049      padding: 0;
1050      .display-flex;
1051      .justify-content(center);
1052      list-style: none;
1053
1054      .mikiop-carousel-indicator {
1055        width: 30px;
1056        height: 3px;
1057        margin: 1em 0.25em;
1058        padding: 0;
1059        background-color: var(--mikiop-carousel-indicator-color);
1060        transition: all 0.6s ease;
1061        opacity: 0.5;
1062
1063        &.mikiop-active {
1064          opacity: 1;
1065        }
1066      }
1067
1068      &.mikiop-carousel-indicators-circle {
1069        .mikiop-carousel-indicator {
1070          border: 1px solid var(--mikiop-carousel-indicator-color);
1071          border-radius: 50%;
1072          width: 10px;
1073          height: 10px;
1074        }
1075      }
1076    }
1077  }
1078
1079  .mikiop-col {
1080    .flex(1 0 0);
1081    .display-flex;
1082    .flex-direction(column);
1083    // .justify-content(space-between);
1084    ._mikiop-vertical-align;
1085    margin: 0;
1086    box-sizing: border-box;
1087    border-style: solid;
1088    border-width: 0;
1089
1090    &.mikiop-col-1 {
1091      ._mikiop-col(8.333333%);
1092    }
1093
1094    &.mikiop-col-2 {
1095      ._mikiop-col(16.666667%);
1096    }
1097
1098    &.mikiop-col-3 {
1099      ._mikiop-col(25%);
1100    }
1101
1102    &.mikiop-col-4 {
1103      ._mikiop-col(33.333333%);
1104    }
1105
1106    &.mikiop-col-5 {
1107      ._mikiop-col(41.666667%);
1108    }
1109
1110    &.mikiop-col-6 {
1111      ._mikiop-col(50%);
1112    }
1113
1114    &.mikiop-col-7 {
1115      ._mikiop-col(58.333333%);
1116    }
1117
1118    &.mikiop-col-8 {
1119      ._mikiop-col(66.666667%);
1120    }
1121
1122    &.mikiop-col-9 {
1123      ._mikiop-col(75%);
1124    }
1125
1126    &.mikiop-col-10 {
1127      ._mikiop-col(83.333333%);
1128    }
1129
1130    &.mikiop-col-11 {
1131      ._mikiop-col(91.666667%);
1132    }
1133
1134    &.mikiop-col-12 {
1135      ._mikiop-col(100%);
1136    }
1137
1138    &:first-child {
1139      padding-left: 0;
1140    }
1141
1142    &:last-child {
1143      padding-right: 0;
1144    }
1145
1146    .mikiop-card {
1147      margin-bottom: 0;
1148    }
1149
1150    &.mikiop-col-full {
1151      .flex(0 0 100%);
1152    }
1153  }
1154
1155  .mikiop-grid {
1156    display: grid;
1157    box-sizing: border-box;
1158
1159    .mikiop-box {
1160      margin: 0;
1161    }
1162  }
1163
1164  .mikiop-heading {
1165    margin-top: 0;
1166    margin-bottom: 0.5em;
1167  }
1168
1169  .mikiop-hr {
1170    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
1171    border-top: 1px solid rgba(0, 0, 0, 0.1);
1172  }
1173
1174  .mikiop-list-group {
1175    .display-flex;
1176    .flex-direction(column);
1177
1178    list-style: none;
1179    border-radius: 0.25em;
1180    padding-left: 0;
1181
1182    ._mikiop-shadows;
1183
1184    .mikiop-list-group-item {
1185      // .display-flex;
1186      // .align-items(center);
1187      // .justify-content(space-between);
1188
1189      color: inherit;
1190      padding: 0.75rem 1.25rem;
1191      margin: 0;
1192      border: 1px solid var(--mikiop-border-color);
1193      box-sizing: border-box;
1194
1195      ._mikiop-alert-types;
1196
1197      &.mikiop-content-vertical {
1198        .flex-direction(column);
1199        .align-items(flex-start);
1200        ._mikiop-flex-text-align;
1201      }
1202
1203      &+.mikiop-list-group-item {
1204        border-top-width: 0;
1205      }
1206
1207      &:first-child {
1208        border-top-left-radius: 0.25em;
1209        border-top-right-radius: 0.25em;
1210      }
1211
1212      &:last-child {
1213        border-bottom-left-radius: 0.25em;
1214        border-bottom-right-radius: 0.25em;
1215      }
1216
1217      &.mikiop-active {
1218        ._mikiop-type('primary');
1219      }
1220
1221      &.mikiop-disabled {
1222        opacity: 0.65;
1223        pointer-events: none;
1224      }
1225
1226      .mikiop-list-group-item-link {
1227        display: block;
1228        width: 100%;
1229        color: inherit;
1230        text-decoration: none;
1231        padding: 0.75rem 1.25rem;
1232        margin: -0.75rem -1.25rem;
1233
1234        &:hover {
1235          background-color: var(--mikiop-light-background-hover-color);
1236        }
1237      }
1238
1239      &.mikiop-active,
1240      &.mikiop-type-primary,
1241      &.mikiop-type-secondary,
1242      &.mikiop-type-success,
1243      &.mikiop-type-warning,
1244      &.mikiop-type-danger,
1245      &.mikiop-type-light,
1246      &.mikiop-type-dark {
1247        .mikiop-list-group-item-link:hover {
1248          background-color: inherit;
1249        }
1250      }
1251
1252      p:last-child {
1253        margin-bottom: 0;
1254      }
1255    }
1256
1257    &.mikiop-flush {
1258      margin-bottom: 0;
1259
1260      .mikiop-list-group-item {
1261        border-left-width: 0;
1262        border-right-width: 0;
1263
1264        &:first-child {
1265          border-top-width: 0;
1266        }
1267
1268        &:last-child {
1269          border-bottom-width: 0;
1270        }
1271      }
1272    }
1273
1274    &.mikiop-horizontal {
1275      .flex-direction(row);
1276
1277      .mikiop-list-group-item {
1278        &+.mikiop-list-group-item {
1279          border-top-width: 1px;
1280          border-left-width: 0;
1281        }
1282
1283        &:first-child {
1284          border-top-left-radius: 0.25em;
1285          border-top-right-radius: 0;
1286          border-bottom-left-radius: 0.25em;
1287        }
1288
1289        &:last-child {
1290          border-top-left-radius: 0;
1291          border-top-right-radius: 0.25em;
1292          border-bottom-right-radius: 0.25em;
1293        }
1294      }
1295    }
1296  }
1297
1298  .mikiop-nav {
1299    cursor: pointer;
1300    position: relative;
1301    display: inline-block;
1302
1303    .mikiop-nav-title {
1304      display: inline-block;
1305      position: relative;
1306      padding-right: 1.5em;
1307
1308      &::after {
1309        content: '';
1310        position: absolute;
1311        right: 5px;
1312        top: 40%;
1313        border: solid black;
1314        border-width: 0 2px 2px 0;
1315        display: inline-block;
1316        padding: 3px;
1317        transform: translateY(-50%) rotate(45deg);
1318        -webkit-transform: translateY(-50%) rotate(45deg);
1319      }
1320    }
1321
1322    .mikiop-nav-icon {
1323      display: inline-block;
1324      margin-right: 0.25em;
1325    }
1326
1327    ul {
1328      display: none;
1329      position: absolute;
1330      z-index: 1000;
1331      border-width: var(--mikiop-nav-dropdown-border-width);
1332      border-style: var(--mikiop-nav-dropdown-border-style);
1333      border-color: var(--mikiop-nav-dropdown-border-color);
1334      background-color: var(--mikiop-nav-dropdown-background-color);
1335      margin: 0;
1336      padding: 1rem;
1337      list-style-type: none;
1338      box-shadow: var(--mikiop-nav-dropdown-shadow);
1339      min-width: 12em;
1340
1341      li {
1342        padding: 0.25em 0.5em;
1343
1344        &:hover {
1345          background-color: var(--mikiop-nav-dropdown-hover-color);
1346        }
1347
1348        a,
1349        a:visited,
1350        a:hover {
1351          text-decoration: none;
1352          color: initial;
1353          margin: 0;
1354        }
1355      }
1356    }
1357
1358    &.mikiop-nav-open {
1359      ul {
1360        display: block;
1361      }
1362    }
1363  }
1364
1365  .mikiop-pagination,
1366  .mikiop-pagenation {
1367    text-align: center;
1368
1369    .mikiop-pagination-inner,
1370    .mikiop-pagenation-inner {
1371      display: inline-block;
1372      list-style: none;
1373      padding-left: 0;
1374
1375      .mikiop-pagination-item,
1376      .mikiop-pagenation-item {
1377        display: inline-block;
1378        padding: 0;
1379        border: 1px solid var(--mikiop-pagination-border-color);
1380        border-radius: 0.25em;
1381        margin: 0;
1382
1383        a {
1384          padding: 0.5em 0.75em;
1385          color: var(--mikiop-pagination-text-color);
1386          text-decoration: none;
1387          display: block;
1388
1389          &:hover {
1390            text-decoration: none;
1391            color: var(--mikiop-pagination-text-hover-color);
1392            background-color: var(--mikiop-pagination-background-hover-color);
1393          }
1394        }
1395
1396        &:not(:last-child) {
1397          border-right-width: 0;
1398          border-bottom-right-radius: 0;
1399          border-top-right-radius: 0;
1400        }
1401
1402        &:not(:first-child) {
1403          border-bottom-left-radius: 0;
1404          border-top-left-radius: 0;
1405        }
1406
1407        &:first-child a {
1408          border-bottom-left-radius: 0.25em;
1409          border-top-left-radius: 0.25em;
1410        }
1411
1412        &:last-child a {
1413          border-bottom-right-radius: 0.25em;
1414          border-top-right-radius: 0.25em;
1415        }
1416
1417        &.mikiop-active {
1418          a {
1419            color: var(--mikiop-pagination-text-active-color);
1420            background-color: var(--mikiop-pagination-background-active-color);
1421          }
1422        }
1423
1424        &.mikiop-disabled {
1425          a {
1426            pointer-events: none;
1427            opacity: var(--mikiop-pagination-background-disabled-opacity);
1428            background-color: var(--mikiop-pagination-background-disabled-color);
1429            color: var(--mikiop-pagination-text-disabled-color);
1430          }
1431        }
1432      }
1433    }
1434  }
1435
1436  .mikiop-placeholder {
1437    display: flex;
1438
1439    svg {
1440      width: 100%;
1441      height: 100%;
1442    }
1443  }
1444
1445  .mikiop-progress {
1446    .display-flex;
1447    overflow: hidden;
1448    line-height: 0;
1449    font-size: 0.75em;
1450    background-color: var(--mikiop-border-color);
1451    border-radius: 0.25em;
1452    margin-bottom: 1em;
1453  }
1454
1455  .mikiop-progress-bar {
1456    .display-flex;
1457    .flex-direction(column);
1458    .justify-content(center);
1459    text-align: center;
1460    overflow: hidden;
1461    white-space: no-wrap;
1462    ._mikiop-types;
1463    transition: all 0.6s ease;
1464
1465    &.mikiop-striped {
1466      background-image: linear-gradient(45deg,
1467          rgba(255, 255, 255, 0.15) 25%,
1468          transparent 25%,
1469          transparent 50%,
1470          rgba(255, 255, 255, 0.15) 50%,
1471          rgba(255, 255, 255, 0.15) 75%,
1472          transparent 75%,
1473          transparent);
1474      background-size: 1em 1em;
1475    }
1476
1477    &.mikiop-animated {
1478      .animation(progress-bar-stripes 1s linear infinite);
1479    }
1480  }
1481
1482  .mikiop-row {
1483    .display-flex;
1484
1485    margin: 0;
1486    border-style: solid;
1487    border-width: 0;
1488
1489    &:first-child {
1490      padding-top: 0;
1491    }
1492
1493    &:last-child {
1494      padding-bottom: 0;
1495      margin-bottom: 2em;
1496    }
1497
1498    .mikiop-row {
1499      margin-bottom: 0;
1500    }
1501  }
1502
1503  .mikiop-statistic {
1504    font-size: 4em;
1505    text-align: center;
1506    display: inline-block;
1507    margin: 0 0.25em;
1508
1509    .mikiop-statistic-title {
1510      font-size: 0.3em;
1511      line-height: 0.3em;
1512    }
1513  }
1514
1515  .mikiop-steps {
1516    list-style: none;
1517    padding-left: 0;
1518    display: inline-flex;
1519
1520    ._mikiop-shadows;
1521
1522    .mikiop-step {
1523      position: relative;
1524      display: flex;
1525      align-items: center;
1526      padding: 1em 2em;
1527      border-width: 1px 0 1px 1px;
1528      border-style: solid;
1529      border-color: var(--mikiop-steps-border-color);
1530      border-radius: 0.25em;
1531      margin-left: 0;
1532      color: var(--mikiop-steps-step-text-color);
1533      background-color: var(--mikiop-steps-step-background-color);
1534      font-size: 0.9em;
1535
1536      ._mikiop-alert-types;
1537
1538      a {
1539        color: inherit;
1540      }
1541
1542      .mikiop-step-icon {
1543        margin-right: 0.5em;
1544        font-size: 2em;
1545      }
1546
1547      .mikiop-step-title {
1548        font-size: 1.25em;
1549        font-weight: 500;
1550      }
1551
1552      &.mikiop-complete {
1553        background-color: var(--mikiop-steps-step-background-complete-color);
1554
1555        &:after {
1556          background-color: inherit;
1557        }
1558      }
1559
1560      &:after {
1561        position: absolute;
1562        content: '';
1563        z-index: 2;
1564        border-width: 0 1px 1px 0;
1565        border-style: solid;
1566        border-color: var(--mikiop-steps-border-color);
1567        background-color: inherit;
1568        top: 50%;
1569        right: 0;
1570        width: 16px;
1571        height: 16px;
1572        transform: translateY(-50%) translateX(50%) rotate(-45deg);
1573      }
1574
1575      &:not(:first-of-type) {
1576        border-top-left-radius: 0;
1577        border-bottom-left-radius: 0;
1578      }
1579
1580      &:not(:last-of-type) {
1581        border-top-right-radius: 0;
1582        border-bottom-right-radius: 0;
1583      }
1584
1585      &:last-of-type {
1586        border-right-width: 1px;
1587      }
1588
1589      &:last-of-type:after {
1590        display: none;
1591      }
1592
1593      p {
1594        margin-bottom: 0;
1595      }
1596    }
1597  }
1598
1599  .mikiop-tab-group {
1600    .display-flex;
1601    .flex-wrap(wrap);
1602    margin-bottom: 0;
1603    list-style: none;
1604
1605    background-color: var(--mikiop-header-background-color);
1606    border: 1px solid var(--mikiop-border-color);
1607    border-top-left-radius: 0.25em;
1608    border-top-right-radius: 0.25em;
1609    padding-left: 1em;
1610    padding-top: 0.5em;
1611
1612    .mikiop-tab-item {
1613      margin-left: 0;
1614
1615      a {
1616        color: var(--mikiop-link-text-color);
1617        text-decoration: none;
1618        border: 1px solid transparent;
1619        border-top-left-radius: 0.25em;
1620        border-top-right-radius: 0.25em;
1621        margin-bottom: -1px;
1622        display: block;
1623        padding: 0.5em 1em;
1624        transition: all 0.15s ease-in-out;
1625
1626        &:not(.mikiop-active):hover {
1627          border-color: var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-tabgroup-tab-border-hover-color) var(--mikiop-border-color);
1628          color: var(--mikiop-link-text-hover-color);
1629        }
1630
1631        &.mikiop-active {
1632          border-color: var(--mikiop-border-color) var(--mikiop-border-color) var(--mikiop-tabgroup-tab-background-active-color);
1633          background-color: var(--mikiop-tabgroup-tab-background-active-color);
1634          color: var(--mikiop-tabgroup-tab-text-active-color);
1635        }
1636      }
1637
1638      &.mikiop-disabled {
1639        a {
1640          opacity: 0.65;
1641        }
1642
1643        pointer-events: none;
1644      }
1645    }
1646
1647    &.mikiop-pills {
1648      padding-bottom: 0.5em;
1649
1650      .mikiop-tab-item {
1651        a {
1652          ._mikiop-button;
1653          margin-right: 0.5em;
1654
1655          &.mikiop-active {
1656            ._mikiop-btn-type('primary');
1657          }
1658
1659          &:not(.mikiop-active):hover {
1660            border-color: transparent;
1661          }
1662        }
1663      }
1664    }
1665  }
1666
1667  .mikiop-tab-content {
1668    border-width: 0 1px 1px 1px;
1669    border-style: solid;
1670    border-color: var(--mikiop-border-color);
1671    border-bottom-left-radius: 0.25em;
1672    border-bottom-right-radius: 0.25em;
1673    padding: 0.5em 1em;
1674    margin-bottom: 1em;
1675
1676    .mikiop-tab-pane {
1677      display: none;
1678
1679      &.mikiop-show {
1680        display: block;
1681      }
1682    }
1683  }
1684
1685  .mikiop-quiz {
1686    border: 1px solid var(--mikiop-border-color);
1687    border-radius: 0.25em;
1688    margin-bottom: 2em;
1689
1690    .mikiop-quiz-question {
1691      font-weight: 500;
1692      font-size: 1.25em;
1693      padding: 1.25em 0.75em 0 1.25em;
1694    }
1695
1696    p {
1697      padding: 0 1.5em;
1698      margin-bottom: 0;
1699    }
1700
1701    .mikiop-quiz-options {
1702      padding: 0.75em 1.25em;
1703      margin-bottom: 0.5em;
1704    }
1705
1706    .mikiop-quiz-result {
1707      margin-bottom: 1em;
1708    }
1709
1710    .mikiop-quiz-option {
1711      input {
1712        margin: 0 0.5em;
1713      }
1714    }
1715
1716    .mikiop-quiz-status {
1717      padding: 0.75em 1.25em;
1718      background-color: var(--mikiop-header-background-color);
1719      border-top: 1px solid rgba(0, 0, 0, 0.125);
1720      color: var(--mikiop-secondary-background-color);
1721      display: flex;
1722      align-items: center;
1723
1724      button {
1725        margin-left: 1em;
1726      }
1727    }
1728  }
1729
1730  .mikiop-right-sidebar {
1731    float: right;
1732  }
1733}
1734
1735._mikiop-custom-type(@type) {
1736  #dokuwiki__content {
1737    .mikiop-button {
1738      &.mikiop-type-@{type} {
1739        ._mikiop-btn-type('@{type}');
1740      }
1741
1742      &.mikiop-type-outline-@{type} {
1743        ._mikiop-btn-outline-type('@{type}');
1744      }
1745    }
1746
1747    .mikiop-badge,
1748    .mikiop-box,
1749    .mikiop-card,
1750    .mikiop-progress-bar {
1751      &.mikiop-type-@{type} {
1752        ._mikiop-type('@{type}');
1753      }
1754    }
1755
1756    .mikiop-accordian-item,
1757    .mikiop-alert,
1758    .mikiop-list-group,
1759    .mikiop-step {
1760      &.mikiop-type-@{type} {
1761        ._mikiop-type('@{type}');
1762      }
1763    }
1764
1765    .mikiop-list-group-item {
1766      &.mikiop-type-@{type} {
1767        .mikiop-list-group-item-link:hover {
1768          background-color: inherit;
1769        }
1770      }
1771    }
1772  }
1773}
1774
1775@media (max-width: 960px) {
1776  #dokuwiki__content {
1777    .mikiop-row {
1778      .flex-wrap(wrap);
1779    }
1780
1781    .mikiop-col {
1782      .flex(0 0 100%) !important;
1783      max-width: 100% !important;
1784      padding: 0;
1785    }
1786
1787    .mikiop-grid {
1788      .display-flex;
1789      .flex-direction(column);
1790    }
1791
1792    .mikiop-card {
1793      height: auto;
1794    }
1795  }
1796}
1797
1798#dokuwiki__site .mikio-sidebar-content .mikiop-nav ul li {
1799
1800  a,
1801  a:visited,
1802  a:hover {
1803    color: var(--sidebar-link-color);
1804  }
1805}