nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Actualizar clases utilitarias CSS para usar variables del sistema de temas
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 50s
Details

Browse Source 
- Reemplazados colores RGB hardcodeados en .brand-card con color-mix()
- Actualizado .brand-shell para usar var(--brand-accent) y var(--brand-primary-strong)
- Actualizado .brand-divider para usar var(--brand-primary)
- Actualizado .brand-chip para usar var(--brand-accent)
- Actualizado .brand-pill para usar var(--brand-primary)
- Actualizado .brand-table para usar var(--brand-surface) y var(--brand-bg)
- Actualizado background de html/body para usar var(--brand-bg)

Ahora todas las cards y contenedores grandes responden a cambios de tema
This commit is contained in:
josedario87
2025-10-31 11:05:15 -06:00
parent d34b73289a
commit 867903d76e
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
nuxt4-app/app/assets/css/main.css
View File

@@ -80,36 +80,42 @@ html,
body { body {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
background-color: #1b1209 !important; background-color: var(--brand-bg) !important;
color: var(--brand-text); color: var(--brand-text);
min-height: 100vh; min-height: 100vh;
} }
.brand-shell { .brand-shell {
background: radial-gradient(circle at 20% 20%, rgba(255, 224, 160, 0.08), transparent 55%), background: radial-gradient(circle at 20% 20%,
radial-gradient(circle at 80% 10%, rgba(192, 128, 64, 0.08), transparent 45%), color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 55%),
radial-gradient(circle at 80% 10%,
color-mix(in srgb, var(--brand-primary-strong) 8%, transparent), transparent 45%),
var(--brand-bg); var(--brand-bg);
min-height: 100vh; min-height: 100vh;
} }
.brand-card { .brand-card {
background: linear-gradient(145deg, rgba(20, 16, 11, 0.95), rgba(31, 24, 15, 0.85)); background: linear-gradient(145deg,
border: 1px solid rgba(224, 192, 128, 0.12); color-mix(in srgb, var(--brand-bg) 95%, transparent),
box-shadow: 0 12px 40px rgba(12, 8, 4, 0.55); color-mix(in srgb, var(--brand-surface) 85%, transparent));
border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-bg) 55%, transparent);
} }
.brand-divider { .brand-divider {
border-top: 1px solid rgba(224, 192, 128, 0.16); border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
} }
.brand-chip { .brand-chip {
background: rgba(255, 224, 160, 0.08); background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
border: 1px solid rgba(255, 224, 160, 0.18); border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
color: var(--brand-accent); color: var(--brand-accent);
} }
.brand-table thead { .brand-table thead {
background: linear-gradient(90deg, rgba(32, 24, 15, 0.95), rgba(24, 18, 11, 0.95)); background: linear-gradient(90deg,
color-mix(in srgb, var(--brand-surface) 95%, transparent),
color-mix(in srgb, var(--brand-bg) 95%, transparent));
} }
.brand-table tbody tr { .brand-table tbody tr {
@@ -117,12 +123,12 @@ body {
} }
.brand-table tbody tr:hover { .brand-table tbody tr:hover {
background: rgba(255, 224, 160, 0.06); background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
} }
.brand-pill { .brand-pill {
background: rgba(224, 192, 128, 0.14); background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
border: 1px solid rgba(224, 192, 128, 0.28); border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
color: var(--brand-primary); color: var(--brand-primary);
} }