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="pulse-orb"
|
||||||
:class="{
|
:class="{
|
||||||
active: isPlaying,
|
active: isPlaying,
|
||||||
playing: isPlaying && !isAnswerClip,
|
|
||||||
answer: isPlaying && isAnswerClip,
|
answer: isPlaying && isAnswerClip,
|
||||||
idle: !currentClipUrl
|
idle: !currentClipUrl
|
||||||
}"
|
}"
|
||||||
|
|||||||
@@ -396,16 +396,8 @@ audio.hidden-audio {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pulse-orb.playing {
|
.pulse-orb.playing {
|
||||||
background: linear-gradient(
|
background: #7df9ff;
|
||||||
135deg,
|
animation: hueShift 10s linear infinite;
|
||||||
#7df9ff,
|
|
||||||
#6c63ff,
|
|
||||||
#ff7ad9,
|
|
||||||
#ffd36a,
|
|
||||||
#7df9ff
|
|
||||||
);
|
|
||||||
background-size: 240% 240%;
|
|
||||||
animation: gradientShift 6s ease-in-out infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulse-orb.answer {
|
.pulse-orb.answer {
|
||||||
@@ -434,13 +426,13 @@ audio.hidden-audio {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 12px;
|
width: 16px;
|
||||||
height: calc(20px + var(--level, 0) * 100px);
|
height: calc(20px + var(--level, 0) * 100px);
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to top,
|
to top,
|
||||||
rgba(0, 0, 0, 0) 0%,
|
rgba(0, 0, 0, 0) 0%,
|
||||||
hsla(var(--ray-hue, 200), 90%, 70%, 0.6) 45%,
|
currentColor 45%,
|
||||||
hsla(var(--ray-hue, 200), 95%, 75%, 0.95) 100%
|
currentColor 100%
|
||||||
);
|
);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
filter: blur(calc(1.5px - var(--level, 0) * 0.5));
|
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));
|
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;
|
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;
|
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% {
|
0% {
|
||||||
background-position: 0% 50%;
|
filter: hue-rotate(0deg);
|
||||||
}
|
}
|
||||||
50% {
|
33% {
|
||||||
background-position: 100% 50%;
|
filter: hue-rotate(120deg);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
filter: hue-rotate(240deg);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background-position: 0% 50%;
|
filter: hue-rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user