/* ===================================================================== CoreAPP - Ajustes globais de tabela ===================================================================== Carregado em public/index.php, vale para todas as telas. HOVER O padrao do Bootstrap 5 e do DataTables e rgba(0,0,0,.075), claro demais para distinguir a linha sob o cursor em tabelas com muitas colunas. Aqui ele sobe para .10 - diferenca sutil, so o suficiente para a linha se destacar sem competir com a listra do table-striped (.05). Por que o prefixo `body`: o CSS do DataTables e injetado por pagina, depois desta folha. Sem o ganho de especificidade que o `body` da, a regra do DataTables venceria por ordem de declaracao. Vale apenas para tabelas com a classe `table-hover` - que e o que ativa o efeito no Bootstrap e no DataTables. ===================================================================== */ body .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--app-row-hover); } body table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--app-row-hover); } /* ===================================================================== ACESSIBILIDADE DAS TABELAS ===================================================================== Configuracoes > Acessibilidade. As classes vem do , escritas pelo servidor em public/index.php a partir da preferencia do usuario logado. O escopo e so `table`: os controles do DataTables (busca, "Mostrar N registros", paginacao) ficam fora da tabela e continuam normais, assim como o resto da interface. Prefixo `body.` pelo mesmo motivo do bloco de hover acima: o CSS do DataTables e injetado por pagina, depois desta folha. Campos de formulario ficam de fora do uppercase de proposito. O text-transform muda so a exibicao, nao o valor digitado — quem edita uma celula veria MAIUSCULA na tela e salvaria minuscula no banco. ===================================================================== */ body.a11y-tables-bold table th, body.a11y-tables-bold table td { font-weight: 700; } body.a11y-tables-uppercase table th, body.a11y-tables-uppercase table td { text-transform: uppercase; } body.a11y-tables-uppercase table input, body.a11y-tables-uppercase table select, body.a11y-tables-uppercase table textarea { text-transform: none; } /* ===================================================================== DATA-TABLE ===================================================================== Listagem calma para qualquer tela. Sem table-striped / table-bordered. Prefixo `body` pelo mesmo motivo do hover: o CSS do DataTables entra depois desta folha. Tom de vencimento: faixa de 3px a esquerda e tinta leve na linha. Nao usar table-danger / table-warning na linha inteira nessas listagens. ===================================================================== */ body .data-table.table { --bs-table-bg: var(--app-surface); --bs-table-striped-bg: var(--app-surface); --bs-table-border-color: var(--slate-200); border-color: transparent; overflow: visible; } body .data-table.table > :not(caption) > * > * { border-width: 0 0 1px 0; border-color: var(--slate-200); background-color: var(--app-surface); } body .data-table thead th { font-size: 0.75rem; font-weight: 500; color: var(--slate-500); background-color: var(--app-surface); border-bottom: 1px solid var(--slate-200); padding: 0.6rem 0.75rem; white-space: nowrap; } body .data-table tbody td { padding: 0.55rem 0.75rem; vertical-align: middle; } body table.dataTable.data-table tbody tr.odd > *, body table.dataTable.data-table tbody tr.even > * { background-color: var(--app-surface); box-shadow: none; } body .data-table-group > td { background-color: var(--slate-100) !important; color: var(--app-text-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; border-top: 1px solid var(--slate-200); box-shadow: none !important; } body .row-tone-overdue > td { background-color: var(--app-tone-overdue-tint) !important; } body .row-tone-due-today > td { background-color: var(--app-tone-due-today-tint) !important; } body .row-tone-overdue > td:first-child, body .row-tone-due-today > td:first-child { box-shadow: inset 3px 0 0 var(--app-tone-overdue); } body .row-tone-due-today > td:first-child { box-shadow: inset 3px 0 0 var(--app-tone-due-today); } body table.dataTable.table-hover > tbody > tr.row-tone-overdue:hover > * { box-shadow: inset 0 0 0 9999px var(--app-row-hover); } body table.dataTable.table-hover > tbody > tr.row-tone-overdue:hover > *:first-child { box-shadow: inset 3px 0 0 var(--app-tone-overdue), inset 0 0 0 9999px var(--app-row-hover); } body table.dataTable.table-hover > tbody > tr.row-tone-due-today:hover > * { box-shadow: inset 0 0 0 9999px var(--app-row-hover); } body table.dataTable.table-hover > tbody > tr.row-tone-due-today:hover > *:first-child { box-shadow: inset 3px 0 0 var(--app-tone-due-today), inset 0 0 0 9999px var(--app-row-hover); } body table.dataTable.table-hover > tbody > tr:not(.data-table-group):not(.row-tone-overdue):not(.row-tone-due-today):hover > * { background-color: var(--slate-50) !important; } body table.dataTable.table-hover > tbody > tr:not(.data-table-group):not(.row-tone-overdue):not(.row-tone-due-today):hover > *:first-child { box-shadow: inset 3px 0 0 var(--slate-400); } .status-pill { font-size: 0.75rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 999px; } .status-pill.bg-warning { color: var(--app-tone-due-today); background-color: var(--app-warning-tint); } .status-pill.bg-danger { color: var(--app-tone-overdue); background-color: var(--app-danger-tint); } .status-pill.bg-success { color: var(--app-tone-success) !important; background-color: var(--app-tone-success-tint) !important; } /* ===================================================================== CELL-SUMMARY Titulo + linha auxiliar na mesma celula. Serve em qualquer listagem. ===================================================================== */ .cell-summary { min-width: 0; text-align: left; } .cell-summary-title { font-size: 0.875rem; font-weight: 500; color: var(--app-heading); line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .cell-summary-extra { font-weight: 500; color: var(--slate-500); } .cell-summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.15rem; font-size: 0.75rem; color: var(--slate-500); line-height: 1.3; } .cell-summary-party { color: var(--app-text-2); } .cell-summary-code { font-weight: 600; color: var(--app-text-2); } .tag-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--slate-600); font-weight: 400; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag-indicator::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--tag-dot, var(--slate-400)); } .cell-summary-note { font-size: 0.6875rem; color: var(--slate-400); font-style: normal; font-weight: 400; text-transform: lowercase; overflow-wrap: anywhere; word-break: break-word; } .money-cell { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } /* ===================================================================== ROW-ACTIONS Icone primario + dropdown Acoes. Serve em qualquer listagem. ===================================================================== */ .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.25rem; white-space: nowrap; } .row-actions-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 1.75rem; padding: 0.2rem 0.5rem; border: 1px solid var(--slate-200); border-radius: 0.375rem; background: var(--app-surface); color: var(--app-text-2); font-size: 0.75rem; line-height: 1.2; cursor: pointer; } .row-actions-btn:hover, .row-actions-btn:focus { background: var(--slate-100); color: var(--app-text); border-color: var(--slate-300); } .row-actions-btn.dropdown-toggle::after { margin-left: 0.2rem; } .row-actions .dropdown-menu { font-size: 0.8125rem; min-width: 11rem; } .row-actions .dropdown-item { cursor: pointer; } /* ===================================================================== BULK-BAR Aparece ao selecionar linhas. Mesma peca em qualquer listagem. ===================================================================== */ .bulk-bar { display: none; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.75rem; margin: 0.75rem 0 0; background: var(--slate-100); border-radius: 0.5rem; font-size: 0.875rem; color: var(--app-text-2); } .bulk-bar.is-open { display: flex; } .bulk-bar-count { color: var(--app-text); margin-right: 0.25rem; } .bulk-bar-action, .bulk-bar-clear { display: inline-flex; align-items: center; min-height: 1.85rem; padding: 0.2rem 0.65rem; border-radius: 0.375rem; font-size: 0.8125rem; cursor: pointer; } .bulk-bar-action { border: 1px solid var(--slate-200); background: var(--app-surface); color: var(--app-text); } .bulk-bar-action:hover, .bulk-bar-action:focus { background: var(--slate-50); border-color: var(--slate-300); } .bulk-bar-clear { border: 0; background: transparent; color: var(--app-link); } .bulk-bar-clear:hover { color: var(--app-link-hover); }