Make planet one color and tentacles have same color
All checks were successful
On Push Deploy / deploy (push) Successful in 21s
All checks were successful
On Push Deploy / deploy (push) Successful in 21s
This commit is contained in:
@@ -168,7 +168,6 @@
|
||||
class="pulse-orb"
|
||||
:class="{
|
||||
active: isPlaying,
|
||||
playing: isPlaying && !isAnswerClip,
|
||||
answer: isPlaying && isAnswerClip,
|
||||
idle: !currentClipUrl
|
||||
}"
|
||||
|
||||
@@ -396,16 +396,8 @@ audio.hidden-audio {
|
||||
}
|
||||
|
||||
.pulse-orb.playing {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#7df9ff,
|
||||
#6c63ff,
|
||||
#ff7ad9,
|
||||
#ffd36a,
|
||||
#7df9ff
|
||||
);
|
||||
background-size: 240% 240%;
|
||||
animation: gradientShift 6s ease-in-out infinite;
|
||||
background: #7df9ff;
|
||||
animation: hueShift 10s linear infinite;
|
||||
}
|
||||
|
||||
.pulse-orb.answer {
|
||||
@@ -434,13 +426,13 @@ audio.hidden-audio {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
width: 16px;
|
||||
height: calc(20px + var(--level, 0) * 100px);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
hsla(var(--ray-hue, 200), 90%, 70%, 0.6) 45%,
|
||||
hsla(var(--ray-hue, 200), 95%, 75%, 0.95) 100%
|
||||
currentColor 45%,
|
||||
currentColor 100%
|
||||
);
|
||||
border-radius: 999px;
|
||||
filter: blur(calc(1.5px - var(--level, 0) * 0.5));
|
||||
@@ -452,6 +444,12 @@ audio.hidden-audio {
|
||||
scaleX(calc(0.7 + var(--level, 0) * 0.5));
|
||||
transition: height 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out, filter 0.08s ease-out;
|
||||
mix-blend-mode: screen;
|
||||
color: #7df9ff;
|
||||
}
|
||||
|
||||
.pulse-orb.playing,
|
||||
.pulse-tentacles .tentacle {
|
||||
animation: hueShift 10s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@@ -465,15 +463,18 @@ audio.hidden-audio {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
@keyframes hueShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
33% {
|
||||
filter: hue-rotate(120deg);
|
||||
}
|
||||
66% {
|
||||
filter: hue-rotate(240deg);
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user