From 2f44cfe4307b0c60d61a35fc636d498190e93b9c Mon Sep 17 00:00:00 2001 From: Johnny322 Date: Tue, 10 Feb 2026 16:40:57 +0100 Subject: [PATCH] Make planet one color and tentacles have same color --- src/App.vue | 1 - src/styles.css | 37 +++++++++++++++++++------------------ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/App.vue b/src/App.vue index 88a34c0..e11f5b4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -168,7 +168,6 @@ class="pulse-orb" :class="{ active: isPlaying, - playing: isPlaying && !isAnswerClip, answer: isPlaying && isAnswerClip, idle: !currentClipUrl }" diff --git a/src/styles.css b/src/styles.css index 8cb3eb3..4c30e8d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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); } }