/*!****************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/density.css ***! \****************************************************************************************************************************************************************************************************************************************************************/ /** * V6: Estilos de Densidade de Interface * * Define variáveis CSS e estilos globais para suportar dois modos: * - Comfortable: Espaçamentos maiores, mais ar, melhor para desktop * - Compact: Espaçamentos reduzidos, mais denso, ideal para mobile ou ver mais informação * * Uso: O atributo data-density é aplicado no via UISettingsContext */ /* ============================================ VARIÁVEIS GLOBAIS DE DENSIDADE ============================================ */ :root { /* Modo Comfortable (padrão) */ --density-sidebar-width: 280px; --density-topbar-height: 80px; --density-button-height: 40px; --density-button-padding-x: 16px; --density-button-padding-y: 10px; --density-button-font-size: 14px; --density-input-height: 40px; --density-input-padding-x: 12px; --density-input-padding-y: 8px; --density-input-font-size: 14px; --density-table-row-height: 56px; --density-table-cell-padding-x: 16px; --density-table-cell-padding-y: 12px; --density-card-padding: 24px; --density-card-gap: 16px; --density-modal-padding: 24px; --density-kpi-padding: 20px; --density-kpi-title-size: 14px; --density-kpi-value-size: 32px; --density-spacing-xs: 4px; --density-spacing-sm: 8px; --density-spacing-md: 16px; --density-spacing-lg: 24px; --density-spacing-xl: 32px; } /* Modo Compact - Valores reduzidos */ [data-density='compact'] { --density-sidebar-width: 240px; --density-topbar-height: 60px; --density-button-height: 32px; --density-button-padding-x: 12px; --density-button-padding-y: 6px; --density-button-font-size: 13px; --density-input-height: 32px; --density-input-padding-x: 10px; --density-input-padding-y: 6px; --density-input-font-size: 13px; --density-table-row-height: 40px; --density-table-cell-padding-x: 12px; --density-table-cell-padding-y: 8px; --density-card-padding: 16px; --density-card-gap: 12px; --density-modal-padding: 16px; --density-kpi-padding: 12px; --density-kpi-title-size: 12px; --density-kpi-value-size: 24px; --density-spacing-xs: 2px; --density-spacing-sm: 4px; --density-spacing-md: 8px; --density-spacing-lg: 16px; --density-spacing-xl: 24px; } /* ============================================ APLICAÇÃO NOS COMPONENTES CHAKRA UI ============================================ */ /* Botões */ [data-density='compact'] .chakra-button { min-height: var(--density-button-height); padding-left: var(--density-button-padding-x); padding-right: var(--density-button-padding-x); font-size: var(--density-button-font-size); } /* Inputs, Selects, Textareas */ [data-density='compact'] .chakra-input, [data-density='compact'] .chakra-select, [data-density='compact'] .chakra-textarea { min-height: var(--density-input-height); padding-left: var(--density-input-padding-x); padding-right: var(--density-input-padding-x); font-size: var(--density-input-font-size); } /* Form Labels */ [data-density='compact'] .chakra-form__label { font-size: 12px; margin-bottom: 4px; } /* Tables */ [data-density='compact'] .chakra-table th, [data-density='compact'] .chakra-table td { padding-left: var(--density-table-cell-padding-x); padding-right: var(--density-table-cell-padding-x); padding-top: var(--density-table-cell-padding-y); padding-bottom: var(--density-table-cell-padding-y); font-size: 13px; } [data-density='compact'] .chakra-table tbody tr { min-height: var(--density-table-row-height); } /* Cards */ [data-density='compact'] .chakra-card__body { padding: var(--density-card-padding); } [data-density='compact'] .chakra-card__header { padding: var(--density-card-padding); padding-bottom: var(--density-spacing-md); } [data-density='compact'] .chakra-card__footer { padding: var(--density-card-padding); padding-top: var(--density-spacing-md); } /* Modais */ [data-density='compact'] .chakra-modal__body { padding: var(--density-modal-padding); } [data-density='compact'] .chakra-modal__header { padding: var(--density-modal-padding); padding-bottom: var(--density-spacing-md); font-size: 18px; } [data-density='compact'] .chakra-modal__footer { padding: var(--density-modal-padding); padding-top: var(--density-spacing-md); } /* Stacks */ [data-density='compact'] .chakra-stack { gap: var(--density-spacing-md); } /* Headings em modo compacto */ [data-density='compact'] h1.chakra-heading { font-size: 28px; } [data-density='compact'] h2.chakra-heading { font-size: 22px; } [data-density='compact'] h3.chakra-heading { font-size: 18px; } [data-density='compact'] h4.chakra-heading { font-size: 16px; } /* KPI Cards - Componente customizado */ [data-density='compact'] .kpi-card { padding: var(--density-kpi-padding); } [data-density='compact'] .kpi-title { font-size: var(--density-kpi-title-size); } [data-density='compact'] .kpi-value { font-size: var(--density-kpi-value-size); } /* Badges e Tags */ [data-density='compact'] .chakra-badge, [data-density='compact'] .chakra-tag { font-size: 11px; padding: 2px 8px; } /* Icon Buttons */ [data-density='compact'] .chakra-icon-button { min-width: 32px; min-height: 32px; } /* ============================================ CLASSES UTILITÁRIAS ============================================ */ /* Espaçamentos responsivos */ .spacing-xs { margin: var(--density-spacing-xs); } .spacing-sm { margin: var(--density-spacing-sm); } .spacing-md { margin: var(--density-spacing-md); } .spacing-lg { margin: var(--density-spacing-lg); } .spacing-xl { margin: var(--density-spacing-xl); } /* Padding responsivo */ .padding-xs { padding: var(--density-spacing-xs); } .padding-sm { padding: var(--density-spacing-sm); } .padding-md { padding: var(--density-spacing-md); } .padding-lg { padding: var(--density-spacing-lg); } .padding-xl { padding: var(--density-spacing-xl); } /* Gap responsivo para flex/grid */ .gap-xs { gap: var(--density-spacing-xs); } .gap-sm { gap: var(--density-spacing-sm); } .gap-md { gap: var(--density-spacing-md); } .gap-lg { gap: var(--density-spacing-lg); } .gap-xl { gap: var(--density-spacing-xl); } /* ============================================ RESPONSIVIDADE MOBILE ============================================ */ /* Em telas pequenas, adicionar mais redução de espaço */ @media (max-width: 768px) { [data-density='comfortable'] { /* Em mobile, mesmo no modo comfortable, reduzir um pouco */ --density-card-padding: 16px; --density-modal-padding: 16px; --density-spacing-lg: 16px; --density-spacing-xl: 24px; } [data-density='compact'] { /* Em mobile compact, reduzir ainda mais */ --density-card-padding: 12px; --density-modal-padding: 12px; --density-spacing-lg: 12px; --density-spacing-xl: 16px; } }