/** * ds-theme-shield.css * * [1.5.118] ESCUDO DE TEMA — Fase 3: Componentes do Design System * ============================================================================ * * PROPÓSITO * --------- * Os componentes do Design System (notificações, modais, FDG — first deposit * gate, intro/welcome, toasts, popups, rotate-warning) são usados em TODAS * as páginas do plugin via rmbz_enqueue_design_system(). Por isso este * shield carrega DEPOIS do DS e protege os seus containers em qualquer página. * * COBERTURA * --------- * Containers raiz blindados: * - .rmbz-notif-* (centro de notificações, sino, dropdown, banners, barras) * - .rmbz-fdg-* (first deposit gate — overlay de boas-vindas com depósito) * - .rmbz-modal, .rmbz-modal__* (modais genéricos do DS) * - .rmbz-toast (notificações temporárias) * - .rmbz-popup (popups admin/welcome) * - .rmbz-intro-* (intro-welcome screen) * - .onemz-rotate-warning (mensagem de rodar o ecrã em mobile) * - .rmbz-gate, .rmbz-gate__* (cartões de bloqueio: paywall, restrição, etc.) * - .rmbz-feature-card (cards informativos) * - .rmbz-alert (alertas inline) * * NOTA — DUPLICAÇÃO COM FASES 1 e 2 * ---------------------------------- * Algumas regras genéricas de links e botões podem coincidir com as Fases * 1 e 2 quando as notifs aparecem dentro de .onemz-artist-dashboard ou * .rmbz-fullbleed. Isto NÃO é problema — o CSS resolve a duplicação na * cascata sem efeitos colaterais. A vantagem é que os componentes DS ficam * blindados mesmo em páginas que NÃO sejam dashboard nem distribuição * (ex.: páginas com modais/toasts soltos). */ /* ============================================================================ * 1. RESET DE LINKS DENTRO DOS COMPONENTES DS * ============================================================================ */ .rmbz-notif-card a, .rmbz-notif-card a:hover, .rmbz-notif-card a:focus, .rmbz-notif-card a:visited, .rmbz-notif-bar a, .rmbz-notif-bar a:hover, .rmbz-notif-bar a:focus, .rmbz-notif-bar a:visited, .rmbz-notif-dropdown a, .rmbz-notif-dropdown a:hover, .rmbz-notif-dropdown a:focus, .rmbz-notif-dropdown a:visited, .rmbz-notif-banner-stack a, .rmbz-notif-banner-stack a:hover, .rmbz-notif-banner-stack a:visited, .rmbz-fdg-card a, .rmbz-fdg-card a:hover, .rmbz-fdg-card a:focus, .rmbz-fdg-card a:visited, .rmbz-fdg-overlay a, .rmbz-fdg-overlay a:hover, .rmbz-fdg-overlay a:visited, .rmbz-modal a, .rmbz-modal a:hover, .rmbz-modal a:focus, .rmbz-modal a:visited, .rmbz-toast a, .rmbz-toast a:hover, .rmbz-toast a:visited, .rmbz-popup a, .rmbz-popup a:hover, .rmbz-popup a:visited, .rmbz-gate a, .rmbz-gate a:hover, .rmbz-gate a:focus, .rmbz-gate a:visited, .rmbz-feature-card a, .rmbz-feature-card a:hover, .rmbz-feature-card a:visited, .rmbz-alert a, .rmbz-alert a:hover, .rmbz-alert a:visited { text-decoration: none !important; text-decoration-line: none !important; text-decoration-color: transparent !important; background-image: none !important; border-bottom: none !important; box-shadow: none !important; } /* Pseudo-elementos que alguns temas usam para fingir underline */ .rmbz-notif-card a::before, .rmbz-notif-card a::after, .rmbz-notif-bar a::before, .rmbz-notif-bar a::after, .rmbz-fdg-card a::before, .rmbz-fdg-card a::after, .rmbz-fdg-overlay a::before, .rmbz-fdg-overlay a::after, .rmbz-modal a::before, .rmbz-modal a::after, .rmbz-gate a::before, .rmbz-gate a::after, .rmbz-feature-card a::before, .rmbz-feature-card a::after, .rmbz-alert a::before, .rmbz-alert a::after { content: none !important; display: none !important; } /* ============================================================================ * 2. BOTÕES — wildcard apanha rmbz-fdg-btn, rmbz-notif-action, btn--*, etc. * ============================================================================ */ .rmbz-notif-card [class*="btn"], .rmbz-notif-card a[class*="btn"], .rmbz-notif-card button[class*="btn"], .rmbz-notif-bar [class*="btn"], .rmbz-notif-bar a[class*="btn"], .rmbz-notif-bar button[class*="btn"], .rmbz-notif-dropdown [class*="btn"], .rmbz-fdg-card [class*="btn"], .rmbz-fdg-card a[class*="btn"], .rmbz-fdg-card button[class*="btn"], .rmbz-fdg-overlay [class*="btn"], .rmbz-fdg-overlay a[class*="btn"], .rmbz-fdg-overlay button[class*="btn"], .rmbz-modal [class*="btn"], .rmbz-modal a[class*="btn"], .rmbz-modal button[class*="btn"], .rmbz-popup [class*="btn"], .rmbz-gate [class*="btn"], .rmbz-gate a[class*="btn"], .rmbz-gate button[class*="btn"], .rmbz-feature-card [class*="btn"], .rmbz-feature-card a[class*="btn"], .rmbz-feature-card button[class*="btn"], .rmbz-alert [class*="btn"], .rmbz-alert a[class*="btn"] { text-decoration: none !important; text-decoration-line: none !important; text-shadow: none !important; background-image: none; /* sem !important — permite gradients do plugin */ font-family: inherit !important; line-height: normal !important; box-sizing: border-box !important; } /* ---- FDG: botões dedicados (.rmbz-fdg-btn variantes) ---- */ .rmbz-fdg-card a.rmbz-fdg-btn, .rmbz-fdg-card button.rmbz-fdg-btn, .rmbz-fdg-overlay a.rmbz-fdg-btn, .rmbz-fdg-overlay button.rmbz-fdg-btn, .rmbz-fdg-actions a.rmbz-fdg-btn, .rmbz-fdg-actions button.rmbz-fdg-btn { color: inherit !important; text-decoration: none !important; border: none; cursor: pointer !important; } .rmbz-fdg-btn--whatsapp { /* WhatsApp green é cor de marca; forçar caso o tema mexa */ background-color: #25d366 !important; color: #fff !important; } .rmbz-fdg-btn--whatsapp:hover, .rmbz-fdg-btn--whatsapp:focus, .rmbz-fdg-btn--whatsapp:visited { background-color: #25d366 !important; color: #fff !important; } /* ---- NOTIF: action buttons ---- */ .rmbz-notif-action, a.rmbz-notif-action, button.rmbz-notif-action { text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; } .rmbz-notif-bar-link, a.rmbz-notif-bar-link, .rmbz-notif-bar-link:hover, .rmbz-notif-bar-link:focus, .rmbz-notif-bar-link:visited { text-decoration: none !important; color: inherit !important; } .rmbz-notif-bar-dismiss, .rmbz-notif-dismiss, button.rmbz-notif-bar-dismiss, button.rmbz-notif-dismiss { background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; cursor: pointer !important; color: inherit !important; box-shadow: none !important; text-shadow: none !important; } /* ============================================================================ * 3. INPUTS DENTRO DE MODAIS / FDG / NOTIFS * ---------------------------------------------------------------------------- * Modais frequentemente têm campos de texto/textarea (ex: motivo de rejeição, * comentário, mensagem). O tema pode meter shadow/borda estranha. * ============================================================================ */ .rmbz-modal input[type="text"], .rmbz-modal input[type="email"], .rmbz-modal input[type="password"], .rmbz-modal input[type="number"], .rmbz-modal input[type="tel"], .rmbz-modal input[type="url"], .rmbz-modal input[type="date"], .rmbz-modal select, .rmbz-modal textarea, .rmbz-fdg-card input, .rmbz-fdg-card select, .rmbz-fdg-card textarea, .rmbz-popup input, .rmbz-popup select, .rmbz-popup textarea { box-shadow: none !important; text-shadow: none !important; font-family: inherit !important; box-sizing: border-box !important; background-image: none !important; max-width: none !important; } /* ============================================================================ * 4. LISTAS — UL/OL com class dentro destes componentes não devem ter padding * ou marker do tema * ============================================================================ */ .rmbz-notif-card ul[class], .rmbz-notif-card ol[class], .rmbz-fdg-card ul[class], .rmbz-fdg-card ol[class], .rmbz-fdg-steps, .rmbz-fdg-info-grid, .rmbz-modal ul[class], .rmbz-modal ol[class], .rmbz-popup ul[class], .rmbz-gate ul[class], .rmbz-gate ol[class], .rmbz-feature-card ul[class], .rmbz-feature-card ol[class] { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .rmbz-notif-card ul[class] li::marker, .rmbz-fdg-card ul[class] li::marker, .rmbz-fdg-steps li::marker, .rmbz-modal ul[class] li::marker, .rmbz-popup ul[class] li::marker, .rmbz-gate ul[class] li::marker, .rmbz-feature-card ul[class] li::marker { content: '' !important; display: none !important; } /* ============================================================================ * 5. IMAGENS dentro destes componentes * ============================================================================ */ .rmbz-notif-card img, .rmbz-notif-bar img, .rmbz-fdg-card img, .rmbz-modal img, .rmbz-popup img, .rmbz-gate img, .rmbz-feature-card img { max-width: none; height: auto; } /* ============================================================================ * 6. HEADINGS dentro destes componentes — tipografia inherit * ============================================================================ */ .rmbz-notif-card h1, .rmbz-notif-card h2, .rmbz-notif-card h3, .rmbz-notif-card h4, .rmbz-fdg-card h1, .rmbz-fdg-card h2, .rmbz-fdg-card h3, .rmbz-fdg-card h4, .rmbz-modal h1, .rmbz-modal h2, .rmbz-modal h3, .rmbz-modal h4, .rmbz-popup h1, .rmbz-popup h2, .rmbz-popup h3, .rmbz-popup h4, .rmbz-gate h1, .rmbz-gate h2, .rmbz-gate h3, .rmbz-feature-card h1, .rmbz-feature-card h2, .rmbz-feature-card h3, .rmbz-feature-card h4 { font-family: inherit !important; text-shadow: none !important; text-transform: none !important; } /* ============================================================================ * 7. PARÁGRAFOS — sem text-shadow do tema * ============================================================================ */ .rmbz-notif-card p, .rmbz-notif-bar p, .rmbz-fdg-card p, .rmbz-modal p, .rmbz-popup p, .rmbz-gate p, .rmbz-feature-card p, .rmbz-alert p { text-shadow: none !important; } /* ============================================================================ * 8. ROTATE WARNING — ecrã que pede para rodar o telemóvel * ---------------------------------------------------------------------------- * Este cobre o ecrã todo (position: fixed) e tem de ficar imune ao tema. * ============================================================================ */ .onemz-rotate-warning, .onemz-rotate-warning * { text-shadow: none !important; box-shadow: none !important; } .onemz-rotate-warning a, .onemz-rotate-warning a:hover, .onemz-rotate-warning a:visited { text-decoration: none !important; background-image: none !important; color: inherit !important; } /* ============================================================================ * 9. FORMS dentro de modais / FDG / notifs * ============================================================================ */ .rmbz-modal form, .rmbz-fdg-card form, .rmbz-fdg-overlay form, .rmbz-popup form, .rmbz-gate form, .rmbz-notif-card form { margin: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; } /* ============================================================================ * 10. LABELS — herdar fonte * ============================================================================ */ .rmbz-modal label, .rmbz-fdg-card label, .rmbz-popup label, .rmbz-gate label, .rmbz-notif-card label { text-shadow: none !important; font-family: inherit !important; } /* ============================================================================ * 11. SVG ICONS dentro dos componentes — tamanho explícito não deve ser tocado * ---------------------------------------------------------------------------- * Alguns temas metem `width: auto !important` em SVG inline. Repomos o * comportamento em que width/height inline do SVG mandam. * ============================================================================ */ .rmbz-notif-card svg, .rmbz-notif-bar svg, .rmbz-notif-bar-icon svg, .rmbz-notif-icon svg, .rmbz-fdg-card svg, .rmbz-fdg-icon svg, .rmbz-modal svg, .rmbz-popup svg, .rmbz-gate svg, .rmbz-gate__icon svg, .rmbz-feature-card svg, .rmbz-alert svg { max-width: none !important; height: auto; flex-shrink: 0; } /* ============================================================================ * 12. WP-BLOCK-* WRAPPERS dentro destes componentes * ============================================================================ */ .rmbz-modal .wp-block-group, .rmbz-fdg-card .wp-block-group, .rmbz-popup .wp-block-group, .rmbz-gate .wp-block-group, .rmbz-notif-card .wp-block-group { padding: 0 !important; margin: 0 !important; background: none !important; } /* ============================================================================ * 13. SELECT e OPTION dentro dos componentes DS — forçar cores escuras * ---------------------------------------------------------------------------- * [1.5.126] Mesmo problema que nos outros shields: opções de dropdown ficam * brancas em fundo branco quando o tema interfere. Aplicado a todos os * componentes do DS que possam ter