xref: /plugin/mikioplugin/assets/styles.less (revision 11f0142341321669a3ef1f76f16e7a71fa358474) 
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    overflow: hidden;
778    margin: 0.75em 0.75em 2em;
779    .flex(1);
780    //height: 100%;
781
782    ._mikiop-shadows;
783    ._mikiop-types;
784    ._mikiop-text-align;
785    ._mikiop-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: 0.75em;
1147      height: auto;
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: nowrap;
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}