1:root { 2 --mikiop-background-color: #ffffff; 3 --mikiop-border-color: #00000020; 4 --mikiop-header-background-color: #00000007; 5 --mikiop-footer-background-color: #00000007; 6 7 --mikiop-primary-text-color: #ffffff; 8 --mikiop-primary-text-hover-color: #ffffff; 9 --mikiop-primary-background-color: #007bff; 10 --mikiop-primary-background-hover-color: #0069d9; 11 --mikiop-primary-border-color: #007bff; 12 --mikiop-primary-border-hover-color: #0062cc; 13 --mikiop-primary-light-text-color: #004085; 14 --mikiop-primary-light-background-color: #cce5ff; 15 --mikiop-primary-light-border-color: #b8daff; 16 17 --mikiop-secondary-text-color: #fff; 18 --mikiop-secondary-text-hover-color: #fff; 19 --mikiop-secondary-background-color: #6c757d; 20 --mikiop-secondary-background-hover-color: #5a6268; 21 --mikiop-secondary-border-color: #6c757d; 22 --mikiop-secondary-border-hover-color: #545b62; 23 --mikiop-secondary-light-text-color: #383d41; 24 --mikiop-secondary-light-background-color: #e2e3e5; 25 --mikiop-secondary-light-border-color: #d6d8db; 26 27 --mikiop-success-text-color: #fff; 28 --mikiop-success-text-hover-color: #fff; 29 --mikiop-success-background-color: #28a745; 30 --mikiop-success-background-hover-color: #218838; 31 --mikiop-success-border-color: #28a745; 32 --mikiop-success-border-hover-color: #1e7e34; 33 --mikiop-success-light-text-color: #155724; 34 --mikiop-success-light-background-color: #d4edda; 35 --mikiop-success-light-border-color: #c3e6cb; 36 37 --mikiop-danger-text-color: #fff; 38 --mikiop-danger-background-color: #dc3545; 39 --mikiop-danger-border-color: #dc3545; 40 --mikiop-danger-text-hover-color: #fff; 41 --mikiop-danger-background-hover-color: #c82333; 42 --mikiop-danger-border-hover-color: #bd2130; 43 --mikiop-danger-light-text-color: #721c24; 44 --mikiop-danger-light-background-color: #f8d7da; 45 --mikiop-danger-light-border-color: #f5c6cb; 46 47 --mikiop-warning-text-color: #fff; 48 --mikiop-warning-background-color: #ffc107; 49 --mikiop-warning-border-color: #ffc107; 50 --mikiop-warning-text-hover-color: #fff; 51 --mikiop-warning-background-hover-color: #e0a800; 52 --mikiop-warning-border-hover-color: #d39e00; 53 --mikiop-warning-light-text-color: #856404; 54 --mikiop-warning-light-background-color: #fff3cd; 55 --mikiop-warning-light-border-color: #ffeeba; 56 57 --mikiop-info-text-color: #fff; 58 --mikiop-info-background-color: #17a2b8; 59 --mikiop-info-border-color: #17a2b8; 60 --mikiop-info-text-hover-color: #fff; 61 --mikiop-info-background-hover-color: #138496; 62 --mikiop-info-border-hover-color: #117a8b; 63 --mikiop-info-light-text-color: #0c5460; 64 --mikiop-info-light-background-color: #d1ecf1; 65 --mikiop-info-light-border-color: #bee5eb; 66 67 --mikiop-light-text-color: #212529; 68 --mikiop-light-background-color: #f8f9fa; 69 --mikiop-light-border-color: #f8f9fa; 70 --mikiop-light-text-hover-color: #212529; 71 --mikiop-light-background-hover-color: #e2e6ea; 72 --mikiop-light-border-hover-color: #dae0e5; 73 --mikiop-light-light-text-color: #818182; 74 --mikiop-light-light-background-color: #fefefe; 75 --mikiop-light-light-border-color: #fdfdfe; 76 77 --mikiop-dark-text-color: #fff; 78 --mikiop-dark-background-color: #343a40; 79 --mikiop-dark-border-color: #343a40; 80 --mikiop-dark-text-hover-color: #fff; 81 --mikiop-dark-background-hover-color: #23272b; 82 --mikiop-dark-border-hover-color: #1d2124; 83 --mikiop-dark-light-text-color: #1b1e21; 84 --mikiop-dark-light-background-color: #d6d8d9; 85 --mikiop-dark-light-border-color: #c6c8ca; 86 87 --mikiop-link-text-color: #007bff; 88 --mikiop-link-background-color: transparent; 89 --mikiop-link-border-color: transparent; 90 --mikiop-link-text-hover-color: #0056b3; 91 --mikiop-link-background-hover-color: transparent; 92 --mikiop-link-border-hover-color: transparent; 93 94 /* Carousel */ 95 --mikiop-carousel-title-text-color: #fff; 96 --mikiop-carousel-caption-text-color: #fff; 97 --mikiop-carousel-caption-background-color: #00000080; 98 --mikiop-carousel-control-fill-color: #fff; 99 --mikiop-carousel-control-stroke-color: #000; 100 --mikiop-carousel-indicator-color: #fff; 101 102 /* Card */ 103 --mikiop-card-background-color: #ffffff; 104 --mikiop-card-border-color: #00000060; 105 --mikiop-card-text-color: #000000; 106 --mikiop-card-heading-background-color: red; 107 /*--mikiop-carousel-caption-text-color: #fff;*/ 108 /*--mikiop-carousel-caption-background-color: #00000080;*/ 109 /*--mikiop-carousel-control-fill-color: #fff;*/ 110 /*--mikiop-carousel-control-stroke-color: #000;*/ 111 /*--mikiop-carousel-indicator-color: #fff;*/ 112 113 /* Steps */ 114 --mikiop-steps-step-text-color: inherit; 115 --mikiop-steps-border-color: #00000040; 116 --mikiop-steps-step-background-color: #fff; 117 --mikiop-steps-step-background-complete-color: #f8f8f8; 118 119 /* Tabgroup */ 120 --mikiop-tabgroup-tab-text-active-color: #000000d0; 121 --mikiop-tabgroup-tab-background-active-color: #ffffff20; 122 --mikiop-tabgroup-tab-border-hover-color: #00000020; 123 124 /* Tooltip */ 125 --mikiop-tooltip-text-color: #333; 126 --mikiop-tooltip-background-color: #fcf3cf; 127 --mikiop-tooltip-border-color: #9a7d0a; 128 129 /* Nav */ 130 --mikiop-nav-dropdown-border-width: 1px; 131 --mikiop-nav-dropdown-border-style: solid; 132 --mikiop-nav-dropdown-border-color: #ced4da; 133 --mikiop-nav-dropdown-background-color: #fff; 134 --mikiop-nav-dropdown-hover-color: #e5e5e5; 135 --mikiop-nav-dropdown-shadow: 0 4px 10px rgba(0,0,0,0.3);; 136 137 /* Pagination */ 138 --mikiop-pagination-text-color: #007bff; 139 --mikiop-pagination-background-color: transparent; 140 --mikiop-pagination-text-hover-color: #007bff; 141 --mikiop-pagination-background-hover-color: #cce5ff; 142 --mikiop-pagination-border-color: #00000040; 143 --mikiop-pagination-text-active-color: #007bff; 144 --mikiop-pagination-background-active-color: #cce5ff; 145 --mikiop-pagination-background-disabled-opacity: 0.65; 146 --mikiop-pagination-text-disabled-color: #666; 147 --mikiop-pagination-background-disabled-color: transparent; 148} 149 150:root[data-theme="theme-dark"] { 151 --mikiop-background-color: #ffffff20; 152 --mikiop-border-color: #ffffff20; 153 --mikiop-header-background-color: #ffffff07; 154 --mikiop-footer-background-color: #ffffff07; 155 156 /* Steps */ 157 --mikiop-steps-step-text-color: #fff; 158 --mikiop-steps-border-color: #ffffff40; 159 --mikiop-steps-step-background-color: #222; 160 --mikiop-steps-step-background-complete-color: #000; 161 162 /* Tabgroup */ 163 --mikiop-tabgroup-tab-text-active-color: #ffffffd0; 164 --mikiop-tabgroup-tab-background-active-color: #00000020; 165 --mikiop-tabgroup-tab-border-hover-color: #ffffff20; 166 167 /* Pagination */ 168 --mikiop-pagination-text-color: #007bff; 169 --mikiop-pagination-background-color: transparent; 170 --mikiop-pagination-text-hover-color: #007bff; 171 --mikiop-pagination-background-hover-color: #cce5ff; 172 --mikiop-pagination-border-color: #ffffff40; 173 --mikiop-pagination-text-active-color: #007bff; 174 --mikiop-pagination-background-active-color: #cce5ff; 175 --mikiop-pagination-background-disabled-opacity: 1; 176 --mikiop-pagination-text-disabled-color: #666; 177 --mikiop-pagination-background-disabled-color: transparent; 178}