@visns-studio/visns-components 5.9.9 → 5.9.11
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,44 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
// Variables
|
|
4
|
-
$primary-color: #2563eb;
|
|
5
|
-
$primary-hover: #1d4ed8;
|
|
6
|
-
$secondary-color: #6b7280;
|
|
7
|
-
$success-color: #10b981;
|
|
8
|
-
$danger-color: #ef4444;
|
|
9
|
-
$warning-color: #f59e0b;
|
|
10
|
-
$info-color: #3b82f6;
|
|
11
|
-
$border-color: #e5e7eb;
|
|
12
|
-
$bg-light: #f9fafb;
|
|
13
|
-
$bg-lighter: #f3f4f6;
|
|
14
|
-
$text-primary: #1f2937;
|
|
15
|
-
$text-secondary: #4b5563;
|
|
16
|
-
$text-muted: #9ca3af;
|
|
17
|
-
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
18
|
-
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
19
|
-
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
20
|
-
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
21
|
-
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
22
|
-
$radius-sm: 4px;
|
|
23
|
-
$radius-md: 6px;
|
|
24
|
-
$radius-lg: 8px;
|
|
1
|
+
// Use project root CSS variables instead of local SCSS variables
|
|
2
|
+
// This allows the component to adapt to different project themes
|
|
25
3
|
|
|
26
4
|
// Main container
|
|
27
5
|
.reportBuilder {
|
|
28
6
|
width: 100%;
|
|
29
7
|
min-height: 100vh;
|
|
30
|
-
background-color:
|
|
8
|
+
background-color: var(--bg-color);
|
|
31
9
|
}
|
|
32
10
|
|
|
33
11
|
// Header
|
|
34
12
|
.header {
|
|
35
|
-
background-color:
|
|
36
|
-
border-bottom: 1px solid
|
|
37
|
-
padding:
|
|
13
|
+
background-color: var(--tertiary-color);
|
|
14
|
+
border-bottom: 1px solid var(--border-color);
|
|
15
|
+
padding: var(--padding) calc(var(--padding) * 1.5);
|
|
38
16
|
display: flex;
|
|
39
17
|
justify-content: space-between;
|
|
40
18
|
align-items: center;
|
|
41
|
-
box-shadow:
|
|
19
|
+
box-shadow: var(--box-shadow-small);
|
|
42
20
|
position: sticky;
|
|
43
21
|
top: 0;
|
|
44
22
|
z-index: 100;
|
|
@@ -47,13 +25,13 @@ $radius-lg: 8px;
|
|
|
47
25
|
.headerLeft {
|
|
48
26
|
display: flex;
|
|
49
27
|
align-items: center;
|
|
50
|
-
gap:
|
|
28
|
+
gap: var(--padding);
|
|
51
29
|
|
|
52
30
|
h1 {
|
|
53
31
|
margin: 0;
|
|
54
32
|
font-size: 1.5rem;
|
|
55
|
-
font-weight:
|
|
56
|
-
color:
|
|
33
|
+
font-weight: var(--title-weight);
|
|
34
|
+
color: var(--header-color);
|
|
57
35
|
}
|
|
58
36
|
}
|
|
59
37
|
|
|
@@ -61,23 +39,24 @@ $radius-lg: 8px;
|
|
|
61
39
|
display: flex;
|
|
62
40
|
align-items: center;
|
|
63
41
|
gap: 6px;
|
|
64
|
-
background-color:
|
|
65
|
-
border: 1px solid
|
|
66
|
-
border-radius:
|
|
67
|
-
padding: 8px
|
|
42
|
+
background-color: var(--bg-color);
|
|
43
|
+
border: 1px solid var(--border-color);
|
|
44
|
+
border-radius: var(--radius);
|
|
45
|
+
padding: 8px var(--padding);
|
|
68
46
|
font-size: 0.875rem;
|
|
69
|
-
color:
|
|
47
|
+
color: var(--paragraph-color);
|
|
70
48
|
cursor: pointer;
|
|
71
49
|
transition: all 0.2s ease;
|
|
72
50
|
|
|
73
51
|
&:hover {
|
|
74
|
-
background-color:
|
|
75
|
-
color:
|
|
76
|
-
box-shadow:
|
|
52
|
+
background-color: var(--bg-color);
|
|
53
|
+
color: var(--header-color);
|
|
54
|
+
box-shadow: var(--box-shadow-small);
|
|
55
|
+
filter: brightness(0.95);
|
|
77
56
|
}
|
|
78
57
|
|
|
79
58
|
svg {
|
|
80
|
-
color:
|
|
59
|
+
color: var(--primary-color);
|
|
81
60
|
}
|
|
82
61
|
}
|
|
83
62
|
|
|
@@ -93,19 +72,19 @@ $radius-lg: 8px;
|
|
|
93
72
|
align-items: center;
|
|
94
73
|
gap: 12px;
|
|
95
74
|
padding: 8px;
|
|
96
|
-
background-color:
|
|
97
|
-
border-radius:
|
|
75
|
+
background-color: var(--bg-color);
|
|
76
|
+
border-radius: var(--radius);
|
|
98
77
|
|
|
99
78
|
span {
|
|
100
79
|
display: flex;
|
|
101
80
|
align-items: center;
|
|
102
81
|
gap: 6px;
|
|
103
82
|
font-size: 0.875rem;
|
|
104
|
-
color:
|
|
83
|
+
color: var(--paragraph-color);
|
|
105
84
|
transition: color 0.2s ease;
|
|
106
85
|
|
|
107
86
|
&.active {
|
|
108
|
-
color:
|
|
87
|
+
color: var(--header-color);
|
|
109
88
|
font-weight: 500;
|
|
110
89
|
}
|
|
111
90
|
}
|
|
@@ -123,7 +102,7 @@ $radius-lg: 8px;
|
|
|
123
102
|
height: 0;
|
|
124
103
|
|
|
125
104
|
&:checked + .slider {
|
|
126
|
-
background-color:
|
|
105
|
+
background-color: var(--primary-color);
|
|
127
106
|
|
|
128
107
|
&:before {
|
|
129
108
|
transform: translateX(20px);
|
|
@@ -139,7 +118,7 @@ $radius-lg: 8px;
|
|
|
139
118
|
left: 0;
|
|
140
119
|
right: 0;
|
|
141
120
|
bottom: 0;
|
|
142
|
-
background-color:
|
|
121
|
+
background-color: var(--border-color);
|
|
143
122
|
transition: 0.3s;
|
|
144
123
|
border-radius: 24px;
|
|
145
124
|
|
|
@@ -150,10 +129,10 @@ $radius-lg: 8px;
|
|
|
150
129
|
width: 18px;
|
|
151
130
|
left: 3px;
|
|
152
131
|
bottom: 3px;
|
|
153
|
-
background-color:
|
|
132
|
+
background-color: var(--tertiary-color);
|
|
154
133
|
transition: 0.3s;
|
|
155
134
|
border-radius: 50%;
|
|
156
|
-
box-shadow:
|
|
135
|
+
box-shadow: var(--box-shadow-small);
|
|
157
136
|
}
|
|
158
137
|
}
|
|
159
138
|
|
|
@@ -175,13 +154,13 @@ $radius-lg: 8px;
|
|
|
175
154
|
h2 {
|
|
176
155
|
font-size: 2rem;
|
|
177
156
|
font-weight: 700;
|
|
178
|
-
color:
|
|
157
|
+
color: var(--header-color);
|
|
179
158
|
margin-bottom: 12px;
|
|
180
159
|
}
|
|
181
160
|
|
|
182
161
|
p {
|
|
183
162
|
font-size: 1.125rem;
|
|
184
|
-
color:
|
|
163
|
+
color: var(--paragraph-color);
|
|
185
164
|
}
|
|
186
165
|
}
|
|
187
166
|
|
|
@@ -191,11 +170,11 @@ $radius-lg: 8px;
|
|
|
191
170
|
}
|
|
192
171
|
|
|
193
172
|
.templateCategory {
|
|
194
|
-
background-color:
|
|
195
|
-
border-radius:
|
|
173
|
+
background-color: var(--tertiary-color);
|
|
174
|
+
border-radius: var(--radius);
|
|
196
175
|
padding: 24px;
|
|
197
|
-
box-shadow:
|
|
198
|
-
border: 1px solid
|
|
176
|
+
box-shadow: var(--box-shadow-small);
|
|
177
|
+
border: 1px solid var(--border-color);
|
|
199
178
|
}
|
|
200
179
|
|
|
201
180
|
.categoryHeader {
|
|
@@ -205,14 +184,14 @@ $radius-lg: 8px;
|
|
|
205
184
|
margin-bottom: 20px;
|
|
206
185
|
|
|
207
186
|
svg {
|
|
208
|
-
color:
|
|
187
|
+
color: var(--primary-color);
|
|
209
188
|
}
|
|
210
189
|
|
|
211
190
|
h3 {
|
|
212
191
|
margin: 0;
|
|
213
192
|
font-size: 1.25rem;
|
|
214
193
|
font-weight: 600;
|
|
215
|
-
color:
|
|
194
|
+
color: var(--header-color);
|
|
216
195
|
}
|
|
217
196
|
}
|
|
218
197
|
|
|
@@ -223,23 +202,23 @@ $radius-lg: 8px;
|
|
|
223
202
|
}
|
|
224
203
|
|
|
225
204
|
.templateCard {
|
|
226
|
-
background-color:
|
|
205
|
+
background-color: var(--bg-color);
|
|
227
206
|
border: 2px solid transparent;
|
|
228
|
-
border-radius:
|
|
207
|
+
border-radius: var(--radius);
|
|
229
208
|
padding: 20px;
|
|
230
209
|
cursor: pointer;
|
|
231
210
|
transition: all 0.2s ease;
|
|
232
211
|
text-align: center;
|
|
233
212
|
|
|
234
213
|
&:hover {
|
|
235
|
-
border-color:
|
|
236
|
-
background-color:
|
|
237
|
-
box-shadow:
|
|
214
|
+
border-color: var(--primary-color);
|
|
215
|
+
background-color: var(--tertiary-color);
|
|
216
|
+
box-shadow: var(--box-shadow-small);
|
|
238
217
|
transform: translateY(-2px);
|
|
239
218
|
}
|
|
240
219
|
|
|
241
220
|
svg {
|
|
242
|
-
color:
|
|
221
|
+
color: var(--primary-color);
|
|
243
222
|
margin-bottom: 12px;
|
|
244
223
|
}
|
|
245
224
|
|
|
@@ -247,21 +226,25 @@ $radius-lg: 8px;
|
|
|
247
226
|
margin: 0 0 8px 0;
|
|
248
227
|
font-size: 1rem;
|
|
249
228
|
font-weight: 600;
|
|
250
|
-
color:
|
|
229
|
+
color: var(--header-color);
|
|
251
230
|
}
|
|
252
231
|
|
|
253
232
|
p {
|
|
254
233
|
margin: 0;
|
|
255
234
|
font-size: 0.875rem;
|
|
256
|
-
color:
|
|
235
|
+
color: var(--paragraph-color);
|
|
257
236
|
line-height: 1.4;
|
|
258
237
|
}
|
|
259
238
|
}
|
|
260
239
|
|
|
261
240
|
.customTemplate {
|
|
262
|
-
background: linear-gradient(
|
|
263
|
-
|
|
264
|
-
|
|
241
|
+
background: linear-gradient(
|
|
242
|
+
135deg,
|
|
243
|
+
var(--primary-color) 0%,
|
|
244
|
+
var(--primary-color) 100%
|
|
245
|
+
);
|
|
246
|
+
color: var(--tertiary-color);
|
|
247
|
+
border-radius: var(--radius);
|
|
265
248
|
padding: 32px;
|
|
266
249
|
cursor: pointer;
|
|
267
250
|
transition: all 0.2s ease;
|
|
@@ -273,12 +256,12 @@ $radius-lg: 8px;
|
|
|
273
256
|
min-height: 200px;
|
|
274
257
|
|
|
275
258
|
&:hover {
|
|
276
|
-
box-shadow:
|
|
259
|
+
box-shadow: var(--box-shadow-large);
|
|
277
260
|
transform: translateY(-2px);
|
|
278
261
|
}
|
|
279
262
|
|
|
280
263
|
svg {
|
|
281
|
-
color:
|
|
264
|
+
color: var(--tertiary-color);
|
|
282
265
|
margin-bottom: 16px;
|
|
283
266
|
}
|
|
284
267
|
|
|
@@ -306,9 +289,13 @@ $radius-lg: 8px;
|
|
|
306
289
|
}
|
|
307
290
|
|
|
308
291
|
.newReportCard {
|
|
309
|
-
background: linear-gradient(
|
|
310
|
-
|
|
311
|
-
|
|
292
|
+
background: linear-gradient(
|
|
293
|
+
135deg,
|
|
294
|
+
var(--primary-color) 0%,
|
|
295
|
+
var(--primary-color) 100%
|
|
296
|
+
);
|
|
297
|
+
color: var(--tertiary-color);
|
|
298
|
+
border-radius: var(--radius);
|
|
312
299
|
padding: 32px;
|
|
313
300
|
text-align: center;
|
|
314
301
|
cursor: pointer;
|
|
@@ -317,7 +304,7 @@ $radius-lg: 8px;
|
|
|
317
304
|
|
|
318
305
|
&:hover {
|
|
319
306
|
transform: translateY(-2px);
|
|
320
|
-
box-shadow:
|
|
307
|
+
box-shadow: var(--box-shadow-large);
|
|
321
308
|
}
|
|
322
309
|
|
|
323
310
|
svg {
|
|
@@ -328,14 +315,14 @@ $radius-lg: 8px;
|
|
|
328
315
|
margin: 0 0 8px 0;
|
|
329
316
|
font-size: 1.25rem;
|
|
330
317
|
font-weight: 700;
|
|
331
|
-
color:
|
|
318
|
+
color: var(--tertiary-color);
|
|
332
319
|
}
|
|
333
320
|
|
|
334
321
|
p {
|
|
335
322
|
margin: 0;
|
|
336
323
|
opacity: 0.9;
|
|
337
324
|
font-size: 0.875rem;
|
|
338
|
-
color:
|
|
325
|
+
color: var(--tertiary-color);
|
|
339
326
|
}
|
|
340
327
|
}
|
|
341
328
|
|
|
@@ -344,7 +331,7 @@ $radius-lg: 8px;
|
|
|
344
331
|
margin: 0 0 16px 0;
|
|
345
332
|
font-size: 1.125rem;
|
|
346
333
|
font-weight: 600;
|
|
347
|
-
color:
|
|
334
|
+
color: var(--header-color);
|
|
348
335
|
}
|
|
349
336
|
}
|
|
350
337
|
|
|
@@ -355,16 +342,16 @@ $radius-lg: 8px;
|
|
|
355
342
|
}
|
|
356
343
|
|
|
357
344
|
.reportCard {
|
|
358
|
-
background-color:
|
|
359
|
-
border: 2px solid
|
|
360
|
-
border-radius:
|
|
345
|
+
background-color: var(--tertiary-color);
|
|
346
|
+
border: 2px solid var(--border-color);
|
|
347
|
+
border-radius: var(--radius);
|
|
361
348
|
overflow: hidden;
|
|
362
349
|
transition: all 0.2s ease;
|
|
363
350
|
position: relative;
|
|
364
351
|
|
|
365
352
|
&:hover {
|
|
366
|
-
border-color:
|
|
367
|
-
box-shadow:
|
|
353
|
+
border-color: var(--primary-color);
|
|
354
|
+
box-shadow: var(--box-shadow-small);
|
|
368
355
|
transform: translateY(-2px);
|
|
369
356
|
}
|
|
370
357
|
|
|
@@ -384,7 +371,7 @@ $radius-lg: 8px;
|
|
|
384
371
|
margin: 0 0 8px 0;
|
|
385
372
|
font-size: 1rem;
|
|
386
373
|
font-weight: 600;
|
|
387
|
-
color:
|
|
374
|
+
color: var(--header-color);
|
|
388
375
|
line-height: 1.3;
|
|
389
376
|
overflow: hidden;
|
|
390
377
|
text-overflow: ellipsis;
|
|
@@ -396,14 +383,14 @@ $radius-lg: 8px;
|
|
|
396
383
|
align-items: center;
|
|
397
384
|
gap: 8px;
|
|
398
385
|
font-size: 0.75rem;
|
|
399
|
-
color:
|
|
386
|
+
color: var(--paragraph-color);
|
|
400
387
|
|
|
401
388
|
.reportVisibility {
|
|
402
389
|
font-size: 0.875rem;
|
|
403
390
|
}
|
|
404
391
|
|
|
405
392
|
.reportDate {
|
|
406
|
-
color:
|
|
393
|
+
color: var(--paragraph-color);
|
|
407
394
|
}
|
|
408
395
|
}
|
|
409
396
|
}
|
|
@@ -414,17 +401,17 @@ $radius-lg: 8px;
|
|
|
414
401
|
.reportTable {
|
|
415
402
|
display: inline-block;
|
|
416
403
|
font-size: 0.75rem;
|
|
417
|
-
background-color:
|
|
418
|
-
color:
|
|
404
|
+
background-color: var(--bg-color);
|
|
405
|
+
color: var(--paragraph-color);
|
|
419
406
|
padding: 4px 8px;
|
|
420
|
-
border-radius:
|
|
421
|
-
border: 1px solid
|
|
407
|
+
border-radius: var(--radius);
|
|
408
|
+
border: 1px solid var(--border-color);
|
|
422
409
|
}
|
|
423
410
|
}
|
|
424
411
|
|
|
425
412
|
.reportClickHint {
|
|
426
413
|
font-size: 0.75rem;
|
|
427
|
-
color:
|
|
414
|
+
color: var(--paragraph-color);
|
|
428
415
|
font-style: italic;
|
|
429
416
|
margin-top: auto;
|
|
430
417
|
}
|
|
@@ -438,9 +425,9 @@ $radius-lg: 8px;
|
|
|
438
425
|
width: 24px;
|
|
439
426
|
height: 24px;
|
|
440
427
|
border-radius: 50%;
|
|
441
|
-
background-color: rgba(
|
|
442
|
-
border: 1px solid rgba(
|
|
443
|
-
color:
|
|
428
|
+
background-color: rgba(var(--approval-color), 0.1);
|
|
429
|
+
border: 1px solid rgba(var(--approval-color), 0.2);
|
|
430
|
+
color: var(--approval-color);
|
|
444
431
|
font-size: 16px;
|
|
445
432
|
font-weight: bold;
|
|
446
433
|
cursor: pointer;
|
|
@@ -451,8 +438,8 @@ $radius-lg: 8px;
|
|
|
451
438
|
opacity: 0.7;
|
|
452
439
|
|
|
453
440
|
&:hover {
|
|
454
|
-
background-color:
|
|
455
|
-
color:
|
|
441
|
+
background-color: var(--approval-color);
|
|
442
|
+
color: var(--tertiary-color);
|
|
456
443
|
opacity: 1;
|
|
457
444
|
transform: scale(1.1);
|
|
458
445
|
}
|
|
@@ -463,16 +450,16 @@ $radius-lg: 8px;
|
|
|
463
450
|
.noReports {
|
|
464
451
|
text-align: center;
|
|
465
452
|
padding: 48px 24px;
|
|
466
|
-
color:
|
|
453
|
+
color: var(--paragraph-color);
|
|
467
454
|
|
|
468
455
|
svg {
|
|
469
|
-
color:
|
|
456
|
+
color: var(--paragraph-color);
|
|
470
457
|
margin-bottom: 16px;
|
|
471
458
|
}
|
|
472
459
|
|
|
473
460
|
h3 {
|
|
474
461
|
margin: 0 0 8px 0;
|
|
475
|
-
color:
|
|
462
|
+
color: var(--header-color);
|
|
476
463
|
}
|
|
477
464
|
|
|
478
465
|
p {
|
|
@@ -489,11 +476,11 @@ $radius-lg: 8px;
|
|
|
489
476
|
}
|
|
490
477
|
|
|
491
478
|
.wizardProgress {
|
|
492
|
-
background-color:
|
|
493
|
-
border-radius:
|
|
479
|
+
background-color: var(--tertiary-color);
|
|
480
|
+
border-radius: var(--radius);
|
|
494
481
|
padding: 20px;
|
|
495
482
|
margin-bottom: 24px;
|
|
496
|
-
box-shadow:
|
|
483
|
+
box-shadow: var(--box-shadow-small);
|
|
497
484
|
display: flex;
|
|
498
485
|
justify-content: space-between;
|
|
499
486
|
align-items: center;
|
|
@@ -524,7 +511,7 @@ $radius-lg: 8px;
|
|
|
524
511
|
position: absolute;
|
|
525
512
|
right: -20px;
|
|
526
513
|
top: 20px; // Align with step icon center
|
|
527
|
-
color:
|
|
514
|
+
color: var(--border-color);
|
|
528
515
|
font-size: 20px;
|
|
529
516
|
font-weight: bold;
|
|
530
517
|
z-index: 1;
|
|
@@ -532,42 +519,75 @@ $radius-lg: 8px;
|
|
|
532
519
|
}
|
|
533
520
|
|
|
534
521
|
&.active {
|
|
522
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
523
|
+
border-radius: var(--radius);
|
|
524
|
+
padding: 12px 8px;
|
|
525
|
+
transform: scale(1.02);
|
|
526
|
+
|
|
535
527
|
.stepIcon {
|
|
536
|
-
background-color:
|
|
537
|
-
color:
|
|
538
|
-
box-shadow: 0 0 0 4px rgba(
|
|
528
|
+
background-color: var(--primary-color);
|
|
529
|
+
color: var(--tertiary-color);
|
|
530
|
+
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
|
|
531
|
+
border: 3px solid var(--tertiary-color);
|
|
532
|
+
width: 48px;
|
|
533
|
+
height: 48px;
|
|
534
|
+
font-size: 1.1em;
|
|
539
535
|
}
|
|
540
536
|
|
|
541
537
|
.stepTitle {
|
|
542
|
-
color:
|
|
543
|
-
font-weight:
|
|
538
|
+
color: var(--primary-color);
|
|
539
|
+
font-weight: 700;
|
|
540
|
+
font-size: 0.95em;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.stepDescription {
|
|
544
|
+
color: var(--primary-color);
|
|
545
|
+
opacity: 0.8;
|
|
544
546
|
}
|
|
545
547
|
|
|
546
548
|
// Color the arrow after active step
|
|
547
549
|
&:not(:last-child)::after {
|
|
548
|
-
color:
|
|
550
|
+
color: var(--primary-color);
|
|
551
|
+
font-weight: bold;
|
|
549
552
|
}
|
|
550
553
|
}
|
|
551
554
|
|
|
552
555
|
&.complete {
|
|
553
556
|
.stepIcon {
|
|
554
|
-
background-color:
|
|
555
|
-
color:
|
|
557
|
+
background-color: rgba(var(--color-valid), 1);
|
|
558
|
+
color: var(--tertiary-color);
|
|
559
|
+
border: 2px solid rgba(var(--color-valid), 0.3);
|
|
556
560
|
}
|
|
557
561
|
|
|
558
562
|
.stepTitle {
|
|
559
|
-
color:
|
|
563
|
+
color: rgba(var(--color-valid), 1);
|
|
564
|
+
font-weight: 600;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.stepDescription {
|
|
568
|
+
color: rgba(var(--color-valid), 1);
|
|
569
|
+
opacity: 0.7;
|
|
560
570
|
}
|
|
561
571
|
|
|
562
572
|
// Color the arrow after completed step
|
|
563
573
|
&:not(:last-child)::after {
|
|
564
|
-
color:
|
|
574
|
+
color: rgba(var(--color-valid), 1);
|
|
565
575
|
}
|
|
566
576
|
}
|
|
567
577
|
|
|
568
578
|
&:hover:not(.active) {
|
|
579
|
+
background-color: rgba(var(--primary-rgb), 0.02);
|
|
580
|
+
border-radius: var(--radius);
|
|
581
|
+
padding: 8px;
|
|
582
|
+
|
|
569
583
|
.stepIcon {
|
|
570
584
|
transform: scale(1.05);
|
|
585
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
586
|
+
color: var(--primary-color);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
.stepTitle {
|
|
590
|
+
color: var(--primary-color);
|
|
571
591
|
}
|
|
572
592
|
}
|
|
573
593
|
}
|
|
@@ -576,8 +596,8 @@ $radius-lg: 8px;
|
|
|
576
596
|
width: 40px; // Reduced from 48px for more compact look
|
|
577
597
|
height: 40px;
|
|
578
598
|
border-radius: 50%;
|
|
579
|
-
background-color:
|
|
580
|
-
border: 2px solid
|
|
599
|
+
background-color: var(--tertiary-color);
|
|
600
|
+
border: 2px solid var(--border-color);
|
|
581
601
|
display: flex;
|
|
582
602
|
align-items: center;
|
|
583
603
|
justify-content: center;
|
|
@@ -591,23 +611,23 @@ $radius-lg: 8px;
|
|
|
591
611
|
display: block;
|
|
592
612
|
font-size: 0.875rem;
|
|
593
613
|
font-weight: 500;
|
|
594
|
-
color:
|
|
614
|
+
color: var(--paragraph-color);
|
|
595
615
|
margin-bottom: 2px;
|
|
596
616
|
}
|
|
597
617
|
|
|
598
618
|
.stepDescription {
|
|
599
619
|
display: block;
|
|
600
620
|
font-size: 0.75rem;
|
|
601
|
-
color:
|
|
621
|
+
color: var(--paragraph-color);
|
|
602
622
|
max-width: 150px;
|
|
603
623
|
line-height: 1.3;
|
|
604
624
|
}
|
|
605
625
|
}
|
|
606
626
|
|
|
607
627
|
.wizardContent {
|
|
608
|
-
background-color:
|
|
609
|
-
border-radius:
|
|
610
|
-
box-shadow:
|
|
628
|
+
background-color: var(--tertiary-color);
|
|
629
|
+
border-radius: var(--radius);
|
|
630
|
+
box-shadow: var(--box-shadow-small);
|
|
611
631
|
overflow: hidden;
|
|
612
632
|
}
|
|
613
633
|
|
|
@@ -616,9 +636,13 @@ $radius-lg: 8px;
|
|
|
616
636
|
align-items: center;
|
|
617
637
|
gap: 24px;
|
|
618
638
|
padding: 24px 32px;
|
|
619
|
-
border-bottom: 1px solid
|
|
620
|
-
background: linear-gradient(
|
|
621
|
-
|
|
639
|
+
border-bottom: 1px solid var(--border-color);
|
|
640
|
+
background: linear-gradient(
|
|
641
|
+
135deg,
|
|
642
|
+
var(--primary-color) 0%,
|
|
643
|
+
var(--primary-color) 100%
|
|
644
|
+
);
|
|
645
|
+
color: var(--tertiary-color);
|
|
622
646
|
|
|
623
647
|
.stepNumber {
|
|
624
648
|
display: flex;
|
|
@@ -630,7 +654,7 @@ $radius-lg: 8px;
|
|
|
630
654
|
border-radius: 50%;
|
|
631
655
|
font-size: 1.5rem;
|
|
632
656
|
font-weight: 700;
|
|
633
|
-
color:
|
|
657
|
+
color: var(--tertiary-color);
|
|
634
658
|
}
|
|
635
659
|
|
|
636
660
|
.stepHeaderContent {
|
|
@@ -646,10 +670,10 @@ $radius-lg: 8px;
|
|
|
646
670
|
width: 40px;
|
|
647
671
|
height: 40px;
|
|
648
672
|
background-color: rgba(255, 255, 255, 0.15);
|
|
649
|
-
border-radius:
|
|
673
|
+
border-radius: var(--radius);
|
|
650
674
|
|
|
651
675
|
svg {
|
|
652
|
-
color:
|
|
676
|
+
color: var(--tertiary-color);
|
|
653
677
|
}
|
|
654
678
|
}
|
|
655
679
|
|
|
@@ -658,7 +682,7 @@ $radius-lg: 8px;
|
|
|
658
682
|
margin: 0 0 4px 0;
|
|
659
683
|
font-size: 1.5rem;
|
|
660
684
|
font-weight: 700;
|
|
661
|
-
color:
|
|
685
|
+
color: var(--tertiary-color);
|
|
662
686
|
}
|
|
663
687
|
|
|
664
688
|
p {
|
|
@@ -672,16 +696,16 @@ $radius-lg: 8px;
|
|
|
672
696
|
|
|
673
697
|
.stepGuidance {
|
|
674
698
|
padding: 20px 32px;
|
|
675
|
-
background-color: rgba(
|
|
676
|
-
border-top: 1px solid
|
|
677
|
-
border-bottom: 1px solid
|
|
699
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
700
|
+
border-top: 1px solid var(--border-color);
|
|
701
|
+
border-bottom: 1px solid var(--border-color);
|
|
678
702
|
|
|
679
703
|
.guidanceContent {
|
|
680
704
|
h3 {
|
|
681
705
|
margin: 0 0 16px 0;
|
|
682
706
|
font-size: 1.125rem;
|
|
683
707
|
font-weight: 600;
|
|
684
|
-
color:
|
|
708
|
+
color: var(--header-color);
|
|
685
709
|
}
|
|
686
710
|
|
|
687
711
|
.howToSteps {
|
|
@@ -691,7 +715,7 @@ $radius-lg: 8px;
|
|
|
691
715
|
margin: 0 0 8px 0;
|
|
692
716
|
font-size: 0.875rem;
|
|
693
717
|
font-weight: 600;
|
|
694
|
-
color:
|
|
718
|
+
color: var(--paragraph-color);
|
|
695
719
|
text-transform: uppercase;
|
|
696
720
|
letter-spacing: 0.5px;
|
|
697
721
|
}
|
|
@@ -699,7 +723,7 @@ $radius-lg: 8px;
|
|
|
699
723
|
ol {
|
|
700
724
|
margin: 0;
|
|
701
725
|
padding-left: 20px;
|
|
702
|
-
color:
|
|
726
|
+
color: var(--paragraph-color);
|
|
703
727
|
|
|
704
728
|
li {
|
|
705
729
|
margin-bottom: 4px;
|
|
@@ -714,19 +738,19 @@ $radius-lg: 8px;
|
|
|
714
738
|
align-items: flex-start;
|
|
715
739
|
gap: 8px;
|
|
716
740
|
padding: 12px;
|
|
717
|
-
background-color: rgba(
|
|
718
|
-
border: 1px solid rgba(
|
|
719
|
-
border-radius:
|
|
741
|
+
background-color: rgba(var(--color-alert), 0.1);
|
|
742
|
+
border: 1px solid rgba(var(--color-alert), 0.2);
|
|
743
|
+
border-radius: var(--radius);
|
|
720
744
|
|
|
721
745
|
svg {
|
|
722
|
-
color:
|
|
746
|
+
color: rgba(var(--color-alert), 1);
|
|
723
747
|
flex-shrink: 0;
|
|
724
748
|
margin-top: 2px;
|
|
725
749
|
}
|
|
726
750
|
|
|
727
751
|
span {
|
|
728
752
|
font-size: 0.875rem;
|
|
729
|
-
color:
|
|
753
|
+
color: var(--header-color);
|
|
730
754
|
}
|
|
731
755
|
}
|
|
732
756
|
}
|
|
@@ -742,8 +766,21 @@ $radius-lg: 8px;
|
|
|
742
766
|
justify-content: space-between;
|
|
743
767
|
align-items: center;
|
|
744
768
|
padding: 24px 32px;
|
|
745
|
-
border-top: 1px solid
|
|
746
|
-
background-color:
|
|
769
|
+
border-top: 1px solid var(--border-color);
|
|
770
|
+
background-color: var(--bg-color);
|
|
771
|
+
gap: 16px;
|
|
772
|
+
|
|
773
|
+
.btn {
|
|
774
|
+
min-width: 120px;
|
|
775
|
+
padding: 12px 24px;
|
|
776
|
+
font-weight: 600;
|
|
777
|
+
transition: all 0.2s ease;
|
|
778
|
+
|
|
779
|
+
&:focus {
|
|
780
|
+
outline: 2px solid rgba(var(--primary-rgb), 0.3);
|
|
781
|
+
outline-offset: 2px;
|
|
782
|
+
}
|
|
783
|
+
}
|
|
747
784
|
}
|
|
748
785
|
|
|
749
786
|
// Table Selection
|
|
@@ -751,16 +788,16 @@ $radius-lg: 8px;
|
|
|
751
788
|
.noTables {
|
|
752
789
|
text-align: center;
|
|
753
790
|
padding: 48px 24px;
|
|
754
|
-
color:
|
|
791
|
+
color: var(--paragraph-color);
|
|
755
792
|
|
|
756
793
|
svg {
|
|
757
|
-
color:
|
|
794
|
+
color: var(--paragraph-color);
|
|
758
795
|
margin-bottom: 16px;
|
|
759
796
|
}
|
|
760
797
|
|
|
761
798
|
h3 {
|
|
762
799
|
margin: 0 0 8px 0;
|
|
763
|
-
color:
|
|
800
|
+
color: var(--header-color);
|
|
764
801
|
}
|
|
765
802
|
|
|
766
803
|
p {
|
|
@@ -782,12 +819,12 @@ $radius-lg: 8px;
|
|
|
782
819
|
margin: 0 0 8px 0;
|
|
783
820
|
font-size: 1.25rem;
|
|
784
821
|
font-weight: 600;
|
|
785
|
-
color:
|
|
822
|
+
color: var(--header-color);
|
|
786
823
|
}
|
|
787
824
|
|
|
788
825
|
p {
|
|
789
826
|
margin: 0;
|
|
790
|
-
color:
|
|
827
|
+
color: var(--paragraph-color);
|
|
791
828
|
font-size: 0.875rem;
|
|
792
829
|
}
|
|
793
830
|
}
|
|
@@ -805,9 +842,9 @@ $radius-lg: 8px;
|
|
|
805
842
|
display: flex;
|
|
806
843
|
flex-direction: column;
|
|
807
844
|
padding: 16px; // Reduced from 20px
|
|
808
|
-
background-color:
|
|
809
|
-
border: 2px solid
|
|
810
|
-
border-radius:
|
|
845
|
+
background-color: var(--tertiary-color);
|
|
846
|
+
border: 2px solid var(--border-color);
|
|
847
|
+
border-radius: var(--radius);
|
|
811
848
|
cursor: pointer;
|
|
812
849
|
transition: all 0.2s ease;
|
|
813
850
|
text-align: center;
|
|
@@ -815,15 +852,15 @@ $radius-lg: 8px;
|
|
|
815
852
|
min-height: 120px; // Reduced from 140px
|
|
816
853
|
|
|
817
854
|
&:hover {
|
|
818
|
-
border-color:
|
|
819
|
-
box-shadow:
|
|
855
|
+
border-color: var(--primary-color);
|
|
856
|
+
box-shadow: var(--box-shadow-small);
|
|
820
857
|
transform: translateY(-2px);
|
|
821
858
|
}
|
|
822
859
|
|
|
823
860
|
&.selected {
|
|
824
|
-
border-color:
|
|
825
|
-
background-color: rgba(
|
|
826
|
-
box-shadow:
|
|
861
|
+
border-color: var(--primary-color);
|
|
862
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
863
|
+
box-shadow: var(--box-shadow-small);
|
|
827
864
|
}
|
|
828
865
|
|
|
829
866
|
.tableCardIcon {
|
|
@@ -832,13 +869,13 @@ $radius-lg: 8px;
|
|
|
832
869
|
justify-content: center;
|
|
833
870
|
width: 40px; // Reduced from 48px
|
|
834
871
|
height: 40px;
|
|
835
|
-
background-color: rgba(
|
|
836
|
-
border-radius:
|
|
872
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
873
|
+
border-radius: var(--radius);
|
|
837
874
|
margin: 0 auto 12px auto; // Reduced from 16px
|
|
838
875
|
flex-shrink: 0;
|
|
839
876
|
|
|
840
877
|
svg {
|
|
841
|
-
color:
|
|
878
|
+
color: var(--primary-color);
|
|
842
879
|
}
|
|
843
880
|
}
|
|
844
881
|
|
|
@@ -849,14 +886,14 @@ $radius-lg: 8px;
|
|
|
849
886
|
margin: 0 0 6px 0; // Reduced from 8px
|
|
850
887
|
font-size: 0.9rem; // Reduced from 1rem
|
|
851
888
|
font-weight: 600;
|
|
852
|
-
color:
|
|
889
|
+
color: var(--header-color);
|
|
853
890
|
line-height: 1.2;
|
|
854
891
|
}
|
|
855
892
|
|
|
856
893
|
p {
|
|
857
894
|
margin: 0;
|
|
858
895
|
font-size: 0.7rem; // Reduced from 0.75rem
|
|
859
|
-
color:
|
|
896
|
+
color: var(--paragraph-color);
|
|
860
897
|
line-height: 1.3; // Reduced from 1.4
|
|
861
898
|
display: -webkit-box;
|
|
862
899
|
-webkit-line-clamp: 2; // Reduced from 3 lines
|
|
@@ -874,12 +911,12 @@ $radius-lg: 8px;
|
|
|
874
911
|
justify-content: center;
|
|
875
912
|
width: 24px;
|
|
876
913
|
height: 24px;
|
|
877
|
-
background-color:
|
|
914
|
+
background-color: var(--primary-color);
|
|
878
915
|
border-radius: 50%;
|
|
879
|
-
color:
|
|
916
|
+
color: var(--tertiary-color);
|
|
880
917
|
|
|
881
918
|
svg {
|
|
882
|
-
color:
|
|
919
|
+
color: var(--tertiary-color);
|
|
883
920
|
}
|
|
884
921
|
}
|
|
885
922
|
}
|
|
@@ -891,15 +928,15 @@ $radius-lg: 8px;
|
|
|
891
928
|
gap: 8px;
|
|
892
929
|
margin-top: 16px;
|
|
893
930
|
padding: 12px;
|
|
894
|
-
background-color: rgba(
|
|
895
|
-
border: 1px solid rgba(
|
|
896
|
-
border-radius:
|
|
897
|
-
color:
|
|
931
|
+
background-color: rgba(var(--color-valid), 0.1);
|
|
932
|
+
border: 1px solid rgba(var(--color-valid), 0.2);
|
|
933
|
+
border-radius: var(--radius);
|
|
934
|
+
color: rgba(var(--color-valid), 1);
|
|
898
935
|
font-weight: 500;
|
|
899
936
|
font-size: 0.875rem;
|
|
900
937
|
|
|
901
938
|
svg {
|
|
902
|
-
color:
|
|
939
|
+
color: rgba(var(--color-valid), 1);
|
|
903
940
|
}
|
|
904
941
|
}
|
|
905
942
|
}
|
|
@@ -912,7 +949,7 @@ $radius-lg: 8px;
|
|
|
912
949
|
margin: 0 0 16px 0;
|
|
913
950
|
font-size: 1.125rem;
|
|
914
951
|
font-weight: 600;
|
|
915
|
-
color:
|
|
952
|
+
color: var(--header-color);
|
|
916
953
|
}
|
|
917
954
|
}
|
|
918
955
|
|
|
@@ -923,9 +960,9 @@ $radius-lg: 8px;
|
|
|
923
960
|
}
|
|
924
961
|
|
|
925
962
|
.tableCard {
|
|
926
|
-
background-color:
|
|
963
|
+
background-color: var(--bg-color);
|
|
927
964
|
border: 2px solid transparent;
|
|
928
|
-
border-radius:
|
|
965
|
+
border-radius: var(--radius);
|
|
929
966
|
padding: 16px;
|
|
930
967
|
cursor: pointer;
|
|
931
968
|
transition: all 0.2s ease;
|
|
@@ -936,24 +973,24 @@ $radius-lg: 8px;
|
|
|
936
973
|
position: relative;
|
|
937
974
|
|
|
938
975
|
&:hover {
|
|
939
|
-
border-color:
|
|
940
|
-
background-color:
|
|
941
|
-
box-shadow:
|
|
976
|
+
border-color: var(--primary-color);
|
|
977
|
+
background-color: var(--tertiary-color);
|
|
978
|
+
box-shadow: var(--box-shadow-small);
|
|
942
979
|
}
|
|
943
980
|
|
|
944
981
|
&.selected {
|
|
945
|
-
border-color:
|
|
946
|
-
background-color: rgba(
|
|
982
|
+
border-color: var(--primary-color);
|
|
983
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
947
984
|
}
|
|
948
985
|
|
|
949
986
|
svg {
|
|
950
|
-
color:
|
|
987
|
+
color: var(--primary-color);
|
|
951
988
|
}
|
|
952
989
|
|
|
953
990
|
span {
|
|
954
991
|
font-size: 0.875rem;
|
|
955
992
|
font-weight: 500;
|
|
956
|
-
color:
|
|
993
|
+
color: var(--header-color);
|
|
957
994
|
text-align: center;
|
|
958
995
|
}
|
|
959
996
|
|
|
@@ -961,7 +998,7 @@ $radius-lg: 8px;
|
|
|
961
998
|
position: absolute;
|
|
962
999
|
top: 8px;
|
|
963
1000
|
right: 8px;
|
|
964
|
-
color:
|
|
1001
|
+
color: var(--primary-color);
|
|
965
1002
|
}
|
|
966
1003
|
}
|
|
967
1004
|
|
|
@@ -970,16 +1007,16 @@ $radius-lg: 8px;
|
|
|
970
1007
|
.noColumns {
|
|
971
1008
|
text-align: center;
|
|
972
1009
|
padding: 48px 24px;
|
|
973
|
-
color:
|
|
1010
|
+
color: var(--paragraph-color);
|
|
974
1011
|
|
|
975
1012
|
svg {
|
|
976
|
-
color:
|
|
1013
|
+
color: var(--paragraph-color);
|
|
977
1014
|
margin-bottom: 16px;
|
|
978
1015
|
}
|
|
979
1016
|
|
|
980
1017
|
h3 {
|
|
981
1018
|
margin: 0 0 8px 0;
|
|
982
|
-
color:
|
|
1019
|
+
color: var(--header-color);
|
|
983
1020
|
}
|
|
984
1021
|
|
|
985
1022
|
p {
|
|
@@ -995,7 +1032,7 @@ $radius-lg: 8px;
|
|
|
995
1032
|
p {
|
|
996
1033
|
margin: 0 0 12px 0;
|
|
997
1034
|
font-size: 1rem;
|
|
998
|
-
color:
|
|
1035
|
+
color: var(--paragraph-color);
|
|
999
1036
|
}
|
|
1000
1037
|
}
|
|
1001
1038
|
|
|
@@ -1007,14 +1044,14 @@ $radius-lg: 8px;
|
|
|
1007
1044
|
.linkButton {
|
|
1008
1045
|
background: none;
|
|
1009
1046
|
border: none;
|
|
1010
|
-
color:
|
|
1047
|
+
color: var(--primary-color);
|
|
1011
1048
|
font-size: 0.875rem;
|
|
1012
1049
|
font-weight: 500;
|
|
1013
1050
|
cursor: pointer;
|
|
1014
1051
|
transition: all 0.2s ease;
|
|
1015
1052
|
|
|
1016
1053
|
&:hover {
|
|
1017
|
-
color:
|
|
1054
|
+
color: var(--primary-color);
|
|
1018
1055
|
text-decoration: underline;
|
|
1019
1056
|
}
|
|
1020
1057
|
}
|
|
@@ -1026,10 +1063,10 @@ $radius-lg: 8px;
|
|
|
1026
1063
|
}
|
|
1027
1064
|
|
|
1028
1065
|
.columnCategory {
|
|
1029
|
-
background-color:
|
|
1030
|
-
border-radius:
|
|
1066
|
+
background-color: var(--bg-color);
|
|
1067
|
+
border-radius: var(--radius);
|
|
1031
1068
|
padding: 16px; // Reduced from 20px
|
|
1032
|
-
border: 1px solid
|
|
1069
|
+
border: 1px solid var(--border-color);
|
|
1033
1070
|
|
|
1034
1071
|
.categoryHeader {
|
|
1035
1072
|
display: flex;
|
|
@@ -1038,19 +1075,19 @@ $radius-lg: 8px;
|
|
|
1038
1075
|
margin-bottom: 16px;
|
|
1039
1076
|
|
|
1040
1077
|
svg {
|
|
1041
|
-
color:
|
|
1078
|
+
color: var(--primary-color);
|
|
1042
1079
|
}
|
|
1043
1080
|
|
|
1044
1081
|
h4 {
|
|
1045
1082
|
margin: 0;
|
|
1046
1083
|
font-size: 1rem;
|
|
1047
1084
|
font-weight: 600;
|
|
1048
|
-
color:
|
|
1085
|
+
color: var(--header-color);
|
|
1049
1086
|
}
|
|
1050
1087
|
|
|
1051
1088
|
span {
|
|
1052
1089
|
font-size: 0.875rem;
|
|
1053
|
-
color:
|
|
1090
|
+
color: var(--paragraph-color);
|
|
1054
1091
|
}
|
|
1055
1092
|
}
|
|
1056
1093
|
}
|
|
@@ -1069,47 +1106,47 @@ $radius-lg: 8px;
|
|
|
1069
1106
|
align-items: center;
|
|
1070
1107
|
gap: 6px; // Reduced from 8px
|
|
1071
1108
|
padding: 6px 10px; // Reduced from 8px 12px
|
|
1072
|
-
background-color:
|
|
1073
|
-
border-radius:
|
|
1109
|
+
background-color: var(--tertiary-color);
|
|
1110
|
+
border-radius: var(--radius);
|
|
1074
1111
|
cursor: pointer;
|
|
1075
1112
|
transition: all 0.2s ease;
|
|
1076
1113
|
|
|
1077
1114
|
&:hover {
|
|
1078
|
-
background-color: rgba(
|
|
1115
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1079
1116
|
}
|
|
1080
1117
|
|
|
1081
1118
|
input[type='checkbox'] {
|
|
1082
1119
|
width: 16px;
|
|
1083
1120
|
height: 16px;
|
|
1084
1121
|
cursor: pointer;
|
|
1085
|
-
accent-color:
|
|
1122
|
+
accent-color: var(--primary-color);
|
|
1086
1123
|
}
|
|
1087
1124
|
|
|
1088
1125
|
.columnName {
|
|
1089
1126
|
flex: 1;
|
|
1090
1127
|
font-size: 0.875rem;
|
|
1091
1128
|
font-weight: 500;
|
|
1092
|
-
color:
|
|
1129
|
+
color: var(--header-color);
|
|
1093
1130
|
}
|
|
1094
1131
|
|
|
1095
1132
|
.columnType {
|
|
1096
1133
|
font-size: 0.75rem;
|
|
1097
|
-
color:
|
|
1134
|
+
color: var(--paragraph-color);
|
|
1098
1135
|
padding: 2px 8px;
|
|
1099
|
-
background-color:
|
|
1100
|
-
border-radius:
|
|
1136
|
+
background-color: var(--bg-color);
|
|
1137
|
+
border-radius: var(--radius);
|
|
1101
1138
|
}
|
|
1102
1139
|
}
|
|
1103
1140
|
|
|
1104
1141
|
.selectedSummary {
|
|
1105
1142
|
margin-top: 24px;
|
|
1106
1143
|
padding: 16px;
|
|
1107
|
-
background-color: rgba(
|
|
1108
|
-
border: 1px solid rgba(
|
|
1109
|
-
border-radius:
|
|
1144
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1145
|
+
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1146
|
+
border-radius: var(--radius);
|
|
1110
1147
|
text-align: center;
|
|
1111
1148
|
font-size: 0.875rem;
|
|
1112
|
-
color:
|
|
1149
|
+
color: var(--primary-color);
|
|
1113
1150
|
}
|
|
1114
1151
|
|
|
1115
1152
|
.tableColumnSections {
|
|
@@ -1119,9 +1156,9 @@ $radius-lg: 8px;
|
|
|
1119
1156
|
}
|
|
1120
1157
|
|
|
1121
1158
|
.tableSection {
|
|
1122
|
-
background-color:
|
|
1123
|
-
border: 1px solid
|
|
1124
|
-
border-radius:
|
|
1159
|
+
background-color: var(--tertiary-color);
|
|
1160
|
+
border: 1px solid var(--border-color);
|
|
1161
|
+
border-radius: var(--radius);
|
|
1125
1162
|
padding: 16px;
|
|
1126
1163
|
|
|
1127
1164
|
.tableSectionHeader {
|
|
@@ -1130,21 +1167,21 @@ $radius-lg: 8px;
|
|
|
1130
1167
|
justify-content: space-between;
|
|
1131
1168
|
margin-bottom: 16px;
|
|
1132
1169
|
padding-bottom: 12px;
|
|
1133
|
-
border-bottom: 1px solid
|
|
1170
|
+
border-bottom: 1px solid var(--border-color);
|
|
1134
1171
|
|
|
1135
1172
|
h3 {
|
|
1136
1173
|
margin: 0;
|
|
1137
1174
|
font-size: 1.125rem;
|
|
1138
1175
|
font-weight: 600;
|
|
1139
|
-
color:
|
|
1176
|
+
color: var(--header-color);
|
|
1140
1177
|
}
|
|
1141
1178
|
|
|
1142
1179
|
.tableColumnCount {
|
|
1143
1180
|
font-size: 0.875rem;
|
|
1144
|
-
color:
|
|
1145
|
-
background-color:
|
|
1181
|
+
color: var(--paragraph-color);
|
|
1182
|
+
background-color: var(--bg-color);
|
|
1146
1183
|
padding: 4px 8px;
|
|
1147
|
-
border-radius:
|
|
1184
|
+
border-radius: var(--radius);
|
|
1148
1185
|
}
|
|
1149
1186
|
}
|
|
1150
1187
|
}
|
|
@@ -1154,13 +1191,13 @@ $radius-lg: 8px;
|
|
|
1154
1191
|
display: flex;
|
|
1155
1192
|
gap: 16px;
|
|
1156
1193
|
padding: 16px;
|
|
1157
|
-
background-color: rgba(
|
|
1158
|
-
border: 1px solid rgba(
|
|
1159
|
-
border-radius:
|
|
1194
|
+
background-color: rgba(var(--primary-color), 0.05);
|
|
1195
|
+
border: 1px solid rgba(var(--primary-color), 0.2);
|
|
1196
|
+
border-radius: var(--radius);
|
|
1160
1197
|
margin-bottom: 24px;
|
|
1161
1198
|
|
|
1162
1199
|
svg {
|
|
1163
|
-
color:
|
|
1200
|
+
color: var(--primary-color);
|
|
1164
1201
|
flex-shrink: 0;
|
|
1165
1202
|
}
|
|
1166
1203
|
|
|
@@ -1168,13 +1205,13 @@ $radius-lg: 8px;
|
|
|
1168
1205
|
margin: 0 0 8px 0;
|
|
1169
1206
|
font-size: 1rem;
|
|
1170
1207
|
font-weight: 600;
|
|
1171
|
-
color:
|
|
1208
|
+
color: var(--header-color);
|
|
1172
1209
|
}
|
|
1173
1210
|
|
|
1174
1211
|
p {
|
|
1175
1212
|
margin: 0;
|
|
1176
1213
|
font-size: 0.875rem;
|
|
1177
|
-
color:
|
|
1214
|
+
color: var(--paragraph-color);
|
|
1178
1215
|
line-height: 1.5;
|
|
1179
1216
|
}
|
|
1180
1217
|
}
|
|
@@ -1184,12 +1221,12 @@ $radius-lg: 8px;
|
|
|
1184
1221
|
text-align: center;
|
|
1185
1222
|
margin-top: 32px;
|
|
1186
1223
|
padding-top: 32px;
|
|
1187
|
-
border-top: 1px solid
|
|
1224
|
+
border-top: 1px solid var(--border-color);
|
|
1188
1225
|
|
|
1189
1226
|
p {
|
|
1190
1227
|
margin: 0 0 16px 0;
|
|
1191
1228
|
font-size: 0.875rem;
|
|
1192
|
-
color:
|
|
1229
|
+
color: var(--paragraph-color);
|
|
1193
1230
|
}
|
|
1194
1231
|
}
|
|
1195
1232
|
|
|
@@ -1199,9 +1236,9 @@ $radius-lg: 8px;
|
|
|
1199
1236
|
.filterOperatorContainer {
|
|
1200
1237
|
margin-bottom: 24px;
|
|
1201
1238
|
padding: 20px;
|
|
1202
|
-
background-color:
|
|
1203
|
-
border: 1px solid
|
|
1204
|
-
border-radius:
|
|
1239
|
+
background-color: var(--tertiary-color);
|
|
1240
|
+
border: 1px solid var(--border-color);
|
|
1241
|
+
border-radius: var(--radius);
|
|
1205
1242
|
display: flex;
|
|
1206
1243
|
justify-content: space-between;
|
|
1207
1244
|
align-items: center;
|
|
@@ -1216,7 +1253,7 @@ $radius-lg: 8px;
|
|
|
1216
1253
|
margin-bottom: 12px;
|
|
1217
1254
|
font-size: 1rem;
|
|
1218
1255
|
font-weight: 600;
|
|
1219
|
-
color:
|
|
1256
|
+
color: var(--header-color);
|
|
1220
1257
|
}
|
|
1221
1258
|
}
|
|
1222
1259
|
|
|
@@ -1227,25 +1264,25 @@ $radius-lg: 8px;
|
|
|
1227
1264
|
|
|
1228
1265
|
.operatorOption {
|
|
1229
1266
|
padding: 16px 20px;
|
|
1230
|
-
border: 2px solid
|
|
1231
|
-
border-radius:
|
|
1267
|
+
border: 2px solid var(--border-color);
|
|
1268
|
+
border-radius: var(--radius);
|
|
1232
1269
|
cursor: pointer;
|
|
1233
1270
|
transition: all 0.2s ease;
|
|
1234
|
-
background-color:
|
|
1271
|
+
background-color: var(--tertiary-color);
|
|
1235
1272
|
text-align: center;
|
|
1236
1273
|
flex: 1;
|
|
1237
1274
|
|
|
1238
1275
|
&:hover {
|
|
1239
|
-
border-color:
|
|
1240
|
-
background-color: rgba(
|
|
1276
|
+
border-color: var(--primary-color);
|
|
1277
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1241
1278
|
}
|
|
1242
1279
|
|
|
1243
1280
|
&.operatorOptionSelected {
|
|
1244
|
-
border-color:
|
|
1245
|
-
background-color: rgba(
|
|
1281
|
+
border-color: var(--primary-color);
|
|
1282
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
1246
1283
|
|
|
1247
1284
|
.operatorName {
|
|
1248
|
-
color:
|
|
1285
|
+
color: var(--primary-color);
|
|
1249
1286
|
}
|
|
1250
1287
|
}
|
|
1251
1288
|
}
|
|
@@ -1253,13 +1290,13 @@ $radius-lg: 8px;
|
|
|
1253
1290
|
.operatorName {
|
|
1254
1291
|
font-size: 1rem;
|
|
1255
1292
|
font-weight: 600;
|
|
1256
|
-
color:
|
|
1293
|
+
color: var(--header-color);
|
|
1257
1294
|
margin-bottom: 4px;
|
|
1258
1295
|
}
|
|
1259
1296
|
|
|
1260
1297
|
.operatorDescription {
|
|
1261
1298
|
font-size: 0.875rem;
|
|
1262
|
-
color:
|
|
1299
|
+
color: var(--paragraph-color);
|
|
1263
1300
|
line-height: 1.3;
|
|
1264
1301
|
}
|
|
1265
1302
|
|
|
@@ -1271,16 +1308,16 @@ $radius-lg: 8px;
|
|
|
1271
1308
|
// Filter groups
|
|
1272
1309
|
.filterGroup {
|
|
1273
1310
|
margin-bottom: 24px;
|
|
1274
|
-
background-color:
|
|
1275
|
-
border: 1px solid
|
|
1276
|
-
border-radius:
|
|
1311
|
+
background-color: var(--tertiary-color);
|
|
1312
|
+
border: 1px solid var(--border-color);
|
|
1313
|
+
border-radius: var(--radius);
|
|
1277
1314
|
overflow: hidden;
|
|
1278
1315
|
}
|
|
1279
1316
|
|
|
1280
1317
|
.filterGroupHeader {
|
|
1281
|
-
background-color:
|
|
1318
|
+
background-color: var(--bg-color);
|
|
1282
1319
|
padding: 16px 20px;
|
|
1283
|
-
border-bottom: 1px solid
|
|
1320
|
+
border-bottom: 1px solid var(--border-color);
|
|
1284
1321
|
display: flex;
|
|
1285
1322
|
justify-content: space-between;
|
|
1286
1323
|
align-items: center;
|
|
@@ -1297,7 +1334,7 @@ $radius-lg: 8px;
|
|
|
1297
1334
|
margin: 0;
|
|
1298
1335
|
font-size: 1.125rem;
|
|
1299
1336
|
font-weight: 600;
|
|
1300
|
-
color:
|
|
1337
|
+
color: var(--header-color);
|
|
1301
1338
|
}
|
|
1302
1339
|
}
|
|
1303
1340
|
|
|
@@ -1309,40 +1346,40 @@ $radius-lg: 8px;
|
|
|
1309
1346
|
label {
|
|
1310
1347
|
font-size: 0.875rem;
|
|
1311
1348
|
font-weight: 500;
|
|
1312
|
-
color:
|
|
1349
|
+
color: var(--paragraph-color);
|
|
1313
1350
|
}
|
|
1314
1351
|
}
|
|
1315
1352
|
|
|
1316
1353
|
.operatorButtonGroup {
|
|
1317
1354
|
display: flex;
|
|
1318
|
-
border-radius:
|
|
1355
|
+
border-radius: var(--radius);
|
|
1319
1356
|
overflow: hidden;
|
|
1320
|
-
border: 1px solid
|
|
1357
|
+
border: 1px solid var(--border-color);
|
|
1321
1358
|
}
|
|
1322
1359
|
|
|
1323
1360
|
.operatorButton {
|
|
1324
1361
|
padding: 8px 16px;
|
|
1325
|
-
background-color:
|
|
1362
|
+
background-color: var(--tertiary-color);
|
|
1326
1363
|
border: none;
|
|
1327
1364
|
font-size: 0.875rem;
|
|
1328
1365
|
font-weight: 500;
|
|
1329
|
-
color:
|
|
1366
|
+
color: var(--paragraph-color);
|
|
1330
1367
|
cursor: pointer;
|
|
1331
1368
|
transition: all 0.2s ease;
|
|
1332
|
-
border-right: 1px solid
|
|
1369
|
+
border-right: 1px solid var(--border-color);
|
|
1333
1370
|
|
|
1334
1371
|
&:last-child {
|
|
1335
1372
|
border-right: none;
|
|
1336
1373
|
}
|
|
1337
1374
|
|
|
1338
1375
|
&:hover {
|
|
1339
|
-
background-color: rgba(
|
|
1340
|
-
color:
|
|
1376
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1377
|
+
color: var(--primary-color);
|
|
1341
1378
|
}
|
|
1342
1379
|
|
|
1343
1380
|
&.operatorButtonSelected {
|
|
1344
|
-
background-color:
|
|
1345
|
-
color:
|
|
1381
|
+
background-color: var(--primary-color);
|
|
1382
|
+
color: var(--tertiary-color);
|
|
1346
1383
|
}
|
|
1347
1384
|
}
|
|
1348
1385
|
|
|
@@ -1358,9 +1395,9 @@ $radius-lg: 8px;
|
|
|
1358
1395
|
}
|
|
1359
1396
|
|
|
1360
1397
|
.filterCriterion {
|
|
1361
|
-
background-color:
|
|
1362
|
-
border: 1px solid
|
|
1363
|
-
border-radius:
|
|
1398
|
+
background-color: var(--bg-color);
|
|
1399
|
+
border: 1px solid var(--border-color);
|
|
1400
|
+
border-radius: var(--radius);
|
|
1364
1401
|
margin-bottom: 16px;
|
|
1365
1402
|
overflow: hidden;
|
|
1366
1403
|
|
|
@@ -1371,8 +1408,8 @@ $radius-lg: 8px;
|
|
|
1371
1408
|
|
|
1372
1409
|
.filterCriterionHeader {
|
|
1373
1410
|
padding: 12px 16px;
|
|
1374
|
-
background-color:
|
|
1375
|
-
border-bottom: 1px solid
|
|
1411
|
+
background-color: var(--tertiary-color);
|
|
1412
|
+
border-bottom: 1px solid var(--border-color);
|
|
1376
1413
|
display: flex;
|
|
1377
1414
|
justify-content: space-between;
|
|
1378
1415
|
align-items: center;
|
|
@@ -1381,7 +1418,7 @@ $radius-lg: 8px;
|
|
|
1381
1418
|
margin: 0;
|
|
1382
1419
|
font-size: 0.875rem;
|
|
1383
1420
|
font-weight: 500;
|
|
1384
|
-
color:
|
|
1421
|
+
color: var(--header-color);
|
|
1385
1422
|
}
|
|
1386
1423
|
}
|
|
1387
1424
|
|
|
@@ -1406,7 +1443,7 @@ $radius-lg: 8px;
|
|
|
1406
1443
|
label {
|
|
1407
1444
|
font-size: 0.75rem;
|
|
1408
1445
|
font-weight: 500;
|
|
1409
|
-
color:
|
|
1446
|
+
color: var(--paragraph-color);
|
|
1410
1447
|
text-transform: uppercase;
|
|
1411
1448
|
letter-spacing: 0.5px;
|
|
1412
1449
|
}
|
|
@@ -1414,59 +1451,59 @@ $radius-lg: 8px;
|
|
|
1414
1451
|
|
|
1415
1452
|
.filterSelect {
|
|
1416
1453
|
padding: 8px 12px;
|
|
1417
|
-
border: 1px solid
|
|
1418
|
-
border-radius:
|
|
1419
|
-
background-color:
|
|
1454
|
+
border: 1px solid var(--border-color);
|
|
1455
|
+
border-radius: var(--radius);
|
|
1456
|
+
background-color: var(--tertiary-color);
|
|
1420
1457
|
font-size: 0.875rem;
|
|
1421
|
-
color:
|
|
1458
|
+
color: var(--header-color);
|
|
1422
1459
|
cursor: pointer;
|
|
1423
1460
|
|
|
1424
1461
|
&:focus {
|
|
1425
1462
|
outline: none;
|
|
1426
|
-
border-color:
|
|
1427
|
-
box-shadow: 0 0 0 2px rgba(
|
|
1463
|
+
border-color: var(--primary-color);
|
|
1464
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1428
1465
|
}
|
|
1429
1466
|
}
|
|
1430
1467
|
|
|
1431
1468
|
.filterInput {
|
|
1432
1469
|
padding: 8px 12px;
|
|
1433
|
-
border: 1px solid
|
|
1434
|
-
border-radius:
|
|
1470
|
+
border: 1px solid var(--border-color);
|
|
1471
|
+
border-radius: var(--radius);
|
|
1435
1472
|
font-size: 0.875rem;
|
|
1436
|
-
color:
|
|
1473
|
+
color: var(--header-color);
|
|
1437
1474
|
|
|
1438
1475
|
&:focus {
|
|
1439
1476
|
outline: none;
|
|
1440
|
-
border-color:
|
|
1441
|
-
box-shadow: 0 0 0 2px rgba(
|
|
1477
|
+
border-color: var(--primary-color);
|
|
1478
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1442
1479
|
}
|
|
1443
1480
|
|
|
1444
1481
|
&::placeholder {
|
|
1445
|
-
color:
|
|
1482
|
+
color: var(--paragraph-color);
|
|
1446
1483
|
}
|
|
1447
1484
|
}
|
|
1448
1485
|
|
|
1449
1486
|
.removeJoinBtn {
|
|
1450
1487
|
background: none;
|
|
1451
1488
|
border: none;
|
|
1452
|
-
color:
|
|
1489
|
+
color: var(--approval-color);
|
|
1453
1490
|
font-size: 1.25rem;
|
|
1454
1491
|
cursor: pointer;
|
|
1455
1492
|
padding: 4px 8px;
|
|
1456
|
-
border-radius:
|
|
1493
|
+
border-radius: var(--radius);
|
|
1457
1494
|
transition: all 0.2s ease;
|
|
1458
1495
|
flex-shrink: 0;
|
|
1459
1496
|
|
|
1460
1497
|
&:hover {
|
|
1461
|
-
background-color: rgba(
|
|
1498
|
+
background-color: rgba(var(--approval-color), 0.1);
|
|
1462
1499
|
}
|
|
1463
1500
|
}
|
|
1464
1501
|
|
|
1465
1502
|
.emptyFilterGroup {
|
|
1466
1503
|
padding: 40px 20px;
|
|
1467
1504
|
text-align: center;
|
|
1468
|
-
color:
|
|
1469
|
-
background-color:
|
|
1505
|
+
color: var(--paragraph-color);
|
|
1506
|
+
background-color: var(--bg-color) er;
|
|
1470
1507
|
|
|
1471
1508
|
p {
|
|
1472
1509
|
margin: 0;
|
|
@@ -1475,6 +1512,186 @@ $radius-lg: 8px;
|
|
|
1475
1512
|
}
|
|
1476
1513
|
}
|
|
1477
1514
|
|
|
1515
|
+
// Report Section (for sorting and other collapsible sections)
|
|
1516
|
+
.reportSection {
|
|
1517
|
+
margin-bottom: calc(var(--padding) * 1.5);
|
|
1518
|
+
background-color: var(--tertiary-color);
|
|
1519
|
+
border: 1px solid var(--border-color);
|
|
1520
|
+
border-radius: var(--radius);
|
|
1521
|
+
overflow: hidden;
|
|
1522
|
+
box-shadow: var(--box-shadow-small);
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
.sectionHeader {
|
|
1526
|
+
display: flex;
|
|
1527
|
+
align-items: center;
|
|
1528
|
+
justify-content: space-between;
|
|
1529
|
+
padding: var(--padding) calc(var(--padding) * 1.25);
|
|
1530
|
+
background-color: var(--bg-color);
|
|
1531
|
+
border-bottom: 1px solid var(--border-color);
|
|
1532
|
+
cursor: pointer;
|
|
1533
|
+
transition: all 0.2s ease;
|
|
1534
|
+
|
|
1535
|
+
&:hover {
|
|
1536
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
h3 {
|
|
1540
|
+
margin: 0;
|
|
1541
|
+
font-size: 1.125rem;
|
|
1542
|
+
font-weight: var(--title-weight);
|
|
1543
|
+
color: var(--header-color);
|
|
1544
|
+
display: flex;
|
|
1545
|
+
align-items: center;
|
|
1546
|
+
gap: 8px;
|
|
1547
|
+
}
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
.sectionHeaderActions {
|
|
1551
|
+
display: flex;
|
|
1552
|
+
align-items: center;
|
|
1553
|
+
gap: 12px;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
.toggleBtn {
|
|
1557
|
+
display: flex;
|
|
1558
|
+
align-items: center;
|
|
1559
|
+
justify-content: center;
|
|
1560
|
+
width: 32px;
|
|
1561
|
+
height: 32px;
|
|
1562
|
+
background-color: var(--tertiary-color);
|
|
1563
|
+
border: 1px solid var(--border-color);
|
|
1564
|
+
border-radius: var(--radius);
|
|
1565
|
+
color: var(--paragraph-color);
|
|
1566
|
+
cursor: pointer;
|
|
1567
|
+
transition: all 0.2s ease;
|
|
1568
|
+
font-size: 14px;
|
|
1569
|
+
font-weight: bold;
|
|
1570
|
+
|
|
1571
|
+
&:hover {
|
|
1572
|
+
background-color: var(--primary-color);
|
|
1573
|
+
color: var(--tertiary-color);
|
|
1574
|
+
border-color: var(--primary-color);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
&.toggleBtnActive {
|
|
1578
|
+
background-color: var(--primary-color);
|
|
1579
|
+
color: var(--tertiary-color);
|
|
1580
|
+
border-color: var(--primary-color);
|
|
1581
|
+
}
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
// Sorting specific styles
|
|
1585
|
+
.joinTablesContainer {
|
|
1586
|
+
padding: calc(var(--padding) * 1.25);
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
.joinSection {
|
|
1590
|
+
background-color: var(--bg-color);
|
|
1591
|
+
border: 1px solid var(--border-color);
|
|
1592
|
+
border-radius: var(--radius);
|
|
1593
|
+
margin-bottom: var(--padding);
|
|
1594
|
+
overflow: hidden;
|
|
1595
|
+
|
|
1596
|
+
&:last-child {
|
|
1597
|
+
margin-bottom: 0;
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
|
|
1601
|
+
.joinHeader {
|
|
1602
|
+
display: flex;
|
|
1603
|
+
align-items: center;
|
|
1604
|
+
justify-content: space-between;
|
|
1605
|
+
padding: 12px var(--padding);
|
|
1606
|
+
background-color: var(--tertiary-color);
|
|
1607
|
+
border-bottom: 1px solid var(--border-color);
|
|
1608
|
+
|
|
1609
|
+
h4 {
|
|
1610
|
+
margin: 0;
|
|
1611
|
+
font-size: 0.875rem;
|
|
1612
|
+
font-weight: 600;
|
|
1613
|
+
color: var(--header-color);
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.joinGrid {
|
|
1618
|
+
display: grid;
|
|
1619
|
+
grid-template-columns: 1fr 1fr;
|
|
1620
|
+
gap: var(--padding);
|
|
1621
|
+
padding: var(--padding);
|
|
1622
|
+
|
|
1623
|
+
@media (max-width: 768px) {
|
|
1624
|
+
grid-template-columns: 1fr;
|
|
1625
|
+
}
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.joinGridColumn {
|
|
1629
|
+
display: flex;
|
|
1630
|
+
flex-direction: column;
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
.joinField {
|
|
1634
|
+
display: flex;
|
|
1635
|
+
flex-direction: column;
|
|
1636
|
+
gap: 6px;
|
|
1637
|
+
|
|
1638
|
+
label {
|
|
1639
|
+
font-size: 0.75rem;
|
|
1640
|
+
font-weight: 600;
|
|
1641
|
+
color: var(--paragraph-color);
|
|
1642
|
+
text-transform: uppercase;
|
|
1643
|
+
letter-spacing: 0.5px;
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1647
|
+
.selectControl {
|
|
1648
|
+
padding: 8px 12px;
|
|
1649
|
+
border: 1px solid var(--border-color);
|
|
1650
|
+
border-radius: var(--radius);
|
|
1651
|
+
background-color: var(--tertiary-color);
|
|
1652
|
+
font-size: 0.875rem;
|
|
1653
|
+
color: var(--header-color);
|
|
1654
|
+
cursor: pointer;
|
|
1655
|
+
transition: all 0.2s ease;
|
|
1656
|
+
|
|
1657
|
+
&:focus {
|
|
1658
|
+
outline: none;
|
|
1659
|
+
border-color: var(--primary-color);
|
|
1660
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
&:hover {
|
|
1664
|
+
border-color: var(--primary-color);
|
|
1665
|
+
}
|
|
1666
|
+
|
|
1667
|
+
optgroup {
|
|
1668
|
+
font-weight: 600;
|
|
1669
|
+
color: var(--header-color);
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
option {
|
|
1673
|
+
padding: 4px 8px;
|
|
1674
|
+
color: var(--paragraph-color);
|
|
1675
|
+
}
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
.removeJoinBtn {
|
|
1679
|
+
background: none;
|
|
1680
|
+
border: none;
|
|
1681
|
+
color: var(--approval-color);
|
|
1682
|
+
font-size: 1.25rem;
|
|
1683
|
+
cursor: pointer;
|
|
1684
|
+
padding: 4px 8px;
|
|
1685
|
+
border-radius: var(--radius);
|
|
1686
|
+
transition: all 0.2s ease;
|
|
1687
|
+
flex-shrink: 0;
|
|
1688
|
+
|
|
1689
|
+
&:hover {
|
|
1690
|
+
background-color: rgba(var(--color-invalid), 0.1);
|
|
1691
|
+
transform: scale(1.1);
|
|
1692
|
+
}
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1478
1695
|
// Preview section
|
|
1479
1696
|
.previewSection {
|
|
1480
1697
|
.previewActions {
|
|
@@ -1487,23 +1704,23 @@ $radius-lg: 8px;
|
|
|
1487
1704
|
align-items: center;
|
|
1488
1705
|
justify-content: center;
|
|
1489
1706
|
gap: 8px;
|
|
1490
|
-
padding:
|
|
1491
|
-
background-color: rgba(
|
|
1492
|
-
border-radius:
|
|
1493
|
-
margin-bottom:
|
|
1707
|
+
padding: var(--padding);
|
|
1708
|
+
background-color: rgba(var(--color-valid), 0.1);
|
|
1709
|
+
border-radius: var(--radius);
|
|
1710
|
+
margin-bottom: calc(var(--padding) * 1.5);
|
|
1494
1711
|
font-size: 1rem;
|
|
1495
1712
|
font-weight: 500;
|
|
1496
|
-
color:
|
|
1713
|
+
color: rgba(var(--color-valid), 1);
|
|
1497
1714
|
|
|
1498
1715
|
svg {
|
|
1499
|
-
color:
|
|
1716
|
+
color: rgba(var(--color-valid), 1);
|
|
1500
1717
|
}
|
|
1501
1718
|
}
|
|
1502
1719
|
|
|
1503
1720
|
.gridContainer {
|
|
1504
|
-
margin-bottom:
|
|
1505
|
-
border: 1px solid
|
|
1506
|
-
border-radius:
|
|
1721
|
+
margin-bottom: calc(var(--padding) * 2);
|
|
1722
|
+
border: 1px solid var(--border-color);
|
|
1723
|
+
border-radius: var(--radius);
|
|
1507
1724
|
overflow: hidden;
|
|
1508
1725
|
}
|
|
1509
1726
|
|
|
@@ -1511,10 +1728,10 @@ $radius-lg: 8px;
|
|
|
1511
1728
|
text-align: center;
|
|
1512
1729
|
|
|
1513
1730
|
h3 {
|
|
1514
|
-
margin: 0 0
|
|
1731
|
+
margin: 0 0 var(--padding) 0;
|
|
1515
1732
|
font-size: 1.125rem;
|
|
1516
1733
|
font-weight: 600;
|
|
1517
|
-
color:
|
|
1734
|
+
color: var(--header-color);
|
|
1518
1735
|
}
|
|
1519
1736
|
}
|
|
1520
1737
|
|
|
@@ -1528,77 +1745,107 @@ $radius-lg: 8px;
|
|
|
1528
1745
|
// Loading state
|
|
1529
1746
|
.loading {
|
|
1530
1747
|
text-align: center;
|
|
1531
|
-
padding:
|
|
1748
|
+
padding: calc(var(--padding) * 2.5);
|
|
1532
1749
|
font-size: 1rem;
|
|
1533
|
-
color:
|
|
1750
|
+
color: var(--paragraph-color);
|
|
1534
1751
|
}
|
|
1535
1752
|
|
|
1536
1753
|
// Buttons
|
|
1537
1754
|
.btn {
|
|
1538
1755
|
display: inline-flex;
|
|
1539
1756
|
align-items: center;
|
|
1757
|
+
justify-content: center;
|
|
1540
1758
|
gap: 8px;
|
|
1541
|
-
padding:
|
|
1759
|
+
padding: 12px calc(var(--padding) * 1.5);
|
|
1542
1760
|
border: none;
|
|
1543
|
-
border-radius:
|
|
1761
|
+
border-radius: var(--radius);
|
|
1544
1762
|
font-size: 0.875rem;
|
|
1545
|
-
font-weight:
|
|
1763
|
+
font-weight: 600;
|
|
1546
1764
|
cursor: pointer;
|
|
1547
1765
|
transition: all 0.2s ease;
|
|
1548
1766
|
text-decoration: none;
|
|
1767
|
+
min-height: 44px;
|
|
1768
|
+
position: relative;
|
|
1769
|
+
overflow: hidden;
|
|
1549
1770
|
|
|
1550
1771
|
&:disabled {
|
|
1551
1772
|
opacity: 0.5;
|
|
1552
1773
|
cursor: not-allowed;
|
|
1774
|
+
transform: none !important;
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
&:focus {
|
|
1778
|
+
outline: 2px solid rgba(var(--primary-rgb), 0.3);
|
|
1779
|
+
outline-offset: 2px;
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
&:active:not(:disabled) {
|
|
1783
|
+
transform: translateY(1px);
|
|
1553
1784
|
}
|
|
1554
1785
|
|
|
1555
1786
|
svg {
|
|
1556
1787
|
width: 16px;
|
|
1557
1788
|
height: 16px;
|
|
1789
|
+
flex-shrink: 0;
|
|
1558
1790
|
}
|
|
1559
1791
|
}
|
|
1560
1792
|
|
|
1561
1793
|
.btnPrimary {
|
|
1562
|
-
background-color:
|
|
1563
|
-
color:
|
|
1794
|
+
background-color: var(--primary-color);
|
|
1795
|
+
color: var(--tertiary-color);
|
|
1796
|
+
box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
|
|
1564
1797
|
|
|
1565
1798
|
&:hover:not(:disabled) {
|
|
1566
|
-
background-color:
|
|
1567
|
-
box-shadow:
|
|
1799
|
+
background-color: var(--primary-color);
|
|
1800
|
+
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
|
|
1801
|
+
transform: translateY(-1px);
|
|
1802
|
+
filter: brightness(0.9);
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
&:focus {
|
|
1806
|
+
outline-color: rgba(var(--primary-rgb), 0.5);
|
|
1568
1807
|
}
|
|
1569
1808
|
}
|
|
1570
1809
|
|
|
1571
1810
|
.btnSecondary {
|
|
1572
|
-
background-color:
|
|
1573
|
-
color:
|
|
1811
|
+
background-color: var(--secondary-color);
|
|
1812
|
+
color: var(--tertiary-color);
|
|
1813
|
+
box-shadow: 0 2px 4px rgba(var(--secondary-rgb), 0.2);
|
|
1574
1814
|
|
|
1575
1815
|
&:hover:not(:disabled) {
|
|
1576
|
-
background-color:
|
|
1577
|
-
box-shadow:
|
|
1816
|
+
background-color: var(--secondary-color);
|
|
1817
|
+
box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.3);
|
|
1818
|
+
transform: translateY(-1px);
|
|
1819
|
+
filter: brightness(0.9);
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
&:focus {
|
|
1823
|
+
outline-color: rgba(var(--secondary-rgb), 0.5);
|
|
1578
1824
|
}
|
|
1579
1825
|
}
|
|
1580
1826
|
|
|
1581
1827
|
.btnSuccess {
|
|
1582
|
-
background-color:
|
|
1583
|
-
color:
|
|
1828
|
+
background-color: rgba(var(--color-valid), 1);
|
|
1829
|
+
color: var(--tertiary-color);
|
|
1584
1830
|
|
|
1585
1831
|
&:hover:not(:disabled) {
|
|
1586
|
-
background-color: color
|
|
1587
|
-
box-shadow:
|
|
1832
|
+
background-color: rgba(var(--color-valid), 1);
|
|
1833
|
+
box-shadow: var(--box-shadow-small);
|
|
1834
|
+
filter: brightness(0.9);
|
|
1588
1835
|
}
|
|
1589
1836
|
}
|
|
1590
1837
|
|
|
1591
1838
|
// Advanced mode placeholder
|
|
1592
1839
|
.advancedMode {
|
|
1593
|
-
background-color:
|
|
1594
|
-
border-radius:
|
|
1840
|
+
background-color: var(--tertiary-color);
|
|
1841
|
+
border-radius: var(--radius);
|
|
1595
1842
|
padding: 40px;
|
|
1596
1843
|
text-align: center;
|
|
1597
|
-
box-shadow:
|
|
1844
|
+
box-shadow: var(--box-shadow-small);
|
|
1598
1845
|
|
|
1599
1846
|
p {
|
|
1600
1847
|
font-size: 1rem;
|
|
1601
|
-
color:
|
|
1848
|
+
color: var(--paragraph-color);
|
|
1602
1849
|
}
|
|
1603
1850
|
}
|
|
1604
1851
|
|
|
@@ -1611,7 +1858,7 @@ $radius-lg: 8px;
|
|
|
1611
1858
|
margin: 0 0 16px 0;
|
|
1612
1859
|
font-size: 1.125rem;
|
|
1613
1860
|
font-weight: 600;
|
|
1614
|
-
color:
|
|
1861
|
+
color: var(--header-color);
|
|
1615
1862
|
}
|
|
1616
1863
|
}
|
|
1617
1864
|
|
|
@@ -1620,9 +1867,9 @@ $radius-lg: 8px;
|
|
|
1620
1867
|
align-items: center;
|
|
1621
1868
|
justify-content: space-between;
|
|
1622
1869
|
padding: 12px 16px;
|
|
1623
|
-
background-color: rgba(
|
|
1624
|
-
border: 1px solid rgba(
|
|
1625
|
-
border-radius:
|
|
1870
|
+
background-color: rgba(var(--color-valid), 0.05);
|
|
1871
|
+
border: 1px solid rgba(var(--color-valid), 0.2);
|
|
1872
|
+
border-radius: var(--radius);
|
|
1626
1873
|
margin-bottom: 8px;
|
|
1627
1874
|
|
|
1628
1875
|
.joinInfo {
|
|
@@ -1631,29 +1878,29 @@ $radius-lg: 8px;
|
|
|
1631
1878
|
.joinDescription {
|
|
1632
1879
|
display: block;
|
|
1633
1880
|
font-weight: 500;
|
|
1634
|
-
color:
|
|
1881
|
+
color: var(--header-color);
|
|
1635
1882
|
margin-bottom: 4px;
|
|
1636
1883
|
}
|
|
1637
1884
|
|
|
1638
1885
|
.joinDetails {
|
|
1639
1886
|
display: block;
|
|
1640
1887
|
font-size: 0.875rem;
|
|
1641
|
-
color:
|
|
1888
|
+
color: var(--paragraph-color);
|
|
1642
1889
|
}
|
|
1643
1890
|
}
|
|
1644
1891
|
|
|
1645
1892
|
.removeJoinBtn {
|
|
1646
1893
|
background: none;
|
|
1647
1894
|
border: none;
|
|
1648
|
-
color:
|
|
1895
|
+
color: var(--approval-color);
|
|
1649
1896
|
font-size: 1.25rem;
|
|
1650
1897
|
cursor: pointer;
|
|
1651
1898
|
padding: 4px 8px;
|
|
1652
|
-
border-radius:
|
|
1899
|
+
border-radius: var(--radius);
|
|
1653
1900
|
transition: all 0.2s ease;
|
|
1654
1901
|
|
|
1655
1902
|
&:hover {
|
|
1656
|
-
background-color: rgba(
|
|
1903
|
+
background-color: rgba(var(--approval-color), 0.1);
|
|
1657
1904
|
}
|
|
1658
1905
|
}
|
|
1659
1906
|
}
|
|
@@ -1665,12 +1912,12 @@ $radius-lg: 8px;
|
|
|
1665
1912
|
margin: 0 0 8px 0;
|
|
1666
1913
|
font-size: 1.125rem;
|
|
1667
1914
|
font-weight: 600;
|
|
1668
|
-
color:
|
|
1915
|
+
color: var(--header-color);
|
|
1669
1916
|
}
|
|
1670
1917
|
|
|
1671
1918
|
p {
|
|
1672
1919
|
margin: 0 0 16px 0;
|
|
1673
|
-
color:
|
|
1920
|
+
color: var(--paragraph-color);
|
|
1674
1921
|
}
|
|
1675
1922
|
}
|
|
1676
1923
|
|
|
@@ -1679,15 +1926,15 @@ $radius-lg: 8px;
|
|
|
1679
1926
|
align-items: center;
|
|
1680
1927
|
justify-content: space-between;
|
|
1681
1928
|
padding: 16px;
|
|
1682
|
-
background-color:
|
|
1683
|
-
border: 2px solid
|
|
1684
|
-
border-radius:
|
|
1929
|
+
background-color: var(--tertiary-color);
|
|
1930
|
+
border: 2px solid var(--border-color);
|
|
1931
|
+
border-radius: var(--radius);
|
|
1685
1932
|
margin-bottom: 12px;
|
|
1686
1933
|
transition: all 0.2s ease;
|
|
1687
1934
|
|
|
1688
1935
|
&:hover {
|
|
1689
|
-
border-color:
|
|
1690
|
-
box-shadow:
|
|
1936
|
+
border-color: var(--primary-color);
|
|
1937
|
+
box-shadow: var(--box-shadow-small);
|
|
1691
1938
|
}
|
|
1692
1939
|
|
|
1693
1940
|
.suggestionInfo {
|
|
@@ -1701,7 +1948,7 @@ $radius-lg: 8px;
|
|
|
1701
1948
|
|
|
1702
1949
|
span {
|
|
1703
1950
|
font-weight: 500;
|
|
1704
|
-
color:
|
|
1951
|
+
color: var(--header-color);
|
|
1705
1952
|
}
|
|
1706
1953
|
|
|
1707
1954
|
.confidenceRating {
|
|
@@ -1710,14 +1957,14 @@ $radius-lg: 8px;
|
|
|
1710
1957
|
}
|
|
1711
1958
|
|
|
1712
1959
|
svg {
|
|
1713
|
-
color:
|
|
1960
|
+
color: var(--primary-color);
|
|
1714
1961
|
}
|
|
1715
1962
|
}
|
|
1716
1963
|
|
|
1717
1964
|
.suggestionDescription {
|
|
1718
1965
|
margin: 0;
|
|
1719
1966
|
font-size: 0.875rem;
|
|
1720
|
-
color:
|
|
1967
|
+
color: var(--paragraph-color);
|
|
1721
1968
|
}
|
|
1722
1969
|
}
|
|
1723
1970
|
}
|
|
@@ -1729,7 +1976,7 @@ $radius-lg: 8px;
|
|
|
1729
1976
|
margin: 0 0 16px 0;
|
|
1730
1977
|
font-size: 1.125rem;
|
|
1731
1978
|
font-weight: 600;
|
|
1732
|
-
color:
|
|
1979
|
+
color: var(--header-color);
|
|
1733
1980
|
}
|
|
1734
1981
|
}
|
|
1735
1982
|
|
|
@@ -1737,29 +1984,29 @@ $radius-lg: 8px;
|
|
|
1737
1984
|
.manualJoinSection {
|
|
1738
1985
|
margin-bottom: 24px;
|
|
1739
1986
|
padding: 20px;
|
|
1740
|
-
background-color:
|
|
1741
|
-
border-radius:
|
|
1742
|
-
border: 1px solid
|
|
1987
|
+
background-color: var(--bg-color) er;
|
|
1988
|
+
border-radius: var(--radius);
|
|
1989
|
+
border: 1px solid var(--border-color);
|
|
1743
1990
|
|
|
1744
1991
|
h3 {
|
|
1745
1992
|
margin: 0 0 8px 0;
|
|
1746
1993
|
font-size: 1.125rem;
|
|
1747
1994
|
font-weight: 600;
|
|
1748
|
-
color:
|
|
1995
|
+
color: var(--header-color);
|
|
1749
1996
|
}
|
|
1750
1997
|
|
|
1751
1998
|
p {
|
|
1752
1999
|
margin: 0 0 16px 0;
|
|
1753
|
-
color:
|
|
2000
|
+
color: var(--paragraph-color);
|
|
1754
2001
|
font-size: 0.875rem;
|
|
1755
2002
|
}
|
|
1756
2003
|
}
|
|
1757
2004
|
|
|
1758
2005
|
.manualJoinForm {
|
|
1759
|
-
background-color:
|
|
2006
|
+
background-color: var(--tertiary-color);
|
|
1760
2007
|
padding: 20px;
|
|
1761
|
-
border-radius:
|
|
1762
|
-
border: 1px solid
|
|
2008
|
+
border-radius: var(--radius);
|
|
2009
|
+
border: 1px solid var(--border-color);
|
|
1763
2010
|
margin-top: 16px;
|
|
1764
2011
|
}
|
|
1765
2012
|
|
|
@@ -1778,26 +2025,26 @@ $radius-lg: 8px;
|
|
|
1778
2025
|
label {
|
|
1779
2026
|
font-size: 0.875rem;
|
|
1780
2027
|
font-weight: 500;
|
|
1781
|
-
color:
|
|
2028
|
+
color: var(--paragraph-color);
|
|
1782
2029
|
}
|
|
1783
2030
|
|
|
1784
2031
|
select {
|
|
1785
2032
|
padding: 8px 12px;
|
|
1786
|
-
border: 1px solid
|
|
1787
|
-
border-radius:
|
|
1788
|
-
background-color:
|
|
2033
|
+
border: 1px solid var(--border-color);
|
|
2034
|
+
border-radius: var(--radius);
|
|
2035
|
+
background-color: var(--tertiary-color);
|
|
1789
2036
|
font-size: 0.875rem;
|
|
1790
|
-
color:
|
|
2037
|
+
color: var(--header-color);
|
|
1791
2038
|
|
|
1792
2039
|
&:focus {
|
|
1793
2040
|
outline: none;
|
|
1794
|
-
border-color:
|
|
1795
|
-
box-shadow: 0 0 0 2px rgba(
|
|
2041
|
+
border-color: var(--primary-color);
|
|
2042
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.1);
|
|
1796
2043
|
}
|
|
1797
2044
|
|
|
1798
2045
|
&:disabled {
|
|
1799
|
-
background-color:
|
|
1800
|
-
color:
|
|
2046
|
+
background-color: var(--bg-color);
|
|
2047
|
+
color: var(--paragraph-color);
|
|
1801
2048
|
cursor: not-allowed;
|
|
1802
2049
|
}
|
|
1803
2050
|
}
|
|
@@ -1808,7 +2055,7 @@ $radius-lg: 8px;
|
|
|
1808
2055
|
gap: 12px;
|
|
1809
2056
|
justify-content: flex-end;
|
|
1810
2057
|
padding-top: 16px;
|
|
1811
|
-
border-top: 1px solid
|
|
2058
|
+
border-top: 1px solid var(--border-color);
|
|
1812
2059
|
}
|
|
1813
2060
|
|
|
1814
2061
|
.filterItem {
|
|
@@ -1816,9 +2063,9 @@ $radius-lg: 8px;
|
|
|
1816
2063
|
align-items: center;
|
|
1817
2064
|
justify-content: space-between;
|
|
1818
2065
|
padding: 12px 16px;
|
|
1819
|
-
background-color: rgba(
|
|
1820
|
-
border: 1px solid rgba(
|
|
1821
|
-
border-radius:
|
|
2066
|
+
background-color: rgba(var(--primary-rgb), 0.05);
|
|
2067
|
+
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
2068
|
+
border-radius: var(--radius);
|
|
1822
2069
|
margin-bottom: 8px;
|
|
1823
2070
|
|
|
1824
2071
|
.filterInfo {
|
|
@@ -1826,22 +2073,22 @@ $radius-lg: 8px;
|
|
|
1826
2073
|
|
|
1827
2074
|
.filterDescription {
|
|
1828
2075
|
font-weight: 500;
|
|
1829
|
-
color:
|
|
2076
|
+
color: var(--header-color);
|
|
1830
2077
|
}
|
|
1831
2078
|
}
|
|
1832
2079
|
|
|
1833
2080
|
.removeFilterBtn {
|
|
1834
2081
|
background: none;
|
|
1835
2082
|
border: none;
|
|
1836
|
-
color:
|
|
2083
|
+
color: var(--approval-color);
|
|
1837
2084
|
font-size: 1.25rem;
|
|
1838
2085
|
cursor: pointer;
|
|
1839
2086
|
padding: 4px 8px;
|
|
1840
|
-
border-radius:
|
|
2087
|
+
border-radius: var(--radius);
|
|
1841
2088
|
transition: all 0.2s ease;
|
|
1842
2089
|
|
|
1843
2090
|
&:hover {
|
|
1844
|
-
background-color: rgba(
|
|
2091
|
+
background-color: rgba(var(--approval-color), 0.1);
|
|
1845
2092
|
}
|
|
1846
2093
|
}
|
|
1847
2094
|
}
|
|
@@ -1854,22 +2101,22 @@ $radius-lg: 8px;
|
|
|
1854
2101
|
|
|
1855
2102
|
.saveSection,
|
|
1856
2103
|
.exportOptions {
|
|
1857
|
-
background-color:
|
|
1858
|
-
border-radius:
|
|
2104
|
+
background-color: var(--bg-color);
|
|
2105
|
+
border-radius: var(--radius);
|
|
1859
2106
|
padding: 20px;
|
|
1860
|
-
border: 1px solid
|
|
2107
|
+
border: 1px solid var(--border-color);
|
|
1861
2108
|
|
|
1862
2109
|
h3 {
|
|
1863
2110
|
margin: 0 0 8px 0;
|
|
1864
2111
|
font-size: 1.125rem;
|
|
1865
2112
|
font-weight: 600;
|
|
1866
|
-
color:
|
|
2113
|
+
color: var(--header-color);
|
|
1867
2114
|
}
|
|
1868
2115
|
|
|
1869
2116
|
p {
|
|
1870
2117
|
margin: 0 0 16px 0;
|
|
1871
2118
|
font-size: 0.875rem;
|
|
1872
|
-
color:
|
|
2119
|
+
color: var(--paragraph-color);
|
|
1873
2120
|
}
|
|
1874
2121
|
}
|
|
1875
2122
|
|
|
@@ -1928,9 +2175,9 @@ $radius-lg: 8px;
|
|
|
1928
2175
|
flex-direction: column;
|
|
1929
2176
|
gap: 3px;
|
|
1930
2177
|
padding: 10px 12px;
|
|
1931
|
-
background-color:
|
|
1932
|
-
border: 1px solid
|
|
1933
|
-
border-radius:
|
|
2178
|
+
background-color: var(--bg-color);
|
|
2179
|
+
border: 1px solid var(--border-color);
|
|
2180
|
+
border-radius: var(--radius);
|
|
1934
2181
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
1935
2182
|
font-size: 0.9rem;
|
|
1936
2183
|
margin: 2px 0;
|
|
@@ -1954,7 +2201,7 @@ $radius-lg: 8px;
|
|
|
1954
2201
|
|
|
1955
2202
|
.humanJsonKey {
|
|
1956
2203
|
font-weight: 600;
|
|
1957
|
-
color:
|
|
2204
|
+
color: var(--primary-color);
|
|
1958
2205
|
margin-right: 12px;
|
|
1959
2206
|
min-width: 120px;
|
|
1960
2207
|
flex: 0 0 auto;
|
|
@@ -1965,7 +2212,7 @@ $radius-lg: 8px;
|
|
|
1965
2212
|
flex: 1;
|
|
1966
2213
|
word-break: break-word;
|
|
1967
2214
|
padding-right: 5px;
|
|
1968
|
-
color:
|
|
2215
|
+
color: var(--header-color);
|
|
1969
2216
|
font-weight: 500;
|
|
1970
2217
|
}
|
|
1971
2218
|
|
|
@@ -1975,10 +2222,10 @@ $radius-lg: 8px;
|
|
|
1975
2222
|
justify-content: center;
|
|
1976
2223
|
align-items: center;
|
|
1977
2224
|
padding: 12px 16px;
|
|
1978
|
-
background-color:
|
|
1979
|
-
border-top: 1px solid
|
|
2225
|
+
background-color: var(--bg-color);
|
|
2226
|
+
border-top: 1px solid var(--border-color);
|
|
1980
2227
|
font-size: 0.875rem;
|
|
1981
|
-
color:
|
|
2228
|
+
color: var(--paragraph-color);
|
|
1982
2229
|
font-weight: 500;
|
|
1983
2230
|
}
|
|
1984
2231
|
|