/* ============================================================================= ONU Card design tokens ---------------------------------------------------------------------------- Centraliza decisoes visuais do OnuCard hierarquico (ONU -> VPort -> SP -> MAC). - Glass morphism estilo Apple (blur + saturate + bordas translucidas) - Smart collapse para vports vazios - Footer dedicado para WAN/ACS - Pulse de borda + chip flash para feedback de update realtime Referencias preferenciais: - Cores semanticas devem usar `--rz-*` (success/warning/danger/info/primary) ja sobrescritas em `wwwroot/css/site.css`. Os tokens `--onu-color-*` apenas dao nome semantico ao no da hierarquia. ----------------------------------------------------------------------------- CONTRATO DE TEMA (corrigido em tg:01b — real theme-parity) ----------------------------------------------------------------------------- O toggle de tema IN-APP e o `` (em `Components/Layout/MainLayout.razor`), conectado ao Radzen `ThemeService` + `AddRadzenCookieThemeService` (cookie `SuaFibraAnalispAdminTheme`, ver `Program.cs`). O tema padrao e `material3-dark` (`Components/App.razor`). COMO O TOGGLE TROCA O TEMA: o Radzen NAO aplica classe nem atributo no ``/``. Ele TROCA a folha de estilo base do Radzen (`material3-base.css` <-> `material3-dark-base.css`), e cada arquivo redefine as variaveis `--rz-*` em `:root`. Logo, o UNICO sinal de DOM que segue o toggle in-app e o VALOR das variaveis `--rz-*` em `:root`. OS SELETORES `.dark-theme`/`[data-bs-theme="dark"]`/`.light-theme` SAO INERTES: nenhum `.js`/`.cs`/`.razor` do app os aplica em runtime. Eles NUNCA casam e portanto NAO devem ser usados para paridade de tema. (Foram removidos deste arquivo para os tokens `--onu-mini-*`; nao reintroduzir.) NUANCE DE CASCATA (verificada): `wwwroot/css/site.css` carrega DEPOIS do `` e fixa em `:root` a paleta base (`--rz-base-50..900`) e as familias semanticas (`--rz-success/-danger/-info/-warning/-primary` e suas variantes). Essas NAO trocam com o toggle. O que TROCA (definido apenas na folha do tema, sem override no site.css): --rz-text-color (base-50 dark <-> base-900 light) --rz-text-secondary-color (base-100 dark <-> base-800 light) --rz-base-background-color (base-800 dark <-> base-50 light) --rz-panel-background-color / --rz-body-background-color / --rz-card-background-color REGRA DE PARIDADE REAL: - NEUTROS (bg/borda/divisor/texto) derivam dos `--rz-*` que TROCAM acima. - ACENTOS de HUE (verde/vermelho/azul/ambar): como as familias `--rz-*` estao fixadas no site.css e nao trocam, adaptamos por `color-mix(in srgb, X%, var(--rz-text-color) Y%)`. Como `--rz-text-color` troca, o resultado escurece no tema claro e clareia no escuro — paridade real seguindo o toggle. - ACENTOS DE MARCA `--onu-accent-cto` (#fe9300) e `--onu-accent-pon` (#874efe) permanecem HEX FIXO: sao cores de marca, identicas em light/dark, theme-independent. NAO derivar de --rz. - Fallbacks `var(--rz-*, )` usam o valor LIGHT de hoje. NOTA tg:11 (--rz-base-rgb NAO EXISTE): a variavel `--rz-base-rgb` nunca e definida em `:root` (nem nas folhas do tema nem no site.css). Logo, todo `rgba(var(--rz-base-rgb, ), A)` resolvia SEMPRE para o fallback fixo — navy `20,28,44` (escuro) ou `200,200,200`/`255,255,255` (claro) — em AMBOS os temas. Resultado: superficies de painel (`--onu-panel-*`, `--onu-glass-*`, `--onu-header-*`) ficavam ESCURAS tambem no tema claro. CORRIGIDO: esses tokens agora derivam de `--rz-*` que TROCAM com o toggle in-app: - SUPERFICIES OPACAS (fallback navy `20,28,44`): `color-mix(in srgb, var(--rz-base-background-color), var(--rz-text-color) K%)` — escuro no dark, claro no light, com leve elevacao (K=6..8). Sao opacas de proposito para realmente PINTAR a superficie clara no tema claro (translucido deixaria o corpo escuro do card vazar — era a causa do bug). - OVERLAYS/BORDAS translucidas (fallback claro `200,200,200`/`255,255,255`): `color-mix(in srgb, transparent, var(--rz-text-color) P%)` — clareia no dark, escurece no light (P≈alpha*100), igual ao padrao cliente-detalhado. Os overrides INERTES de `--onu-glass-*`/`--onu-header-*`/`--onu-panel-*` em `@media (prefers-color-scheme: light)`, `.light-theme/[data-bs-theme=light]` e o bloco `.dark-theme/[data-bs-theme=dark]` foram REMOVIDOS: a derivacao --rz-* ja conduz o tema via toggle e os seletores nunca casam em runtime. Nao reintroduzir. ----------------------------------------------------------------------------- OWNERSHIP DE TOKENS (ponte com design-system-polish, tg:ds-10) ----------------------------------------------------------------------------- - `--brand-*` (wwwroot/css/analisp-brand-tokens.css): paleta de MARCA Algar (ink/teal/verde/azul + tipografia Exo/Montserrat). Fonte da verdade do design system, carregada ANTES deste arquivo. Paginas aliam tokens locais a `--brand-*` (ex.: --aa-ink: var(--brand-ink)). - `--onu-accent-cto` (#fe9300) / `--onu-accent-pon` (#874efe): cores de MARCA SuaFibra para o dominio de mapa/rede (CTO/PON). HEX fixo, theme-independent. NAO confundir nem derivar de `--brand-*` — sao dominios distintos e coexistem sem conflito. - OnuManager profundo (layout/densidade/micro-interacoes) segue o plano dedicado docs/plans/onumanager-ui-ux-refinement.md (tg:01+). ============================================================================= */ :root { /* ---------- Glass (derivado de --rz-*, segue o toggle in-app) ---------- Overlays translucidos via --rz-text-color: no dark o texto e claro (overlay claro, identico ao antigo white 0.06..0.16); no light o texto e escuro (overlay escuro). Ver NOTA tg:11 no topo. */ --onu-glass-bg: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 6%); --onu-glass-bg-strong: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%); --onu-glass-border: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 10%); --onu-glass-border-strong: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 16%); --onu-glass-blur: 12px; --onu-glass-saturation: 140%; --onu-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); /* Fallback opaco para navegadores sem backdrop-filter: superficie solida derivada da base do tema (escura no dark, clara no light). */ --onu-glass-bg-solid: color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%); /* ---------- Espacamento ---------- */ --onu-gap-xs: 2px; --onu-gap-sm: 4px; --onu-gap-md: 8px; --onu-gap-lg: 12px; /* ---------- Raios ---------- */ --onu-radius-chip: 3px; --onu-radius-section: 6px; --onu-radius-card: 4px; /* ---------- Animacao ---------- */ --onu-anim-fast: 120ms; --onu-anim-medium: 200ms; --onu-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Cores semanticas por no da hierarquia ---------- */ /* Vport */ --onu-color-vport-pppoe: var(--rz-primary, #1976d2); --onu-color-vport-ipoe: var(--rz-info, #0288d1); --onu-color-vport-wifi: var(--rz-series-7, #ba68c8); --onu-color-vport-other: var(--rz-base-500, #6b7280); /* Service Port */ --onu-color-sp-up: var(--rz-success, #4caf50); --onu-color-sp-down: var(--rz-danger, #f44336); /* MAC / IP */ --onu-color-mac: var(--rz-text-secondary-color, rgba(255, 255, 255, 0.65)); --onu-color-ip-pppoe: var(--rz-info, #0288d1); --onu-color-ip-wan: var(--rz-success, #4caf50); /* WAN ACS */ --onu-color-wan-online: var(--rz-success, #4caf50); --onu-color-wan-offline: var(--rz-base-500, #9e9e9e); --onu-color-wan-secondary: var(--rz-warning, #ff9800); /* ---------- Pulse / flash (feedback realtime) ---------- */ --onu-pulse-color-signal: var(--rz-info, #0288d1); --onu-pulse-color-mac: var(--rz-warning, #ff9800); --onu-pulse-color-state: var(--rz-success, #4caf50); --onu-pulse-color-error: var(--rz-danger, #f44336); /* ---------- Visual Pro (Pilar 2) ---------- Elevations e radius unificados consumidos por OnuCard, group headers e empty states. Mantemos os tokens originais acima para nao quebrar componentes legados; novos tokens vivem aqui. */ --onu-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --onu-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.12); --onu-elevation-hover: 0 4px 8px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.16); --onu-status-bar-w: 4px; --onu-card-radius: 6px; --onu-card-radius-sm: 4px; --onu-header-radius: 6px; --onu-card-radius-modern: 10px; --onu-radius-panel: 7px; --onu-radius-pill: 8px; /* Superficie OPACA do painel (K=6): escura no dark, clara no light. Soft e border sao overlays translucidos derivados de --rz-text-color. */ --onu-panel-bg: color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 6%); --onu-panel-bg-soft: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 7%); --onu-panel-border: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 14%); --onu-icon-size-sm: 16px; --onu-icon-size-md: 20px; --onu-icon-size-lg: 24px; /* Header como superficie OPACA (gradiente de leve elevacao 8%->4%): pinta claro no tema claro (as camadas de hue dos group-headers ficam por cima). */ --onu-header-bg: linear-gradient(180deg, color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 8%) 0%, color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1a2230) 4%) 100%); --onu-header-border: color-mix(in srgb, transparent, var(--rz-text-color, #1a2230) 8%); /* Pattern decorativo do card. Usado em background-image: url(...). */ --onu-decor-pattern: url("/icons/onu/decor/grid-pattern.svg"); --onu-decor-opacity: 0.05; /* ---------- Accent CTO / PON (espelham group-headers.css) ---------- Mesma cor resolvida hoje (#fe9300 / #874efe), usada de forma theme-independent (border-left, icon gradient, text, metric-signal). Tokens adicionados para que tarefas posteriores re-apontem os literais SEM mudar a cor renderizada. */ --onu-accent-cto: #fe9300; --onu-accent-cto-rgb: 254, 147, 0; --onu-accent-pon: #874efe; --onu-accent-pon-rgb: 135, 78, 254; /* ---------- Empty-state tokens (consumidos por OnuGridEmptyState em tg:04) ---------- THEME-DEPENDENT: derivam de --rz-* para seguir o toggle in-app. - text-secondary/primary: neutros que TROCAM via --rz-text-*-color. - titulos com hue: adaptados por color-mix(hue, --rz-text-color) para escurecer no tema claro e clarear no escuro (--rz-text-color troca). Fallback = valor LIGHT de hoje. */ --onu-empty-text-secondary: var(--rz-text-secondary-color, #777); --onu-empty-text-primary: var(--rz-text-color, #333); --onu-empty-title-noresults: color-mix(in srgb, var(--rz-warning-dark, #b45309) 62%, var(--rz-text-color, #b45309) 38%); --onu-empty-title-selectolt: color-mix(in srgb, var(--rz-primary, #3b82f6) 62%, var(--rz-text-color, #3b82f6) 38%); /* ---------- Batimento mini-card: tokens THEME-DEPENDENT derivados de --rz-* ---------- (ver CONTRATO DE TEMA no topo). NEUTROS derivam dos --rz-* que TROCAM com o toggle (text-color / text-secondary-color / base-background-color). Bordas/divisores/hover usam `color-mix` a partir de --rz-text-color para parar de depender de --rz-border (inexistente nas folhas) e adaptar light/dark automaticamente. ACENTOS de hue usam color-mix(hue, --rz-text-color) — como --rz-text-color troca, o hue escurece no claro e clareia no escuro (paridade real). O bloco inerte `[data-bs-theme="dark"], .dark-theme` para estes tokens foi REMOVIDO: a derivacao --rz-* o torna redundante. Fallbacks = valor LIGHT de hoje. */ --onu-mini-bg: var(--rz-base-background-color, #ffffff); --onu-mini-bg-hover: color-mix(in srgb, var(--rz-base-background-color, #ffffff), var(--rz-text-color, #1f2937) 6%); --onu-mini-border: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 14%); --onu-mini-divider: color-mix(in srgb, transparent, var(--rz-text-color, #1f2937) 8%); --onu-mini-text: var(--rz-text-color, #1f2937); --onu-mini-id: var(--rz-text-color, #111827); --onu-mini-client: var(--rz-text-secondary-color, #374151); --onu-mini-elapsed: var(--rz-text-color, #111827); --onu-mini-elapsed-connected: color-mix(in srgb, var(--rz-success-dark, #15803d) 60%, var(--rz-text-color, #15803d) 40%); --onu-mini-elapsed-disconnected: color-mix(in srgb, var(--rz-danger, #b91c1c) 60%, var(--rz-text-color, #b91c1c) 40%); --onu-mini-circuito: color-mix(in srgb, var(--rz-info, #1d4ed8) 60%, var(--rz-text-color, #1d4ed8) 40%); --onu-mini-circuito-bg: color-mix(in srgb, transparent, var(--rz-info, #1d4ed8) 12%); /* CTO chip: mantem a IDENTIDADE de marca CTO (laranja) via --onu-accent-cto, adaptada ao tema por color-mix. (--rz-warning neste tema e oliva, o que descaracterizaria o CTO; por isso ancoramos no acento de marca.) */ --onu-mini-cto: color-mix(in srgb, var(--onu-accent-cto, #b45309) 58%, var(--rz-text-color, #b45309) 42%); --onu-mini-cto-bg: color-mix(in srgb, transparent, var(--onu-accent-cto, #b45309) 12%); /* Badge de divergencia CTO: alerta solido AUTO-CONTIDO (texto vs fundo do proprio badge, nao depende do fundo do card) -> mantido theme-independent de proposito, ancorado no acento de marca CTO. */ --onu-mini-cto-divergent-text: var(--rz-base-lighter, #ffffff); /* Fundo escurecido a partir do acento de marca CTO (laranja) para garantir contraste WCAG AA com o texto branco do badge (laranja puro #fe9300 + branco reprovaria). Theme-independent de proposito. */ --onu-mini-cto-divergent-bg: color-mix(in srgb, var(--onu-accent-cto, #b45309), var(--rz-base-darker, #000000) 28%); --onu-mini-cto-divergent-ring: color-mix(in srgb, var(--onu-accent-cto, #92400e), var(--rz-base-darker, #000000) 45%); --onu-mini-chip-state-text: color-mix(in srgb, var(--rz-danger, #b91c1c) 60%, var(--rz-text-color, #b91c1c) 40%); --onu-mini-chip-state-bg: color-mix(in srgb, transparent, var(--rz-danger, #f44336) 12%); --onu-mini-chip-attenuation-text: color-mix(in srgb, var(--rz-warning-dark, #b45309) 60%, var(--rz-text-color, #b45309) 40%); --onu-mini-chip-attenuation-bg: color-mix(in srgb, transparent, var(--rz-warning, #ffc107) 16%); } /* ============================================================================= Light mode overrides (NAO-superficie) ---------------------------------------------------------------------------- tg:11: os overrides de SUPERFICIE (`--onu-glass-*`, `--onu-header-*`, `--onu-panel-*`) destes blocos foram REMOVIDOS — agora derivam de --rz-* no `:root` e seguem o toggle in-app (ver NOTA tg:11 no topo). Permanecem aqui apenas overrides de elevacao (sombras), `--onu-color-mac` e `--onu-decor-*`, que sao fora do escopo de paridade de superficie e continuam guiados por `prefers-color-scheme` do SO. O bloco inerte `.dark-theme/[data-bs-theme=dark]` foi REMOVIDO por completo (so continha tokens de superficie, agora --rz-*). ============================================================================= */ @media (prefers-color-scheme: light) { :root { --onu-color-mac: var(--rz-text-secondary-color, rgba(0, 0, 0, 0.62)); /* Visual Pro overrides para light */ --onu-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.07); --onu-elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08); --onu-elevation-hover: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.12); --onu-decor-opacity: 0.06; } } /* ============================================================================= Reduced motion - Tokens viram instantaneos para usuarios com prefers-reduced-motion ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --onu-anim-fast: 1ms; --onu-anim-medium: 1ms; } } /* ============================================================================= Batimento mini-card — bloco DARK inerte REMOVIDO em tg:01b ---------------------------------------------------------------------------- O antigo bloco `[data-bs-theme="dark"], .dark-theme` que sobrescrevia os tokens `--onu-mini-*` foi REMOVIDO: aqueles seletores nunca casam em runtime (ver CONTRATO DE TEMA no topo) e a derivacao --rz-* / color-mix no `:root` agora produz paridade real seguindo o toggle in-app. Nao reintroduzir. ============================================================================= */