ltadeu6/skeledance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: move reflection inside robot-wrap so bottom:0 aligns with feet

Browse source
This commit is contained in:
ltadeu6 2026-06-07 12:40:19 -03:00
parent 8de8923785
commit 89f9c5c69a
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
1 changed files with 5 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

15
plugin/contents/ui/dancer.html
View file

@ -257,15 +257,11 @@ html, body {
============================================================ */ ============================================================ */
.robot-reflection { .robot-reflection {
position: absolute; position: absolute;
bottom: 0;
left: 50%; left: 50%;
bottom: 32%;
transform: translateX(-50%) scaleY(-0.22); transform: translateX(-50%) scaleY(-0.22);
transform-origin: bottom center; transform-origin: bottom center;
opacity: 0;
transition: opacity 0.8s;
pointer-events: none; pointer-events: none;
/* mask in original (pre-flip) space: opaque at bottom (feet), transparent at top (head)
after scaleY(-1) this becomes: opaque at top of visible area (feet), transparent lower */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%);
filter: blur(1.5px) brightness(0.5); filter: blur(1.5px) brightness(0.5);
@ -765,13 +761,11 @@ html, body {
<!-- Meteor layer (masked at horizon) --> <!-- Meteor layer (masked at horizon) -->
<div id="meteorLayer"></div> <div id="meteorLayer"></div>
<!-- ===================== REFLEXO ===================== -->
<div class="robot-reflection" id="robotReflection">
<img src="skeleton3.apng" class="skeleton-gif" alt="">
</div>
<!-- ===================== ROBOT ===================== --> <!-- ===================== ROBOT ===================== -->
<div class="robot-wrap"> <div class="robot-wrap">
<div class="robot-reflection">
<img src="skeleton3.apng" class="skeleton-gif" alt="">
</div>
<div class="beat-wrap"> <div class="beat-wrap">
<img src="skeleton3.apng" class="skeleton-gif" alt="skeleton"> <img src="skeleton3.apng" class="skeleton-gif" alt="skeleton">
</div> </div>
@ -1107,7 +1101,6 @@ function updateMusic(artist, title) {
const playing = !!(artist || title); const playing = !!(artist || title);
isPlaying = playing; isPlaying = playing;
document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
document.getElementById('robotReflection').style.opacity = playing ? '1' : '0';
document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0'; document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0';
albumArtEl.style.opacity = playing ? '1' : '0'; albumArtEl.style.opacity = playing ? '1' : '0';
if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; }); if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });