Update globals.css

This commit is contained in:
MacRimi
2025-10-22 18:10:05 +02:00
parent 0262ea31eb
commit 2c0e1e498b
+85 -83
View File
@@ -139,104 +139,106 @@
} }
/* ===================== */ /* ===================== */
/* Base layer */ /* Base styles */
/* ===================== */ /* ===================== */
@layer base { /* Removed @layer base to fix Tailwind CSS v4 compatibility */
* { * {
@apply border-border outline-ring/50; border-color: var(--border);
} outline-color: color-mix(in oklch, var(--ring), transparent 50%);
}
body { body {
@apply bg-background text-foreground; background-color: var(--background);
} color: var(--foreground);
}
/* Foco accesible */ /* Foco accesible */
:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus { :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
@apply outline-none; outline: none;
} }
:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
@apply ring-2; :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
--tw-ring-color: var(--ring); outline: 2px solid color-mix(in oklch, var(--ring), transparent 50%);
--tw-ring-opacity: 0.5; /* equivalente al /50 */ outline-offset: 2px;
}
} }
/* ===================== */ /* ===================== */
/* Ajustes para Charts */ /* Component styles */
/* ===================== */ /* ===================== */
@layer components { /* Removed @layer components to fix Tailwind CSS v4 compatibility */
/* Recharts axis */
.recharts-cartesian-axis-tick tspan {
fill: var(--muted-foreground);
}
.recharts-cartesian-axis-line,
.recharts-cartesian-grid line {
stroke: var(--border);
}
/* Chart.js axis */ /* Recharts axis */
.chartjs-render-monitor text { .recharts-cartesian-axis-tick tspan {
fill: var(--muted-foreground); fill: var(--muted-foreground);
} }
.chartjs-render-monitor line {
stroke: var(--border);
}
/* Estilos personalizados para notas de ProxMenux */ .recharts-cartesian-axis-line,
/* Asegura que el contenido HTML de ProxMenux se renderice correctamente */ .recharts-cartesian-grid line {
.proxmenux-notes { stroke: var(--border);
/* Centrar el contenido */ }
text-align: center;
}
/* Asegurar que las tablas dentro de las notas se vean correctamente */ /* Chart.js axis */
.proxmenux-notes table { .chartjs-render-monitor text {
width: 100%; fill: var(--muted-foreground);
border-collapse: collapse; }
margin: 0 auto;
}
.proxmenux-notes table td { .chartjs-render-monitor line {
vertical-align: middle; stroke: var(--border);
padding: 0.5rem; }
}
/* Asegurar que las imágenes dentro de las notas se vean correctamente */ /* Estilos personalizados para notas de ProxMenux */
.proxmenux-notes img { /* Asegura que el contenido HTML de ProxMenux se renderice correctamente */
display: inline-block; .proxmenux-notes {
max-width: 100%; text-align: center;
height: auto; }
}
/* Asegurar que los enlaces (badges) se mantengan en línea horizontal */ /* Asegurar que las tablas dentro de las notas se vean correctamente */
.proxmenux-notes p a { .proxmenux-notes table {
display: inline-block; width: 100%;
margin-right: 0.25rem; border-collapse: collapse;
margin-bottom: 0.25rem; margin: 0 auto;
} }
.proxmenux-notes p a img { .proxmenux-notes table td {
display: inline-block; vertical-align: middle;
vertical-align: middle; padding: 0.5rem;
} }
/* Añadir separador visual después de la tabla (similar a Proxmox) */ /* Asegurar que las imágenes dentro de las notas se vean correctamente */
.proxmenux-notes table + p { .proxmenux-notes img {
margin-top: 1rem; display: inline-block;
padding-top: 1rem; max-width: 100%;
border-top: 1px solid var(--border); height: auto;
} }
/* Estilos para los párrafos de información de discos */ /* Asegurar que los enlaces (badges) se mantengan en línea horizontal */
.proxmenux-notes div p { .proxmenux-notes p a {
margin: 0.25rem 0; display: inline-block;
} margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
/* Asegurar que los títulos se vean correctamente */ .proxmenux-notes p a img {
.proxmenux-notes h1, display: inline-block;
.proxmenux-notes h2, vertical-align: middle;
.proxmenux-notes h3 { }
margin: 0;
line-height: 1.2; /* Añadir separador visual después de la tabla (similar a Proxmox) */
} .proxmenux-notes table + p {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
/* Estilos para los párrafos de información de discos */
.proxmenux-notes div p {
margin: 0.25rem 0;
}
/* Asegurar que los títulos se vean correctamente */
.proxmenux-notes h1,
.proxmenux-notes h2,
.proxmenux-notes h3 {
margin: 0;
line-height: 1.2;
} }