Feat: Aumentar blur del overlay y aplicar estilos cata a UInputNumber
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s

CAMBIOS EN OVERLAY:

1. Blur más agresivo:
   - Antes: blur(10px)
   - Ahora: blur(16px)
   - Efecto mucho más pronunciado

2. Opacidad aumentada:
   - Antes: 0.90 (90%)
   - Ahora: 0.95 (95%)
   - Fondo casi completamente opaco

ESTILOS PERSONALIZADOS PARA UInputNumber:

1. Input principal:
   - background-color: var(--cata-bg)
   - color: var(--cata-text)
   - border-color: var(--cata-primary) con transparencia

2. Estado focus:
   - border-color: var(--cata-primary) sólido
   - box-shadow con color primario
   - En dark mode: glow effect adicional

3. Placeholder:
   - color: var(--cata-text) al 50% de opacidad
   - Respeta el color del texto del usuario

4. Botones +/-:
   - color: var(--cata-primary)
   - Hover: opacity 0.8
   - Active: scale 0.95 (feedback táctil)

5. Modo oscuro:
   - Border más visible (40% de primary)
   - Box-shadow con glow effect en focus

RESULTADO:
- UInputNumber ahora respeta completamente los colores del usuario
- Overlay con blur muy pronunciado para mejor enfoque
- Consistencia visual con el resto de la aplicación
This commit is contained in:
2025-10-19 03:02:32 -06:00
parent 1ef86d4281
commit 6994114d91

View File

@@ -34,7 +34,11 @@
:max="72" :max="72"
:step="1" :step="1"
placeholder="8-72" placeholder="8-72"
class="w-full" class="w-full cata-input-number"
variant="outline"
:ui="{
base: 'cata-input text-center text-lg',
}"
@update:model-value="onSumatoriaChangeFromButtons" @update:model-value="onSumatoriaChangeFromButtons"
@blur="onSumatoriaBlur" @blur="onSumatoriaBlur"
/> />
@@ -51,7 +55,11 @@
:max="scaaMax" :max="scaaMax"
:step="0.25" :step="0.25"
placeholder="58.00-100.00" placeholder="58.00-100.00"
class="w-full" class="w-full cata-input-number"
variant="outline"
:ui="{
base: 'cata-input text-center text-lg',
}"
:format-options="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }" :format-options="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
@update:model-value="onScaaChangeFromButtons" @update:model-value="onScaaChangeFromButtons"
@blur="onScaaBlur" @blur="onScaaBlur"
@@ -390,9 +398,51 @@ const cerrar = () => {
<style> <style>
.modal-overlay { .modal-overlay {
background-color: var(--cata-bg) !important; background-color: var(--cata-bg) !important;
opacity: 0.90 !important; opacity: 0.95 !important;
backdrop-filter: blur(10px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(16px);
}
/* Estilos para UInputNumber para que respete los colores del usuario */
:deep(.cata-input-number input) {
background-color: var(--cata-bg) !important;
color: var(--cata-text) !important;
border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent) !important;
}
:deep(.cata-input-number input:focus) {
border-color: var(--cata-primary) !important;
outline: none !important;
box-shadow: 0 0 0 1px var(--cata-primary) !important;
}
:deep(.cata-input-number input::placeholder) {
color: color-mix(in srgb, var(--cata-text) 50%, transparent) !important;
}
/* Botones de incremento/decremento */
:deep(.cata-input-number button) {
color: var(--cata-primary) !important;
transition: all 0.2s ease;
}
:deep(.cata-input-number button:hover) {
color: var(--cata-primary) !important;
opacity: 0.8;
}
:deep(.cata-input-number button:active) {
transform: scale(0.95);
}
/* Modo oscuro */
.dark :deep(.cata-input-number input) {
background-color: var(--cata-bg) !important;
border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent) !important;
}
.dark :deep(.cata-input-number input:focus) {
box-shadow: 0 0 0 1px var(--cata-primary), 0 0 8px color-mix(in srgb, var(--cata-primary) 30%, transparent) !important;
} }
</style> </style>