| @@ -8,10 +8,64 @@ | ||
| 8 | 8 | * @subpackage Metasync/admin/css |
| 9 | 9 | */ |
| 10 | 10 | |
| 11 | 11 | /* ========================================================================== |
| 12 | - Wizard Container | |
| 12 | + Analytics Consent Prototype | |
| 13 | 13 | ========================================================================== */ |
| 14 | + | |
| 15 | +.wizard-consent-card, | |
| 16 | +.metasync-analytics-consent-card { | |
| 17 | + display: flex; | |
| 18 | + align-items: flex-start; | |
| 19 | + gap: 22px; | |
| 20 | + margin: 28px auto 0; | |
| 21 | + padding: 26px 30px; | |
| 22 | + max-width: 820px; | |
| 23 | + background: var(--dashboard-card-bg, #ffffff); | |
| 24 | + border: 2px solid rgba(102, 126, 234, 0.35); | |
| 25 | + border-radius: 16px; | |
| 26 | + box-shadow: 0 8px 24px rgba(42, 48, 82, 0.08); | |
| 27 | +} | |
| 28 | + | |
| 29 | +.wizard-consent-icon { | |
| 30 | + display: grid; | |
| 31 | + place-items: center; | |
| 32 | + flex: 0 0 46px; | |
| 33 | + width: 46px; | |
| 34 | + height: 46px; | |
| 35 | + color: #fff; | |
| 36 | + background: linear-gradient(135deg, #667eea, #764ba2); | |
| 37 | + border-radius: 12px; | |
| 38 | +} | |
| 39 | + | |
| 40 | +.wizard-consent-icon .dashicons { font-size: 24px; width: 24px; height: 24px; } | |
| 41 | +.wizard-consent-copy { flex: 1; } | |
| 42 | +.wizard-consent-copy h3, | |
| 43 | +.metasync-analytics-consent-copy h3 { margin: 0 0 8px; color: var(--dashboard-text-primary, #1a202c); font-size: 1.25rem; } | |
| 44 | +.wizard-consent-copy p, | |
| 45 | +.metasync-analytics-consent-copy p { margin: 0 0 10px; color: var(--dashboard-text-secondary, #4a5568); line-height: 1.55; } | |
| 46 | +.wizard-consent-copy ul { margin: 12px 0; padding-left: 18px; color: var(--dashboard-text-secondary, #4a5568); } | |
| 47 | +.wizard-consent-copy li { margin: 5px 0; } | |
| 48 | +.wizard-consent-eyebrow { display: inline-block; margin-bottom: 6px; color: #667eea; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } | |
| 49 | +.wizard-consent-note { font-size: .875rem; } | |
| 50 | +.wizard-consent-switch, | |
| 51 | +.metasync-consent-switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; cursor: pointer; } | |
| 52 | +.wizard-consent-switch input, | |
| 53 | +.metasync-consent-switch input { position: absolute; opacity: 0; } | |
| 54 | +.wizard-consent-slider, | |
| 55 | +.metasync-consent-slider { width: 52px; height: 30px; background: #cbd5e1; border-radius: 999px; transition: .2s; } | |
| 56 | +.wizard-consent-slider::after, | |
| 57 | +.metasync-consent-slider::after { content: ''; display: block; width: 24px; height: 24px; margin: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } | |
| 58 | +.wizard-consent-switch input:checked + .wizard-consent-slider, | |
| 59 | +.metasync-consent-switch input:checked + .metasync-consent-slider { background: #667eea; } | |
| 60 | +.wizard-consent-switch input:checked + .wizard-consent-slider::after, | |
| 61 | +.metasync-consent-switch input:checked + .metasync-consent-slider::after { transform: translateX(22px); } | |
| 62 | +.wizard-consent-state, | |
| 63 | +.metasync-consent-status { margin-left: 8px; color: var(--dashboard-text-secondary, #4a5568); font-size: .875rem; font-weight: 600; } | |
| 64 | +.metasync-analytics-consent-card { max-width: none; margin: 0; } | |
| 65 | +.metasync-analytics-consent-copy { flex: 1; } | |
| 66 | + | |
| 67 | + | |
| 14 | 68 | |
| 15 | 69 | /* Override WordPress admin wrapper backgrounds */ |
| 16 | 70 | /* Target any page with setup-wizard in the body class */ |
| 17 | 71 | body[class*="setup-wizard"] { |
