/** * UFRN COSMOS Theme v4.0.0 (Final & Complete) * * Versão final, completa e unificada do tema da UFRN. * Funde o framework base "COSMOS" (v2.0.0) com as customizações * do projeto SIGDASA_AGENDAR e todas as correções aplicadas. * * Instruções: * 1. Adicione `paleta="social"` à sua tag . * 2. Carregue este arquivo APÓS o CSS do Bootstrap. */ /* /------------------------------------------------------------------ // 1. VARIÁVEIS GLOBAIS E SISTEMA DE PALETAS (Fonte: COSMOS UFRN) // -----------------------------------------------------------------*/ :root { /* Paletas Base (padrão é Administrativa/Azul) */ --primary-color: #72a8e5; --primary-light-color: #cce4ff; --primary-dark-color: #2d5d98; --primary-darker-color: #2d5d98; /* Paleta Secundária (Cinzas) */ --secondary-lightest-color: #eef2f4; --secondary-transparency-color: #878a8b93; --secondary-lighter-color: #d8e1ea; --secondary-light-color: #cfd7e0; --secondary-color: #bdc4cc; --secondary-dark-color: #a4b2c8; --secondary-darker-color: #848fa0; --secondary-darkest-color: #5b6372; /* Paleta de Feedback Semântico */ --danger-light-color: #F8E4E4; --danger-color: #D97A78; --danger-dark-color: #B13532; --warning-light-color: #FFE8A8; --warning-color: #FFD34B; --warning-dark-color: #7B5606; --success-light-color: #ccedab; --success-color: #8ecc51; --success-dark-color: #6b915c; --info-color: #72a8e5; /* Variáveis de UI */ --text-color: var(--secondary-darkest-color); --border-color: var(--secondary-light-color); --white: #ffffff; --font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --border-radius: 6px; --border-radius-lg: 8px; --border-radius-sm: 4px; } /* Ativação da Paleta Social (Verde) */ html[paleta=social]:root { --primary-color: #85cc3d; --primary-light-color: #c6edbe; --primary-dark-color: #589e3c; --primary-darker-color: #55993a; } /* /------------------------------------------------------------------ // 2. ESTILOS DE BASE E TIPOGRAFIA // -----------------------------------------------------------------*/ body { font-family: var(--font-family-base); color: var(--text-color); background-color: var(--secondary-lightest-color)!important; } h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6 { color: var(--primary-dark-color)!important; font-weight: 700; } a { color: var(--primary-dark-color); font-weight: bold; } /* /------------------------------------------------------------------ // 3. BOTÕES (Estilo unificado SIGDASA) // -----------------------------------------------------------------*/ .btn { border-radius: 50px!important; font-weight: bold; border: none; padding: 10px 22px!important; transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } /* Cores dos Botões */ .btn-primary { background-color: var(--primary-darker-color)!important; color: var(--white)!important; } .btn-success { background-color: var(--success-color)!important; color: var(--white)!important; } .btn-info { background-color: var(--info-color)!important; color: var(--white)!important; } .btn-warning { background-color: var(--warning-color)!important; color: var(--secondary-darkest-color)!important; } .btn-danger { background-color: var(--danger-color)!important; color: var(--white)!important; } .btn-danger a,.btn-success a,.btn-primary a,.btn-info a { color: var(--white)!important; } /* /------------------------------------------------------------------ // 4. COMPONENTES GLOBAIS (Base COSMOS) // -----------------------------------------------------------------*/ /* Tabelas */ .table { border-color: var(--border-color); } .table > thead { vertical-align: bottom; } .table > thead > tr > th { background-color: var(--primary-light-color); color: var(--primary-darker-color); border-bottom: 2px solid var(--primary-dark-color); font-weight: 700; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--secondary-lightest-color); } .table-hover > tbody > tr:hover > * { background-color: var(--primary-light-color); color: var(--text-color); } /* Formulários */ .form-control,.form-select { border-radius: var(--border-radius); border: 1px solid var(--border-color); } .form-control:focus,.form-select:focus { border-color: var(--primary-dark-color); box-shadow: 0 0 0 0.25rem rgba(88, 158, 60, 0.25); } .form-check-input:checked { background-color: var(--primary-dark-color); border-color: var(--primary-dark-color); } /* Cards */ .card { border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); } .card-header { background-color: var(--secondary-lightest-color); border-bottom: 1px solid var(--border-color); font-weight: 700; color: var(--primary-dark-color); } /* Alertas */ .alert { border-radius: var(--border-radius); border-width: 0; border-left: 5px solid; } .alert-success { background-color: var(--success-light-color); border-color: var(--success-dark-color); color: var(--success-dark-color); } .alert-danger { background-color: var(--danger-light-color); border-color: var(--danger-dark-color); color: var(--danger-dark-color); } .alert-warning { background-color: var(--warning-light-color); border-color: var(--warning-dark-color); color: var(--warning-dark-color); } .alert-info { background-color: var(--primary-light-color); border-color: var(--primary-dark-color); color: var(--primary-dark-color); } /* /------------------------------------------------------------------ // 5. CUSTOMIZAÇÕES ESPECÍFICAS (Projeto SIGDASA_AGENDAR) // -----------------------------------------------------------------*/ /* Ajuste para botões que são apenas ícones */ #tabela_processos.btn { width: 45px!important; height: 45px!important; padding: 0!important; flex-shrink: 0; } .botoes_imprimir.btn { width: 55px!important; height: 55px!important; padding: 0!important; } /* Estilo de Tabela Customizada */ .custom-table th { background-color: var(--primary-color)!important; color: var(--white)!important; border-radius: 0!important; } .custom-table td:first-child { border-left: 4px solid var(--primary-color); } /* Estilo de Modal Customizado (Sobrescreve o padrão do jQuery Modal) */ .modal { border-radius: 15px!important; background: var(--secondary-transparency-color)!important; } .titulo_modal { background-color: var(--primary-dark-color)!important; } .titulo_modal h4 { color: var(--white)!important; } /* Alertas e Overlays Específicos */ #overlay_alert[style*="9ad19a"] { background-color: var(--primary-light-color)!important; color: var(--primary-dark-color)!important; } #overlay_alert[style*="ed9c9c"] { background-color: var(--danger-light-color)!important; color: var(--danger-dark-color)!important; } #overlay_alert[style*="d5dd8d"] { background-color: var(--warning-light-color)!important; color: var(--warning-dark-color)!important; } /* Outros Componentes Visuais Específicos */ .cabecalho_sigpericia { background-color: var(--primary-dark-color); } .coluna-header { background-color: var(--primary-color)!important; } /* /------------------------------------------------------------------ // 6. COMPONENTES CUSTOMIZADOS (Correção do Loader) // -----------------------------------------------------------------*/ #loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: none; z-index: 9999; align-items: center; justify-content: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loader { border: 8px solid var(--secondary-lighter-color); border-top-color: var(--primary-darker-color); border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; } .loader { border: 16px solid var(--secondary-lighter-color)!important; border-top-color: var(--primary-darker-color)!important; border-bottom-color: var(--primary-darker-color)!important; border-radius: 50%!important; width: 120px; height: 120px; animation: spin 2s linear infinite; margin: 15% auto; position: absolute; z-index: 1; } /* Estilo para destacar as atividades discriminantes na matriz */ .discriminant-activity { background-color: #f0f0f0; /* Cinza claro */ } /* Remove o sublinhado e garante que o cursor indique que é clicável */ .nav-tabs .nav-link { cursor: pointer; } /* Estilo para o conteúdo das abas */ .tab-content { border: 1px solid #dee2e6; border-top: none; padding: 1rem; background-color: #ffffff; } /* --- NOVOS ESTILOS PARA ABAS (SOBRESCRITA DO BOOTSTRAP) --- */ /* Estilo para a aba INATIVA */ .nav-tabs .nav-link { background-color: transparent; color: var(--primary-darker-color); /* Usa a cor do texto da paleta */ border-color: transparent; border-bottom: 1px solid var(--border-color); /* Mantém uma linha sutil de separação */ opacity: 0.7; /* Aplica transparência para indicar inatividade */ transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; } /* Efeito HOVER para a aba INATIVA */ .nav-tabs .nav-link:hover { opacity: 1; /* Remove a transparência ao passar o mouse */ border-color: transparent; border-bottom: 1px solid var(--border-color); } /* Estilo para a aba ATIVA */ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background-color: var(--primary-darker-color)!important; /* Cor de fundo do btn-primary */ color: var(--white)!important; /* Cor do texto do btn-primary */ border-color: var(--primary-darker-color) var(--primary-darker-color) var(--white)!important; /* Bordas alinhadas com o fundo */ font-weight: bold; opacity: 1; /* Garante opacidade total */ } #loaderModal .spinner-border, #loaderModal .text-primary { /* Usa a variável de cor da UFRN definida em identidade-ufrn.css.html */ color: var(--primary-color) !important; } /* Alvo para navegadores modernos */ input::placeholder, textarea::placeholder { color: #a9a9a9 !important; /* Um cinza mais claro e suave */ opacity: 1; /* Garante que a cor seja aplicada corretamente em alguns navegadores */ } /* Alvos para compatibilidade com navegadores mais antigos */ ::-webkit-input-placeholder { /* Chrome, Opera, Safari */ color: #a9a9a9 !important; } ::-moz-placeholder { /* Firefox 19+ */ color: #a9a9a9 !important; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #a9a9a9 !important; } :-moz-placeholder { /* Firefox 18- */ color: #a9a9a9 !important; opacity: 1; }