105 lines
3.0 KiB
SCSS
105 lines
3.0 KiB
SCSS
@import "bootstrap-icons/font/bootstrap-icons.css";
|
|
|
|
/* Variáveis baseadas na sua marca, mas modernizadas */
|
|
:root {
|
|
--brand-primary: #E33DCF;
|
|
--brand-hover: #c91eb5;
|
|
--brand-soft: rgba(227, 61, 207, 0.08);
|
|
--text-main: #0F172A; /* Slate 900 - Preto moderno */
|
|
--text-muted: #64748B; /* Slate 500 - Cinza moderno */
|
|
--bg-body: #F8FAFC;
|
|
--glass-border: rgba(255, 255, 255, 0.6);
|
|
--glass-bg: rgba(255, 255, 255, 0.7);
|
|
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
|
|
--radius-lg: 16px;
|
|
--font-sans: 'Inter', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-body);
|
|
color: var(--text-main);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Garante scroll da página em todo o app */
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
/* Utilitário de animação suave */
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Empurra o conteúdo pra baixo do header fixo */
|
|
.app-main.has-header {
|
|
padding-top: 84px; /* altura segura p/ header (mobile/desktop) */
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.app-main.has-header {
|
|
padding-top: 96px;
|
|
}
|
|
}
|
|
|
|
/* ========================================================== */
|
|
/* 🚀 GLOBAL FIX: Proporção Horizontal e Vertical */
|
|
/* ========================================================== */
|
|
|
|
/* 1. HORIZONTAL: Mantém a proporção mais "fechada" que você gostou */
|
|
.container-geral,
|
|
.container-fat,
|
|
.container-mureg,
|
|
.container-troca,
|
|
.container-geral-responsive {
|
|
max-width: 1100px !important; /* Largura controlada */
|
|
width: 96% !important; /* Margem segura em telas menores */
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* 2. TABELAS: Remove limites de largura mínima desnecessários */
|
|
.table-modern {
|
|
width: 100% !important;
|
|
min-width: unset !important;
|
|
}
|
|
|
|
/* 3. VERTICAL: Libera o crescimento dos cards em todas as páginas */
|
|
.geral-card,
|
|
.fat-card,
|
|
.mureg-card,
|
|
.troca-card,
|
|
.vigencia-page .geral-card {
|
|
height: auto !important; /* Cresce conforme o conteúdo */
|
|
max-height: none !important; /* Remove limites fixos */
|
|
min-height: 80vh; /* Garante um tamanho mínimo bonito */
|
|
overflow: visible !important; /* Remove scroll interno, usa o da janela */
|
|
margin-bottom: 40px !important; /* Respiro no final */
|
|
}
|
|
|
|
/* 4. LISTAS E WRAPPERS: Destrava o crescimento interno */
|
|
.groups-container,
|
|
.table-wrap,
|
|
.table-wrap-tall,
|
|
.inner-table-wrap {
|
|
height: auto !important;
|
|
max-height: none !important; /* CRÍTICO: Remove travas de pixels */
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 5. PÁGINAS: Garante que o scroll do navegador funcione */
|
|
.geral-page,
|
|
.users-page,
|
|
.fat-page,
|
|
.mureg-page,
|
|
.troca-page {
|
|
overflow-y: auto !important;
|
|
height: auto !important;
|
|
display: block !important;
|
|
} |