/* assets/style.css (Revisado) */ /* ============================================= */ /* ESTILOS GLOBAIS DO PAINEL ADMINISTRATIVO */ /* ============================================= */ :root { --sidebar-width: 280px; } /* Estilo para o corpo das páginas INTERNAS do sistema (não-login) */ body { background-color: var(--bs-secondary-bg); } .sidebar { width: var(--sidebar-width); min-height: 100vh; } .sidebar-brand-text { font-weight: 700; font-size: 1.2rem; } .sidebar .nav-link { font-weight: 500; color: var(--bs-secondary-color); transition: all 0.2s ease-in-out; } .sidebar .nav-link.active, .sidebar .nav-link:hover { color: var(--bs-primary); background-color: var(--bs-tertiary-bg); } .sidebar .nav-link .bi { margin-right: 0.8rem; font-size: 1.1rem; vertical-align: middle; } .main-content { flex-grow: 1; padding: 1.5rem; width: calc(100% - var(--sidebar-width)); } /* ============================================= */ /* ESTILOS ESPECÍFICOS DA PÁGINA DE LOGIN */ /* ============================================= */ /* A classe .login-page é aplicada apenas no do arquivo login.php */ body.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #aed2f7; /* Fundo claro específico para o login */ animation: fadeInAnimation ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } .login-container { min-height: 100vh; } .branding-side { /* Posicionamento e Display (permanece o mesmo) */ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem; color: white; text-align: center; /* ============================================= */ /* INÍCIO DA ALTERAÇÃO */ /* ============================================= */ /* Garante que o conteúdo de texto fique por cima do overlay */ position: relative; z-index: 1; /* Propriedades para a imagem de fundo */ background-size: cover; /* Garante que a imagem cubra toda a área */ background-position: center; /* Centraliza a imagem */ background-image: url('img/brasao-sf.png'); /* Define a sua imagem de fundo */ } /* Cria o overlay semitransparente usando um pseudo-elemento */ .branding-side::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* O gradiente semitransparente que fica por cima da imagem */ /* Você pode ajustar a opacidade (o último valor, 0.6) para deixar mais escuro ou mais claro */ background: linear-gradient(135deg, rgba(13, 110, 253, 0.3), rgba(13, 100, 228, 0.3)); z-index: -1; /* Coloca o overlay atrás do texto, mas na frente da imagem de fundo */ } /* ============================================= */ /* FIM DA ALTERAÇÃO */ /* ============================================= */ .branding-side h1 { font-weight: 700; font-size: 2.5rem; } .branding-side p { font-size: 1.1rem; opacity: 0.9; } .form-side { display: flex; flex-direction: column; justify-content: center; padding: 3rem; background-color: rgba(160, 155, 144, 0.5); /* 50% de transparência */ } .login-logo { max-height: 480px; margin-bottom: 0.5rem; height: 400px; } .form-side .form-control:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } /* Estilos para o preview de imagem na modal */ .image-preview-container { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; width: 150px; height: 150px; border: 2px dashed #ccc; border-radius: 50%; margin-left: auto; margin-right: auto; overflow: hidden; /* Garante que a imagem não saia do círculo */ } .image-preview { width: 100%; height: 100%; object-fit: cover; display: none; /* Começa escondida */ } .image-preview-text { color: #888; font-size: 0.9rem; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================================= */ /* ESTILOS PARA OS CARDS DE CATEGORIA */ /* ============================================= */ .category-card { transition: all 0.2s ease-in-out; border-left: 4px solid var(--bs-primary); } .category-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .category-card .card-body { display: flex; align-items: center; justify-content: space-between; } .category-card-icon { font-size: 2.5rem; color: var(--bs-primary); opacity: 0.7; } .category-card-info h5 { margin-bottom: 0.2rem; } .category-card-info .badge { font-size: 0.75rem; } /* ============================================= */ /* ESTILOS PARA OS CARDS DE FORNECEDOR */ /* ============================================= */ .supplier-card { transition: all 0.2s ease-in-out; border-left: 4px solid var(--bs-info); /* Usando uma cor diferente (azul ciano) */ } .supplier-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .supplier-card .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; } .supplier-card-icon { font-size: 3rem; color: var(--bs-info); margin-bottom: 1rem; } /* ============================================= */ /* ESTILOS PARA OS CARDS DE MATERIAL */ /* ============================================= */ .material-card { transition: all 0.2s ease-in-out; border-left: 4px solid var(--bs-teal); /* Usando uma cor verde-água */ } .material-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .material-card .card-header { font-weight: 600; } .material-card .stock-display { font-size: 2rem; font-weight: 700; } .material-card .stock-display.text-danger { color: var(--bs-danger) !important; } /* ============================================= */ /* ESTILOS PARA OS CARDS DE AGENTE */ /* ============================================= */ .agent-card { transition: all 0.2s ease-in-out; border-left: 4px solid var(--bs-secondary); /* Usando a cor cinza */ } .agent-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .agent-card .card-body { position: relative; /* Para o badge de status */ } /* ============================================= */ /* REGRAS DE RESPONSIVIDADE (PAINEL INTERNO) */ /* ============================================= */ @media (max-width: 991.98px) { .sidebar { display: none !important; } .main-content { width: 100%; } }