/** * account.css * * Estilos para o card de integracao Telegram na pagina Account do PMPro. * Tipografia e cores herdam do tema WordPress ativo via CSS custom properties. * As vars --wp--preset--color--* sao geradas pelo theme.json (temas de bloco: * Twenty Twenty-Three+). Em temas classicos os valores de fallback sao usados. * * @package PMPro_Telegram_Integration * @author Paulo Cantarelli * @credits Desenvolvido com Claude Code (Anthropic) * @version 2.0.0 */ /* ============================================================ Variaveis de tema Definidas no container raiz para que todos os elementos filhos possam referencia-las. Altere aqui para sobrescrever sem tocar nos componentes internos. ============================================================ */ .pmpro-telegram-account-card { /* Tipografia — herda do do tema ativo */ --ptg-font: inherit; --ptg-font-size: inherit; --ptg-line-height: inherit; /* Cores — resolve vars do tema WordPress, cai em neutros */ --ptg-text: var(--wp--preset--color--contrast, inherit); --ptg-text-muted: var(--wp--preset--color--contrast-2, #666); --ptg-text-label: var(--wp--preset--color--contrast-3, #888); --ptg-bg: var(--wp--preset--color--base, #fff); --ptg-bg-alt: var(--wp--preset--color--base-2, #f9f9f9); --ptg-border: var(--wp--preset--color--contrast-3, #ddd); /* Cor de destaque: tenta primary do tema, depois cor admin do WP */ --ptg-accent: var(--wp--preset--color--primary, var(--wp-admin-theme-color, #0073aa)); --ptg-accent-dk: var(--wp--preset--color--primary-dark, #006799); --ptg-link: var(--wp--style--color--link, var(--ptg-accent)); /* Layout */ font-family: var(--ptg-font); font-size: var(--ptg-font-size); line-height: var(--ptg-line-height); color: var(--ptg-text); background: var(--ptg-bg); border: 1px solid var(--ptg-border); border-radius: 3px; margin: 20px 0; overflow: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); } /* ============================================================ Card Header ============================================================ */ .pmpro-telegram-card-header { background: var(--ptg-bg-alt); border-bottom: 1px solid var(--ptg-border); padding: 12px 18px; display: flex; align-items: center; gap: 8px; } .pmpro-telegram-card-icon { display: flex; align-items: center; color: var(--ptg-accent); opacity: 0.9; } .pmpro-telegram-card-title { font-family: var(--ptg-font); font-size: 1em; font-weight: 600; color: var(--ptg-text); letter-spacing: 0; } /* ============================================================ Card Body ============================================================ */ .pmpro-telegram-card-body { padding: 18px; } /* ============================================================ Status ============================================================ */ .pmpro-telegram-card-status { display: flex; align-items: center; gap: 8px; font-family: var(--ptg-font); font-size: 0.9em; font-weight: 500; margin-bottom: 14px; padding: 10px 14px; border-radius: 2px; border-left: 4px solid var(--ptg-border); background: var(--ptg-bg-alt); color: var(--ptg-text); } .pmpro-telegram-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .pmpro-telegram-status-dot--green { background: #46b450; } .pmpro-telegram-status-dot--red { background: #dc3232; } .pmpro-telegram-card-status--connected { color: #2a6a2e; border-left-color: #46b450; background: #f0faf0; } .pmpro-telegram-card-status--disconnected { color: var(--ptg-text-muted); border-left-color: var(--ptg-border); background: var(--ptg-bg-alt); } /* ============================================================ Groups list ============================================================ */ .pmpro-telegram-card-groups { margin: 0 0 16px; } .pmpro-telegram-card-groups-label { font-family: var(--ptg-font); font-size: 0.75em; color: var(--ptg-text-label); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; margin: 0 0 6px; } .pmpro-telegram-card-groups-list { margin: 0; padding: 0; list-style: none; } .pmpro-telegram-card-groups-list li { font-family: var(--ptg-font); font-size: 0.875em; color: var(--ptg-text); padding: 4px 0; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--ptg-border); opacity: 0.85; } .pmpro-telegram-card-groups-list li:last-child { border-bottom: none; } /* ============================================================ Description ============================================================ */ .pmpro-telegram-card-description { font-family: var(--ptg-font); font-size: 0.9em; color: var(--ptg-text-muted); margin: 0 0 16px; line-height: 1.5; } /* ============================================================ Buttons — herdam tipografia do tema ============================================================ */ .pmpro-telegram-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .pmpro-telegram-btn { display: inline-flex; align-items: center; padding: 0.5em 1.1em; font-family: var(--ptg-font); font-size: 0.875em; font-weight: 600; border-radius: 3px; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.4; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pmpro-telegram-btn--primary { background: var(--ptg-accent); border-color: var(--ptg-accent); color: #fff; } .pmpro-telegram-btn--primary:hover, .pmpro-telegram-btn--primary:focus { background: var(--ptg-accent-dk); border-color: var(--ptg-accent-dk); color: #fff; } .pmpro-telegram-btn--secondary { background: var(--ptg-bg-alt); border-color: var(--ptg-border); color: var(--ptg-text-muted); } .pmpro-telegram-btn--secondary:hover, .pmpro-telegram-btn--secondary:focus { background: var(--ptg-border); border-color: var(--ptg-border); color: var(--ptg-text); } .pmpro-telegram-btn--outline { background: transparent; border-color: var(--ptg-accent); color: var(--ptg-accent); } .pmpro-telegram-btn--outline:hover, .pmpro-telegram-btn--outline:focus { background: var(--ptg-bg-alt); color: var(--ptg-accent-dk); } .pmpro-telegram-btn:disabled, .pmpro-telegram-btn.is-loading { opacity: 0.6; cursor: not-allowed; } /* ============================================================ Connect feedback ============================================================ */ .pmpro-telegram-connect-feedback { margin-top: 14px; padding: 12px 16px; background: var(--ptg-bg-alt); border: 1px solid var(--ptg-border); border-left: 4px solid var(--ptg-accent); border-radius: 2px; } .pmpro-telegram-connect-steps p { margin: 0 0 8px; font-family: var(--ptg-font); font-size: 0.875em; color: var(--ptg-text); line-height: 1.5; } .pmpro-telegram-connect-steps p:last-child { margin-bottom: 0; } .pmpro-telegram-connect-steps a { color: var(--ptg-link); font-weight: 500; } /* ============================================================ Message feedback ============================================================ */ .pmpro-telegram-card-message { margin-top: 12px; padding: 10px 14px; border-radius: 2px; font-family: var(--ptg-font); font-size: 0.875em; font-weight: 500; border-left: 4px solid transparent; color: var(--ptg-text); } .pmpro-telegram-card-message.is-success { background: #f0faf0; color: #2a6a2e; border-left-color: #46b450; } .pmpro-telegram-card-message.is-error { background: #fef7f7; color: #8c1a1a; border-left-color: #dc3232; } /* ============================================================ Responsividade ============================================================ */ @media screen and (max-width: 600px) { .pmpro-telegram-card-actions { flex-direction: column; } .pmpro-telegram-btn { width: 100%; justify-content: center; } } /* ============================================================ Pop-up de Conexao Telegram (v2.0) Fontes, tamanhos e cor de texto herdam do tema WordPress ativo. Apenas o botao primario usa a cor de marca do Telegram (#2CA5E0). ============================================================ */ #pmpro-telegram-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 99999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 16px; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; box-sizing: border-box; } #pmpro-telegram-popup-overlay.pmpro-telegram-popup-visible { opacity: 1; } /* * A caixa herda font-family, font-size e color do do tema ativo. * Usamos unidades "em" para padding e espacamentos para escalar junto * com o tamanho de fonte definido pelo tema. */ #pmpro-telegram-popup-box { /* Herda tipografia do tema */ font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; /* Estrutura */ background: #fff; border-radius: 0.5em; padding: 2.5em 2em 1.75em; max-width: 26em; width: 100%; box-shadow: 0 0.5em 2.5em rgba(0, 0, 0, 0.22); position: relative; text-align: center; -webkit-transform: translateY(-1.25em); transform: translateY(-1.25em); -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; box-sizing: border-box; } #pmpro-telegram-popup-overlay.pmpro-telegram-popup-visible #pmpro-telegram-popup-box { -webkit-transform: translateY(0); transform: translateY(0); } /* Botao fechar (X) — neutro, sem cor de tema */ #pmpro-telegram-popup-close { position: absolute; top: 0.6em; right: 0.75em; background: transparent; border: none; font-size: 1.4em; line-height: 1; color: #999; cursor: pointer; padding: 0.2em 0.35em; border-radius: 3px; -webkit-transition: color 0.15s, background 0.15s; transition: color 0.15s, background 0.15s; font-family: inherit; } #pmpro-telegram-popup-close:hover { color: #333; background: rgba(0, 0, 0, 0.06); } /* Logo SVG do Telegram */ .pmpro-telegram-popup-icon { display: block; margin: 0 auto 1em; line-height: 1; } .pmpro-telegram-popup-icon svg { display: block; margin: 0 auto; } /* * Conteudo: herda cor e fonte do tema; apenas o line-height e fixado * para garantir legibilidade independente do tema. */ .pmpro-telegram-popup-content { font-family: inherit; font-size: 1em; line-height: 1.6; color: inherit; margin-bottom: 1.5em; } .pmpro-telegram-popup-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.6em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* * Botao primario: usa a cor oficial do Telegram (#2CA5E0). * Fonte e tamanho herdam do tema para manter coerencia visual. */ .pmpro-telegram-popup-btn-primary { display: block; background: #2CA5E0; color: #fff; font-family: inherit; font-size: 1em; font-weight: 600; padding: 0.7em 1.5em; border-radius: 0.3em; text-decoration: none; width: 100%; text-align: center; box-sizing: border-box; -webkit-transition: background 0.2s, opacity 0.2s; transition: background 0.2s, opacity 0.2s; border: none; cursor: pointer; } .pmpro-telegram-popup-btn-primary:hover, .pmpro-telegram-popup-btn-primary:focus { background: #1a8bbf; color: #fff; text-decoration: none; opacity: 1; } /* * Botao secundario ("Agora nao"): completamente neutro, * herda a cor de texto do tema. */ .pmpro-telegram-popup-btn-secondary { background: transparent; border: none; color: inherit; font-family: inherit; font-size: 0.85em; opacity: 0.6; cursor: pointer; padding: 0.2em 0.5em; text-decoration: underline; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } .pmpro-telegram-popup-btn-secondary:hover { opacity: 1; }