` renderizava em
Montserrat 14px: a classe nunca chegou a valer numa célula. Este seletor empata em (0,4,0) e
vem depois na cascata (dashboard.css carrega após MudBlazor.min.css no ).
Vale para QUALQUER MudTable, não só .dash-table, porque o obstáculo é do MudBlazor. */
.mud-table-root .mud-table-body .mud-table-cell.mono-tech {
font-family: var(--font-tech);
font-weight: 600;
letter-spacing: 0.02em;
}
/* Tamanho técnico: só nas tabelas. O primeiro seletor cobre spans aninhados na célula; o
segundo precisa do (0,4,0) para vencer o `font-size` de `.dash-table .mud-table-body
.mud-table-cell` (0,3,0) quando a classe está na própria | . */
.dash-table .mono-tech {
font-size: var(--type-table-tech);
}
.dash-table .mud-table-body .mud-table-cell.mono-tech {
font-size: var(--type-table-tech);
}
.dash-table .mud-table-row:last-child .mud-table-cell {
border-bottom: none;
}
.dash-table .mud-table-row:hover {
background-color: var(--tm-bg);
}
/* ---------- .table-type-standard: só a TIPOGRAFIA da tabela ----------
Duas das 44 tabelas nasceram fora do kit .dash-table e por isso ficaram no default do
MudBlazor — cabeçalho em subtitle2 (14px, caixa normal) e corpo em body2 — enquanto as outras
42 seguem a escala 13/14/12/15:
· Components/Shared/SkuKitFormDialog.razor (.kit-component-table)
· Components/Shared/Integrador/ManageTerminalActivationsDialog.razor (MudSimpleTable)
Elas NÃO recebem .dash-table: aquele kit também traz `overflow-x: auto` no container,
`white-space: nowrap` em toda célula, bordas e hover próprios. Dentro de um diálogo isso
mudaria largura, rolagem e empilhamento móvel — comportamento, não tipografia. Esta classe
declara apenas família, tamanho, peso, espaçamento e caixa.
Dois grupos de seletores porque as duas tabelas têm marcação diferente: o MudTable monta
.mud-table-cell e o MudSimpleTable entrega th/td nus. As especificidades foram escolhidas
para vencer o MudBlazor sem !important — (0,4,0) contra o `.mud-table-root .mud-table-body
.mud-table-cell` dele, e (0,1,4) contra o `.mud-simple-table table * tr > td`. */
.table-type-standard .mud-table-root .mud-table-head .mud-table-cell,
.table-type-standard table thead tr > th {
font-family: var(--font-body);
font-size: var(--type-table-header);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.table-type-standard .mud-table-root .mud-table-body .mud-table-cell,
.table-type-standard table tbody tr > td {
font-family: var(--font-body);
font-size: var(--type-table-body);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
}
.table-type-standard .mono-tech,
.table-type-standard .mud-table-root .mud-table-body .mud-table-cell.mono-tech,
.table-type-standard table tbody tr > td.mono-tech {
font-family: var(--font-tech);
font-size: var(--type-table-tech);
font-weight: 600;
letter-spacing: 0.02em;
}
/* ---------- Rótulo móvel (DataLabel) ----------
Abaixo de 600px o MudTable esconde o e reimprime o rótulo em `.mud-table-cell:before`
com `content: attr(data-label)`. Esse pseudo-elemento herdava tudo da célula, então o rótulo
saía do mesmo tamanho e peso do VALOR — e, numa célula .mono-tech, saía até em Barlow. O
cabeçalho da tabela deixava de existir como degrau visual justamente onde ele é a única
âncora de leitura.
O breakpoint é `max-width: 600px` para casar exatamente com o do MudBlazor que dispara o
empilhamento; usar 599px deixaria a largura de 600px empilhada e sem rótulo formatado.
A especificidade empata com a do MudBlazor ((0,2,1)) e vence pela ordem no .
SEM caixa-alta, de propósito, e a decisão vale para as 44 tabelas. A célula empilhada é
`display:flex` e o kit .dash-table impõe `white-space: nowrap`, então a largura do rótulo vira
rolagem horizontal direta. Medido em 375px, com os rótulos mais longos do produto
("Condição antes → depois", "Motivo do encerramento"), num container de 343px:
herdado hoje (14px/400/caixa normal) ... excedente de 36px
com caixa-alta (13px/600/.03em) ...... excedente de 72px <- dobra a rolagem
sem caixa-alta (13px/600) ............ excedente de 37px
O tamanho e o peso entregam a hierarquia inteira por 1px de custo; a caixa-alta cobraria mais
36px de rolagem em toda tabela empilhada. O `letter-spacing` foi junto com ela: aquele
0,03em existe para abrir versais, e em caixa normal com acentuação só afasta as letras. */
@media (max-width: 600px) {
.dash-table .mud-table-cell:before,
.table-type-standard .mud-table-cell:before {
/* Família e espaçamento reancorados porque o pseudo herda tudo da célula: sem isto o
rótulo de uma célula .mono-tech sairia na condensada de --font-tech com o tracking
técnico de 0,02em, e o de uma célula comum com o 0,01071em do body2 do MudBlazor — o
mesmo rótulo mudaria de forma conforme a coluna. */
font-family: var(--font-body);
font-size: var(--type-table-header);
font-weight: 600;
letter-spacing: normal;
}
}
/* ---------- Kit de tabela de largura fixa (opt-in: .dash-table-fixed) ----------
.dash-table impõe `white-space: nowrap` a toda célula de corpo (acima), então cada coluna exige
a largura do próprio conteúdo e o `overflow-x` de .dash-table .mud-table-container vira scroll
horizontal em listagens com muitas colunas. Somando .dash-table-fixed, as colunas passam a
repartir o painel em porcentagem — a tabela deixa de poder exceder o container, por definição do
algoritmo de layout fixo — e cada página só precisa declarar os `width` por nth-child.
Só vale de 600px para cima: abaixo disso o MudTable empilha a linha em cartão com DataLabel,
onde largura de coluna não significa nada e truncar esconderia informação sem motivo.
Vocabulário das células:
.cell-stack — célula de duas linhas (libera o nowrap herdado)
.cell-line — linha em bloco que trunca com reticências
.cell-line-muted — modificador da linha secundária (menor e apagada)
.cell-chips — pilha vertical de chips
.chip-label — rótulo de chip que encolhe junto com a coluna em vez de vazar */
.dash-table-fixed .cell-line {
display: block;
line-height: 1.3;
}
.dash-table-fixed .cell-line-muted {
font-size: var(--type-table-meta);
color: var(--tm-text-muted);
}
.dash-table-fixed .cell-chips {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* O MudChip traz margem própria; num empilhamento vertical quem espaça é o gap. */
.dash-table-fixed .cell-chips .mud-chip {
margin: 0;
}
@media (min-width: 600px) {
.dash-table-fixed table {
table-layout: fixed;
width: 100%;
}
/* Rede de segurança: com layout fixo, conteúdo mais largo que a coluna vazaria para fora da
célula em vez de alargar a tabela. Popovers de kebab e tooltips são renderizados no
MudPopoverProvider (Components/Routes.razor), fora da célula, então não são cortados. */
.dash-table-fixed td.mud-table-cell {
overflow: hidden;
}
.dash-table-fixed .cell-stack {
white-space: normal;
}
.dash-table-fixed .cell-line,
.dash-table-fixed .chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-table-fixed .mud-chip {
max-width: 100%;
}
.dash-table-fixed .chip-label {
display: block;
}
}
/* Faixa apertada: entre 600px e 1279px o drawer persistente ainda come 260px da tela. Recuperar
12px de padding horizontal por célula aqui adia a truncagem dos chips. */
@media (min-width: 600px) and (max-width: 1279px) {
.dash-table-fixed .mud-table-cell {
padding-left: 10px;
padding-right: 10px;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.panels-grid {
grid-template-columns: 1fr;
}
.app-main-inner {
padding: 24px 24px 48px;
}
}
@media (max-width: 959px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.app-search {
display: none;
}
.mud-drawer.app-drawer {
position: fixed;
z-index: 1300;
}
}
@media (max-width: 599px) {
.stats-grid {
grid-template-columns: 1fr;
}
.app-logo-text.mud-typography {
display: none;
}
.user-name {
display: none;
}
.dashboard-header {
flex-direction: column;
}
}
/* ---------- Full-page states (404 / error) ---------- */
.state-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 16px;
min-height: calc(100vh - 220px);
padding: 48px 24px;
}
.state-page-icon {
width: 88px;
height: 88px;
border-radius: 50%;
background-color: var(--tm-secondary-tint);
color: var(--tm-secondary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.state-page-icon .mud-icon-root {
font-size: 2.6rem;
}
.state-page-icon-error {
background-color: var(--tm-danger-tint);
color: var(--tm-danger);
}
.state-page-title.mud-typography {
font-family: var(--font-display);
font-weight: 700;
color: var(--tm-text);
}
.state-page-subtitle.mud-typography {
color: var(--tm-text-muted);
max-width: 420px;
}
.state-page-meta {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--tm-border);
border-radius: 10px;
background-color: var(--tm-surface);
color: var(--tm-text-muted);
font-size: 13px;
}
.state-page-meta code {
font-family: var(--font-tech);
font-weight: 600;
color: var(--tm-text);
}
.state-page-dev-alert {
max-width: 520px;
text-align: left;
}
|