fix: simplify rotating border with proper z-index and drop-shadow glow

This commit is contained in:
2026-01-13 21:23:04 +01:00
parent 1507bfc8eb
commit 83e6c12b9a

View File

@@ -599,29 +599,10 @@ kbd {
/* Success Match Animation - Gemini-style rotating gradient border */ /* Success Match Animation - Gemini-style rotating gradient border */
.preview-wrapper.matched { .preview-wrapper.matched {
overflow: visible; overflow: visible;
isolation: isolate;
} }
/* Glow layer (blurred, behind) */ /* Rotating gradient border with glow */
.preview-wrapper.matched::before {
content: "";
position: absolute;
inset: -4px;
border-radius: calc(var(--border-radius-md) + 4px);
background: conic-gradient(
from 0deg,
#9b59b6,
#e040fb,
#00bcd4,
#7c4dff,
#9b59b6
);
z-index: -2;
filter: blur(12px);
opacity: 0;
animation: rotate-glow 2.5s linear forwards;
}
/* Border layer (crisp rotating gradient) */
.preview-wrapper.matched::after { .preview-wrapper.matched::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -635,7 +616,7 @@ kbd {
#7c4dff, #7c4dff,
#9b59b6 #9b59b6
); );
z-index: -1; z-index: 10;
-webkit-mask: -webkit-mask:
linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0); linear-gradient(#fff 0 0);
@@ -643,6 +624,9 @@ kbd {
mask-composite: exclude; mask-composite: exclude;
padding: 3px; padding: 3px;
opacity: 0; opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.8))
drop-shadow(0 0 15px rgba(124, 77, 255, 0.5));
animation: rotate-border 2.5s linear forwards; animation: rotate-border 2.5s linear forwards;
} }
@@ -660,20 +644,6 @@ kbd {
} }
} }
@keyframes rotate-glow {
0% {
transform: rotate(0deg);
opacity: 0.6;
}
80% {
opacity: 0.4;
}
100% {
transform: rotate(-360deg);
opacity: 0;
}
}
/* ================= GAME CONTROLS ================= */ /* ================= GAME CONTROLS ================= */
.game-controls { .game-controls {
display: flex; display: flex;