283 lines
6.9 KiB
SCSS
283 lines
6.9 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;
|
|
/* Global select styling to match LineGestao UI */
|
|
select,
|
|
select.form-select,
|
|
select.form-control {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 42px;
|
|
border-radius: 10px;
|
|
border: 1.5px solid rgba(15, 23, 42, 0.12);
|
|
padding: 0 36px 0 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-main);
|
|
background-color: #fff;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748B' d='M5.25 7.5 10 12.25 14.75 7.5'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 12px center;
|
|
background-size: 14px 14px;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
select:focus,
|
|
select.form-select:focus,
|
|
select.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--brand-primary);
|
|
box-shadow: 0 0 0 3px var(--brand-soft);
|
|
}
|
|
|
|
select:disabled,
|
|
select.form-select:disabled,
|
|
select.form-control:disabled {
|
|
background-color: #f1f5f9;
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
select.form-select-sm,
|
|
select.form-control-sm {
|
|
height: 36px;
|
|
font-size: 13px;
|
|
padding-right: 32px;
|
|
background-position: right 10px center;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* ========================================================== */
|
|
/* Modal Criar Usuário (forçar estilo global) */
|
|
/* ========================================================== */
|
|
app-header .modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.35);
|
|
z-index: 1400;
|
|
}
|
|
|
|
app-header .modal-card {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: min(720px, calc(100vw - 32px));
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
|
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
|
|
z-index: 1450;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
app-header .modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 20px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
app-header .modal-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
app-header .modal-body {
|
|
padding: 18px 20px 10px;
|
|
}
|
|
|
|
app-header .modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
padding: 0 20px 18px;
|
|
}
|
|
|
|
app-header .modal-card .user-form {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
app-header .modal-card .form-field {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
app-header .modal-card .form-field label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #0f172a;
|
|
}
|
|
|
|
app-header .modal-card .form-field input,
|
|
app-header .modal-card .form-field select {
|
|
height: 42px;
|
|
border-radius: 10px;
|
|
border: 1.5px solid #d7dbe6;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
color: #0f172a;
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
app-header .modal-card .form-field input:focus,
|
|
app-header .modal-card .form-field select:focus {
|
|
outline: none;
|
|
border-color: #2f6bff;
|
|
box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.15);
|
|
}
|
|
|
|
app-header .modal-card .btn-primary,
|
|
app-header .modal-card .btn-secondary {
|
|
height: 40px;
|
|
min-width: 110px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
app-header .modal-card .btn-primary {
|
|
background: #2f6bff;
|
|
color: #fff;
|
|
box-shadow: 0 10px 20px rgba(47, 107, 255, 0.2);
|
|
}
|
|
|
|
app-header .modal-card .btn-secondary {
|
|
background: #e2e8f0;
|
|
color: #0f172a;
|
|
}
|
|
|
|
app-header .modal-card .btn-primary:hover,
|
|
app-header .modal-card .btn-secondary:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
app-header .modal-card {
|
|
width: min(520px, calc(100vw - 24px));
|
|
}
|
|
|
|
app-header .modal-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
app-header .modal-card .btn-primary,
|
|
app-header .modal-card .btn-secondary {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|