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