fix: simplify rotating border with proper z-index and drop-shadow glow
This commit is contained in:
42
src/main.css
42
src/main.css
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user