@truconsent/consent-notice 0.0.2 → 0.0.4
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.
- package/dist/MarsConsentModal.css +147 -133
- package/dist/RightCenter.css +109 -114
- package/dist/banner-styles.css +52 -55
- package/dist/consent-modal.css +1253 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/tailwind.css +2 -2
- package/dist/variables.css +61 -1
- package/package.json +9 -5
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
top: 0 !important;
|
|
4
4
|
left: 0 !important;
|
|
5
5
|
width: 100% !important;
|
|
6
|
+
width: 100% !important;
|
|
6
7
|
height: 100% !important;
|
|
7
|
-
background:
|
|
8
|
+
background: var(--banner-overlay);
|
|
8
9
|
display: flex !important;
|
|
9
10
|
align-items: center !important;
|
|
10
11
|
justify-content: center !important;
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.mcm-container {
|
|
31
|
-
background:
|
|
32
|
+
background: var(--banner-bg);
|
|
32
33
|
border-radius: 16px;
|
|
33
34
|
width: 100%;
|
|
34
35
|
max-height: 85vh;
|
|
@@ -37,6 +38,7 @@
|
|
|
37
38
|
overflow: hidden !important;
|
|
38
39
|
position: relative;
|
|
39
40
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
41
|
+
border: 1px solid var(--banner-border);
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
/* Close button - repositioned to float on the corner of the white box */
|
|
@@ -44,10 +46,11 @@
|
|
|
44
46
|
position: absolute;
|
|
45
47
|
top: -12px;
|
|
46
48
|
right: -12px;
|
|
49
|
+
right: -12px;
|
|
47
50
|
width: 32px;
|
|
48
51
|
height: 32px;
|
|
49
|
-
background:
|
|
50
|
-
border: 1px solid
|
|
52
|
+
background: var(--banner-bg);
|
|
53
|
+
border: 1px solid var(--banner-border);
|
|
51
54
|
border-radius: 50%;
|
|
52
55
|
display: flex !important;
|
|
53
56
|
align-items: center;
|
|
@@ -55,17 +58,17 @@
|
|
|
55
58
|
cursor: pointer;
|
|
56
59
|
font-size: 22px;
|
|
57
60
|
line-height: 1;
|
|
58
|
-
color:
|
|
61
|
+
color: var(--banner-text-muted);
|
|
59
62
|
z-index: 10005;
|
|
60
63
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
61
64
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
.mcm-close-btn:hover {
|
|
65
|
-
background:
|
|
66
|
-
color:
|
|
68
|
+
background: var(--banner-card-bg);
|
|
69
|
+
color: var(--banner-text);
|
|
67
70
|
transform: scale(1.1) rotate(90deg);
|
|
68
|
-
border-color:
|
|
71
|
+
border-color: var(--banner-text-muted);
|
|
69
72
|
}
|
|
70
73
|
|
|
71
74
|
.mcm-header {
|
|
@@ -83,17 +86,18 @@
|
|
|
83
86
|
.mcm-header-text h1 {
|
|
84
87
|
margin: 0;
|
|
85
88
|
font-size: 1.25rem;
|
|
89
|
+
color: var(--banner-text);
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
.mcm-header-text p {
|
|
89
93
|
margin: 0;
|
|
90
94
|
font-size: 0.9rem;
|
|
91
|
-
color:
|
|
95
|
+
color: var(--banner-text-muted);
|
|
92
96
|
}
|
|
93
97
|
|
|
94
98
|
.mcm-separator {
|
|
95
99
|
height: 1px;
|
|
96
|
-
background:
|
|
100
|
+
background: var(--banner-border);
|
|
97
101
|
margin: 10px 0;
|
|
98
102
|
}
|
|
99
103
|
|
|
@@ -104,7 +108,7 @@
|
|
|
104
108
|
}
|
|
105
109
|
|
|
106
110
|
.mcm-card {
|
|
107
|
-
border: 1px solid
|
|
111
|
+
border: 1px solid var(--banner-border);
|
|
108
112
|
border-radius: 4px;
|
|
109
113
|
padding: 10px;
|
|
110
114
|
}
|
|
@@ -117,26 +121,35 @@
|
|
|
117
121
|
|
|
118
122
|
.mcm-purpose-desc {
|
|
119
123
|
font-size: 0.9rem;
|
|
120
|
-
color:
|
|
124
|
+
color: var(--banner-text-muted);
|
|
121
125
|
}
|
|
122
126
|
|
|
123
127
|
.badge {
|
|
124
128
|
display: inline-block;
|
|
125
|
-
padding: 2px
|
|
129
|
+
padding: 2px 8px;
|
|
126
130
|
font-size: 0.75rem;
|
|
131
|
+
font-weight: 600;
|
|
127
132
|
border-radius: 4px;
|
|
128
|
-
background:
|
|
133
|
+
background: var(--banner-hover-bg);
|
|
134
|
+
color: var(--banner-text-muted);
|
|
129
135
|
margin-right: 5px;
|
|
136
|
+
border: 1px solid var(--banner-border);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.badge.legitimate {
|
|
140
|
+
background: var(--banner-info-bg);
|
|
141
|
+
color: var(--banner-primary-color);
|
|
142
|
+
border-color: var(--banner-info-border);
|
|
130
143
|
}
|
|
131
144
|
|
|
132
145
|
.badge.mandatory {
|
|
133
|
-
background:
|
|
134
|
-
color:
|
|
146
|
+
background: var(--banner-danger-bg);
|
|
147
|
+
color: var(--banner-danger-text);
|
|
135
148
|
}
|
|
136
149
|
|
|
137
150
|
.badge.expiry {
|
|
138
|
-
background:
|
|
139
|
-
color:
|
|
151
|
+
background: var(--banner-info-bg);
|
|
152
|
+
color: var(--banner-primary-color);
|
|
140
153
|
}
|
|
141
154
|
|
|
142
155
|
.switch {
|
|
@@ -160,7 +173,7 @@
|
|
|
160
173
|
left: 0;
|
|
161
174
|
right: 0;
|
|
162
175
|
bottom: 0;
|
|
163
|
-
background:
|
|
176
|
+
background: var(--banner-border);
|
|
164
177
|
border-radius: 20px;
|
|
165
178
|
}
|
|
166
179
|
|
|
@@ -171,13 +184,13 @@
|
|
|
171
184
|
width: 16px;
|
|
172
185
|
left: 2px;
|
|
173
186
|
bottom: 2px;
|
|
174
|
-
background:
|
|
187
|
+
background: var(--banner-bg);
|
|
175
188
|
border-radius: 50%;
|
|
176
189
|
transition: .2s;
|
|
177
190
|
}
|
|
178
191
|
|
|
179
192
|
input:checked+.track {
|
|
180
|
-
background:
|
|
193
|
+
background: var(--banner-success-text);
|
|
181
194
|
}
|
|
182
195
|
|
|
183
196
|
input:checked+.track+.thumb {
|
|
@@ -192,6 +205,7 @@ input:checked+.track+.thumb {
|
|
|
192
205
|
width: 100%;
|
|
193
206
|
background: none;
|
|
194
207
|
border: none;
|
|
208
|
+
color: var(--banner-text);
|
|
195
209
|
text-align: left;
|
|
196
210
|
padding: 8px 0;
|
|
197
211
|
font-size: 1rem;
|
|
@@ -208,7 +222,8 @@ input:checked+.track+.thumb {
|
|
|
208
222
|
.pill {
|
|
209
223
|
display: inline-block;
|
|
210
224
|
padding: 4px 8px;
|
|
211
|
-
background:
|
|
225
|
+
background: var(--banner-info-bg);
|
|
226
|
+
color: var(--banner-primary-color);
|
|
212
227
|
border-radius: 12px;
|
|
213
228
|
margin: 2px;
|
|
214
229
|
font-size: 0.8rem;
|
|
@@ -231,19 +246,19 @@ input:checked+.track+.thumb {
|
|
|
231
246
|
}
|
|
232
247
|
|
|
233
248
|
.mcm-btn.reject {
|
|
234
|
-
background:
|
|
235
|
-
color:
|
|
249
|
+
background: var(--banner-danger-btn);
|
|
250
|
+
color: var(--banner-bg);
|
|
236
251
|
margin-right: 10px;
|
|
237
252
|
}
|
|
238
253
|
|
|
239
254
|
.mcm-btn.consent {
|
|
240
|
-
background:
|
|
241
|
-
color:
|
|
255
|
+
background: var(--banner-primary-color);
|
|
256
|
+
color: var(--banner-bg);
|
|
242
257
|
}
|
|
243
258
|
|
|
244
259
|
.mcm-spinner {
|
|
245
|
-
border: 4px solid
|
|
246
|
-
border-top-color:
|
|
260
|
+
border: 4px solid var(--banner-border);
|
|
261
|
+
border-top-color: var(--banner-primary-color);
|
|
247
262
|
border-radius: 50%;
|
|
248
263
|
width: 48px;
|
|
249
264
|
height: 48px;
|
|
@@ -314,7 +329,7 @@ input:checked+.track+.thumb {
|
|
|
314
329
|
|
|
315
330
|
.mcm-wrapper.bottom-bar .mcm-container {
|
|
316
331
|
border-radius: 0 !important;
|
|
317
|
-
border-top: 1px solid
|
|
332
|
+
border-top: 1px solid var(--banner-border);
|
|
318
333
|
max-height: 50vh;
|
|
319
334
|
box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
320
335
|
}
|
|
@@ -330,11 +345,10 @@ input:checked+.track+.thumb {
|
|
|
330
345
|
}
|
|
331
346
|
}
|
|
332
347
|
|
|
333
|
-
/* Center Modal Template (Existing Default) */
|
|
334
348
|
.mcm-overlay.center-modal {
|
|
335
349
|
align-items: center !important;
|
|
336
350
|
justify-content: center !important;
|
|
337
|
-
background:
|
|
351
|
+
background: var(--banner-overlay) !important;
|
|
338
352
|
}
|
|
339
353
|
|
|
340
354
|
.mcm-wrapper.center-modal {
|
|
@@ -342,11 +356,10 @@ input:checked+.track+.thumb {
|
|
|
342
356
|
max-width: 550px;
|
|
343
357
|
}
|
|
344
358
|
|
|
345
|
-
/* Side Panel Template */
|
|
346
359
|
.mcm-overlay.side-panel {
|
|
347
360
|
align-items: stretch !important;
|
|
348
361
|
justify-content: flex-end !important;
|
|
349
|
-
background:
|
|
362
|
+
background: var(--banner-overlay) !important;
|
|
350
363
|
}
|
|
351
364
|
|
|
352
365
|
.mcm-wrapper.side-panel {
|
|
@@ -359,7 +372,7 @@ input:checked+.track+.thumb {
|
|
|
359
372
|
height: 100vh;
|
|
360
373
|
max-height: 100vh;
|
|
361
374
|
border-radius: 0;
|
|
362
|
-
border-left: 1px solid
|
|
375
|
+
border-left: 1px solid var(--banner-border);
|
|
363
376
|
}
|
|
364
377
|
|
|
365
378
|
/* Mobile adjustments for side panel */
|
|
@@ -380,21 +393,21 @@ input:checked+.track+.thumb {
|
|
|
380
393
|
.mcm-cookie-summary-title {
|
|
381
394
|
font-size: 1rem;
|
|
382
395
|
font-weight: 600;
|
|
383
|
-
color:
|
|
396
|
+
color: var(--banner-text);
|
|
384
397
|
margin: 0;
|
|
385
398
|
}
|
|
386
399
|
|
|
387
400
|
.mcm-cookie-summary-text {
|
|
388
401
|
font-size: 0.8125rem;
|
|
389
402
|
line-height: 1.4;
|
|
390
|
-
color:
|
|
403
|
+
color: var(--banner-text-muted);
|
|
391
404
|
margin: 0;
|
|
392
405
|
}
|
|
393
406
|
|
|
394
407
|
.mcm-cookie-summary-footer-links {
|
|
395
408
|
display: block;
|
|
396
409
|
font-size: 0.725rem;
|
|
397
|
-
color:
|
|
410
|
+
color: var(--banner-text-muted);
|
|
398
411
|
margin-top: 0.25rem;
|
|
399
412
|
line-height: 1.4;
|
|
400
413
|
width: 100%;
|
|
@@ -405,17 +418,17 @@ input:checked+.track+.thumb {
|
|
|
405
418
|
}
|
|
406
419
|
|
|
407
420
|
.mcm-cookie-summary-footer-links .mcm-link {
|
|
408
|
-
color:
|
|
421
|
+
color: var(--banner-text-muted);
|
|
409
422
|
text-decoration: underline;
|
|
410
423
|
cursor: pointer;
|
|
411
424
|
}
|
|
412
425
|
|
|
413
426
|
.mcm-cookie-summary-footer-links .mcm-link:hover {
|
|
414
|
-
color:
|
|
427
|
+
color: var(--banner-text);
|
|
415
428
|
}
|
|
416
429
|
|
|
417
430
|
.mcm-separator-pipe {
|
|
418
|
-
color:
|
|
431
|
+
color: var(--banner-border);
|
|
419
432
|
opacity: 0.5;
|
|
420
433
|
margin: 0 0.25rem;
|
|
421
434
|
display: inline-block;
|
|
@@ -423,11 +436,11 @@ input:checked+.track+.thumb {
|
|
|
423
436
|
|
|
424
437
|
.mcm-powered-by {
|
|
425
438
|
font-size: 0.625rem;
|
|
426
|
-
color:
|
|
439
|
+
color: var(--banner-text-muted);
|
|
427
440
|
text-align: center;
|
|
428
441
|
padding: 0.375rem;
|
|
429
|
-
background-color:
|
|
430
|
-
border-top: 1px solid
|
|
442
|
+
background-color: var(--banner-card-bg);
|
|
443
|
+
border-top: 1px solid var(--banner-border);
|
|
431
444
|
width: calc(100% + 2.5rem);
|
|
432
445
|
/* Negate parent padding */
|
|
433
446
|
margin-left: -1.25rem;
|
|
@@ -438,7 +451,7 @@ input:checked+.track+.thumb {
|
|
|
438
451
|
|
|
439
452
|
.mcm-brand {
|
|
440
453
|
font-weight: 600;
|
|
441
|
-
color:
|
|
454
|
+
color: var(--banner-text);
|
|
442
455
|
}
|
|
443
456
|
|
|
444
457
|
.mcm-cookie-summary-actions {
|
|
@@ -461,8 +474,8 @@ input:checked+.track+.thumb {
|
|
|
461
474
|
|
|
462
475
|
.mcm-summary-btn.text {
|
|
463
476
|
background: transparent;
|
|
464
|
-
color:
|
|
465
|
-
border: 1px solid
|
|
477
|
+
color: var(--banner-primary-color);
|
|
478
|
+
border: 1px solid var(--banner-border);
|
|
466
479
|
padding: 0.5rem 0.65rem;
|
|
467
480
|
font-size: 0.8125rem;
|
|
468
481
|
margin-top: 0;
|
|
@@ -470,7 +483,7 @@ input:checked+.track+.thumb {
|
|
|
470
483
|
|
|
471
484
|
.mcm-cookie-summary hr {
|
|
472
485
|
border: 0;
|
|
473
|
-
border-top: 1px solid
|
|
486
|
+
border-top: 1px solid var(--banner-border);
|
|
474
487
|
margin: 0;
|
|
475
488
|
width: 100%;
|
|
476
489
|
}
|
|
@@ -482,9 +495,9 @@ input:checked+.track+.thumb {
|
|
|
482
495
|
}
|
|
483
496
|
|
|
484
497
|
.mcm-summary-btn.secondary {
|
|
485
|
-
background-color:
|
|
486
|
-
color:
|
|
487
|
-
border-color:
|
|
498
|
+
background-color: var(--banner-card-bg);
|
|
499
|
+
color: var(--banner-text);
|
|
500
|
+
border-color: var(--banner-border);
|
|
488
501
|
}
|
|
489
502
|
|
|
490
503
|
|
|
@@ -493,14 +506,14 @@ input:checked+.track+.thumb {
|
|
|
493
506
|
|
|
494
507
|
/* Floating Card Summary (Redacto style) */
|
|
495
508
|
.mcm-wrapper.floating-card .mcm-cookie-summary {
|
|
496
|
-
background:
|
|
509
|
+
background: var(--banner-bg);
|
|
497
510
|
border-radius: 1rem;
|
|
498
511
|
}
|
|
499
512
|
|
|
500
513
|
/* Bottom Bar Summary (Refined Row-based Light theme) */
|
|
501
514
|
.mcm-wrapper.bottom-bar .mcm-container {
|
|
502
|
-
background:
|
|
503
|
-
border-top: 1px solid
|
|
515
|
+
background: var(--banner-bg);
|
|
516
|
+
border-top: 1px solid var(--banner-border);
|
|
504
517
|
padding-bottom: 32px;
|
|
505
518
|
/* Increased to lift bar up */
|
|
506
519
|
position: relative;
|
|
@@ -528,7 +541,7 @@ input:checked+.track+.thumb {
|
|
|
528
541
|
}
|
|
529
542
|
|
|
530
543
|
.mcm-wrapper.bottom-bar .mcm-cookie-summary-title {
|
|
531
|
-
color:
|
|
544
|
+
color: var(--banner-text);
|
|
532
545
|
font-size: 1.125rem;
|
|
533
546
|
font-weight: 800;
|
|
534
547
|
margin-bottom: 0.25rem;
|
|
@@ -536,7 +549,7 @@ input:checked+.track+.thumb {
|
|
|
536
549
|
}
|
|
537
550
|
|
|
538
551
|
.mcm-wrapper.bottom-bar .mcm-cookie-summary-text {
|
|
539
|
-
color:
|
|
552
|
+
color: var(--banner-text-muted);
|
|
540
553
|
font-size: 0.875rem;
|
|
541
554
|
line-height: 1.5;
|
|
542
555
|
}
|
|
@@ -561,34 +574,34 @@ input:checked+.track+.thumb {
|
|
|
561
574
|
|
|
562
575
|
.mcm-wrapper.bottom-bar .mcm-cookie-summary-footer-links {
|
|
563
576
|
flex: 1 1 100%;
|
|
564
|
-
color:
|
|
577
|
+
color: var(--banner-text-muted);
|
|
565
578
|
font-size: 0.8125rem;
|
|
566
579
|
line-height: 1.6;
|
|
567
580
|
margin-top: 0;
|
|
568
581
|
text-align: left;
|
|
569
582
|
display: block !important;
|
|
570
|
-
border-top: 1px solid
|
|
583
|
+
border-top: 1px solid var(--banner-border);
|
|
571
584
|
padding-top: 0.375rem;
|
|
572
585
|
/* Reduced from 0.5rem */
|
|
573
586
|
}
|
|
574
587
|
|
|
575
588
|
.mcm-wrapper.bottom-bar .mcm-cookie-summary-footer-links .mcm-link {
|
|
576
|
-
color:
|
|
589
|
+
color: var(--banner-text);
|
|
577
590
|
text-decoration: underline;
|
|
578
591
|
text-underline-offset: 2px;
|
|
579
592
|
transition: all 0.2s ease;
|
|
580
593
|
}
|
|
581
594
|
|
|
582
595
|
.mcm-wrapper.bottom-bar .mcm-summary-btn.secondary {
|
|
583
|
-
background:
|
|
584
|
-
color:
|
|
585
|
-
border-color:
|
|
596
|
+
background: var(--banner-card-bg);
|
|
597
|
+
color: var(--banner-text);
|
|
598
|
+
border-color: var(--banner-border);
|
|
586
599
|
}
|
|
587
600
|
|
|
588
601
|
.mcm-wrapper.bottom-bar .mcm-summary-btn.text {
|
|
589
|
-
color:
|
|
590
|
-
border: 1px solid
|
|
591
|
-
background:
|
|
602
|
+
color: var(--banner-primary-color);
|
|
603
|
+
border: 1px solid var(--banner-border);
|
|
604
|
+
background: var(--banner-bg);
|
|
592
605
|
border-radius: 0.5rem;
|
|
593
606
|
}
|
|
594
607
|
|
|
@@ -598,9 +611,9 @@ input:checked+.track+.thumb {
|
|
|
598
611
|
/* Lifted up */
|
|
599
612
|
left: 0;
|
|
600
613
|
right: 0;
|
|
601
|
-
background-color:
|
|
602
|
-
border-top: 1px solid
|
|
603
|
-
color:
|
|
614
|
+
background-color: var(--banner-card-bg);
|
|
615
|
+
border-top: 1px solid var(--banner-border);
|
|
616
|
+
color: var(--banner-text-muted);
|
|
604
617
|
padding: 0.25rem;
|
|
605
618
|
gap: 4px;
|
|
606
619
|
/* Added space */
|
|
@@ -648,15 +661,15 @@ input:checked+.track+.thumb {
|
|
|
648
661
|
height: 100%;
|
|
649
662
|
max-height: 100vh;
|
|
650
663
|
border-radius: 0 !important;
|
|
651
|
-
border-left: 1px solid
|
|
664
|
+
border-left: 1px solid var(--banner-border) !important;
|
|
652
665
|
}
|
|
653
666
|
|
|
654
667
|
.mcm-wrapper.side-panel .mcm-close-btn {
|
|
655
668
|
top: 0px !important;
|
|
656
669
|
left: -16px !important;
|
|
657
670
|
/* Half-inside, half-outside */
|
|
658
|
-
background:
|
|
659
|
-
border: 1px solid
|
|
671
|
+
background: var(--banner-bg) !important;
|
|
672
|
+
border: 1px solid var(--banner-border) !important;
|
|
660
673
|
}
|
|
661
674
|
|
|
662
675
|
@keyframes mcm-drawer-slide-in {
|
|
@@ -688,14 +701,14 @@ input:checked+.track+.thumb {
|
|
|
688
701
|
|
|
689
702
|
.mcm-wrapper.modern-modal .mcm-header {
|
|
690
703
|
padding: 24px 24px 16px !important;
|
|
691
|
-
border-bottom: 1px solid
|
|
704
|
+
border-bottom: 1px solid var(--banner-border) !important;
|
|
692
705
|
margin-bottom: 0 !important;
|
|
693
706
|
}
|
|
694
707
|
|
|
695
708
|
.mcm-wrapper.modern-modal .mcm-header-text h1 {
|
|
696
709
|
font-size: 1.5rem !important;
|
|
697
710
|
font-weight: 700 !important;
|
|
698
|
-
color:
|
|
711
|
+
color: var(--banner-text) !important;
|
|
699
712
|
}
|
|
700
713
|
|
|
701
714
|
.mcm-wrapper.modern-modal .mcm-body {
|
|
@@ -705,35 +718,35 @@ input:checked+.track+.thumb {
|
|
|
705
718
|
|
|
706
719
|
/* Modern Card Styling */
|
|
707
720
|
.mcm-wrapper.modern-modal .mcm-card {
|
|
708
|
-
border: 1px solid
|
|
721
|
+
border: 1px solid var(--banner-border) !important;
|
|
709
722
|
border-radius: 10px !important;
|
|
710
723
|
padding: 20px !important;
|
|
711
|
-
background:
|
|
724
|
+
background: var(--banner-bg) !important;
|
|
712
725
|
box-shadow: none !important;
|
|
713
726
|
transition: border-color 0.2s ease !important;
|
|
714
727
|
}
|
|
715
728
|
|
|
716
729
|
.mcm-wrapper.modern-modal .mcm-card:hover {
|
|
717
|
-
border-color:
|
|
730
|
+
border-color: var(--banner-text-muted) !important;
|
|
718
731
|
}
|
|
719
732
|
|
|
720
733
|
.mcm-wrapper.modern-modal .mcm-card h3 {
|
|
721
734
|
font-size: 1.1rem !important;
|
|
722
735
|
font-weight: 700 !important;
|
|
723
|
-
color:
|
|
736
|
+
color: var(--banner-text) !important;
|
|
724
737
|
}
|
|
725
738
|
|
|
726
739
|
.mcm-wrapper.modern-modal .mcm-purpose-desc {
|
|
727
740
|
font-size: 0.95rem !important;
|
|
728
|
-
color:
|
|
741
|
+
color: var(--banner-text-muted) !important;
|
|
729
742
|
line-height: 1.6 !important;
|
|
730
743
|
margin-top: 8px !important;
|
|
731
744
|
}
|
|
732
745
|
|
|
733
746
|
/* Modern Badge Styling */
|
|
734
747
|
.mcm-wrapper.modern-modal .badge.mandatory {
|
|
735
|
-
background:
|
|
736
|
-
color:
|
|
748
|
+
background: var(--banner-danger-bg) !important;
|
|
749
|
+
color: var(--banner-danger-text) !important;
|
|
737
750
|
padding: 4px 16px !important;
|
|
738
751
|
font-size: 0.75rem !important;
|
|
739
752
|
font-weight: 700 !important;
|
|
@@ -748,8 +761,8 @@ input:checked+.track+.thumb {
|
|
|
748
761
|
justify-content: space-between !important;
|
|
749
762
|
align-items: center !important;
|
|
750
763
|
padding: 20px 24px !important;
|
|
751
|
-
background:
|
|
752
|
-
border-top: 1px solid
|
|
764
|
+
background: var(--banner-bg) !important;
|
|
765
|
+
border-top: 1px solid var(--banner-border) !important;
|
|
753
766
|
}
|
|
754
767
|
|
|
755
768
|
.mcm-wrapper.modern-modal .mcm-summary-btn {
|
|
@@ -762,22 +775,22 @@ input:checked+.track+.thumb {
|
|
|
762
775
|
.mcm-wrapper.modern-modal .mcm-summary-btn.secondary {
|
|
763
776
|
/* Only Essential */
|
|
764
777
|
background: transparent !important;
|
|
765
|
-
color:
|
|
766
|
-
border: 1px solid
|
|
778
|
+
color: var(--banner-text) !important;
|
|
779
|
+
border: 1px solid var(--banner-border) !important;
|
|
767
780
|
margin-right: auto !important;
|
|
768
781
|
}
|
|
769
782
|
|
|
770
783
|
.mcm-wrapper.modern-modal .mcm-summary-btn.primary {
|
|
771
784
|
/* Accept All */
|
|
772
|
-
background:
|
|
773
|
-
color:
|
|
785
|
+
background: var(--banner-primary-color) !important;
|
|
786
|
+
color: var(--banner-bg) !important;
|
|
774
787
|
border: none !important;
|
|
775
788
|
}
|
|
776
789
|
|
|
777
790
|
.mcm-wrapper.modern-modal .mcm-summary-btn.save-preferences {
|
|
778
|
-
/* Save Preferences
|
|
779
|
-
background:
|
|
780
|
-
color:
|
|
791
|
+
/* Save Preferences */
|
|
792
|
+
background: var(--banner-primary-color) !important;
|
|
793
|
+
color: white !important;
|
|
781
794
|
border: none !important;
|
|
782
795
|
}
|
|
783
796
|
|
|
@@ -787,7 +800,7 @@ input:checked+.track+.thumb {
|
|
|
787
800
|
flex-direction: column;
|
|
788
801
|
height: 100%;
|
|
789
802
|
max-height: 85vh;
|
|
790
|
-
background:
|
|
803
|
+
background: var(--banner-bg);
|
|
791
804
|
font-family: inherit;
|
|
792
805
|
font-size: inherit;
|
|
793
806
|
}
|
|
@@ -795,7 +808,7 @@ input:checked+.track+.thumb {
|
|
|
795
808
|
/* Header */
|
|
796
809
|
.preferences-header {
|
|
797
810
|
padding: 1.5rem 1.5rem 1rem;
|
|
798
|
-
border-bottom: 1px solid
|
|
811
|
+
border-bottom: 1px solid var(--banner-border);
|
|
799
812
|
display: flex;
|
|
800
813
|
justify-content: space-between;
|
|
801
814
|
align-items: center;
|
|
@@ -805,13 +818,13 @@ input:checked+.track+.thumb {
|
|
|
805
818
|
margin: 0;
|
|
806
819
|
font-size: 1.5rem;
|
|
807
820
|
font-weight: 700;
|
|
808
|
-
color:
|
|
821
|
+
color: var(--banner-text);
|
|
809
822
|
}
|
|
810
823
|
|
|
811
824
|
.preferences-close-btn {
|
|
812
825
|
background: transparent;
|
|
813
826
|
border: none;
|
|
814
|
-
color:
|
|
827
|
+
color: var(--banner-text-muted);
|
|
815
828
|
cursor: pointer;
|
|
816
829
|
padding: 6px;
|
|
817
830
|
display: flex;
|
|
@@ -822,8 +835,8 @@ input:checked+.track+.thumb {
|
|
|
822
835
|
}
|
|
823
836
|
|
|
824
837
|
.preferences-close-btn:hover {
|
|
825
|
-
color:
|
|
826
|
-
background:
|
|
838
|
+
color: var(--banner-text);
|
|
839
|
+
background: var(--banner-hover-bg);
|
|
827
840
|
}
|
|
828
841
|
|
|
829
842
|
/* Hide the global close button for this layout */
|
|
@@ -834,7 +847,7 @@ input:checked+.track+.thumb {
|
|
|
834
847
|
/* Intro Text */
|
|
835
848
|
.preferences-intro {
|
|
836
849
|
padding: 1.25rem 1.5rem;
|
|
837
|
-
color:
|
|
850
|
+
color: var(--banner-text-muted);
|
|
838
851
|
font-size: 0.95rem;
|
|
839
852
|
line-height: 1.6;
|
|
840
853
|
}
|
|
@@ -851,12 +864,12 @@ input:checked+.track+.thumb {
|
|
|
851
864
|
|
|
852
865
|
/* Purpose Card */
|
|
853
866
|
.preferences-purpose-card {
|
|
854
|
-
border: 1px solid
|
|
855
|
-
border-left: 4px solid
|
|
867
|
+
border: 1px solid var(--banner-border);
|
|
868
|
+
border-left: 4px solid var(--banner-text);
|
|
856
869
|
/* Left accent border */
|
|
857
870
|
border-radius: 8px;
|
|
858
871
|
padding: 1.25rem;
|
|
859
|
-
background:
|
|
872
|
+
background: var(--banner-bg);
|
|
860
873
|
transition: box-shadow 0.2s ease;
|
|
861
874
|
}
|
|
862
875
|
|
|
@@ -882,16 +895,16 @@ input:checked+.track+.thumb {
|
|
|
882
895
|
margin: 0;
|
|
883
896
|
font-size: 1.125rem;
|
|
884
897
|
font-weight: 700;
|
|
885
|
-
color:
|
|
898
|
+
color: var(--banner-text);
|
|
886
899
|
}
|
|
887
900
|
|
|
888
901
|
/* Mandatory Badge */
|
|
889
902
|
.preferences-badge-mandatory {
|
|
890
903
|
display: inline-block;
|
|
891
904
|
padding: 0.25rem 0.75rem;
|
|
892
|
-
background:
|
|
905
|
+
background: var(--banner-danger-bg);
|
|
893
906
|
/* Gray pill in image */
|
|
894
|
-
color:
|
|
907
|
+
color: var(--banner-danger-text);
|
|
895
908
|
font-size: 0.75rem;
|
|
896
909
|
font-weight: 600;
|
|
897
910
|
border-radius: 9999px;
|
|
@@ -900,7 +913,7 @@ input:checked+.track+.thumb {
|
|
|
900
913
|
|
|
901
914
|
/* Purpose Description */
|
|
902
915
|
.preferences-purpose-description {
|
|
903
|
-
color:
|
|
916
|
+
color: var(--banner-text-muted);
|
|
904
917
|
font-size: 0.9rem;
|
|
905
918
|
line-height: 1.5;
|
|
906
919
|
margin-bottom: 0.75rem;
|
|
@@ -909,12 +922,12 @@ input:checked+.track+.thumb {
|
|
|
909
922
|
/* Services Used / Details Section */
|
|
910
923
|
.preferences-details {
|
|
911
924
|
margin-top: 0.5rem;
|
|
912
|
-
border-top: 1px solid
|
|
925
|
+
border-top: 1px solid var(--banner-border);
|
|
913
926
|
padding-top: 0.5rem;
|
|
914
927
|
}
|
|
915
928
|
|
|
916
929
|
.preferences-details .mcm-collapsible-btn {
|
|
917
|
-
color:
|
|
930
|
+
color: var(--banner-danger-btn) !important;
|
|
918
931
|
/* Red text for details in image */
|
|
919
932
|
font-size: 0.8125rem !important;
|
|
920
933
|
font-weight: 600 !important;
|
|
@@ -926,8 +939,8 @@ input:checked+.track+.thumb {
|
|
|
926
939
|
display: flex;
|
|
927
940
|
gap: 1rem;
|
|
928
941
|
padding: 1.25rem 1.5rem;
|
|
929
|
-
border-top: 1px solid
|
|
930
|
-
background:
|
|
942
|
+
border-top: 1px solid var(--banner-border);
|
|
943
|
+
background: var(--banner-bg);
|
|
931
944
|
}
|
|
932
945
|
|
|
933
946
|
.preferences-btn {
|
|
@@ -944,37 +957,37 @@ input:checked+.track+.thumb {
|
|
|
944
957
|
/* Only Essential Button */
|
|
945
958
|
.preferences-btn-essential {
|
|
946
959
|
background: transparent;
|
|
947
|
-
color:
|
|
948
|
-
border: 1px solid
|
|
960
|
+
color: var(--banner-text-muted);
|
|
961
|
+
border: 1px solid var(--banner-border);
|
|
949
962
|
}
|
|
950
963
|
|
|
951
964
|
.preferences-btn-essential:hover {
|
|
952
|
-
background:
|
|
953
|
-
border-color:
|
|
965
|
+
background: var(--banner-hover-bg);
|
|
966
|
+
border-color: var(--banner-text);
|
|
954
967
|
}
|
|
955
968
|
|
|
956
969
|
/* Save Preferences Button */
|
|
957
970
|
.preferences-btn-save {
|
|
958
|
-
background:
|
|
971
|
+
background: var(--banner-info-bg);
|
|
959
972
|
/* Coral from image */
|
|
960
|
-
color:
|
|
973
|
+
color: var(--banner-primary-color);
|
|
961
974
|
border: none;
|
|
962
975
|
}
|
|
963
976
|
|
|
964
977
|
.preferences-btn-save:hover {
|
|
965
|
-
background:
|
|
978
|
+
background: var(--banner-info-bg);
|
|
966
979
|
}
|
|
967
980
|
|
|
968
981
|
/* Accept All Button */
|
|
969
982
|
.preferences-btn-accept {
|
|
970
|
-
background:
|
|
983
|
+
background: var(--banner-primary-color);
|
|
971
984
|
/* Green from image */
|
|
972
|
-
color:
|
|
985
|
+
color: var(--banner-bg);
|
|
973
986
|
border: none;
|
|
974
987
|
}
|
|
975
988
|
|
|
976
989
|
.preferences-btn-accept:hover {
|
|
977
|
-
background:
|
|
990
|
+
background: var(--banner-primary-color);
|
|
978
991
|
}
|
|
979
992
|
|
|
980
993
|
/* Specific Wrapper Refinements */
|
|
@@ -1009,7 +1022,7 @@ input:checked+.track+.thumb {
|
|
|
1009
1022
|
left: 0;
|
|
1010
1023
|
right: 0;
|
|
1011
1024
|
bottom: 0;
|
|
1012
|
-
background-color:
|
|
1025
|
+
background-color: var(--banner-border);
|
|
1013
1026
|
transition: 0.3s;
|
|
1014
1027
|
border-radius: 24px;
|
|
1015
1028
|
}
|
|
@@ -1021,13 +1034,13 @@ input:checked+.track+.thumb {
|
|
|
1021
1034
|
width: 18px;
|
|
1022
1035
|
left: 3px;
|
|
1023
1036
|
bottom: 3px;
|
|
1024
|
-
background-color:
|
|
1037
|
+
background-color: var(--banner-bg);
|
|
1025
1038
|
transition: 0.3s;
|
|
1026
1039
|
border-radius: 50%;
|
|
1027
1040
|
}
|
|
1028
1041
|
|
|
1029
1042
|
.preferences-toggle input:checked+.preferences-toggle-slider {
|
|
1030
|
-
background-color:
|
|
1043
|
+
background-color: var(--banner-success-text);
|
|
1031
1044
|
}
|
|
1032
1045
|
|
|
1033
1046
|
.preferences-toggle input:checked+.preferences-toggle-slider:before {
|
|
@@ -1054,8 +1067,8 @@ input:checked+.track+.thumb {
|
|
|
1054
1067
|
/* Preferences Modal Footer & Actions Container */
|
|
1055
1068
|
.preferences-footer-container {
|
|
1056
1069
|
padding: 1rem 1.5rem;
|
|
1057
|
-
border-top: 1px solid
|
|
1058
|
-
background:
|
|
1070
|
+
border-top: 1px solid var(--banner-border);
|
|
1071
|
+
background: var(--banner-bg);
|
|
1059
1072
|
display: flex;
|
|
1060
1073
|
flex-direction: column;
|
|
1061
1074
|
gap: 0.5rem;
|
|
@@ -1076,10 +1089,10 @@ input:checked+.track+.thumb {
|
|
|
1076
1089
|
}
|
|
1077
1090
|
|
|
1078
1091
|
.preferences-purpose-card-wrapper>div {
|
|
1079
|
-
border-left: 4px solid
|
|
1092
|
+
border-left: 4px solid var(--banner-text) !important;
|
|
1080
1093
|
border-radius: 8px !important;
|
|
1081
1094
|
padding: 1.25rem !important;
|
|
1082
|
-
border: 1px solid
|
|
1095
|
+
border: 1px solid var(--banner-border) !important;
|
|
1083
1096
|
transition: box-shadow 0.2s ease !important;
|
|
1084
1097
|
}
|
|
1085
1098
|
|
|
@@ -1089,8 +1102,8 @@ input:checked+.track+.thumb {
|
|
|
1089
1102
|
|
|
1090
1103
|
/* Mandatory Badge Overrides */
|
|
1091
1104
|
.preferences-purpose-card-wrapper .mandatory-badge {
|
|
1092
|
-
background:
|
|
1093
|
-
color:
|
|
1105
|
+
background: var(--banner-danger-bg) !important;
|
|
1106
|
+
color: var(--banner-danger-text) !important;
|
|
1094
1107
|
border: none !important;
|
|
1095
1108
|
text-transform: capitalize !important;
|
|
1096
1109
|
padding: 0.125rem 0.625rem !important;
|
|
@@ -1099,7 +1112,7 @@ input:checked+.track+.thumb {
|
|
|
1099
1112
|
|
|
1100
1113
|
/* Red Collapsible Links */
|
|
1101
1114
|
.preferences-purpose-card-wrapper .mcm-collapsible-btn {
|
|
1102
|
-
color:
|
|
1115
|
+
color: var(--banner-danger-btn) !important;
|
|
1103
1116
|
font-size: 0.8125rem !important;
|
|
1104
1117
|
font-weight: 600 !important;
|
|
1105
1118
|
text-decoration: none !important;
|
|
@@ -1157,15 +1170,16 @@ input:checked+.track+.thumb {
|
|
|
1157
1170
|
max-width: none !important;
|
|
1158
1171
|
}
|
|
1159
1172
|
}
|
|
1173
|
+
|
|
1160
1174
|
/* Preferences Modal Logo */
|
|
1161
1175
|
.preferences-title-wrapper {
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1176
|
+
display: flex;
|
|
1177
|
+
align-items: center;
|
|
1178
|
+
gap: 0.75rem;
|
|
1165
1179
|
}
|
|
1166
1180
|
|
|
1167
1181
|
.preferences-logo {
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
}
|
|
1182
|
+
height: 24px;
|
|
1183
|
+
width: auto;
|
|
1184
|
+
object-fit: contain;
|
|
1185
|
+
}
|