/** * MÁSCARA DE ESTILO PPGQ UFG - EFEITO VIDRO & RESPONSIVIDADE * Copie e cole este código inteiro no Console do Navegador. */ (function() { // 1. DEFINIÇÃO DOS ESTILOS (CSS) const style = document.createElement('style'); style.innerHTML = ` /* --- VARIÁVEIS E RESET BÁSICO --- */ :root { --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.4); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); --primary-color: #005c9e; /* Azul UFG aproximado */ --text-color: #333; --font-main: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } body { font-family: var(--font-main) !important; overflow-x: hidden; /* Evita estouro lateral */ } /* --- MENU COM EFEITO VIDRO (GLASSMORPHISM) --- */ /* Seletores genéricos para tentar pegar o menu da UFG/Joomla/Barra Gov */ #header, .header, nav, .navbar, #menu, .menu-section, .barragoverno { background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; transition: all 0.4s ease-in-out !important; position: sticky !important; /* Tenta fixar no topo */ top: 0; z-index: 9999; } /* Itens do Menu - Hover Suave */ nav a, .menu a, #menu a { transition: all 0.3s ease !important; border-radius: 8px; } nav a:hover, .menu a:hover, #menu a:hover { background: rgba(255, 255, 255, 0.5) !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); color: var(--primary-color) !important; } /* --- CARDS E NOTÍCIAS (ANIMAÇÕES) --- */ /* Seleciona divs que parecem cards ou itens de lista */ .item, .card, .news-item, .noticia, .tile, .content-item, article { background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 15px !important; padding: 20px !important; margin-bottom: 20px !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s !important; opacity: 0; /* Para animação de entrada via JS */ animation: fadeInUp 0.8s forwards; } .item:hover, .card:hover, article:hover { transform: translateY(-5px) scale(1.01) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important; background: rgba(255, 255, 255, 0.9) !important; border-color: var(--primary-color); } /* --- TABELAS INTELIGENTES E RESPONSIVAS --- */ /* Wrapper criado via JS terá essa classe */ .smart-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Rolagem suave no mobile */ margin: 20px 0; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid rgba(255,255,255,0.3); } table { width: 100% !important; border-collapse: collapse !important; min-width: 600px; /* Força largura mínima para não esmagar colunas */ background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(5px); } th, td { padding: 15px !important; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.05) !important; font-size: 1rem !important; /* Tamanho legível */ color: #444 !important; white-space: normal !important; /* Quebra texto longo */ } th { background: rgba(0, 92, 158, 0.1) !important; /* Azul leve */ font-weight: 600 !important; color: var(--primary-color) !important; text-transform: uppercase; letter-spacing: 1px; position: sticky; top: 0; } tr:hover td { background: rgba(0, 92, 158, 0.05) !important; } /* --- IMAGENS RESPONSIVAS --- */ img { max-width: 100% !important; height: auto !important; border-radius: 8px; object-fit: cover; } /* --- ANIMAÇÕES --- */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } `; document.head.appendChild(style); // 2. LÓGICA JAVASCRIPT (Refinamento do DOM) // Função para envolver tabelas e torná-las responsivas function makeTablesResponsive() { const tables = document.querySelectorAll('table'); tables.forEach(table => { // Verifica se já não tem wrapper if (!table.parentElement.classList.contains('smart-table-wrapper')) { const wrapper = document.createElement('div'); wrapper.className = 'smart-table-wrapper'; table.parentNode.insertBefore(wrapper, table); wrapper.appendChild(table); } // Ajusta inputs dentro de tabelas se houver const inputs = table.querySelectorAll('input, select'); inputs.forEach(input => { input.style.maxWidth = '100%'; input.style.boxSizing = 'border-box'; }); }); } // Função para adicionar animações sequenciais (Staggered) function animateCards() { // Tenta encontrar elementos de lista comuns em sites Joomla/UFG const cards = document.querySelectorAll('.item, .list-item, .news-item, article, .tile'); cards.forEach((card, index) => { card.style.animationDelay = `${index * 0.1}s`; // Cascata de 0.1s card.style.opacity = '1'; // Garante visibilidade após animação }); } // Função para limpar elementos que "estouram" a tela function fixOverflow() { document.documentElement.style.maxWidth = '100vw'; document.documentElement.style.overflowX = 'hidden'; document.body.style.maxWidth = '100vw'; document.body.style.overflowX = 'hidden'; } // Executar tudo document.addEventListener('DOMContentLoaded', () => { makeTablesResponsive(); animateCards(); fixOverflow(); }); // Fallback caso o DOM já esteja carregado (se colar no console) makeTablesResponsive(); animateCards(); fixOverflow(); console.log("%c Design PPGQ Melhorado Ativado! ", "background: #005c9e; color: #fff; padding: 5px; border-radius: 5px;"); })();