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

Feature: Scrollbar personalizada, arreglos SVG y mejoras de transparencia
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 56s
Details

Browse Source 
- Agregar scrollbar personalizada compacta (8px) adaptable al tema
- Estilo de scrollbar verde (#00DC82) con opacidad diferente para día/noche
- Soporte para WebKit (Chrome/Safari) y Firefox
- Arreglar SVG de colinas para usar 100% del ancho horizontal (preserveAspectRatio=none)
- Revertir modal a estructura funcional (v-model:open, title prop, #content slot)
- Igualar transparencia en modo oscuro usando rgba(0,0,0,0.3-0.4) en lugar de rgba(15,15,25)
- Aplicar tintado negro puro para reducir brillo en modo oscuro manteniendo misma transparencia
This commit is contained in:
josedario87
2025-10-16 22:02:45 -06:00
parent 639a4c44c4
commit 75069a7633
5 changed files with 66 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nuxt4/app/app.vue
View File

@@ -86,7 +86,7 @@ useHead({
}
:global(.dark) .quick-actions {
background: rgba(15, 15, 25, 0.3);
background: rgba(0, 0, 0, 0.3);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.5),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -110,7 +110,7 @@ useHead({
}
:global(.dark) .auth-message :deep(.card) {
background: rgba(15, 15, 25, 0.3);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.5),

44
nuxt4/app/assets/css/main.css
View File

@@ -1,2 +1,46 @@
@import "tailwindcss";
@import "@nuxt/ui";
/* Custom Scrollbar - Adaptable al tema */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 220, 130, 0.5);
border-radius: 4px;
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 220, 130, 0.7);
}
/* Scrollbar para modo oscuro */
.dark ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(0, 220, 130, 0.6);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 220, 130, 0.8);
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 220, 130, 0.5) rgba(255, 255, 255, 0.1);
}
.dark * {
scrollbar-color: rgba(0, 220, 130, 0.6) rgba(0, 0, 0, 0.3);
}

4
nuxt4/app/components/AnimatedBackground.vue
View File

@@ -61,7 +61,7 @@
</svg>
<!-- Colinas con césped -->
<svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
<svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="none">
<path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
fill="#7CB342" />
</svg>
@@ -140,7 +140,7 @@
</svg>
<!-- Colinas nocturnas -->
<svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="xMidYMid slice">
<svg class="hills" viewBox="0 0 1920 400" preserveAspectRatio="none">
<path d="M 0,250 Q 240,150 480,200 T 960,220 T 1440,180 T 1920,240 L 1920,400 L 0,400 Z"
fill="#1B3A28" />
</svg>

39
nuxt4/app/components/UserHeader.vue
View File

@@ -56,39 +56,38 @@
</button>
<!-- Modal de edición de perfil -->
<UModal v-model="isEditModalOpen">
<div class="modal-content">
<h3 class="text-xl font-semibold mb-4">Editar Perfil</h3>
<form @submit.prevent="handleSubmit" class="space-y-4">
<UFormGroup label="Nombre de usuario" help="No se puede modificar">
<UModal v-model:open="isEditModalOpen" title="Editar Perfil">
<template #content>
<div class="p-4 space-y-4">
<UFormGroup label="Nombre de usuario" name="username">
<UInput
:model-value="user?.username"
disabled
icon="i-heroicons-user"
:ui="{ base: 'cursor-not-allowed opacity-50' }"
/>
<template #help>
<span class="text-xs text-gray-500">El username no se puede cambiar</span>
</template>
</UFormGroup>
<UFormGroup label="Nombre completo" required>
<UFormGroup label="Nombre completo" name="name" required>
<UInput
v-model="formData.name"
placeholder="Tu nombre completo"
icon="i-heroicons-user-circle"
:disabled="isSubmitting"
/>
</UFormGroup>
<UFormGroup label="Email" required>
<UFormGroup label="Email" name="email" required>
<UInput
v-model="formData.email"
type="email"
placeholder="tu@email.com"
icon="i-heroicons-envelope"
:disabled="isSubmitting"
/>
</UFormGroup>
<div class="flex justify-end gap-3 mt-6">
<div class="flex justify-end gap-3 pt-4">
<UButton
color="neutral"
variant="ghost"
@@ -98,15 +97,15 @@
Cancelar
</UButton>
<UButton
type="submit"
color="primary"
:loading="isSubmitting"
@click="handleSubmit"
>
Guardar cambios
</UButton>
</div>
</form>
</div>
</div>
</template>
</UModal>
</div>
</template>
@@ -218,7 +217,7 @@ const handleSubmit = async () => {
}
:global(.dark) .header-content {
background: rgba(15, 15, 25, 0.4);
background: rgba(0, 0, 0, 0.4);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.5),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -296,12 +295,6 @@ const handleSubmit = async () => {
inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
}
.modal-content {
padding: 1.5rem;
max-width: 28rem;
margin: 0 auto;
}
.edit-hint {
display: flex;
align-items: center;
@@ -349,7 +342,7 @@ const handleSubmit = async () => {
}
:global(.dark) .theme-toggle {
background: rgba(15, 15, 25, 0.3);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 16px 0 rgba(0, 0, 0, 0.5),

4
nuxt4/app/components/auth/ApplicationsList.vue
View File

@@ -188,7 +188,7 @@ onUnmounted(() => {
}
:global(.dark) .applications-container {
background: rgba(15, 15, 25, 0.35);
background: rgba(0, 0, 0, 0.35);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.5),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
@@ -262,7 +262,7 @@ onUnmounted(() => {
}
:global(.dark) .app-card {
background: rgba(20, 20, 30, 0.3);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 16px 0 rgba(0, 0, 0, 0.4),