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