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