Fix: Rediseñar toasts completamente para acoplarse al sistema de catación
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m1s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m1s
PROBLEMA: Toasts usaban estilos por defecto de Nuxt UI que no se acoplaban al diseño outline/terminal SOLUCIÓN: - Cambiar app.config.ts para usar clases CSS personalizadas en lugar de sintaxis arbitraria de Tailwind - Agregar estilos CSS completos en main.css usando variables del sistema (--cata-bg, --cata-fg, --cata-primary) - Implementar todas las variantes (primary, success, error, warning, info, neutral) ESTILOS APLICADOS: - Fondo: var(--cata-bg) en claro, negro 95% opaco en oscuro - Bordes: outline usando var(--cata-primary) con opacidades - Texto: fuente monospace en modo oscuro con text-shadow - Iconos: colores específicos por tipo con drop-shadow en oscuro - Efectos glow: sombras sutiles en modo oscuro según tipo - IMPORTANTE: Usar !important para sobrescribir estilos de Nuxt UI
This commit is contained in:
@@ -162,88 +162,38 @@ export default defineAppConfig({
|
||||
},
|
||||
},
|
||||
|
||||
// Notifications (Toast): Estilo outline/terminal del sistema de catación
|
||||
// Notifications (Toast): Usar clases personalizadas definidas en main.css
|
||||
notification: {
|
||||
slots: {
|
||||
root: [
|
||||
'bg-[var(--cata-bg)] border border-[var(--cata-primary)]',
|
||||
'dark:bg-black/95 dark:border-[var(--cata-primary)]',
|
||||
'rounded-md p-4',
|
||||
],
|
||||
wrapper: 'w-full flex gap-3',
|
||||
title: [
|
||||
'text-[var(--cata-fg)] font-semibold text-sm',
|
||||
'dark:font-mono dark:font-light',
|
||||
'dark:[text-shadow:0_0_2px_currentColor]',
|
||||
],
|
||||
description: [
|
||||
'text-[var(--cata-fg)] opacity-75 text-xs',
|
||||
'dark:font-mono dark:font-light',
|
||||
'dark:[text-shadow:0_0_1px_currentColor]',
|
||||
],
|
||||
icon: [
|
||||
'shrink-0 w-5 h-5',
|
||||
'text-[var(--cata-fg)]',
|
||||
'dark:[filter:drop-shadow(0_0_2px_currentColor)]',
|
||||
],
|
||||
root: 'cata-toast-root',
|
||||
wrapper: 'cata-toast-wrapper',
|
||||
title: 'cata-toast-title',
|
||||
description: 'cata-toast-description',
|
||||
icon: 'cata-toast-icon',
|
||||
avatar: 'shrink-0',
|
||||
actions: 'flex gap-1.5 shrink-0 mt-2',
|
||||
close: [
|
||||
'shrink-0',
|
||||
'text-[var(--cata-fg)]',
|
||||
'hover:opacity-80',
|
||||
],
|
||||
progress: 'absolute inset-x-0 bottom-0 h-0.5 bg-[var(--cata-primary)] opacity-50',
|
||||
actions: 'cata-toast-actions',
|
||||
close: 'cata-toast-close',
|
||||
progress: 'cata-toast-progress',
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
primary: {
|
||||
root: [
|
||||
'border-[var(--cata-primary)]/50',
|
||||
'dark:border-[var(--cata-primary)]',
|
||||
'dark:shadow-[0_0_12px_rgba(0,255,0,0.2)]',
|
||||
],
|
||||
icon: 'text-[var(--cata-primary)]',
|
||||
root: 'cata-toast-primary',
|
||||
},
|
||||
success: {
|
||||
root: [
|
||||
'border-green-600/50 dark:border-green-500',
|
||||
'dark:shadow-[0_0_12px_rgba(0,255,0,0.25)]',
|
||||
],
|
||||
icon: 'text-green-600 dark:text-green-500',
|
||||
progress: 'bg-green-600 dark:bg-green-500',
|
||||
root: 'cata-toast-success',
|
||||
},
|
||||
error: {
|
||||
root: [
|
||||
'border-red-600/50 dark:border-red-500',
|
||||
'dark:shadow-[0_0_12px_rgba(255,0,0,0.25)]',
|
||||
],
|
||||
icon: 'text-red-600 dark:text-red-500',
|
||||
progress: 'bg-red-600 dark:bg-red-500',
|
||||
root: 'cata-toast-error',
|
||||
},
|
||||
warning: {
|
||||
root: [
|
||||
'border-yellow-600/50 dark:border-yellow-500',
|
||||
'dark:shadow-[0_0_12px_rgba(255,255,0,0.25)]',
|
||||
],
|
||||
icon: 'text-yellow-600 dark:text-yellow-500',
|
||||
progress: 'bg-yellow-600 dark:bg-yellow-500',
|
||||
root: 'cata-toast-warning',
|
||||
},
|
||||
info: {
|
||||
root: [
|
||||
'border-blue-600/50 dark:border-blue-500',
|
||||
'dark:shadow-[0_0_12px_rgba(70,130,180,0.25)]',
|
||||
],
|
||||
icon: 'text-blue-600 dark:text-blue-500',
|
||||
progress: 'bg-blue-600 dark:bg-blue-500',
|
||||
root: 'cata-toast-info',
|
||||
},
|
||||
neutral: {
|
||||
root: [
|
||||
'border-gray-500/50 dark:border-gray-500',
|
||||
'dark:shadow-[0_0_12px_rgba(128,128,128,0.2)]',
|
||||
],
|
||||
icon: 'text-gray-600 dark:text-gray-400',
|
||||
progress: 'bg-gray-600 dark:bg-gray-500',
|
||||
root: 'cata-toast-neutral',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -358,3 +358,191 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* TOASTS / NOTIFICACIONES */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* Root container del toast */
|
||||
.cata-toast-root {
|
||||
background-color: var(--cata-bg) !important;
|
||||
border: var(--cata-border-width) solid var(--cata-primary) !important;
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dark .cata-toast-root {
|
||||
background-color: rgba(0, 0, 0, 0.95) !important;
|
||||
border-color: var(--cata-primary) !important;
|
||||
}
|
||||
|
||||
/* Wrapper del contenido */
|
||||
.cata-toast-wrapper {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Título del toast */
|
||||
.cata-toast-title {
|
||||
color: var(--cata-fg) !important;
|
||||
font-family: var(--cata-font-family);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .cata-toast-title {
|
||||
font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 2px currentColor;
|
||||
}
|
||||
|
||||
/* Descripción del toast */
|
||||
.cata-toast-description {
|
||||
color: var(--cata-fg) !important;
|
||||
font-family: var(--cata-font-family);
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.dark .cata-toast-description {
|
||||
font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 1px currentColor;
|
||||
}
|
||||
|
||||
/* Icono del toast */
|
||||
.cata-toast-icon {
|
||||
flex-shrink: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: var(--cata-fg);
|
||||
}
|
||||
|
||||
.dark .cata-toast-icon {
|
||||
filter: drop-shadow(0 0 2px currentColor);
|
||||
}
|
||||
|
||||
/* Botones de acción */
|
||||
.cata-toast-actions {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Botón de cerrar */
|
||||
.cata-toast-close {
|
||||
flex-shrink: 0;
|
||||
color: var(--cata-fg);
|
||||
}
|
||||
|
||||
.cata-toast-close:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Barra de progreso */
|
||||
.cata-toast-progress {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
height: 0.125rem;
|
||||
background-color: var(--cata-primary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Variantes de color */
|
||||
.cata-toast-primary {
|
||||
border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-primary {
|
||||
border-color: var(--cata-primary) !important;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
.cata-toast-success {
|
||||
border-color: rgba(22, 163, 74, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-success {
|
||||
border-color: rgb(34, 197, 94) !important;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 0, 0.25);
|
||||
}
|
||||
|
||||
.cata-toast-success .cata-toast-icon {
|
||||
color: rgb(22, 163, 74);
|
||||
}
|
||||
|
||||
.dark .cata-toast-success .cata-toast-icon {
|
||||
color: rgb(34, 197, 94);
|
||||
}
|
||||
|
||||
.cata-toast-error {
|
||||
border-color: rgba(220, 38, 38, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-error {
|
||||
border-color: rgb(239, 68, 68) !important;
|
||||
box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cata-toast-error .cata-toast-icon {
|
||||
color: rgb(220, 38, 38);
|
||||
}
|
||||
|
||||
.dark .cata-toast-error .cata-toast-icon {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
|
||||
.cata-toast-warning {
|
||||
border-color: rgba(202, 138, 4, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-warning {
|
||||
border-color: rgb(234, 179, 8) !important;
|
||||
box-shadow: 0 0 12px rgba(255, 255, 0, 0.25);
|
||||
}
|
||||
|
||||
.cata-toast-warning .cata-toast-icon {
|
||||
color: rgb(202, 138, 4);
|
||||
}
|
||||
|
||||
.dark .cata-toast-warning .cata-toast-icon {
|
||||
color: rgb(234, 179, 8);
|
||||
}
|
||||
|
||||
.cata-toast-info {
|
||||
border-color: rgba(37, 99, 235, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-info {
|
||||
border-color: rgb(59, 130, 246) !important;
|
||||
box-shadow: 0 0 12px rgba(70, 130, 180, 0.25);
|
||||
}
|
||||
|
||||
.cata-toast-info .cata-toast-icon {
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
|
||||
.dark .cata-toast-info .cata-toast-icon {
|
||||
color: rgb(59, 130, 246);
|
||||
}
|
||||
|
||||
.cata-toast-neutral {
|
||||
border-color: rgba(107, 114, 128, 0.5) !important;
|
||||
}
|
||||
|
||||
.dark .cata-toast-neutral {
|
||||
border-color: rgb(107, 114, 128) !important;
|
||||
box-shadow: 0 0 12px rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
.cata-toast-neutral .cata-toast-icon {
|
||||
color: rgb(75, 85, 99);
|
||||
}
|
||||
|
||||
.dark .cata-toast-neutral .cata-toast-icon {
|
||||
color: rgb(156, 163, 175);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user