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

Improve overlay readability and swap lyrics/album layout

Browse source 
Now-playing ticker gets a dark blurred pill, lyrics get a fading dark
veil plus dark text shadows so both stay readable over the Milky Way.
Lyrics move back to the left, album art to the right. PLANET_SPECS no
longer hard-crashes the whole script if Astronomy Engine fails to load,
and CLAUDE.md catches up with the planetarium features.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015HtPHsTnDcLVSCiF5FGHZj
This commit is contained in:
vini 2026-07-19 21:06:36 -03:00
parent f3019d044f
commit f5e1949c91
2 changed files with 37 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -164,7 +164,7 @@ body.balada .nebula::after { opacity: 1; }
.album-art {
position: absolute;
top: 4%;
left: 2%;
right: 2%;
width: 330px;
height: 330px;
border-radius: 6px;
@ -194,6 +194,12 @@ body.balada .nebula::after { opacity: 1; }
overflow: hidden;
opacity: 0;
transition: opacity 0.8s, top 0.8s ease;
/* legibilidade sobre a Via Láctea: pílula escura + desfoque do fundo */
padding: 5px 16px;
border-radius: 999px;
background: rgba(3, 8, 20, 0.55);
backdrop-filter: blur(6px);
border: 1px solid rgba(0, 200, 255, 0.14);
}
body.balada .music-ticker {
/* acima do VU meter: bottom 5% + 70px barras + 10px gap */
@ -219,7 +225,7 @@ body.balada .music-ticker {
color: #ffffff;
font-family: 'Courier New', monospace;
font-size: clamp(11px, 1.2vw, 17px);
text-shadow: 0 0 8px rgba(0,200,255,0.7);
text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,200,255,0.7);
white-space: nowrap;
animation: musicScroll 18s linear infinite;
}
@ -254,14 +260,20 @@ body.balada .music-ticker {
============================================================ */
.lyric-display {
position: absolute;
right: 2%;
left: 2%;
top: 4%;
width: 38%;
height: 150px;
padding: 0 14px;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
/* véu escuro atrás da letra p/ ler sobre a Via Láctea; a máscara vertical
também esmaece o véu, então as bordas continuam suaves */
background: linear-gradient(to right,
rgba(3, 8, 20, 0.58) 0%, rgba(3, 8, 20, 0.38) 70%, transparent 100%);
border-radius: 10px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
@ -273,7 +285,7 @@ body.balada .music-ticker {
.lyric-ctx {
display: block;
width: 100%;
text-align: right; /* letra ancorada à direita da tela */
text-align: left; /* letra ancorada à esquerda da tela */
font-family: 'Courier New', monospace;
letter-spacing: 0.02em;
white-space: normal;
@ -1268,7 +1280,8 @@ const HORIZON_F = 0.585; // fração da altura da tela até o horizonte
const TWINKLE_MAG = 4.0; // até esta magnitude a estrela cintila; acima é estática
const DEG = Math.PI / 180;
window.__skyTimeOffset = 0; // debug: ms somados ao relógio p/ testar a rotação
const PLANET_SPECS = [
/* Sem o Astronomy Engine o céu continua funcionando; só Lua/planetas somem */
const PLANET_SPECS = typeof Astronomy === 'undefined' ? [] : [
[Astronomy.Body.Mercury, 'Mercúrio', [190, 188, 182]],
[Astronomy.Body.Venus, 'Vênus', [255, 241, 204]],
[Astronomy.Body.Mars, 'Marte', [238, 105, 70]],
@ -2430,12 +2443,14 @@ const ACTIVE_SHADOW =
'0 0 6px var(--theme-color,rgba(0,200,255,0.5)),' +
'0 2px 10px rgba(0,0,0,0.95)';
const CTX_SHADOW = '0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.8)';
const VERSE_STYLES = [
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' },
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow: CTX_SHADOW },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow: CTX_SHADOW },
{ opacity:'1', fontSize:'clamp(16px,1.3vw,18px)', color:'#fff', shadow: ACTIVE_SHADOW },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow:'' },
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
{ opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)', color:'#bbb', shadow: CTX_SHADOW },
{ opacity:'0.2', fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow: CTX_SHADOW },
];
let verseEls = [];