/* ========================================================================== VARIÁVEIS DE CORES – DEFINA A PALETA CENTRAL -------------------------------------------------------------------------- Altere aqui os valores para propagar as mudanças em todo o CSS. As cores foram ajustadas para apresentar um visual um pouco mais sóbrio, com tons levemente mais escuros ou suavizados conforme indicado. ========================================================================= */ :root { --azul-claro: #b0d4ff; /* Azul suave: levemente mais escuro que o original (#cce7ff) */ --branco: #fefefe; /* Branco suavizado, menos agressivo que o branco puro */ --borda-base: 1px solid #999; /* Borda padrão: tom um pouco mais intenso */ --borda-escura: 2px solid #555; /* Borda de destaque, usada em abas e separadores */ --tab-bg: #a0b0c5; /* Fundo das abas com tom mais profundo */ --amarelo-claro: #ffffe0; /* Fundo de foco: amarelo muito suave */ --azul-escuro: #002244; /* Texto e bordas de foco: azul intensificado */ --azul-profundo: #002244; /* Moldura/foco: mesma cor para reforçar o destaque */ --vermelho-claro: #ffe6e6; /* Fundo de erro/obrigatório: com tom suave */ --vermelho-escuro: #8b0000; /* Texto para error: vermelho bem intenso */ --areia: #eae3d8; /* Hover para lista/grids: tom de areia mais sutil */ --cinza-claro: #e0e0e0; /* Zebra para linhas de tabelas: cinza levemente mais escuro */ --laranja: #ff8c00; /* Botão alerta: laranja mais queimado */ --marrom-escuro: #4b2600; /* Texto alerta: marrom profundo */ --verde-escuro: #004d00; /* Botão de confirmação: verde intensificado */ --amarelo: #ffee58; /* Botão de cancelamento: amarelo suave */ --preto: #000000; /* Preto padrão */ } /* ========================================================================== CONFIGURAÇÕES GERAIS DE LAYOUT – BACKGROUND E DIMENSÕES -------------------------------------------------------------------------- Estes estilos aplicam-se a páginas de funções principais (list, view, add, edit, search, etc.) definidas com classes no body. ========================================================================= */ body.function-list, body.function-view, body.function-add, body.function-edit, body.function-search, body.function-report, body.function-dashboard, body.function-print, body.function-register { background: linear-gradient(to bottom, var(--azul-claro), var(--branco)) !important; margin: 0; padding: 0; min-height: 100vh; /* Ocupa toda a altura da janela */ } /* ========================================================================== ESTILO DA PÁGINA DE LOGIN – BACKGROUND COM IMAGEM FIXA -------------------------------------------------------------------------- A página de login (body.function-login) exibe uma imagem de fundo. ========================================================================= */ body.function-login { background: url("http://www.groenitz.com.br/GTO/images/homepage-old.jpg") no-repeat center center fixed; background-size: cover; margin: 0; height: 100vh; } /* ========================================================================== CONTAINERS E SEÇÕES – BORDAS E MARGENS PADRONIZADAS -------------------------------------------------------------------------- A classe .r-section é aplicada a containers de conteúdo (sessões) para definir uma borda um pouco mais grossa, com espaçamento interno e margem inferior. ========================================================================= */ .r-section { border: calc(2 * 1px) solid #aaa; /* Dobra a espessura da borda-base */ padding: 15px; /* Espaço interno para o conteúdo */ margin-bottom: 20px; /* Espaço entre seções */ } /* ========================================================================== ABAS / TABS – PERSONALIZAÇÃO DO FUNDO E DA BORDA -------------------------------------------------------------------------- Utilizada em elementos de navegação via abas. No PHPRunner estes estilos costumam ser aplicados à classe .bsgrid_tabs. ========================================================================= */ .bsgrid_tabs { background-color: var(--tab-bg); /* Fundo das abas */ border: var(--borda-escura); /* Borda de destaque */ padding: 10px; margin-top: 20px; } /* ========================================================================== MOLDURAS DE CAMPOS / BLOCO DE FORMULÁRIO – ARREDONDADOS COM SOMBRA -------------------------------------------------------------------------- Aplica-se a blocos de formulário (ex.: .r-field-block ou .form-group) para padronizar campos com bordas arredondadas e efeito de relevo. ========================================================================= */ .r-field-block, .form-group { border: var(--borda-base); border-radius: 6px; box-shadow: 3px 3px 6px rgba(0,0,0,0.2); padding: 10px; } /* ========================================================================== CAMPOS EM FOCO – DESTAQUE AMARELO COM SOMBRA INTERNA -------------------------------------------------------------------------- Define estilos para inputs, selects e textareas em foco; remove o outline e aplica moldura e sombra para aumento no destaque. ========================================================================= */ input:focus, select:focus, textarea:focus { background-color: var(--amarelo-claro); color: var(--azul-escuro); border: 3px solid var(--azul-profundo); outline: none; position: relative; /* Necessário para pseudo-elementos, se houver */ /* Sombra interna para efeito de profundidade */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.2) inset; } /* ========================================================================== CAMPOS INVÁLIDOS / COM ERRO – ESTILIZAÇÃO COM ANIMAÇÃO -------------------------------------------------------------------------- Aplica-se a campos obrigatórios ou com erro (incluindo classes de erro comuns no PHPRunner). Utiliza um efeito de "bordas piscantes" para chamar a atenção. ========================================================================= */ input:invalid, select:invalid, textarea:invalid, input[required]:invalid, select[required]:invalid, textarea[required]:invalid, input.error, select.error, textarea.error, .has-error input, .has-error select, .has-error textarea, .validation-error, .form-error input, .form-error select, .form-error textarea, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input[style*="border-color: red"], select[style*="border-color: red"], textarea[style*="border-color: red"] { background-color: var(--vermelho-claro) !important; color: var(--vermelho-escuro) !important; border: 2px dashed red !important; animation: blink-border 0.7s infinite !important; outline: none !important; } @keyframes blink-border { 0%, 100% { border-color: red; } 50% { border-color: transparent; } } /* ========================================================================== ESTILO DA TABELA (GRID) – LINHAS ZEBRADAS E HOVER -------------------------------------------------------------------------- A classe .r-grid é utilizada nas tabelas de dados geradas pelo PHPRunner, aplicando um efeito "zebra" para alternar cores de fundo e destaque em hover. ========================================================================= */ .r-grid tr:nth-child(even) { background-color: var(--cinza-claro); } .r-grid tr:hover { background-color: var(--areia); } /* Estilo para linha selecionada em areia */ tr.selected { background-color: --areia; } /* Define a cor de fundo quando o mouse passa sobre qualquer linha */ tr:hover { background-color: --areia !important; /* Bege escuro com alta prioridade */ } /* Para garantir que o hover funcione em linhas zebradas */ tr:nth-child(odd):hover, tr:nth-child(even):hover { background-color: --areia !important; /* Bege escuro com alta prioridade */ } /* Garante que, dentro da div que contém a tabela (por exemplo, .r-grid), a tabela com a classe .rnr-gridtable receba o efeito de hover. */ .r-grid table.rnr-gridtable tbody tr:hover { background-color: var(--areia) !important; } /* ========================================================================== BOTÕES – TRANSIÇÃO E ESTILIZAÇÃO CUSTOMIZADA -------------------------------------------------------------------------- A classe .btn (herdada do Bootstrap) recebe transição; classes customizadas (.rnr-btn-alerta, .rnr-btn-confirmar, .rnr-btn-cancelar) definem cores específicas para ações. ========================================================================= */ .btn { transition: all 0.3s ease; } .btn:active { filter: invert(100%); } /* Botão de Alerta: utilizado para ações que requerem atenção imediata */ .rnr-btn-alerta { background-color: var(--laranja); color: var(--marrom-escuro); } /* Botão de Confirmação: para ações de salvamento ou confirmação */ .rnr-btn-confirmar { background-color: var(--verde-escuro); color: var(--branco); } /* Botão de Cancelamento: para ações de reversão ou cancelamento */ .rnr-btn-cancelar { background-color: var(--amarelo); color: var(--preto); } /* ========================================================================== MENSAGENS DE SISTEMA – ESTILIZAÇÃO COM ANIMAÇÃO (FLASH) -------------------------------------------------------------------------- A classe .rnr-message-block é aplicada em mensagens (alerts) do sistema. O efeito "flash-bg" alterna levemente o fundo para chamar a atenção. ========================================================================= */ .rnr-message-block { background-color: var(--amarelo); color: var(--preto); padding: 10px; border: 1px solid #ccc; animation: flash-bg 1s infinite; } @keyframes flash-bg { 0%, 100% { background-color: var(--amarelo); } 50% { background-color: #fff176; } } /* ========================================================================== UTILIDADES DE ALINHAMENTO E ORIENTAÇÃO -------------------------------------------------------------------------- Estas classes auxiliam na padronização dos alinhamentos: - .r-align-left: alinha o conteúdo à esquerda. - .r-align-right: alinha o conteúdo à direita. - .r-ori-vert: pode complementar o alinhamento vertical, se necessário. ========================================================================= */ .r-align-left { text-align: left; } .r-align-right { text-align: right; } /* Exemplo para alinhamento vertical, se for necessário */ .r-ori-vert { vertical-align: middle; } /* ========================================================================== OBSERVAÇÕES: -------------------------------------------------------------------------- 1. Os nomes das classes foram escolhidos para se aproximarem do padrão utilizado pelo PHPRunner, como "r-section", "r-field-block", "rnr-btn-*" e "r-grid". Caso seu template possua classes dinâmicas (injetadas via variáveis, como {$rowclass}, {$item_simple_grid_field1}, etc.), avalie a necessidade de complementá-las num arquivo CSS complementar. 2. As variáveis definidas em :root são a base para todas as cores. Alterá-las garantirá a propagação definida para todos os componentes. 3. Componentes como navegação (navbar, dropdown, etc.) não foram reproduzidos aqui, pois os arquivos padrão do Bootstrap (normalmente, styles/default.css) já os definem. Se quiser personalizá-los, considere incluir regras utilizando o mesmo padrão (ex.: .navbar-default, .navbar-toggle). 4. Verifique a responsividade e contraste das cores, principalmente em dispositivos móveis, para garantir legibilidade e bom uso dos espaçamentos. 5. Se precisar estender a personalização para colunas específicas do grid (ex.: Voucher_class, Nome_class, etc.), crie regras adicionais conforme a necessidade. -------------------------------------------------------------------------- Referências: - Base de variáveis e paleta de cores: adaptado conforme o script inicial. - Padrão PHPRunner: nomes como r-field-block, r-section e r-grid foram implementados para facilitar a manutenção dos estilos. ========================================================================= */