/* * CSS próprio do sistema (fora dos arquivos de vendor/tema) — lugar pra * estilos de componentes customizados nossos, sem editar direto os * arquivos de terceiros em assets/vendor/. * * Modal de confirmação (confirmMsg/promptNumeroMsg em assets/js/funcoes.js): * NÃO redefine nada de .custom-alert-* de propósito — o alertMsg já tem * seu CSS certo em assets/vendor/css/rtl/core.css, sempre carregado, e * duplicar aqui (mesmo que com pequenas diferenças) sobrescreveria o que * já funciona. */ .custom-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transition: opacity 0.2s ease; } .custom-confirm-overlay.show { opacity: 1; } .custom-confirm-box { background: white; border-radius: 12px; padding: 0; min-width: 400px; max-width: 540px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); transform: scale(0.9); transition: transform 0.2s ease; overflow: hidden; } .custom-confirm-overlay.show .custom-confirm-box { transform: scale(1); } .custom-confirm-header { padding: 24px 30px; border-bottom: 1px solid #e9ecef; display: flex; align-items: center; gap: 16px; } .custom-confirm-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .custom-confirm-icon.delete { background: #f8d7da; color: #dc3545; } .custom-confirm-icon.warning { background: #fff3cd; color: #ffc107; } .custom-confirm-icon.info { background: #d1ecf1; color: #0dcaf0; } .custom-confirm-title { font-size: 18px; font-weight: 600; color: #333; margin: 0; } .custom-confirm-message { padding: 24px 30px; font-size: 15px; color: #666; line-height: 1.6; } .custom-confirm-actions { padding: 20px 30px; background: #f8f9fa; display: flex; gap: 12px; justify-content: flex-end; } .custom-confirm-actions .btn { min-width: 100px; font-weight: 500; padding: 8px 20px; } .prompt-numero-input { margin-bottom: 8px; } /* * Modo escuro: o customizador do tema (assets/vendor/js/template-customizer.js) * alterna a classe "dark-style" no e troca o link de core.css por * core-dark.css — o alertMsg fica correto sozinho porque o .custom-alert-* * dele mora dentro desses dois arquivos (cada um com sua paleta). Como o * .custom-confirm-* mora aqui, num arquivo único sempre carregado, precisa * da própria variante escura em vez de herdar a troca de arquivo. * * Paleta copiada do .custom-alert-box de core-dark.css (mesma "cor de * cartão flutuante" que o tema já usa lá), pra ficar visualmente igual. */ html.dark-style .custom-confirm-box { background: #2f3349; border: 1px solid rgba(225, 222, 245, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } html.dark-style .custom-confirm-header { border-bottom-color: rgba(225, 222, 245, 0.1); } /* Mesmo padrão de fundo translúcido + cor sólida que core-dark.css usa pros ícones de .custom-alert-icon no escuro (pastel sólido não combina com fundo escuro). */ html.dark-style .custom-confirm-icon.delete { background: rgba(255, 76, 81, 0.2); color: #ff4c51; } html.dark-style .custom-confirm-icon.warning { background: rgba(255, 159, 67, 0.2); color: #ff9f43; } html.dark-style .custom-confirm-icon.info { background: rgba(0, 186, 209, 0.2); color: #00bad1; } html.dark-style .custom-confirm-title { color: #e1def5; } html.dark-style .custom-confirm-message { color: rgba(225, 222, 245, 0.7); } html.dark-style .custom-confirm-actions { background: rgba(225, 222, 245, 0.03); } /* .prompt-numero-input é um .form-control comum do Bootstrap — o modo escuro dele já vem de core-dark.css, não precisa de regra própria aqui. */ @media (max-width: 576px) { .custom-confirm-box { min-width: 320px; max-width: 90%; } .custom-confirm-header { padding: 20px 24px; } .custom-confirm-message { padding: 20px 24px; } .custom-confirm-actions { padding: 16px 24px; flex-direction: column-reverse; } .custom-confirm-actions .btn { width: 100%; } .custom-confirm-icon { width: 56px; height: 56px; font-size: 28px; } }