UI/UX Optimization: Fixed HUD elements, compacted sidebar menu, and improved mobile animations stability
This commit is contained in:
@ -373,7 +373,7 @@ const handleLogout = () => {
|
||||
}
|
||||
|
||||
.menu-bottom-group {
|
||||
margin-top: auto;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -7,20 +7,12 @@ defineProps<{
|
||||
<template>
|
||||
<div class="offers-container" :class="{ 'is-close': isClose }">
|
||||
<div class="loader">
|
||||
<svg width="100" height="100" viewBox="0 0 100 100">
|
||||
<defs>
|
||||
<mask id="clipping">
|
||||
<polygon points="0,0 100,0 100,100 0,100" fill="black"></polygon>
|
||||
<polygon points="25,25 75,25 50,75" fill="white"></polygon>
|
||||
<polygon points="50,25 75,75 25,75" fill="white"></polygon>
|
||||
<polygon points="35,35 65,35 50,65" fill="white"></polygon>
|
||||
<polygon points="35,35 65,35 50,65" fill="white"></polygon>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
<div class="box">
|
||||
<span class="material-icons offer-icon">{{ isClose ? 'close' : 'local_offer' }}</span>
|
||||
</div>
|
||||
<!-- Anillos de energía flotantes -->
|
||||
<div class="energy-ring"></div>
|
||||
<div class="energy-ring delayed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -30,127 +22,68 @@ defineProps<{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
transform: scale(0.65);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
/* Default: SIBU GOLD */
|
||||
--color-one: #fee715;
|
||||
--color-two: #facc15;
|
||||
--color-three: rgba(254, 231, 21, 0.5);
|
||||
--color-four: rgba(250, 204, 21, 0.3);
|
||||
--color-five: rgba(254, 231, 21, 0.1);
|
||||
--time-animation: 2s;
|
||||
--size: 1;
|
||||
--color-main: #fee715;
|
||||
--color-glow: rgba(254, 231, 21, 0.5);
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
transform: scale(var(--size));
|
||||
box-shadow: 0 0 25px 0 var(--color-three),
|
||||
0 10px 30px 0 var(--color-four);
|
||||
animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* RED PHASE: CLOSE MODE */
|
||||
.is-close .loader {
|
||||
--color-one: #ef4444;
|
||||
--color-two: #dc2626;
|
||||
--color-three: rgba(239, 68, 68, 0.5);
|
||||
--color-four: rgba(220, 38, 38, 0.3);
|
||||
--color-five: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
border-top: solid 2px var(--color-one);
|
||||
border-bottom: solid 2px var(--color-two);
|
||||
background: radial-gradient(circle, var(--color-five), transparent);
|
||||
box-shadow: inset 0 10px 20px 0 var(--color-three),
|
||||
inset 0 -10px 20px 0 var(--color-four);
|
||||
}
|
||||
|
||||
.loader .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: var(--color-one);
|
||||
mask: url(#clipping);
|
||||
-webkit-mask: url(#clipping);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 15px;
|
||||
background: #101820;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: 0 0 20px var(--color-glow);
|
||||
border: 2px solid var(--color-main);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.is-close .loader {
|
||||
--color-main: #ef4444;
|
||||
--color-glow: rgba(239, 68, 68, 0.5);
|
||||
transform: rotate(90deg);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.offer-icon {
|
||||
color: #101820;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: var(--color-main);
|
||||
font-size: 28px;
|
||||
z-index: 5;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.is-close .offer-icon {
|
||||
color: #ffffff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loader svg {
|
||||
/* Anillos orbitales tecnológicos */
|
||||
.energy-ring {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
border: 2px solid var(--color-main);
|
||||
border-radius: inherit;
|
||||
opacity: 0.3;
|
||||
animation: pulse-ring 2s infinite;
|
||||
}
|
||||
|
||||
.loader svg #clipping {
|
||||
filter: contrast(15);
|
||||
animation: roundness calc(var(--time-animation) / 2) linear infinite;
|
||||
.energy-ring.delayed {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon {
|
||||
filter: blur(7px);
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(1); opacity: 0.5; }
|
||||
100% { transform: scale(1.4); opacity: 0; }
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon:nth-child(1) {
|
||||
transform-origin: 75% 25%;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon:nth-child(2) {
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotation var(--time-animation) linear infinite reverse;
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon:nth-child(3) {
|
||||
transform-origin: 50% 60%;
|
||||
animation: rotation var(--time-animation) linear infinite;
|
||||
animation-delay: calc(var(--time-animation) / -3);
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon:nth-child(4) {
|
||||
transform-origin: 40% 40%;
|
||||
animation: rotation var(--time-animation) linear infinite reverse;
|
||||
}
|
||||
|
||||
.loader svg #clipping polygon:nth-child(5) {
|
||||
transform-origin: 60% 40%;
|
||||
animation: rotation var(--time-animation) linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes roundness {
|
||||
0%, 60%, 100% { filter: contrast(12); }
|
||||
20%, 40% { filter: contrast(2); }
|
||||
}
|
||||
|
||||
@keyframes colorize {
|
||||
0%, 100% { filter: saturate(1) brightness(1); }
|
||||
50% { filter: saturate(1.5) brightness(1.2); }
|
||||
.loader:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user