josedario87
75069a7633
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 56s
- 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
353 lines
11 KiB
Vue
353 lines
11 KiB
Vue
<template>
|
|
<div class="animated-background">
|
|
<!-- Fondo día -->
|
|
<div class="landscape day-landscape" :class="{ active: !isNight }">
|
|
<!-- Cielo diurno con gradiente -->
|
|
<svg class="sky" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<linearGradient id="daySkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="1920" height="1080" fill="url(#daySkyGradient)" />
|
|
</svg>
|
|
|
|
<!-- Sol -->
|
|
<svg class="sun" viewBox="0 0 200 200" width="120" height="120">
|
|
<defs>
|
|
<radialGradient id="sunGradient">
|
|
<stop offset="0%" style="stop-color:#FFF176;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#FFD54F;stop-opacity:0.8" />
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="100" cy="100" r="50" fill="url(#sunGradient)" />
|
|
<g class="sun-rays">
|
|
<line x1="100" y1="20" x2="100" y2="0" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="150" y1="35" x2="165" y2="20" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="180" y1="100" x2="200" y2="100" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="150" y1="165" x2="165" y2="180" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="100" y1="180" x2="100" y2="200" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="50" y1="165" x2="35" y2="180" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="20" y1="100" x2="0" y2="100" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
<line x1="50" y1="35" x2="35" y2="20" stroke="#FFD54F" stroke-width="3" stroke-linecap="round" />
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- Nubes diurnas -->
|
|
<svg class="cloud cloud-1" viewBox="0 0 200 100" width="180" height="90">
|
|
<path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
|
|
fill="#FFFFFF" opacity="0.9" />
|
|
</svg>
|
|
<svg class="cloud cloud-2" viewBox="0 0 200 100" width="150" height="75">
|
|
<path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
|
|
fill="#FFFFFF" opacity="0.8" />
|
|
</svg>
|
|
<svg class="cloud cloud-3" viewBox="0 0 200 100" width="200" height="100">
|
|
<path d="M 30,60 Q 30,40 50,40 Q 50,20 70,20 Q 90,20 90,40 Q 110,40 110,60 Q 110,80 90,80 L 50,80 Q 30,80 30,60 Z"
|
|
fill="#FFFFFF" opacity="0.7" />
|
|
</svg>
|
|
|
|
<!-- Montañas lejanas (más claras) -->
|
|
<svg class="mountains mountains-far" viewBox="0 0 1920 600" preserveAspectRatio="xMidYMid slice">
|
|
<path d="M 0,400 L 400,150 L 600,250 L 900,100 L 1200,200 L 1500,120 L 1920,300 L 1920,600 L 0,600 Z"
|
|
fill="#A7C7E7" opacity="0.6" />
|
|
</svg>
|
|
|
|
<!-- Montañas cercanas -->
|
|
<svg class="mountains mountains-near" viewBox="0 0 1920 700" preserveAspectRatio="xMidYMid slice">
|
|
<path d="M 0,500 L 300,250 L 500,350 L 800,200 L 1100,320 L 1400,180 L 1700,350 L 1920,250 L 1920,700 L 0,700 Z"
|
|
fill="#4A7C94" opacity="0.8" />
|
|
</svg>
|
|
|
|
<!-- Colinas con césped -->
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Fondo noche -->
|
|
<div class="landscape night-landscape" :class="{ active: isNight }">
|
|
<!-- Cielo nocturno con gradiente -->
|
|
<svg class="sky" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<linearGradient id="nightSkyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0B1026;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1A2150;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="1920" height="1080" fill="url(#nightSkyGradient)" />
|
|
</svg>
|
|
|
|
<!-- Estrellas -->
|
|
<svg class="stars" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
|
|
<circle cx="200" cy="100" r="2" fill="#FFFFFF" class="star star-1" />
|
|
<circle cx="400" cy="150" r="1.5" fill="#FFFFFF" class="star star-2" />
|
|
<circle cx="600" cy="80" r="2" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="800" cy="200" r="1" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="1000" cy="120" r="2" fill="#FFFFFF" class="star star-1" />
|
|
<circle cx="1200" cy="180" r="1.5" fill="#FFFFFF" class="star star-2" />
|
|
<circle cx="1400" cy="90" r="1" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="1600" cy="160" r="2" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="1800" cy="110" r="1.5" fill="#FFFFFF" class="star star-1" />
|
|
|
|
<circle cx="300" cy="300" r="1" fill="#FFFFFF" class="star star-2" />
|
|
<circle cx="500" cy="350" r="2" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="700" cy="280" r="1.5" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="900" cy="320" r="1" fill="#FFFFFF" class="star star-1" />
|
|
<circle cx="1100" cy="290" r="2" fill="#FFFFFF" class="star star-2" />
|
|
<circle cx="1300" cy="340" r="1" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="1500" cy="310" r="1.5" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="1700" cy="330" r="2" fill="#FFFFFF" class="star star-1" />
|
|
|
|
<circle cx="150" cy="450" r="1.5" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="350" cy="480" r="1" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="550" cy="420" r="2" fill="#FFFFFF" class="star star-1" />
|
|
<circle cx="750" cy="460" r="1" fill="#FFFFFF" class="star star-2" />
|
|
<circle cx="950" cy="440" r="1.5" fill="#FFFFFF" class="star star-3" />
|
|
<circle cx="1150" cy="470" r="2" fill="#FFFFFF" class="star star-4" />
|
|
<circle cx="1350" cy="430" r="1" fill="#FFFFFF" class="star star-1" />
|
|
<circle cx="1550" cy="450" r="1.5" fill="#FFFFFF" class="star star-2" />
|
|
</svg>
|
|
|
|
<!-- Luna -->
|
|
<svg class="moon" viewBox="0 0 200 200" width="100" height="100">
|
|
<defs>
|
|
<radialGradient id="moonGradient">
|
|
<stop offset="0%" style="stop-color:#F5F5DC;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#E6E6D0;stop-opacity:0.9" />
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="100" cy="100" r="45" fill="url(#moonGradient)" />
|
|
<!-- Cráteres -->
|
|
<circle cx="85" cy="90" r="8" fill="#D0D0C0" opacity="0.3" />
|
|
<circle cx="110" cy="105" r="6" fill="#D0D0C0" opacity="0.3" />
|
|
<circle cx="95" cy="115" r="5" fill="#D0D0C0" opacity="0.3" />
|
|
<circle cx="115" cy="85" r="4" fill="#D0D0C0" opacity="0.3" />
|
|
</svg>
|
|
|
|
<!-- Montañas lejanas nocturnas -->
|
|
<svg class="mountains mountains-far" viewBox="0 0 1920 600" preserveAspectRatio="xMidYMid slice">
|
|
<path d="M 0,400 L 400,150 L 600,250 L 900,100 L 1200,200 L 1500,120 L 1920,300 L 1920,600 L 0,600 Z"
|
|
fill="#1A2340" opacity="0.7" />
|
|
</svg>
|
|
|
|
<!-- Montañas cercanas nocturnas -->
|
|
<svg class="mountains mountains-near" viewBox="0 0 1920 700" preserveAspectRatio="xMidYMid slice">
|
|
<path d="M 0,500 L 300,250 L 500,350 L 800,200 L 1100,320 L 1400,180 L 1700,350 L 1920,250 L 1920,700 L 0,700 Z"
|
|
fill="#0D1428" opacity="0.9" />
|
|
</svg>
|
|
|
|
<!-- Colinas nocturnas -->
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { isNight } = useTheme()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.animated-background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.landscape {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 1.5s ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.landscape.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sky {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Sol */
|
|
.sun {
|
|
position: absolute;
|
|
top: 10%;
|
|
right: 15%;
|
|
animation: sunFloat 20s ease-in-out infinite;
|
|
}
|
|
|
|
.sun-rays {
|
|
transform-origin: center;
|
|
animation: sunRotate 30s linear infinite;
|
|
}
|
|
|
|
@keyframes sunFloat {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes sunRotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Luna */
|
|
.moon {
|
|
position: absolute;
|
|
top: 8%;
|
|
right: 12%;
|
|
animation: moonFloat 25s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes moonFloat {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
/* Estrellas */
|
|
.stars {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60%;
|
|
}
|
|
|
|
.star {
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.star-1 { animation-name: twinkle1; }
|
|
.star-2 { animation-name: twinkle2; animation-delay: 0.5s; }
|
|
.star-3 { animation-name: twinkle3; animation-delay: 1s; }
|
|
.star-4 { animation-name: twinkle4; animation-delay: 1.5s; }
|
|
|
|
@keyframes twinkle1 {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
@keyframes twinkle2 {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes twinkle3 {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
@keyframes twinkle4 {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 0.1; }
|
|
}
|
|
|
|
/* Nubes */
|
|
.cloud {
|
|
position: absolute;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.cloud-1 {
|
|
top: 15%;
|
|
left: -10%;
|
|
animation: cloudFloat1 60s linear infinite;
|
|
}
|
|
|
|
.cloud-2 {
|
|
top: 25%;
|
|
left: -10%;
|
|
animation: cloudFloat2 80s linear infinite;
|
|
}
|
|
|
|
.cloud-3 {
|
|
top: 35%;
|
|
left: -10%;
|
|
animation: cloudFloat3 100s linear infinite;
|
|
}
|
|
|
|
@keyframes cloudFloat1 {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(calc(100vw + 200px)); }
|
|
}
|
|
|
|
@keyframes cloudFloat2 {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(calc(100vw + 200px)); }
|
|
}
|
|
|
|
@keyframes cloudFloat3 {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(calc(100vw + 200px)); }
|
|
}
|
|
|
|
/* Montañas y colinas */
|
|
.mountains, .hills {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mountains-far {
|
|
bottom: 15%;
|
|
animation: mountainFloat 40s ease-in-out infinite;
|
|
}
|
|
|
|
.mountains-near {
|
|
bottom: 8%;
|
|
animation: mountainFloat 35s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.hills {
|
|
bottom: 0;
|
|
animation: hillFloat 30s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes mountainFloat {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(-20px); }
|
|
}
|
|
|
|
@keyframes hillFloat {
|
|
0%, 100% { transform: translateX(0); }
|
|
50% { transform: translateX(15px); }
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sun, .moon {
|
|
width: 80px;
|
|
height: 80px;
|
|
top: 8%;
|
|
right: 10%;
|
|
}
|
|
|
|
.cloud {
|
|
transform: scale(0.7);
|
|
}
|
|
}
|
|
</style>
|