/* Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 */ /* CSS files add styling rules to your content */ /** * 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; border-top: 10px solid; color: var(--primary-color); display: flex; flex-direction: column; min-height: 100vh !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; } .floating-report-button { position: fixed; bottom: 90px; /* Posicionado 70px acima do botão de IA (20px + 70px) */ right: 20px; z-index: 1000; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.25); padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } /*Ajustar gradiente smartphones */ /* */ h1 { text-align: center; } .toolbar { width: 100%; display: flex; margin-top: 16px; justify-content: center; } .instructions { text-align: center; margin-bottom: 16px; } output { display: none; color: gray; margin: 32px 16px; text-align: center; border: 1px silver dashed; padding: 16px; border-radius: 16px; } button { display: block; cursor: grab; font-size: 25px; border: 2px solid #007bbf; border-radius: 50px; padding: 16px; margin: 0 8px; color: white; background-color: #007bbf; } /* Hide Install button until beforeinstallprompt fires */ #install { display: none; } .toolbar { text-align: center; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px; } .button-container { display: flex; justify-content: space-around; align-items: center; margin-top: 20px !important; } #usuario_logado { padding-top: 30px !important; font-weight: bolder; } .ocultar { display: none; } /*Aviso cookies */ #gro-cookie-notice { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); position: fixed; bottom: 0; margin-bottom: 4.5rem; z-index: 10000; width: 100%; color: #fff; background: #4E4E4E; padding: 2.5rem 3rem; font-family: "TypoPRO Liberation Sans", arial; } .cookie-consent-modal p { width: inherit; margin: auto; padding-left: 10%; padding-right: 15%; } .cookie-consent-modal a { color: #79CBF2 !important; } .cookie-consent-modal .btn { margin: 1rem auto 0; display: block; font-weight: bold; color: #4E4E4E; background-color: #fff; border-color: #fff; width: auto !important; } .btn { transition: all 250ms linear 0ms; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; padding: 6px 12px; font-size: 20px; font-weight: 700; line-height: 1.428571429; border-radius: 5px; margin: auto; width: 100%; } /* --- CSS DO FOOTER (IDENTIDADE UFRN COSMOS) --- */ /* Isso empurra o footer para o rodapé da tela */ .container.text-center { flex: 1 0 auto; } /* 4. Ajustes no Footer */ footer, .container-footer { flex-shrink: 0; /* Impede que o footer seja esmagado */ background-color: var(--white); border-top: 3px solid var(--primary-color); padding: 20px; margin-top: 70px; /* Distância do conteúdo de cima */ margin-bottom: 0 !important; /* Remove qualquer espaço abaixo */ width: 100%; } /* Ajuste da Logo */ .footer-logo { max-width: 150px; height: auto; margin-bottom: 15px; } /* Texto e Contatos */ .footer-contact p { font-size: 14px; color: var(--secondary-darkest-color); margin-bottom: 5px; } .footer-contact a { color: var(--primary-dark-color); text-decoration: none; transition: color 0.3s ease; } .footer-contact a:hover { color: var(--primary-color); text-decoration: underline; } /* Lista de Ícones Sociais */ .footer-social { display: flex; justify-content: flex-end; align-items: center; list-style: none; padding: 0; margin: 0; gap: 15px; } .footer-social li { display: inline-block; } .footer-social a { color: var(--primary-dark-color); font-size: 24px; transition: transform 0.2s ease, color 0.2s ease; } .footer-social a:hover { color: var(--primary-color); transform: translateY(-3px); } /* Ajuste específico para a imagem do Zimbra na lista */ .footer-social img { filter: grayscale(0.2); transition: filter 0.3s; } .footer-social img:hover { filter: grayscale(0); } /* Estrutura de Contatos Lado a Lado */ .footer-contact p { display: flex; flex-wrap: wrap; gap: 30px; /* Espaço entre os dois blocos */ margin: 0; font-size: 14px; } /* Sub-blocos de contato */ .contact-group { flex: 1; min-width: 200px; /* Evita que fiquem muito apertados */ } /* --- RESPONSIVIDADE (Mobile First) --- */ @media (max-width: 767px) { .container .row { text-align: center; display: flex; flex-direction: column; align-items: center; } .footer-social { justify-content: center; margin-top: 20px; } /* Remove floats do bootstrap antigo que podem quebrar o layout mobile */ .pull-right { float: none !important; } .col-md-2, .col-md-6, .col-md-4 { margin-bottom: 20px; width: 100%; } } /* Ajuste para alinhar verticalmente no desktop */ @media (min-width: 768px) { .footer-contact { border-left: 1px solid var(--secondary-light-color); padding-left: 25px; } } /*Vlibras */ div[vw] { top: 41% !important; }