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
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:
@@ -34,7 +34,11 @@
|
||||
:max="72"
|
||||
:step="1"
|
||||
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"
|
||||
@blur="onSumatoriaBlur"
|
||||
/>
|
||||
@@ -51,7 +55,11 @@
|
||||
:max="scaaMax"
|
||||
:step="0.25"
|
||||
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 }"
|
||||
@update:model-value="onScaaChangeFromButtons"
|
||||
@blur="onScaaBlur"
|
||||
@@ -390,9 +398,51 @@ const cerrar = () => {
|
||||
<style>
|
||||
.modal-overlay {
|
||||
background-color: var(--cata-bg) !important;
|
||||
opacity: 0.90 !important;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
opacity: 0.95 !important;
|
||||
backdrop-filter: blur(16px);
|
||||
-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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user