homebridge-adt-pulse 3.4.3 → 3.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,14 @@
1
- /* Theme Variables */
1
+ /**
2
+ * ==================================================
3
+ * Theme Colors
4
+ * ==================================================
5
+ */
2
6
  :root {
7
+ /* Orange Theme */
8
+ --config-ui-x-orange-bg: #ef6c001a;
9
+ --config-ui-x-orange-border: #ef6c001a;
10
+ --config-ui-x-orange-text: #ff9800;
11
+
3
12
  /* Red Theme */
4
13
  --config-ui-x-red-bg: #d32f2f1a;
5
14
  --config-ui-x-red-border: #d32f2f1a;
@@ -15,35 +24,40 @@
15
24
  --config-ui-x-purple-border: #4213671a;
16
25
  --config-ui-x-purple-text: #9c27b0;
17
26
 
27
+ /* Deep Purple Theme */
28
+ --config-ui-x-deep-purple-bg: #4527a01a;
29
+ --config-ui-x-deep-purple-border: #4527a01a;
30
+ --config-ui-x-deep-purple-text: #673ab7;
31
+
18
32
  /* Indigo Theme */
19
33
  --config-ui-x-indigo-bg: #303f9f1a;
20
34
  --config-ui-x-indigo-border: #303f9f1a;
21
35
  --config-ui-x-indigo-text: #3f51b5;
22
36
 
23
37
  /* Blue Theme */
24
- --config-ui-x-blue-bg: #1976d21a;
25
- --config-ui-x-blue-border: #1976d21a;
26
- --config-ui-x-blue-text: #2196f3;
38
+ --config-ui-x-blue-bg: #0000701a;
39
+ --config-ui-x-blue-border: #0000701a;
40
+ --config-ui-x-blue-text: #333399;
27
41
 
28
42
  /* Blue Grey Theme */
29
43
  --config-ui-x-blue-grey-bg: #455a641a;
30
44
  --config-ui-x-blue-grey-border: #455a641a;
31
45
  --config-ui-x-blue-grey-text: #607d8b;
32
46
 
33
- /* Navi Blue Theme */
34
- --config-ui-x-navi-blue-bg: #0000701a;
35
- --config-ui-x-navi-blue-border: #0000701a;
36
- --config-ui-x-navi-blue-text: #009;
47
+ /* Cyan Theme */
48
+ --config-ui-x-cyan-bg: #00838f1a;
49
+ --config-ui-x-cyan-border: #00838f1a;
50
+ --config-ui-x-cyan-text: #00bcd4;
37
51
 
38
52
  /* Green Theme */
39
53
  --config-ui-x-green-bg: #388e3c1a;
40
54
  --config-ui-x-green-border: #388e3c1a;
41
55
  --config-ui-x-green-text: #4caf50;
42
56
 
43
- /* Orange Theme */
44
- --config-ui-x-orange-bg: #ef6c001a;
45
- --config-ui-x-orange-border: #ef6c001a;
46
- --config-ui-x-orange-text: #ff9800;
57
+ /* Teal Theme */
58
+ --config-ui-x-teal-bg: #00695c1a;
59
+ --config-ui-x-teal-border: #00695c1a;
60
+ --config-ui-x-teal-text: #009688;
47
61
 
48
62
  /* Grey Theme */
49
63
  --config-ui-x-grey-bg: #6161611a;
@@ -55,35 +69,10 @@
55
69
  --config-ui-x-brown-border: #4e342e1a;
56
70
  --config-ui-x-brown-text: #795548;
57
71
 
58
- /* Amber Theme */
59
- --config-ui-x-amber-bg: #ff8f001a;
60
- --config-ui-x-amber-border: #ff8f001a;
61
- --config-ui-x-amber-text: #ffc107;
62
-
63
- /* Teal Theme */
64
- --config-ui-x-teal-bg: #00695c1a;
65
- --config-ui-x-teal-border: #00695c1a;
66
- --config-ui-x-teal-text: #009688;
67
-
68
- /* Cyan Theme */
69
- --config-ui-x-cyan-bg: #00838f1a;
70
- --config-ui-x-cyan-border: #00838f1a;
71
- --config-ui-x-cyan-text: #00bcd4;
72
-
73
- /* Deep Purple Theme */
74
- --config-ui-x-deep-purple-bg: #4527a01a;
75
- --config-ui-x-deep-purple-border: #4527a01a;
76
- --config-ui-x-deep-purple-text: #673ab7;
77
-
78
- /* Dark Mode Theme */
79
- --config-ui-x-dark-mode-bg: #ffa0001a;
80
- --config-ui-x-dark-mode-border: #ffa0001a;
81
- --config-ui-x-dark-mode-text: #ffa000;
82
-
83
- /* Dark Mode v1 Theme */
84
- --config-ui-x-dark-mode-v1-bg: #ffa0001a;
85
- --config-ui-x-dark-mode-v1-border: #ffa0001a;
86
- --config-ui-x-dark-mode-v1-text: #ffa000;
72
+ /* Dark Mode Orange Theme */
73
+ --config-ui-x-dark-mode-orange-bg: #ffa0001a;
74
+ --config-ui-x-dark-mode-orange-border: #ffa0001a;
75
+ --config-ui-x-dark-mode-orange-text: #ffa000;
87
76
 
88
77
  /* Dark Mode Red Theme */
89
78
  --config-ui-x-dark-mode-red-bg: #d32f2f1a;
@@ -100,6 +89,11 @@
100
89
  --config-ui-x-dark-mode-purple-border: #9c27b01a;
101
90
  --config-ui-x-dark-mode-purple-text: #9c27b0;
102
91
 
92
+ /* Dark Mode Deep Purple Theme */
93
+ --config-ui-x-dark-mode-deep-purple-bg: #673ab71a;
94
+ --config-ui-x-dark-mode-deep-purple-border: #673ab71a;
95
+ --config-ui-x-dark-mode-deep-purple-text: #673ab7;
96
+
103
97
  /* Dark Mode Indigo Theme */
104
98
  --config-ui-x-dark-mode-indigo-bg: #3f51b51a;
105
99
  --config-ui-x-dark-mode-indigo-border: #3f51b51a;
@@ -115,11 +109,21 @@
115
109
  --config-ui-x-dark-mode-blue-grey-border: #607d8b1a;
116
110
  --config-ui-x-dark-mode-blue-grey-text: #607d8b;
117
111
 
112
+ /* Dark Mode Cyan Theme */
113
+ --config-ui-x-dark-mode-cyan-bg: #00838f1a;
114
+ --config-ui-x-dark-mode-cyan-border: #00838f1a;
115
+ --config-ui-x-dark-mode-cyan-text: #00838f;
116
+
118
117
  /* Dark Mode Green Theme */
119
118
  --config-ui-x-dark-mode-green-bg: #388e3c1a;
120
119
  --config-ui-x-dark-mode-green-border: #388e3c1a;
121
120
  --config-ui-x-dark-mode-green-text: #388e3c;
122
121
 
122
+ /* Dark Mode Teal Theme */
123
+ --config-ui-x-dark-mode-teal-bg: #0096881a;
124
+ --config-ui-x-dark-mode-teal-border: #0096881a;
125
+ --config-ui-x-dark-mode-teal-text: #009688;
126
+
123
127
  /* Dark Mode Grey Theme */
124
128
  --config-ui-x-dark-mode-grey-bg: #9e9e9e1a;
125
129
  --config-ui-x-dark-mode-grey-border: #9e9e9e1a;
@@ -129,696 +133,1167 @@
129
133
  --config-ui-x-dark-mode-brown-bg: #7955481a;
130
134
  --config-ui-x-dark-mode-brown-border: #7955481a;
131
135
  --config-ui-x-dark-mode-brown-text: #795548;
132
-
133
- /* Dark Mode Teal Theme */
134
- --config-ui-x-dark-mode-teal-bg: #0096881a;
135
- --config-ui-x-dark-mode-teal-border: #0096881a;
136
- --config-ui-x-dark-mode-teal-text: #009688;
137
-
138
- /* Dark Mode Cyan Theme */
139
- --config-ui-x-dark-mode-cyan-bg: #00838f1a;
140
- --config-ui-x-dark-mode-cyan-border: #00838f1a;
141
- --config-ui-x-dark-mode-cyan-text: #00838f;
142
136
  }
143
137
 
144
- /* Nav links */
145
- .config-ui-x-red .nav-link {
146
- color: var(--config-ui-x-red-text);
147
- }
148
-
149
- .config-ui-x-pink .nav-link {
150
- color: var(--config-ui-x-pink-text);
138
+ /**
139
+ * ==================================================
140
+ * Text Background (Primary)
141
+ * ==================================================
142
+ */
143
+ .config-ui-x-orange .text-bg-primary {
144
+ background-color: var(--config-ui-x-orange-text) !important;
151
145
  }
152
-
153
- .config-ui-x-purple .nav-link {
154
- color: var(--config-ui-x-purple-text);
146
+ .config-ui-x-red .text-bg-primary {
147
+ background-color: var(--config-ui-x-red-text) !important;
155
148
  }
156
-
157
- .config-ui-x-indigo .nav-link {
158
- color: var(--config-ui-x-indigo-text);
149
+ .config-ui-x-pink .text-bg-primary {
150
+ background-color: var(--config-ui-x-pink-text) !important;
159
151
  }
160
-
161
- .config-ui-x-blue .nav-link {
162
- color: var(--config-ui-x-blue-text);
152
+ .config-ui-x-purple .text-bg-primary {
153
+ background-color: var(--config-ui-x-purple-text) !important;
163
154
  }
164
-
165
- .config-ui-x-blue-grey .nav-link {
166
- color: var(--config-ui-x-blue-grey-text);
155
+ .config-ui-x-deep-purple .text-bg-primary {
156
+ background-color: var(--config-ui-x-deep-purple-text) !important;
167
157
  }
168
-
169
- .config-ui-x-navi-blue .nav-link {
170
- color: var(--config-ui-x-navi-blue-text);
158
+ .config-ui-x-indigo .text-bg-primary {
159
+ background-color: var(--config-ui-x-indigo-text) !important;
171
160
  }
172
-
173
- .config-ui-x-green .nav-link {
174
- color: var(--config-ui-x-green-text);
161
+ .config-ui-x-blue .text-bg-primary {
162
+ background-color: var(--config-ui-x-blue-text) !important;
175
163
  }
176
-
177
- .config-ui-x-orange .nav-link {
178
- color: var(--config-ui-x-orange-text);
164
+ .config-ui-x-blue-grey .text-bg-primary {
165
+ background-color: var(--config-ui-x-blue-grey-text) !important;
179
166
  }
180
-
181
- .config-ui-x-grey .nav-link {
182
- color: var(--config-ui-x-grey-text);
167
+ .config-ui-x-cyan .text-bg-primary {
168
+ background-color: var(--config-ui-x-cyan-text) !important;
183
169
  }
184
-
185
- .config-ui-x-brown .nav-link {
186
- color: var(--config-ui-x-brown-text);
170
+ .config-ui-x-green .text-bg-primary {
171
+ background-color: var(--config-ui-x-green-text) !important;
187
172
  }
188
-
189
- .config-ui-x-amber .nav-link {
190
- color: var(--config-ui-x-amber-text);
173
+ .config-ui-x-teal .text-bg-primary {
174
+ background-color: var(--config-ui-x-teal-text) !important;
191
175
  }
192
-
193
- .config-ui-x-teal .nav-link {
194
- color: var(--config-ui-x-teal-text);
176
+ .config-ui-x-grey .text-bg-primary {
177
+ background-color: var(--config-ui-x-grey-text) !important;
195
178
  }
196
-
197
- .config-ui-x-cyan .nav-link {
198
- color: var(--config-ui-x-cyan-text);
179
+ .config-ui-x-brown .text-bg-primary {
180
+ background-color: var(--config-ui-x-brown-text) !important;
199
181
  }
200
-
201
- .config-ui-x-deep-purple .nav-link {
202
- color: var(--config-ui-x-deep-purple-text);
182
+ .config-ui-x-dark-mode-orange .text-bg-primary {
183
+ background-color: var(--config-ui-x-dark-mode-orange-text) !important;
203
184
  }
204
-
205
- .config-ui-x-dark-mode .nav-link {
206
- color: var(--config-ui-x-dark-mode-text);
185
+ .config-ui-x-dark-mode-red .text-bg-primary {
186
+ background-color: var(--config-ui-x-dark-mode-red-text) !important;
207
187
  }
208
-
209
- .config-ui-x-dark-mode-v1 .nav-link {
210
- color: var(--config-ui-x-dark-mode-v1-text);
188
+ .config-ui-x-dark-mode-pink .text-bg-primary {
189
+ background-color: var(--config-ui-x-dark-mode-pink-text) !important;
211
190
  }
212
-
213
- .config-ui-x-dark-mode-red .nav-link {
214
- color: var(--config-ui-x-dark-mode-red-text);
191
+ .config-ui-x-dark-mode-purple .text-bg-primary {
192
+ background-color: var(--config-ui-x-dark-mode-purple-text) !important;
215
193
  }
216
-
217
- .config-ui-x-dark-mode-pink .nav-link {
218
- color: var(--config-ui-x-dark-mode-pink-text);
194
+ .config-ui-x-dark-mode-deep-purple .text-bg-primary {
195
+ background-color: var(--config-ui-x-dark-mode-deep-purple-text) !important;
219
196
  }
220
-
221
- .config-ui-x-dark-mode-purple .nav-link {
222
- color: var(--config-ui-x-dark-mode-purple-text);
197
+ .config-ui-x-dark-mode-indigo .text-bg-primary {
198
+ background-color: var(--config-ui-x-dark-mode-indigo-text) !important;
223
199
  }
224
-
225
- .config-ui-x-dark-mode-indigo .nav-link {
226
- color: var(--config-ui-x-dark-mode-indigo-text);
200
+ .config-ui-x-dark-mode-blue .text-bg-primary {
201
+ background-color: var(--config-ui-x-dark-mode-blue-text) !important;
227
202
  }
228
-
229
- .config-ui-x-dark-mode-blue .nav-link {
230
- color: var(--config-ui-x-dark-mode-blue-text);
203
+ .config-ui-x-dark-mode-blue-grey .text-bg-primary {
204
+ background-color: var(--config-ui-x-dark-mode-blue-grey-text) !important;
231
205
  }
232
-
233
- .config-ui-x-dark-mode-blue-grey .nav-link {
234
- color: var(--config-ui-x-dark-mode-blue-grey-text);
206
+ .config-ui-x-dark-mode-cyan .text-bg-primary {
207
+ background-color: var(--config-ui-x-dark-mode-cyan-text) !important;
235
208
  }
236
-
237
- .config-ui-x-dark-mode-green .nav-link {
238
- color: var(--config-ui-x-dark-mode-green-text);
209
+ .config-ui-x-dark-mode-green .text-bg-primary {
210
+ background-color: var(--config-ui-x-dark-mode-green-text) !important;
239
211
  }
240
-
241
- .config-ui-x-dark-mode-grey .nav-link {
242
- color: var(--config-ui-x-dark-mode-grey-text);
212
+ .config-ui-x-dark-mode-teal .text-bg-primary {
213
+ background-color: var(--config-ui-x-dark-mode-teal-text) !important;
243
214
  }
244
-
245
- .config-ui-x-dark-mode-brown .nav-link {
246
- color: var(--config-ui-x-dark-mode-brown-text);
215
+ .config-ui-x-dark-mode-grey .text-bg-primary {
216
+ background-color: var(--config-ui-x-dark-mode-grey-text) !important;
247
217
  }
248
-
249
- .config-ui-x-dark-mode-teal .nav-link {
250
- color: var(--config-ui-x-dark-mode-teal-text);
218
+ .config-ui-x-dark-mode-brown .text-bg-primary {
219
+ background-color: var(--config-ui-x-dark-mode-brown-text) !important;
251
220
  }
252
221
 
253
- .config-ui-x-dark-mode-cyan .nav-link {
254
- color: var(--config-ui-x-dark-mode-cyan-text);
222
+ /**
223
+ * ==================================================
224
+ * Nav Link
225
+ * ==================================================
226
+ */
227
+ .config-ui-x-orange .nav-link,
228
+ .config-ui-x-orange .nav-link:focus,
229
+ .config-ui-x-orange .nav-link:hover {
230
+ color: var(--config-ui-x-orange-text);
255
231
  }
256
-
257
- /* Nav links hover */
258
- .config-ui-x-red .nav-link:hover,
232
+ .config-ui-x-red .nav-link,
259
233
  .config-ui-x-red .nav-link:focus,
260
- .config-ui-x-pink .nav-link:hover,
234
+ .config-ui-x-red .nav-link:hover {
235
+ color: var(--config-ui-x-red-text);
236
+ }
237
+ .config-ui-x-pink .nav-link,
261
238
  .config-ui-x-pink .nav-link:focus,
262
- .config-ui-x-purple .nav-link:hover,
239
+ .config-ui-x-pink .nav-link:hover {
240
+ color: var(--config-ui-x-pink-text);
241
+ }
242
+ .config-ui-x-purple .nav-link,
263
243
  .config-ui-x-purple .nav-link:focus,
264
- .config-ui-x-indigo .nav-link:hover,
244
+ .config-ui-x-purple .nav-link:hover {
245
+ color: var(--config-ui-x-purple-text);
246
+ }
247
+ .config-ui-x-deep-purple .nav-link,
248
+ .config-ui-x-deep-purple .nav-link:focus,
249
+ .config-ui-x-deep-purple .nav-link:hover {
250
+ color: var(--config-ui-x-deep-purple-text);
251
+ }
252
+ .config-ui-x-indigo .nav-link,
265
253
  .config-ui-x-indigo .nav-link:focus,
266
- .config-ui-x-blue .nav-link:hover,
254
+ .config-ui-x-indigo .nav-link:hover {
255
+ color: var(--config-ui-x-indigo-text);
256
+ }
257
+ .config-ui-x-blue .nav-link,
267
258
  .config-ui-x-blue .nav-link:focus,
268
- .config-ui-x-blue-grey .nav-link:hover,
259
+ .config-ui-x-blue .nav-link:hover {
260
+ color: var(--config-ui-x-blue-text);
261
+ }
262
+ .config-ui-x-blue-grey .nav-link,
269
263
  .config-ui-x-blue-grey .nav-link:focus,
270
- .config-ui-x-navi-blue .nav-link:hover,
271
- .config-ui-x-navi-blue .nav-link:focus,
272
- .config-ui-x-green .nav-link:hover,
264
+ .config-ui-x-blue-grey .nav-link:hover {
265
+ color: var(--config-ui-x-blue-grey-text);
266
+ }
267
+ .config-ui-x-cyan .nav-link,
268
+ .config-ui-x-cyan .nav-link:focus,
269
+ .config-ui-x-cyan .nav-link:hover {
270
+ color: var(--config-ui-x-cyan-text);
271
+ }
272
+ .config-ui-x-green .nav-link,
273
273
  .config-ui-x-green .nav-link:focus,
274
- .config-ui-x-orange .nav-link:hover,
275
- .config-ui-x-orange .nav-link:focus,
276
- .config-ui-x-grey .nav-link:hover,
274
+ .config-ui-x-green .nav-link:hover {
275
+ color: var(--config-ui-x-green-text);
276
+ }
277
+ .config-ui-x-teal .nav-link,
278
+ .config-ui-x-teal .nav-link:focus,
279
+ .config-ui-x-teal .nav-link:hover {
280
+ color: var(--config-ui-x-teal-text);
281
+ }
282
+ .config-ui-x-grey .nav-link,
277
283
  .config-ui-x-grey .nav-link:focus,
278
- .config-ui-x-brown .nav-link:hover,
284
+ .config-ui-x-grey .nav-link:hover {
285
+ color: var(--config-ui-x-grey-text);
286
+ }
287
+ .config-ui-x-brown .nav-link,
279
288
  .config-ui-x-brown .nav-link:focus,
280
- .config-ui-x-amber .nav-link:hover,
281
- .config-ui-x-amber .nav-link:focus,
282
- .config-ui-x-teal .nav-link:hover,
283
- .config-ui-x-teal .nav-link:focus,
284
- .config-ui-x-cyan .nav-link:hover,
285
- .config-ui-x-cyan .nav-link:focus,
286
- .config-ui-x-deep-purple .nav-link:hover,
287
- .config-ui-x-deep-purple .nav-link:focus,
288
- .config-ui-x-dark-mode .nav-link:hover,
289
- .config-ui-x-dark-mode .nav-link:focus,
290
- .config-ui-x-dark-mode-v1 .nav-link:hover,
291
- .config-ui-x-dark-mode-v1 .nav-link:focus,
292
- .config-ui-x-dark-mode-red .nav-link:hover,
289
+ .config-ui-x-brown .nav-link:hover {
290
+ color: var(--config-ui-x-brown-text);
291
+ }
292
+ .config-ui-x-dark-mode-orange .nav-link,
293
+ .config-ui-x-dark-mode-orange .nav-link:focus,
294
+ .config-ui-x-dark-mode-orange .nav-link:hover {
295
+ color: var(--config-ui-x-dark-mode-orange-text);
296
+ }
297
+ .config-ui-x-dark-mode-red .nav-link,
293
298
  .config-ui-x-dark-mode-red .nav-link:focus,
294
- .config-ui-x-dark-mode-pink .nav-link:hover,
299
+ .config-ui-x-dark-mode-red .nav-link:hover {
300
+ color: var(--config-ui-x-dark-mode-red-text);
301
+ }
302
+ .config-ui-x-dark-mode-pink .nav-link,
295
303
  .config-ui-x-dark-mode-pink .nav-link:focus,
296
- .config-ui-x-dark-mode-purple .nav-link:hover,
304
+ .config-ui-x-dark-mode-pink .nav-link:hover {
305
+ color: var(--config-ui-x-dark-mode-pink-text);
306
+ }
307
+ .config-ui-x-dark-mode-purple .nav-link,
297
308
  .config-ui-x-dark-mode-purple .nav-link:focus,
298
- .config-ui-x-dark-mode-indigo .nav-link:hover,
309
+ .config-ui-x-dark-mode-purple .nav-link:hover {
310
+ color: var(--config-ui-x-dark-mode-purple-text);
311
+ }
312
+ .config-ui-x-dark-mode-deep-purple .nav-link,
313
+ .config-ui-x-dark-mode-deep-purple .nav-link:focus,
314
+ .config-ui-x-dark-mode-deep-purple .nav-link:hover {
315
+ color: var(--config-ui-x-dark-mode-deep-purple-text);
316
+ }
317
+ .config-ui-x-dark-mode-indigo .nav-link,
299
318
  .config-ui-x-dark-mode-indigo .nav-link:focus,
300
- .config-ui-x-dark-mode-blue .nav-link:hover,
319
+ .config-ui-x-dark-mode-indigo .nav-link:hover {
320
+ color: var(--config-ui-x-dark-mode-indigo-text);
321
+ }
322
+ .config-ui-x-dark-mode-blue .nav-link,
301
323
  .config-ui-x-dark-mode-blue .nav-link:focus,
302
- .config-ui-x-dark-mode-blue-grey .nav-link:hover,
324
+ .config-ui-x-dark-mode-blue .nav-link:hover {
325
+ color: var(--config-ui-x-dark-mode-blue-text);
326
+ }
327
+ .config-ui-x-dark-mode-blue-grey .nav-link,
303
328
  .config-ui-x-dark-mode-blue-grey .nav-link:focus,
304
- .config-ui-x-dark-mode-green .nav-link:hover,
305
- .config-ui-x-dark-mode-green .nav-link:focus,
306
- .config-ui-x-dark-mode-grey .nav-link:hover,
307
- .config-ui-x-dark-mode-grey .nav-link:focus,
308
- .config-ui-x-dark-mode-brown .nav-link:hover,
309
- .config-ui-x-dark-mode-brown .nav-link:focus {
310
- filter: brightness(1.2);
329
+ .config-ui-x-dark-mode-blue-grey .nav-link:hover {
330
+ color: var(--config-ui-x-dark-mode-blue-grey-text);
311
331
  }
312
-
313
- /* Navigation tabs */
314
- .nav-tabs .nav-link {
315
- color: inherit;
332
+ .config-ui-x-dark-mode-cyan .nav-link,
333
+ .config-ui-x-dark-mode-cyan .nav-link:focus,
334
+ .config-ui-x-dark-mode-cyan .nav-link:hover {
335
+ color: var(--config-ui-x-dark-mode-cyan-text);
316
336
  }
317
-
318
- /* Checkbox */
319
- .config-ui-x-red .form-check-input[type="checkbox"] {
320
- border-color: var(--config-ui-x-red-text);
337
+ .config-ui-x-dark-mode-green .nav-link,
338
+ .config-ui-x-dark-mode-green .nav-link:focus,
339
+ .config-ui-x-dark-mode-green .nav-link:hover {
340
+ color: var(--config-ui-x-dark-mode-green-text);
321
341
  }
322
-
323
- .config-ui-x-pink .form-check-input[type="checkbox"] {
324
- border-color: var(--config-ui-x-pink-text);
342
+ .config-ui-x-dark-mode-teal .nav-link,
343
+ .config-ui-x-dark-mode-teal .nav-link:focus,
344
+ .config-ui-x-dark-mode-teal .nav-link:hover {
345
+ color: var(--config-ui-x-dark-mode-teal-text);
325
346
  }
326
-
327
- .config-ui-x-purple .form-check-input[type="checkbox"] {
328
- border-color: var(--config-ui-x-purple-text);
347
+ .config-ui-x-dark-mode-grey .nav-link,
348
+ .config-ui-x-dark-mode-grey .nav-link:focus,
349
+ .config-ui-x-dark-mode-grey .nav-link:hover {
350
+ color: var(--config-ui-x-dark-mode-grey-text);
329
351
  }
330
-
331
- .config-ui-x-indigo .form-check-input[type="checkbox"] {
332
- border-color: var(--config-ui-x-indigo-text);
352
+ .config-ui-x-dark-mode-brown .nav-link,
353
+ .config-ui-x-dark-mode-brown .nav-link:focus,
354
+ .config-ui-x-dark-mode-brown .nav-link:hover {
355
+ color: var(--config-ui-x-dark-mode-brown-text);
333
356
  }
334
357
 
335
- .config-ui-x-blue .form-check-input[type="checkbox"] {
336
- border-color: var(--config-ui-x-blue-text);
358
+ /**
359
+ * ==================================================
360
+ * Navigation Tab Links
361
+ * ==================================================
362
+ */
363
+ .config-ui-x-orange .nav-tabs .nav-link:focus,
364
+ .config-ui-x-orange .nav-tabs .nav-link:hover {
365
+ color: var(--config-ui-x-orange-text);
337
366
  }
338
-
339
- .config-ui-x-blue-grey .form-check-input[type="checkbox"] {
340
- border-color: var(--config-ui-x-blue-grey-text);
367
+ .config-ui-x-red .nav-tabs .nav-link:focus,
368
+ .config-ui-x-red .nav-tabs .nav-link:hover {
369
+ color: var(--config-ui-x-red-text);
341
370
  }
342
-
343
- .config-ui-x-navi-blue .form-check-input[type="checkbox"] {
344
- border-color: var(--config-ui-x-navi-blue-text);
371
+ .config-ui-x-pink .nav-tabs .nav-link:focus,
372
+ .config-ui-x-pink .nav-tabs .nav-link:hover {
373
+ color: var(--config-ui-x-pink-text);
345
374
  }
346
-
347
- .config-ui-x-green .form-check-input[type="checkbox"] {
348
- border-color: var(--config-ui-x-green-text);
375
+ .config-ui-x-purple .nav-tabs .nav-link:focus,
376
+ .config-ui-x-purple .nav-tabs .nav-link:hover {
377
+ color: var(--config-ui-x-purple-text);
349
378
  }
350
-
351
- .config-ui-x-orange .form-check-input[type="checkbox"] {
352
- border-color: var(--config-ui-x-orange-text);
379
+ .config-ui-x-deep-purple .nav-tabs .nav-link:focus,
380
+ .config-ui-x-deep-purple .nav-tabs .nav-link:hover {
381
+ color: var(--config-ui-x-deep-purple-text);
353
382
  }
354
-
355
- .config-ui-x-grey .form-check-input[type="checkbox"] {
356
- border-color: var(--config-ui-x-grey-text);
383
+ .config-ui-x-indigo .nav-tabs .nav-link:focus,
384
+ .config-ui-x-indigo .nav-tabs .nav-link:hover {
385
+ color: var(--config-ui-x-indigo-text);
357
386
  }
358
-
359
- .config-ui-x-brown .form-check-input[type="checkbox"] {
360
- border-color: var(--config-ui-x-brown-text);
387
+ .config-ui-x-blue .nav-tabs .nav-link:focus,
388
+ .config-ui-x-blue .nav-tabs .nav-link:hover {
389
+ color: var(--config-ui-x-blue-text);
361
390
  }
362
-
363
- .config-ui-x-amber .form-check-input[type="checkbox"] {
364
- border-color: var(--config-ui-x-amber-text);
391
+ .config-ui-x-blue-grey .nav-tabs .nav-link:focus,
392
+ .config-ui-x-blue-grey .nav-tabs .nav-link:hover {
393
+ color: var(--config-ui-x-blue-grey-text);
365
394
  }
366
-
367
- .config-ui-x-teal .form-check-input[type="checkbox"] {
368
- border-color: var(--config-ui-x-teal-text);
395
+ .config-ui-x-cyan .nav-tabs .nav-link:focus,
396
+ .config-ui-x-cyan .nav-tabs .nav-link:hover {
397
+ color: var(--config-ui-x-cyan-text);
369
398
  }
370
-
371
- .config-ui-x-cyan .form-check-input[type="checkbox"] {
372
- border-color: var(--config-ui-x-cyan-text);
399
+ .config-ui-x-green .nav-tabs .nav-link:focus,
400
+ .config-ui-x-green .nav-tabs .nav-link:hover {
401
+ color: var(--config-ui-x-green-text);
373
402
  }
374
-
375
- .config-ui-x-deep-purple .form-check-input[type="checkbox"] {
376
- border-color: var(--config-ui-x-deep-purple-text);
403
+ .config-ui-x-teal .nav-tabs .nav-link:focus,
404
+ .config-ui-x-teal .nav-tabs .nav-link:hover {
405
+ color: var(--config-ui-x-teal-text);
377
406
  }
378
-
379
- .config-ui-x-dark-mode .form-check-input[type="checkbox"] {
380
- border-color: var(--config-ui-x-dark-mode-text);
407
+ .config-ui-x-grey .nav-tabs .nav-link:focus,
408
+ .config-ui-x-grey .nav-tabs .nav-link:hover {
409
+ color: var(--config-ui-x-grey-text);
381
410
  }
382
-
383
- .config-ui-x-dark-mode-v1 .form-check-input[type="checkbox"] {
384
- border-color: var(--config-ui-x-dark-mode-v1-text);
411
+ .config-ui-x-brown .nav-tabs .nav-link:focus,
412
+ .config-ui-x-brown .nav-tabs .nav-link:hover {
413
+ color: var(--config-ui-x-brown-text);
414
+ }
415
+ .config-ui-x-dark-mode-orange .nav-tabs .nav-link:focus,
416
+ .config-ui-x-dark-mode-orange .nav-tabs .nav-link:hover {
417
+ color: var(--config-ui-x-dark-mode-orange-text);
418
+ }
419
+ .config-ui-x-dark-mode-red .nav-tabs .nav-link:focus,
420
+ .config-ui-x-dark-mode-red .nav-tabs .nav-link:hover {
421
+ color: var(--config-ui-x-dark-mode-red-text);
422
+ }
423
+ .config-ui-x-dark-mode-pink .nav-tabs .nav-link:focus,
424
+ .config-ui-x-dark-mode-pink .nav-tabs .nav-link:hover {
425
+ color: var(--config-ui-x-dark-mode-pink-text);
426
+ }
427
+ .config-ui-x-dark-mode-purple .nav-tabs .nav-link:focus,
428
+ .config-ui-x-dark-mode-purple .nav-tabs .nav-link:hover {
429
+ color: var(--config-ui-x-dark-mode-purple-text);
430
+ }
431
+ .config-ui-x-dark-mode-deep-purple .nav-tabs .nav-link:focus,
432
+ .config-ui-x-dark-mode-deep-purple .nav-tabs .nav-link:hover {
433
+ color: var(--config-ui-x-dark-mode-deep-purple-text);
434
+ }
435
+ .config-ui-x-dark-mode-indigo .nav-tabs .nav-link:focus,
436
+ .config-ui-x-dark-mode-indigo .nav-tabs .nav-link:hover {
437
+ color: var(--config-ui-x-dark-mode-indigo-text);
438
+ }
439
+ .config-ui-x-dark-mode-blue .nav-tabs .nav-link:focus,
440
+ .config-ui-x-dark-mode-blue .nav-tabs .nav-link:hover {
441
+ color: var(--config-ui-x-dark-mode-blue-text);
442
+ }
443
+ .config-ui-x-dark-mode-blue-grey .nav-tabs .nav-link:focus,
444
+ .config-ui-x-dark-mode-blue-grey .nav-tabs .nav-link:hover {
445
+ color: var(--config-ui-x-dark-mode-blue-grey-text);
446
+ }
447
+ .config-ui-x-dark-mode-cyan .nav-tabs .nav-link:focus,
448
+ .config-ui-x-dark-mode-cyan .nav-tabs .nav-link:hover {
449
+ color: var(--config-ui-x-dark-mode-cyan-text);
450
+ }
451
+ .config-ui-x-dark-mode-green .nav-tabs .nav-link:focus,
452
+ .config-ui-x-dark-mode-green .nav-tabs .nav-link:hover {
453
+ color: var(--config-ui-x-dark-mode-green-text);
454
+ }
455
+ .config-ui-x-dark-mode-teal .nav-tabs .nav-link:focus,
456
+ .config-ui-x-dark-mode-teal .nav-tabs .nav-link:hover {
457
+ color: var(--config-ui-x-dark-mode-teal-text);
458
+ }
459
+ .config-ui-x-dark-mode-grey .nav-tabs .nav-link:focus,
460
+ .config-ui-x-dark-mode-grey .nav-tabs .nav-link:hover {
461
+ color: var(--config-ui-x-dark-mode-grey-text);
462
+ }
463
+ .config-ui-x-dark-mode-brown .nav-tabs .nav-link:focus,
464
+ .config-ui-x-dark-mode-brown .nav-tabs .nav-link:hover {
465
+ color: var(--config-ui-x-dark-mode-brown-text);
385
466
  }
386
467
 
387
- .config-ui-x-dark-mode-red .form-check-input[type="checkbox"] {
468
+ /**
469
+ * ==================================================
470
+ * Alert
471
+ * ==================================================
472
+ */
473
+ .config-ui-x-orange .alert,
474
+ .config-ui-x-red .alert,
475
+ .config-ui-x-pink .alert,
476
+ .config-ui-x-purple .alert,
477
+ .config-ui-x-deep-purple .alert,
478
+ .config-ui-x-indigo .alert,
479
+ .config-ui-x-blue .alert,
480
+ .config-ui-x-blue-grey .alert,
481
+ .config-ui-x-cyan .alert,
482
+ .config-ui-x-green .alert,
483
+ .config-ui-x-teal .alert,
484
+ .config-ui-x-grey .alert,
485
+ .config-ui-x-brown .alert,
486
+ .config-ui-x-dark-mode-orange .alert,
487
+ .config-ui-x-dark-mode-red .alert,
488
+ .config-ui-x-dark-mode-pink .alert,
489
+ .config-ui-x-dark-mode-purple .alert,
490
+ .config-ui-x-dark-mode-deep-purple .alert,
491
+ .config-ui-x-dark-mode-indigo .alert,
492
+ .config-ui-x-dark-mode-blue .alert,
493
+ .config-ui-x-dark-mode-blue-grey .alert,
494
+ .config-ui-x-dark-mode-cyan .alert,
495
+ .config-ui-x-dark-mode-green .alert,
496
+ .config-ui-x-dark-mode-teal .alert,
497
+ .config-ui-x-dark-mode-grey .alert,
498
+ .config-ui-x-dark-mode-brown .alert {
499
+ color: var(--bs-alert-color) !important;
500
+ background-color: var(--bs-alert-bg) !important;
501
+ border-color: var(--bs-alert-border-color) !important;
502
+ box-shadow: 0 0 1px var(--bs-alert-border-color) !important;
503
+ }
504
+
505
+ /**
506
+ * ==================================================
507
+ * Table (Bordered)
508
+ * ==================================================
509
+ */
510
+ .config-ui-x-orange .table-bordered,
511
+ .config-ui-x-orange .table-bordered th,
512
+ .config-ui-x-orange .table-bordered td,
513
+ .config-ui-x-red .table-bordered,
514
+ .config-ui-x-red .table-bordered th,
515
+ .config-ui-x-red .table-bordered td,
516
+ .config-ui-x-pink .table-bordered,
517
+ .config-ui-x-pink .table-bordered th,
518
+ .config-ui-x-pink .table-bordered td,
519
+ .config-ui-x-purple .table-bordered,
520
+ .config-ui-x-purple .table-bordered th,
521
+ .config-ui-x-purple .table-bordered td,
522
+ .config-ui-x-deep-purple .table-bordered,
523
+ .config-ui-x-deep-purple .table-bordered th,
524
+ .config-ui-x-deep-purple .table-bordered td,
525
+ .config-ui-x-indigo .table-bordered,
526
+ .config-ui-x-indigo .table-bordered th,
527
+ .config-ui-x-indigo .table-bordered td,
528
+ .config-ui-x-blue .table-bordered,
529
+ .config-ui-x-blue .table-bordered th,
530
+ .config-ui-x-blue .table-bordered td,
531
+ .config-ui-x-blue-grey .table-bordered,
532
+ .config-ui-x-blue-grey .table-bordered th,
533
+ .config-ui-x-blue-grey .table-bordered td,
534
+ .config-ui-x-cyan .table-bordered,
535
+ .config-ui-x-cyan .table-bordered th,
536
+ .config-ui-x-cyan .table-bordered td,
537
+ .config-ui-x-green .table-bordered,
538
+ .config-ui-x-green .table-bordered th,
539
+ .config-ui-x-green .table-bordered td,
540
+ .config-ui-x-teal .table-bordered,
541
+ .config-ui-x-teal .table-bordered th,
542
+ .config-ui-x-teal .table-bordered td,
543
+ .config-ui-x-grey .table-bordered,
544
+ .config-ui-x-grey .table-bordered th,
545
+ .config-ui-x-grey .table-bordered td,
546
+ .config-ui-x-brown .table-bordered,
547
+ .config-ui-x-brown .table-bordered th,
548
+ .config-ui-x-brown .table-bordered td,
549
+ .config-ui-x-dark-mode-orange .table-bordered,
550
+ .config-ui-x-dark-mode-orange .table-bordered th,
551
+ .config-ui-x-dark-mode-orange .table-bordered td,
552
+ .config-ui-x-dark-mode-red .table-bordered,
553
+ .config-ui-x-dark-mode-red .table-bordered th,
554
+ .config-ui-x-dark-mode-red .table-bordered td,
555
+ .config-ui-x-dark-mode-pink .table-bordered,
556
+ .config-ui-x-dark-mode-pink .table-bordered th,
557
+ .config-ui-x-dark-mode-pink .table-bordered td,
558
+ .config-ui-x-dark-mode-purple .table-bordered,
559
+ .config-ui-x-dark-mode-purple .table-bordered th,
560
+ .config-ui-x-dark-mode-purple .table-bordered td,
561
+ .config-ui-x-dark-mode-deep-purple .table-bordered,
562
+ .config-ui-x-dark-mode-deep-purple .table-bordered th,
563
+ .config-ui-x-dark-mode-deep-purple .table-bordered td,
564
+ .config-ui-x-dark-mode-indigo .table-bordered,
565
+ .config-ui-x-dark-mode-indigo .table-bordered th,
566
+ .config-ui-x-dark-mode-indigo .table-bordered td,
567
+ .config-ui-x-dark-mode-blue .table-bordered,
568
+ .config-ui-x-dark-mode-blue .table-bordered th,
569
+ .config-ui-x-dark-mode-blue .table-bordered td,
570
+ .config-ui-x-dark-mode-blue-grey .table-bordered,
571
+ .config-ui-x-dark-mode-blue-grey .table-bordered th,
572
+ .config-ui-x-dark-mode-blue-grey .table-bordered td,
573
+ .config-ui-x-dark-mode-cyan .table-bordered,
574
+ .config-ui-x-dark-mode-cyan .table-bordered th,
575
+ .config-ui-x-dark-mode-cyan .table-bordered td,
576
+ .config-ui-x-dark-mode-green .table-bordered,
577
+ .config-ui-x-dark-mode-green .table-bordered th,
578
+ .config-ui-x-dark-mode-green .table-bordered td,
579
+ .config-ui-x-dark-mode-teal .table-bordered,
580
+ .config-ui-x-dark-mode-teal .table-bordered th,
581
+ .config-ui-x-dark-mode-teal .table-bordered td,
582
+ .config-ui-x-dark-mode-grey .table-bordered,
583
+ .config-ui-x-dark-mode-grey .table-bordered th,
584
+ .config-ui-x-dark-mode-grey .table-bordered td,
585
+ .config-ui-x-dark-mode-brown .table-bordered,
586
+ .config-ui-x-dark-mode-brown .table-bordered th,
587
+ .config-ui-x-dark-mode-brown .table-bordered td {
588
+ border-color: var(--bs-table-border-color);
589
+ }
590
+
591
+ /**
592
+ * ==================================================
593
+ * Form Label
594
+ * ==================================================
595
+ */
596
+ .config-ui-x-orange .form-label,
597
+ .config-ui-x-red .form-label,
598
+ .config-ui-x-pink .form-label,
599
+ .config-ui-x-purple .form-label,
600
+ .config-ui-x-deep-purple .form-label,
601
+ .config-ui-x-indigo .form-label,
602
+ .config-ui-x-blue .form-label,
603
+ .config-ui-x-blue-grey .form-label,
604
+ .config-ui-x-cyan .form-label,
605
+ .config-ui-x-green .form-label,
606
+ .config-ui-x-teal .form-label,
607
+ .config-ui-x-grey .form-label,
608
+ .config-ui-x-brown .form-label,
609
+ .config-ui-x-dark-mode-orange .form-label,
610
+ .config-ui-x-dark-mode-red .form-label,
611
+ .config-ui-x-dark-mode-pink .form-label,
612
+ .config-ui-x-dark-mode-purple .form-label,
613
+ .config-ui-x-dark-mode-deep-purple .form-label,
614
+ .config-ui-x-dark-mode-indigo .form-label,
615
+ .config-ui-x-dark-mode-blue .form-label,
616
+ .config-ui-x-dark-mode-blue-grey .form-label,
617
+ .config-ui-x-dark-mode-cyan .form-label,
618
+ .config-ui-x-dark-mode-green .form-label,
619
+ .config-ui-x-dark-mode-teal .form-label,
620
+ .config-ui-x-dark-mode-grey .form-label,
621
+ .config-ui-x-dark-mode-brown .form-label {
622
+ font-weight: normal;
623
+ }
624
+
625
+ /**
626
+ * ==================================================
627
+ * Form Control
628
+ * ==================================================
629
+ */
630
+ .config-ui-x-orange .form-control,
631
+ .config-ui-x-red .form-control,
632
+ .config-ui-x-pink .form-control,
633
+ .config-ui-x-purple .form-control,
634
+ .config-ui-x-deep-purple .form-control,
635
+ .config-ui-x-indigo .form-control,
636
+ .config-ui-x-blue .form-control,
637
+ .config-ui-x-blue-grey .form-control,
638
+ .config-ui-x-cyan .form-control,
639
+ .config-ui-x-green .form-control,
640
+ .config-ui-x-teal .form-control,
641
+ .config-ui-x-grey .form-control,
642
+ .config-ui-x-brown .form-control,
643
+ .config-ui-x-dark-mode-orange .form-control,
644
+ .config-ui-x-dark-mode-red .form-control,
645
+ .config-ui-x-dark-mode-pink .form-control,
646
+ .config-ui-x-dark-mode-purple .form-control,
647
+ .config-ui-x-dark-mode-deep-purple .form-control,
648
+ .config-ui-x-dark-mode-indigo .form-control,
649
+ .config-ui-x-dark-mode-blue .form-control,
650
+ .config-ui-x-dark-mode-blue-grey .form-control,
651
+ .config-ui-x-dark-mode-cyan .form-control,
652
+ .config-ui-x-dark-mode-green .form-control,
653
+ .config-ui-x-dark-mode-teal .form-control,
654
+ .config-ui-x-dark-mode-grey .form-control,
655
+ .config-ui-x-dark-mode-brown .form-control {
656
+ color: var(--bs-body-color);
657
+ background-color: var(--bs-body-bg);
658
+ border-color: var(--bs-border-color);
659
+ }
660
+
661
+ /**
662
+ * ==================================================
663
+ * Form Control (Focus)
664
+ * ==================================================
665
+ */
666
+ .config-ui-x-orange .form-control:focus {
667
+ color: var(--bs-body-color);
668
+ background-color: var(--bs-body-bg);
669
+ border-color: var(--config-ui-x-orange-text);
670
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-orange-border);
671
+ }
672
+ .config-ui-x-red .form-control:focus {
673
+ color: var(--bs-body-color);
674
+ background-color: var(--bs-body-bg);
675
+ border-color: var(--config-ui-x-red-text);
676
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-red-border);
677
+ }
678
+ .config-ui-x-pink .form-control:focus {
679
+ color: var(--bs-body-color);
680
+ background-color: var(--bs-body-bg);
681
+ border-color: var(--config-ui-x-pink-text);
682
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-pink-border);
683
+ }
684
+ .config-ui-x-purple .form-control:focus {
685
+ color: var(--bs-body-color);
686
+ background-color: var(--bs-body-bg);
687
+ border-color: var(--config-ui-x-purple-text);
688
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-purple-border);
689
+ }
690
+ .config-ui-x-deep-purple .form-control:focus {
691
+ color: var(--bs-body-color);
692
+ background-color: var(--bs-body-bg);
693
+ border-color: var(--config-ui-x-deep-purple-text);
694
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-deep-purple-border);
695
+ }
696
+ .config-ui-x-indigo .form-control:focus {
697
+ color: var(--bs-body-color);
698
+ background-color: var(--bs-body-bg);
699
+ border-color: var(--config-ui-x-indigo-text);
700
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-indigo-border);
701
+ }
702
+ .config-ui-x-blue .form-control:focus {
703
+ color: var(--bs-body-color);
704
+ background-color: var(--bs-body-bg);
705
+ border-color: var(--config-ui-x-blue-text);
706
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-blue-border);
707
+ }
708
+ .config-ui-x-blue-grey .form-control:focus {
709
+ color: var(--bs-body-color);
710
+ background-color: var(--bs-body-bg);
711
+ border-color: var(--config-ui-x-blue-grey-text);
712
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-blue-grey-border);
713
+ }
714
+ .config-ui-x-cyan .form-control:focus {
715
+ color: var(--bs-body-color);
716
+ background-color: var(--bs-body-bg);
717
+ border-color: var(--config-ui-x-cyan-text);
718
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-cyan-border);
719
+ }
720
+ .config-ui-x-green .form-control:focus {
721
+ color: var(--bs-body-color);
722
+ background-color: var(--bs-body-bg);
723
+ border-color: var(--config-ui-x-green-text);
724
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-green-border);
725
+ }
726
+ .config-ui-x-teal .form-control:focus {
727
+ color: var(--bs-body-color);
728
+ background-color: var(--bs-body-bg);
729
+ border-color: var(--config-ui-x-teal-text);
730
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-teal-border);
731
+ }
732
+ .config-ui-x-grey .form-control:focus {
733
+ color: var(--bs-body-color);
734
+ background-color: var(--bs-body-bg);
735
+ border-color: var(--config-ui-x-grey-text);
736
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-grey-border);
737
+ }
738
+ .config-ui-x-brown .form-control:focus {
739
+ color: var(--bs-body-color);
740
+ background-color: var(--bs-body-bg);
741
+ border-color: var(--config-ui-x-brown-text);
742
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-brown-border);
743
+ }
744
+ .config-ui-x-dark-mode-orange .form-control:focus {
745
+ color: var(--bs-body-color);
746
+ background-color: var(--bs-body-bg);
747
+ border-color: var(--config-ui-x-dark-mode-orange-text);
748
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-orange-border);
749
+ }
750
+ .config-ui-x-dark-mode-red .form-control:focus {
751
+ color: var(--bs-body-color);
752
+ background-color: var(--bs-body-bg);
388
753
  border-color: var(--config-ui-x-dark-mode-red-text);
754
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-red-border);
389
755
  }
390
-
391
- .config-ui-x-dark-mode-pink .form-check-input[type="checkbox"] {
756
+ .config-ui-x-dark-mode-pink .form-control:focus {
757
+ color: var(--bs-body-color);
758
+ background-color: var(--bs-body-bg);
392
759
  border-color: var(--config-ui-x-dark-mode-pink-text);
760
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-pink-border);
393
761
  }
394
-
395
- .config-ui-x-dark-mode-purple .form-check-input[type="checkbox"] {
762
+ .config-ui-x-dark-mode-purple .form-control:focus {
763
+ color: var(--bs-body-color);
764
+ background-color: var(--bs-body-bg);
396
765
  border-color: var(--config-ui-x-dark-mode-purple-text);
766
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-purple-border);
397
767
  }
398
-
399
- .config-ui-x-dark-mode-indigo .form-check-input[type="checkbox"] {
768
+ .config-ui-x-dark-mode-deep-purple .form-control:focus {
769
+ color: var(--bs-body-color);
770
+ background-color: var(--bs-body-bg);
771
+ border-color: var(--config-ui-x-dark-mode-deep-purple-text);
772
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-deep-purple-border);
773
+ }
774
+ .config-ui-x-dark-mode-indigo .form-control:focus {
775
+ color: var(--bs-body-color);
776
+ background-color: var(--bs-body-bg);
400
777
  border-color: var(--config-ui-x-dark-mode-indigo-text);
778
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-indigo-border);
401
779
  }
402
-
403
- .config-ui-x-dark-mode-blue .form-check-input[type="checkbox"] {
780
+ .config-ui-x-dark-mode-blue .form-control:focus {
781
+ color: var(--bs-body-color);
782
+ background-color: var(--bs-body-bg);
404
783
  border-color: var(--config-ui-x-dark-mode-blue-text);
784
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-blue-border);
405
785
  }
406
-
407
- .config-ui-x-dark-mode-blue-grey .form-check-input[type="checkbox"] {
786
+ .config-ui-x-dark-mode-blue-grey .form-control:focus {
787
+ color: var(--bs-body-color);
788
+ background-color: var(--bs-body-bg);
408
789
  border-color: var(--config-ui-x-dark-mode-blue-grey-text);
790
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-blue-grey-border);
409
791
  }
410
-
411
- .config-ui-x-dark-mode-green .form-check-input[type="checkbox"] {
792
+ .config-ui-x-dark-mode-cyan .form-control:focus {
793
+ color: var(--bs-body-color);
794
+ background-color: var(--bs-body-bg);
795
+ border-color: var(--config-ui-x-dark-mode-cyan-text);
796
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-cyan-border);
797
+ }
798
+ .config-ui-x-dark-mode-green .form-control:focus {
799
+ color: var(--bs-body-color);
800
+ background-color: var(--bs-body-bg);
412
801
  border-color: var(--config-ui-x-dark-mode-green-text);
802
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-green-border);
413
803
  }
414
-
415
- .config-ui-x-dark-mode-grey .form-check-input[type="checkbox"] {
804
+ .config-ui-x-dark-mode-teal .form-control:focus {
805
+ color: var(--bs-body-color);
806
+ background-color: var(--bs-body-bg);
807
+ border-color: var(--config-ui-x-dark-mode-teal-text);
808
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-teal-border);
809
+ }
810
+ .config-ui-x-dark-mode-grey .form-control:focus {
811
+ color: var(--bs-body-color);
812
+ background-color: var(--bs-body-bg);
416
813
  border-color: var(--config-ui-x-dark-mode-grey-text);
814
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-grey-border);
417
815
  }
418
-
419
- .config-ui-x-dark-mode-brown .form-check-input[type="checkbox"] {
816
+ .config-ui-x-dark-mode-brown .form-control:focus {
817
+ color: var(--bs-body-color);
818
+ background-color: var(--bs-body-bg);
420
819
  border-color: var(--config-ui-x-dark-mode-brown-text);
820
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-brown-border);
421
821
  }
422
822
 
423
- .config-ui-x-dark-mode-teal .form-check-input[type="checkbox"] {
823
+ /**
824
+ * ==================================================
825
+ * Form Select (Focus)
826
+ * ==================================================
827
+ */
828
+ .config-ui-x-orange .form-select:focus {
829
+ border-color: var(--config-ui-x-orange-text);
830
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-orange-border);
831
+ }
832
+ .config-ui-x-red .form-select:focus {
833
+ border-color: var(--config-ui-x-red-text);
834
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-red-border);
835
+ }
836
+ .config-ui-x-pink .form-select:focus {
837
+ border-color: var(--config-ui-x-pink-text);
838
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-pink-border);
839
+ }
840
+ .config-ui-x-purple .form-select:focus {
841
+ border-color: var(--config-ui-x-purple-text);
842
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-purple-border);
843
+ }
844
+ .config-ui-x-deep-purple .form-select:focus {
845
+ border-color: var(--config-ui-x-deep-purple-text);
846
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-deep-purple-border);
847
+ }
848
+ .config-ui-x-indigo .form-select:focus {
849
+ border-color: var(--config-ui-x-indigo-text);
850
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-indigo-border);
851
+ }
852
+ .config-ui-x-blue .form-select:focus {
853
+ border-color: var(--config-ui-x-blue-text);
854
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-blue-border);
855
+ }
856
+ .config-ui-x-blue-grey .form-select:focus {
857
+ border-color: var(--config-ui-x-blue-grey-text);
858
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-blue-grey-border);
859
+ }
860
+ .config-ui-x-cyan .form-select:focus {
861
+ border-color: var(--config-ui-x-cyan-text);
862
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-cyan-border);
863
+ }
864
+ .config-ui-x-green .form-select:focus {
865
+ border-color: var(--config-ui-x-green-text);
866
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-green-border);
867
+ }
868
+ .config-ui-x-teal .form-select:focus {
869
+ border-color: var(--config-ui-x-teal-text);
870
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-teal-border);
871
+ }
872
+ .config-ui-x-grey .form-select:focus {
873
+ border-color: var(--config-ui-x-grey-text);
874
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-grey-border);
875
+ }
876
+ .config-ui-x-brown .form-select:focus {
877
+ border-color: var(--config-ui-x-brown-text);
878
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-brown-border);
879
+ }
880
+ .config-ui-x-dark-mode-orange .form-select:focus {
881
+ border-color: var(--config-ui-x-dark-mode-orange-text);
882
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-orange-border);
883
+ }
884
+ .config-ui-x-dark-mode-red .form-select:focus {
885
+ border-color: var(--config-ui-x-dark-mode-red-text);
886
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-red-border);
887
+ }
888
+ .config-ui-x-dark-mode-pink .form-select:focus {
889
+ border-color: var(--config-ui-x-dark-mode-pink-text);
890
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-pink-border);
891
+ }
892
+ .config-ui-x-dark-mode-purple .form-select:focus {
893
+ border-color: var(--config-ui-x-dark-mode-purple-text);
894
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-purple-border);
895
+ }
896
+ .config-ui-x-dark-mode-deep-purple .form-select:focus {
897
+ border-color: var(--config-ui-x-dark-mode-deep-purple-text);
898
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-deep-purple-border);
899
+ }
900
+ .config-ui-x-dark-mode-indigo .form-select:focus {
901
+ border-color: var(--config-ui-x-dark-mode-indigo-text);
902
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-indigo-border);
903
+ }
904
+ .config-ui-x-dark-mode-blue .form-select:focus {
905
+ border-color: var(--config-ui-x-dark-mode-blue-text);
906
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-blue-border);
907
+ }
908
+ .config-ui-x-dark-mode-blue-grey .form-select:focus {
909
+ border-color: var(--config-ui-x-dark-mode-blue-grey-text);
910
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-blue-grey-border);
911
+ }
912
+ .config-ui-x-dark-mode-cyan .form-select:focus {
913
+ border-color: var(--config-ui-x-dark-mode-cyan-text);
914
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-cyan-border);
915
+ }
916
+ .config-ui-x-dark-mode-green .form-select:focus {
917
+ border-color: var(--config-ui-x-dark-mode-green-text);
918
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-green-border);
919
+ }
920
+ .config-ui-x-dark-mode-teal .form-select:focus {
424
921
  border-color: var(--config-ui-x-dark-mode-teal-text);
922
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-teal-border);
923
+ }
924
+ .config-ui-x-dark-mode-grey .form-select:focus {
925
+ border-color: var(--config-ui-x-dark-mode-grey-text);
926
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-grey-border);
927
+ }
928
+ .config-ui-x-dark-mode-brown .form-select:focus {
929
+ border-color: var(--config-ui-x-dark-mode-brown-text);
930
+ box-shadow: 0 0 0 .2rem var(--config-ui-x-dark-mode-brown-border);
425
931
  }
426
932
 
427
- .config-ui-x-dark-mode-cyan .form-check-input[type="checkbox"] {
933
+ /**
934
+ * ==================================================
935
+ * Form Check Input (Focus)
936
+ * ==================================================
937
+ */
938
+ .config-ui-x-orange .form-check-input:focus {
939
+ border-color: var(--config-ui-x-orange-text);
940
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-orange-border);
941
+ }
942
+ .config-ui-x-red .form-check-input:focus {
943
+ border-color: var(--config-ui-x-red-text);
944
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-red-border);
945
+ }
946
+ .config-ui-x-pink .form-check-input:focus {
947
+ border-color: var(--config-ui-x-pink-text);
948
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-pink-border);
949
+ }
950
+ .config-ui-x-purple .form-check-input:focus {
951
+ border-color: var(--config-ui-x-purple-text);
952
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-purple-border);
953
+ }
954
+ .config-ui-x-deep-purple .form-check-input:focus {
955
+ border-color: var(--config-ui-x-deep-purple-text);
956
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-deep-purple-border);
957
+ }
958
+ .config-ui-x-indigo .form-check-input:focus {
959
+ border-color: var(--config-ui-x-indigo-text);
960
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-indigo-border);
961
+ }
962
+ .config-ui-x-blue .form-check-input:focus {
963
+ border-color: var(--config-ui-x-blue-text);
964
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-blue-border);
965
+ }
966
+ .config-ui-x-blue-grey .form-check-input:focus {
967
+ border-color: var(--config-ui-x-blue-grey-text);
968
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-blue-grey-border);
969
+ }
970
+ .config-ui-x-cyan .form-check-input:focus {
971
+ border-color: var(--config-ui-x-cyan-text);
972
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-cyan-border);
973
+ }
974
+ .config-ui-x-green .form-check-input:focus {
975
+ border-color: var(--config-ui-x-green-text);
976
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-green-border);
977
+ }
978
+ .config-ui-x-teal .form-check-input:focus {
979
+ border-color: var(--config-ui-x-teal-text);
980
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-teal-border);
981
+ }
982
+ .config-ui-x-grey .form-check-input:focus {
983
+ border-color: var(--config-ui-x-grey-text);
984
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-grey-border);
985
+ }
986
+ .config-ui-x-brown .form-check-input:focus {
987
+ border-color: var(--config-ui-x-brown-text);
988
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-brown-border);
989
+ }
990
+ .config-ui-x-dark-mode-orange .form-check-input:focus {
991
+ border-color: var(--config-ui-x-dark-mode-orange-text);
992
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-orange-border);
993
+ }
994
+ .config-ui-x-dark-mode-red .form-check-input:focus {
995
+ border-color: var(--config-ui-x-dark-mode-red-text);
996
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-red-border);
997
+ }
998
+ .config-ui-x-dark-mode-pink .form-check-input:focus {
999
+ border-color: var(--config-ui-x-dark-mode-pink-text);
1000
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-pink-border);
1001
+ }
1002
+ .config-ui-x-dark-mode-purple .form-check-input:focus {
1003
+ border-color: var(--config-ui-x-dark-mode-purple-text);
1004
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-purple-border);
1005
+ }
1006
+ .config-ui-x-dark-mode-deep-purple .form-check-input:focus {
1007
+ border-color: var(--config-ui-x-dark-mode-deep-purple-text);
1008
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-deep-purple-border);
1009
+ }
1010
+ .config-ui-x-dark-mode-indigo .form-check-input:focus {
1011
+ border-color: var(--config-ui-x-dark-mode-indigo-text);
1012
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-indigo-border);
1013
+ }
1014
+ .config-ui-x-dark-mode-blue .form-check-input:focus {
1015
+ border-color: var(--config-ui-x-dark-mode-blue-text);
1016
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-blue-border);
1017
+ }
1018
+ .config-ui-x-dark-mode-blue-grey .form-check-input:focus {
1019
+ border-color: var(--config-ui-x-dark-mode-blue-grey-text);
1020
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-blue-grey-border);
1021
+ }
1022
+ .config-ui-x-dark-mode-cyan .form-check-input:focus {
428
1023
  border-color: var(--config-ui-x-dark-mode-cyan-text);
1024
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-cyan-border);
1025
+ }
1026
+ .config-ui-x-dark-mode-green .form-check-input:focus {
1027
+ border-color: var(--config-ui-x-dark-mode-green-text);
1028
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-green-border);
1029
+ }
1030
+ .config-ui-x-dark-mode-teal .form-check-input:focus {
1031
+ border-color: var(--config-ui-x-dark-mode-teal-text);
1032
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-teal-border);
1033
+ }
1034
+ .config-ui-x-dark-mode-grey .form-check-input:focus {
1035
+ border-color: var(--config-ui-x-dark-mode-grey-text);
1036
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-grey-border);
1037
+ }
1038
+ .config-ui-x-dark-mode-brown .form-check-input:focus {
1039
+ border-color: var(--config-ui-x-dark-mode-brown-text);
1040
+ box-shadow: 0 0 0 .25rem var(--config-ui-x-dark-mode-brown-border);
429
1041
  }
430
1042
 
431
- /* Checkbox checked */
432
- .config-ui-x-red .form-check-input:checked[type="checkbox"] {
1043
+ /**
1044
+ * ==================================================
1045
+ * Form Check Input (Checked)
1046
+ * ==================================================
1047
+ */
1048
+ .config-ui-x-orange .form-check-input:checked {
1049
+ background-color: var(--config-ui-x-orange-text);
1050
+ border-color: var(--config-ui-x-orange-text);
1051
+ }
1052
+ .config-ui-x-red .form-check-input:checked {
433
1053
  background-color: var(--config-ui-x-red-text);
1054
+ border-color: var(--config-ui-x-red-text);
434
1055
  }
435
-
436
- .config-ui-x-pink .form-check-input:checked[type="checkbox"] {
1056
+ .config-ui-x-pink .form-check-input:checked {
437
1057
  background-color: var(--config-ui-x-pink-text);
1058
+ border-color: var(--config-ui-x-pink-text);
438
1059
  }
439
-
440
- .config-ui-x-purple .form-check-input:checked[type="checkbox"] {
1060
+ .config-ui-x-purple .form-check-input:checked {
441
1061
  background-color: var(--config-ui-x-purple-text);
1062
+ border-color: var(--config-ui-x-purple-text);
442
1063
  }
443
-
444
- .config-ui-x-indigo .form-check-input:checked[type="checkbox"] {
1064
+ .config-ui-x-deep-purple .form-check-input:checked {
1065
+ background-color: var(--config-ui-x-deep-purple-text);
1066
+ border-color: var(--config-ui-x-deep-purple-text);
1067
+ }
1068
+ .config-ui-x-indigo .form-check-input:checked {
445
1069
  background-color: var(--config-ui-x-indigo-text);
1070
+ border-color: var(--config-ui-x-indigo-text);
446
1071
  }
447
-
448
- .config-ui-x-blue .form-check-input:checked[type="checkbox"] {
1072
+ .config-ui-x-blue .form-check-input:checked {
449
1073
  background-color: var(--config-ui-x-blue-text);
1074
+ border-color: var(--config-ui-x-blue-text);
450
1075
  }
451
-
452
- .config-ui-x-blue-grey .form-check-input:checked[type="checkbox"] {
1076
+ .config-ui-x-blue-grey .form-check-input:checked {
453
1077
  background-color: var(--config-ui-x-blue-grey-text);
1078
+ border-color: var(--config-ui-x-blue-grey-text);
454
1079
  }
455
-
456
- .config-ui-x-navi-blue .form-check-input:checked[type="checkbox"] {
457
- background-color: var(--config-ui-x-navi-blue-text);
1080
+ .config-ui-x-cyan .form-check-input:checked {
1081
+ background-color: var(--config-ui-x-cyan-text);
1082
+ border-color: var(--config-ui-x-cyan-text);
458
1083
  }
459
-
460
- .config-ui-x-green .form-check-input:checked[type="checkbox"] {
1084
+ .config-ui-x-green .form-check-input:checked {
461
1085
  background-color: var(--config-ui-x-green-text);
1086
+ border-color: var(--config-ui-x-green-text);
462
1087
  }
463
-
464
- .config-ui-x-orange .form-check-input:checked[type="checkbox"] {
465
- background-color: var(--config-ui-x-orange-text);
1088
+ .config-ui-x-teal .form-check-input:checked {
1089
+ background-color: var(--config-ui-x-teal-text);
1090
+ border-color: var(--config-ui-x-teal-text);
466
1091
  }
467
-
468
- .config-ui-x-grey .form-check-input:checked[type="checkbox"] {
1092
+ .config-ui-x-grey .form-check-input:checked {
469
1093
  background-color: var(--config-ui-x-grey-text);
1094
+ border-color: var(--config-ui-x-grey-text);
470
1095
  }
471
-
472
- .config-ui-x-brown .form-check-input:checked[type="checkbox"] {
1096
+ .config-ui-x-brown .form-check-input:checked {
473
1097
  background-color: var(--config-ui-x-brown-text);
1098
+ border-color: var(--config-ui-x-brown-text);
474
1099
  }
475
-
476
- .config-ui-x-amber .form-check-input:checked[type="checkbox"] {
477
- background-color: var(--config-ui-x-amber-text);
478
- }
479
-
480
- .config-ui-x-teal .form-check-input:checked[type="checkbox"] {
481
- background-color: var(--config-ui-x-teal-text);
482
- }
483
-
484
- .config-ui-x-cyan .form-check-input:checked[type="checkbox"] {
485
- background-color: var(--config-ui-x-cyan-text);
486
- }
487
-
488
- .config-ui-x-deep-purple .form-check-input:checked[type="checkbox"] {
489
- background-color: var(--config-ui-x-deep-purple-text);
490
- }
491
-
492
- .config-ui-x-dark-mode .form-check-input:checked[type="checkbox"] {
493
- background-color: var(--config-ui-x-dark-mode-text);
494
- }
495
-
496
- .config-ui-x-dark-mode-v1 .form-check-input:checked[type="checkbox"] {
497
- background-color: var(--config-ui-x-dark-mode-v1-text);
1100
+ .config-ui-x-dark-mode-orange .form-check-input:checked {
1101
+ background-color: var(--config-ui-x-dark-mode-orange-text);
1102
+ border-color: var(--config-ui-x-dark-mode-orange-text);
498
1103
  }
499
-
500
- .config-ui-x-dark-mode-red .form-check-input:checked[type="checkbox"] {
1104
+ .config-ui-x-dark-mode-red .form-check-input:checked {
501
1105
  background-color: var(--config-ui-x-dark-mode-red-text);
1106
+ border-color: var(--config-ui-x-dark-mode-red-text);
502
1107
  }
503
-
504
- .config-ui-x-dark-mode-pink .form-check-input:checked[type="checkbox"] {
1108
+ .config-ui-x-dark-mode-pink .form-check-input:checked {
505
1109
  background-color: var(--config-ui-x-dark-mode-pink-text);
1110
+ border-color: var(--config-ui-x-dark-mode-pink-text);
506
1111
  }
507
-
508
- .config-ui-x-dark-mode-purple .form-check-input:checked[type="checkbox"] {
1112
+ .config-ui-x-dark-mode-purple .form-check-input:checked {
509
1113
  background-color: var(--config-ui-x-dark-mode-purple-text);
1114
+ border-color: var(--config-ui-x-dark-mode-purple-text);
510
1115
  }
511
-
512
- .config-ui-x-dark-mode-indigo .form-check-input:checked[type="checkbox"] {
1116
+ .config-ui-x-dark-mode-deep-purple .form-check-input:checked {
1117
+ background-color: var(--config-ui-x-dark-mode-deep-purple-text);
1118
+ border-color: var(--config-ui-x-dark-mode-deep-purple-text);
1119
+ }
1120
+ .config-ui-x-dark-mode-indigo .form-check-input:checked {
513
1121
  background-color: var(--config-ui-x-dark-mode-indigo-text);
1122
+ border-color: var(--config-ui-x-dark-mode-indigo-text);
514
1123
  }
515
-
516
- .config-ui-x-dark-mode-blue .form-check-input:checked[type="checkbox"] {
1124
+ .config-ui-x-dark-mode-blue .form-check-input:checked {
517
1125
  background-color: var(--config-ui-x-dark-mode-blue-text);
1126
+ border-color: var(--config-ui-x-dark-mode-blue-text);
518
1127
  }
519
-
520
- .config-ui-x-dark-mode-blue-grey .form-check-input:checked[type="checkbox"] {
1128
+ .config-ui-x-dark-mode-blue-grey .form-check-input:checked {
521
1129
  background-color: var(--config-ui-x-dark-mode-blue-grey-text);
1130
+ border-color: var(--config-ui-x-dark-mode-blue-grey-text);
522
1131
  }
523
-
524
- .config-ui-x-dark-mode-green .form-check-input:checked[type="checkbox"] {
1132
+ .config-ui-x-dark-mode-cyan .form-check-input:checked {
1133
+ background-color: var(--config-ui-x-dark-mode-cyan-text);
1134
+ border-color: var(--config-ui-x-dark-mode-cyan-text);
1135
+ }
1136
+ .config-ui-x-dark-mode-green .form-check-input:checked {
525
1137
  background-color: var(--config-ui-x-dark-mode-green-text);
1138
+ border-color: var(--config-ui-x-dark-mode-green-text);
526
1139
  }
527
-
528
- .config-ui-x-dark-mode-grey .form-check-input:checked[type="checkbox"] {
1140
+ .config-ui-x-dark-mode-teal .form-check-input:checked {
1141
+ background-color: var(--config-ui-x-dark-mode-teal-text);
1142
+ border-color: var(--config-ui-x-dark-mode-teal-text);
1143
+ }
1144
+ .config-ui-x-dark-mode-grey .form-check-input:checked {
529
1145
  background-color: var(--config-ui-x-dark-mode-grey-text);
1146
+ border-color: var(--config-ui-x-dark-mode-grey-text);
530
1147
  }
531
-
532
- .config-ui-x-dark-mode-brown .form-check-input:checked[type="checkbox"] {
1148
+ .config-ui-x-dark-mode-brown .form-check-input:checked {
533
1149
  background-color: var(--config-ui-x-dark-mode-brown-text);
1150
+ border-color: var(--config-ui-x-dark-mode-brown-text);
534
1151
  }
535
1152
 
536
- .config-ui-x-dark-mode-teal .form-check-input:checked[type="checkbox"] {
537
- background-color: var(--config-ui-x-dark-mode-teal-text);
538
- }
539
-
540
- .config-ui-x-dark-mode-cyan .form-check-input:checked[type="checkbox"] {
541
- background-color: var(--config-ui-x-dark-mode-cyan-text);
1153
+ /**
1154
+ * ==================================================
1155
+ * Accordion Button
1156
+ * ==================================================
1157
+ */
1158
+ .config-ui-x-orange .accordion-button:not(.collapsed) {
1159
+ background-color: var(--config-ui-x-orange-bg);
1160
+ color: var(--config-ui-x-orange-text);
542
1161
  }
543
-
544
- /* Accordion button */
545
1162
  .config-ui-x-red .accordion-button:not(.collapsed) {
546
1163
  background-color: var(--config-ui-x-red-bg);
547
- border-color: var(--config-ui-x-red-border);
548
1164
  color: var(--config-ui-x-red-text);
549
1165
  }
550
-
551
1166
  .config-ui-x-pink .accordion-button:not(.collapsed) {
552
1167
  background-color: var(--config-ui-x-pink-bg);
553
- border-color: var(--config-ui-x-pink-border);
554
1168
  color: var(--config-ui-x-pink-text);
555
1169
  }
556
-
557
1170
  .config-ui-x-purple .accordion-button:not(.collapsed) {
558
1171
  background-color: var(--config-ui-x-purple-bg);
559
- border-color: var(--config-ui-x-purple-border);
560
1172
  color: var(--config-ui-x-purple-text);
561
1173
  }
562
-
1174
+ .config-ui-x-deep-purple .accordion-button:not(.collapsed) {
1175
+ background-color: var(--config-ui-x-deep-purple-bg);
1176
+ color: var(--config-ui-x-deep-purple-text);
1177
+ }
563
1178
  .config-ui-x-indigo .accordion-button:not(.collapsed) {
564
1179
  background-color: var(--config-ui-x-indigo-bg);
565
- border-color: var(--config-ui-x-indigo-border);
566
1180
  color: var(--config-ui-x-indigo-text);
567
1181
  }
568
-
569
1182
  .config-ui-x-blue .accordion-button:not(.collapsed) {
570
1183
  background-color: var(--config-ui-x-blue-bg);
571
- border-color: var(--config-ui-x-blue-border);
572
1184
  color: var(--config-ui-x-blue-text);
573
1185
  }
574
-
575
1186
  .config-ui-x-blue-grey .accordion-button:not(.collapsed) {
576
1187
  background-color: var(--config-ui-x-blue-grey-bg);
577
- border-color: var(--config-ui-x-blue-grey-border);
578
1188
  color: var(--config-ui-x-blue-grey-text);
579
1189
  }
580
-
581
- .config-ui-x-navi-blue .accordion-button:not(.collapsed) {
582
- background-color: var(--config-ui-x-navi-blue-bg);
583
- border-color: var(--config-ui-x-navi-blue-border);
584
- color: var(--config-ui-x-navi-blue-text);
1190
+ .config-ui-x-cyan .accordion-button:not(.collapsed) {
1191
+ background-color: var(--config-ui-x-cyan-bg);
1192
+ color: var(--config-ui-x-cyan-text);
585
1193
  }
586
-
587
1194
  .config-ui-x-green .accordion-button:not(.collapsed) {
588
1195
  background-color: var(--config-ui-x-green-bg);
589
- border-color: var(--config-ui-x-green-border);
590
1196
  color: var(--config-ui-x-green-text);
591
1197
  }
592
-
593
- .config-ui-x-orange .accordion-button:not(.collapsed) {
594
- background-color: var(--config-ui-x-orange-bg);
595
- border-color: var(--config-ui-x-orange-border);
596
- color: var(--config-ui-x-orange-text);
1198
+ .config-ui-x-teal .accordion-button:not(.collapsed) {
1199
+ background-color: var(--config-ui-x-teal-bg);
1200
+ color: var(--config-ui-x-teal-text);
597
1201
  }
598
-
599
1202
  .config-ui-x-grey .accordion-button:not(.collapsed) {
600
1203
  background-color: var(--config-ui-x-grey-bg);
601
- border-color: var(--config-ui-x-grey-border);
602
1204
  color: var(--config-ui-x-grey-text);
603
1205
  }
604
-
605
1206
  .config-ui-x-brown .accordion-button:not(.collapsed) {
606
1207
  background-color: var(--config-ui-x-brown-bg);
607
- border-color: var(--config-ui-x-brown-border);
608
1208
  color: var(--config-ui-x-brown-text);
609
1209
  }
610
-
611
- .config-ui-x-amber .accordion-button:not(.collapsed) {
612
- background-color: var(--config-ui-x-amber-bg);
613
- border-color: var(--config-ui-x-amber-border);
614
- color: var(--config-ui-x-amber-text);
615
- }
616
-
617
- .config-ui-x-teal .accordion-button:not(.collapsed) {
618
- background-color: var(--config-ui-x-teal-bg);
619
- border-color: var(--config-ui-x-teal-border);
620
- color: var(--config-ui-x-teal-text);
621
- }
622
-
623
- .config-ui-x-cyan .accordion-button:not(.collapsed) {
624
- background-color: var(--config-ui-x-cyan-bg);
625
- border-color: var(--config-ui-x-cyan-border);
626
- color: var(--config-ui-x-cyan-text);
627
- }
628
-
629
- .config-ui-x-deep-purple .accordion-button:not(.collapsed) {
630
- background-color: var(--config-ui-x-deep-purple-bg);
631
- border-color: var(--config-ui-x-deep-purple-border);
632
- color: var(--config-ui-x-deep-purple-text);
1210
+ .config-ui-x-dark-mode-orange .accordion-button:not(.collapsed) {
1211
+ background-color: var(--config-ui-x-dark-mode-orange-bg);
1212
+ color: var(--config-ui-x-dark-mode-orange-text);
633
1213
  }
634
-
635
- .config-ui-x-dark-mode .accordion-button:not(.collapsed) {
636
- background-color: var(--config-ui-x-dark-mode-bg);
637
- border-color: var(--config-ui-x-dark-mode-border);
638
- color: var(--config-ui-x-dark-mode-text);
639
- }
640
-
641
- .config-ui-x-dark-mode-v1 .accordion-button:not(.collapsed) {
642
- background-color: var(--config-ui-x-dark-mode-v1-bg);
643
- border-color: var(--config-ui-x-dark-mode-v1-border);
644
- color: var(--config-ui-x-dark-mode-v1-text);
645
- }
646
-
647
1214
  .config-ui-x-dark-mode-red .accordion-button:not(.collapsed) {
648
1215
  background-color: var(--config-ui-x-dark-mode-red-bg);
649
- border-color: var(--config-ui-x-dark-mode-red-border);
650
1216
  color: var(--config-ui-x-dark-mode-red-text);
651
1217
  }
652
-
653
1218
  .config-ui-x-dark-mode-pink .accordion-button:not(.collapsed) {
654
1219
  background-color: var(--config-ui-x-dark-mode-pink-bg);
655
- border-color: var(--config-ui-x-dark-mode-pink-border);
656
1220
  color: var(--config-ui-x-dark-mode-pink-text);
657
1221
  }
658
-
659
1222
  .config-ui-x-dark-mode-purple .accordion-button:not(.collapsed) {
660
1223
  background-color: var(--config-ui-x-dark-mode-purple-bg);
661
- border-color: var(--config-ui-x-dark-mode-purple-border);
662
1224
  color: var(--config-ui-x-dark-mode-purple-text);
663
1225
  }
664
-
1226
+ .config-ui-x-dark-mode-deep-purple .accordion-button:not(.collapsed) {
1227
+ background-color: var(--config-ui-x-dark-mode-deep-purple-bg);
1228
+ color: var(--config-ui-x-dark-mode-deep-purple-text);
1229
+ }
665
1230
  .config-ui-x-dark-mode-indigo .accordion-button:not(.collapsed) {
666
1231
  background-color: var(--config-ui-x-dark-mode-indigo-bg);
667
- border-color: var(--config-ui-x-dark-mode-indigo-border);
668
1232
  color: var(--config-ui-x-dark-mode-indigo-text);
669
1233
  }
670
-
671
1234
  .config-ui-x-dark-mode-blue .accordion-button:not(.collapsed) {
672
1235
  background-color: var(--config-ui-x-dark-mode-blue-bg);
673
- border-color: var(--config-ui-x-dark-mode-blue-border);
674
1236
  color: var(--config-ui-x-dark-mode-blue-text);
675
1237
  }
676
-
677
1238
  .config-ui-x-dark-mode-blue-grey .accordion-button:not(.collapsed) {
678
1239
  background-color: var(--config-ui-x-dark-mode-blue-grey-bg);
679
- border-color: var(--config-ui-x-dark-mode-blue-grey-border);
680
1240
  color: var(--config-ui-x-dark-mode-blue-grey-text);
681
1241
  }
682
-
1242
+ .config-ui-x-dark-mode-cyan .accordion-button:not(.collapsed) {
1243
+ background-color: var(--config-ui-x-dark-mode-cyan-bg);
1244
+ color: var(--config-ui-x-dark-mode-cyan-text);
1245
+ }
683
1246
  .config-ui-x-dark-mode-green .accordion-button:not(.collapsed) {
684
1247
  background-color: var(--config-ui-x-dark-mode-green-bg);
685
- border-color: var(--config-ui-x-dark-mode-green-border);
686
1248
  color: var(--config-ui-x-dark-mode-green-text);
687
1249
  }
688
-
1250
+ .config-ui-x-dark-mode-teal .accordion-button:not(.collapsed) {
1251
+ background-color: var(--config-ui-x-dark-mode-teal-bg);
1252
+ color: var(--config-ui-x-dark-mode-teal-text);
1253
+ }
689
1254
  .config-ui-x-dark-mode-grey .accordion-button:not(.collapsed) {
690
1255
  background-color: var(--config-ui-x-dark-mode-grey-bg);
691
- border-color: var(--config-ui-x-dark-mode-grey-border);
692
1256
  color: var(--config-ui-x-dark-mode-grey-text);
693
1257
  }
694
-
695
1258
  .config-ui-x-dark-mode-brown .accordion-button:not(.collapsed) {
696
1259
  background-color: var(--config-ui-x-dark-mode-brown-bg);
697
- border-color: var(--config-ui-x-dark-mode-brown-border);
698
1260
  color: var(--config-ui-x-dark-mode-brown-text);
699
1261
  }
700
1262
 
701
- .config-ui-x-dark-mode-teal .accordion-button:not(.collapsed) {
702
- background-color: var(--config-ui-x-dark-mode-teal-bg);
703
- border-color: var(--config-ui-x-dark-mode-teal-border);
704
- color: var(--config-ui-x-dark-mode-teal-text);
705
- }
706
-
707
- .config-ui-x-dark-mode-cyan .accordion-button:not(.collapsed) {
708
- background-color: var(--config-ui-x-dark-mode-cyan-bg);
709
- border-color: var(--config-ui-x-dark-mode-cyan-border);
710
- color: var(--config-ui-x-dark-mode-cyan-text);
711
- }
712
-
713
- /* Background text */
714
- .config-ui-x-red .text-bg-primary {
715
- background-color: var(--config-ui-x-red-text) !important;
716
- }
717
-
718
- .config-ui-x-pink .text-bg-primary {
719
- background-color: var(--config-ui-x-pink-text) !important;
720
- }
721
-
722
- .config-ui-x-purple .text-bg-primary {
723
- background-color: var(--config-ui-x-purple-text) !important;
724
- }
725
-
726
- .config-ui-x-indigo .text-bg-primary {
727
- background-color: var(--config-ui-x-indigo-text) !important;
728
- }
729
-
730
- .config-ui-x-blue .text-bg-primary {
731
- background-color: var(--config-ui-x-blue-text) !important;
732
- }
733
-
734
- .config-ui-x-blue-grey .text-bg-primary {
735
- background-color: var(--config-ui-x-blue-grey-text) !important;
736
- }
737
-
738
- .config-ui-x-navi-blue .text-bg-primary {
739
- background-color: var(--config-ui-x-navi-blue-text) !important;
740
- }
741
-
742
- .config-ui-x-green .text-bg-primary {
743
- background-color: var(--config-ui-x-green-text) !important;
744
- }
745
-
746
- .config-ui-x-orange .text-bg-primary {
747
- background-color: var(--config-ui-x-orange-text) !important;
748
- }
749
-
750
- .config-ui-x-grey .text-bg-primary {
751
- background-color: var(--config-ui-x-grey-text) !important;
752
- }
753
-
754
- .config-ui-x-brown .text-bg-primary {
755
- background-color: var(--config-ui-x-brown-text) !important;
756
- }
757
-
758
- .config-ui-x-amber .text-bg-primary {
759
- background-color: var(--config-ui-x-amber-text) !important;
760
- }
761
-
762
- .config-ui-x-teal .text-bg-primary {
763
- background-color: var(--config-ui-x-teal-text) !important;
764
- }
765
-
766
- .config-ui-x-cyan .text-bg-primary {
767
- background-color: var(--config-ui-x-cyan-text) !important;
768
- }
769
-
770
- .config-ui-x-deep-purple .text-bg-primary {
771
- background-color: var(--config-ui-x-deep-purple-text) !important;
772
- }
773
-
774
- .config-ui-x-dark-mode .text-bg-primary {
775
- background-color: var(--config-ui-x-dark-mode-text) !important;
776
- }
777
-
778
- .config-ui-x-dark-mode-v1 .text-bg-primary {
779
- background-color: var(--config-ui-x-dark-mode-v1-text) !important;
780
- }
781
-
782
- .config-ui-x-dark-mode-red .text-bg-primary {
783
- background-color: var(--config-ui-x-dark-mode-red-text) !important;
784
- }
785
-
786
- .config-ui-x-dark-mode-pink .text-bg-primary {
787
- background-color: var(--config-ui-x-dark-mode-pink-text) !important;
788
- }
789
-
790
- .config-ui-x-dark-mode-purple .text-bg-primary {
791
- background-color: var(--config-ui-x-dark-mode-purple-text) !important;
792
- }
793
-
794
- .config-ui-x-dark-mode-indigo .text-bg-primary {
795
- background-color: var(--config-ui-x-dark-mode-indigo-text) !important;
796
- }
797
-
798
- .config-ui-x-dark-mode-blue .text-bg-primary {
799
- background-color: var(--config-ui-x-dark-mode-blue-text) !important;
800
- }
801
-
802
- .config-ui-x-dark-mode-blue-grey .text-bg-primary {
803
- background-color: var(--config-ui-x-dark-mode-blue-grey-text) !important;
804
- }
805
-
806
- .config-ui-x-dark-mode-green .text-bg-primary {
807
- background-color: var(--config-ui-x-dark-mode-green-text) !important;
808
- }
809
-
810
- .config-ui-x-dark-mode-grey .text-bg-primary {
811
- background-color: var(--config-ui-x-dark-mode-grey-text) !important;
812
- }
813
-
814
- .config-ui-x-dark-mode-brown .text-bg-primary {
815
- background-color: var(--config-ui-x-dark-mode-brown-text) !important;
816
- }
817
-
818
- .config-ui-x-dark-mode-teal .text-bg-primary {
819
- background-color: var(--config-ui-x-dark-mode-teal-text) !important;
820
- }
821
-
822
- .config-ui-x-dark-mode-cyan .text-bg-primary {
823
- background-color: var(--config-ui-x-dark-mode-cyan-text) !important;
1263
+ /**
1264
+ * ==================================================
1265
+ * Accordion Button Icon
1266
+ * ==================================================
1267
+ */
1268
+ .config-ui-x-orange .accordion-button::after,
1269
+ .config-ui-x-red .accordion-button::after,
1270
+ .config-ui-x-pink .accordion-button::after,
1271
+ .config-ui-x-purple .accordion-button::after,
1272
+ .config-ui-x-deep-purple .accordion-button::after,
1273
+ .config-ui-x-indigo .accordion-button::after,
1274
+ .config-ui-x-blue .accordion-button::after,
1275
+ .config-ui-x-blue-grey .accordion-button::after,
1276
+ .config-ui-x-cyan .accordion-button::after,
1277
+ .config-ui-x-green .accordion-button::after,
1278
+ .config-ui-x-teal .accordion-button::after,
1279
+ .config-ui-x-grey .accordion-button::after,
1280
+ .config-ui-x-brown .accordion-button::after {
1281
+ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
1282
+ --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
1283
+ }
1284
+ .config-ui-x-dark-mode-orange .accordion-button::after,
1285
+ .config-ui-x-dark-mode-red .accordion-button::after,
1286
+ .config-ui-x-dark-mode-pink .accordion-button::after,
1287
+ .config-ui-x-dark-mode-purple .accordion-button::after,
1288
+ .config-ui-x-dark-mode-deep-purple .accordion-button::after,
1289
+ .config-ui-x-dark-mode-indigo .accordion-button::after,
1290
+ .config-ui-x-dark-mode-blue .accordion-button::after,
1291
+ .config-ui-x-dark-mode-blue-grey .accordion-button::after,
1292
+ .config-ui-x-dark-mode-cyan .accordion-button::after,
1293
+ .config-ui-x-dark-mode-green .accordion-button::after,
1294
+ .config-ui-x-dark-mode-teal .accordion-button::after,
1295
+ .config-ui-x-dark-mode-grey .accordion-button::after,
1296
+ .config-ui-x-dark-mode-brown .accordion-button::after {
1297
+ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
1298
+ --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
824
1299
  }