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

Tone down day mode: dusty sky, fog-like clouds, gothic grave

Browse source 
Sky shifts to dusty purple-rose, ground to moss green. Clouds drop the
cartoon puffs for the night fog's language: heavily blurred ellipses
drifting slowly in dusty pink. The gravestone goes gothic — dark slate
ogival arch, slight tilt, crack, moss creeping up the base, engraved
skull glyph above the R.I.P., serif inscription, moss-toned mound and
grass tufts.

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:37:31 -03:00
parent 8181315a8c
commit 13f71289a6
1 changed files with 95 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1141,14 +1141,14 @@ body.chuva #sunChuvaFace { opacity: 1; transition: opacity 5s ease; }
opacity: 0; opacity: 0;
transition: opacity 12s ease; transition: opacity 12s ease;
background: linear-gradient(to bottom, background: linear-gradient(to bottom,
#c86fe0 0%, #7d4f94 0%,
#f18ade 26%, #b0619f 26%,
#ffaede 44%, #d183b3 44%,
#ffcfe0 60%, #e3a3b8 60%,
#ffe4c9 66%, #edc19e 66%,
#86e29e 66.1%, #5a7d4a 66.1%,
#4fbb6b 82%, #3e5c35 82%,
#2e9550 100%); #2a4126 100%);
} }
body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; } body.dia:not(.balada):not(.chuva) #daySky { opacity: 1; }
@ -1157,37 +1157,40 @@ body.dia:not(.balada):not(.chuva) #starfield { opacity: 0.12; transition: opaci
body.dia:not(.balada):not(.chuva) .nebula { opacity: 0; } body.dia:not(.balada):not(.chuva) .nebula { opacity: 0; }
body.dia:not(.balada):not(.chuva) #meteorLayer { opacity: 0; } body.dia:not(.balada):not(.chuva) #meteorLayer { opacity: 0; }
/* Nuvens diurnas: chapadas embaixo, fofas em cima, rosadas por baixo */ /* Nuvens diurnas: mesmo vocabulário da névoa noturna — elipses muito
borradas derivando devagar, em rosa empoeirado */
.day-cloud { .day-cloud {
position: absolute; position: absolute;
border-radius: 10vh; border-radius: 50%;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 12s ease; transition: opacity 12s ease;
background: linear-gradient(to bottom, #fffdfe 0%, #ffe4f2 62%, #ffc7e6 100%); filter: blur(42px);
box-shadow: 0 1.6vh 3.2vh rgba(255,110,200,0.20); background: radial-gradient(ellipse,
animation: cloudDrift ease-in-out infinite alternate; rgba(238,205,228,0.60) 0%, rgba(216,168,205,0.30) 55%, transparent 75%);
will-change: transform, opacity;
} }
.day-cloud::before, .day-cloud::after { .cloud-a { width: 46vh; height: 11vh; top: 10%; left: 8%;
content: ''; animation: dayCloudDrift1 26s ease-in-out infinite alternate; }
position: absolute; .cloud-b { width: 38vh; height: 9vh; top: 22%; right: 10%;
border-radius: 50%; animation: dayCloudDrift2 34s ease-in-out infinite alternate;
background: inherit; animation-delay: -12s; }
.cloud-c { width: 30vh; height: 7vh; top: 36%; left: 32%;
animation: dayCloudDrift3 22s ease-in-out infinite alternate;
animation-delay: -7s; }
@keyframes dayCloudDrift1 {
from { transform: translateX(-2.5vw) scaleX(1); }
to { transform: translateX(2.5vw) scaleX(1.14); }
} }
.cloud-a { width: 30vh; height: 7.5vh; top: 9%; left: 10%; animation-duration: 110s; } @keyframes dayCloudDrift2 {
.cloud-a::before { width: 11vh; height: 11vh; top: -5.2vh; left: 5vh; } from { transform: translateX(2vw) scaleX(0.94); }
.cloud-a::after { width: 14vh; height: 14vh; top: -6.4vh; right: 6vh; } to { transform: translateX(-2.5vw) scaleX(1.10); }
.cloud-b { width: 22vh; height: 5.5vh; top: 20%; right: 12%; animation-duration: 140s; animation-delay: -40s; }
.cloud-b::before { width: 8vh; height: 8vh; top: -3.8vh; left: 3.6vh; }
.cloud-b::after { width: 10vh; height: 10vh; top: -4.6vh; right: 4.4vh; }
.cloud-c { width: 16vh; height: 4.2vh; top: 33%; left: 30%; animation-duration: 90s; animation-delay: -70s; }
.cloud-c::before { width: 6vh; height: 6vh; top: -2.8vh; left: 2.6vh; }
.cloud-c::after { width: 7.5vh; height: 7.5vh; top: -3.4vh; right: 3.2vh; }
@keyframes cloudDrift {
from { transform: translateX(-3vw); }
to { transform: translateX(3vw); }
} }
body.dia:not(.balada):not(.chuva) .day-cloud { opacity: 0.92; } @keyframes dayCloudDrift3 {
from { transform: translateX(-1.5vw) scaleX(1.05); }
to { transform: translateX(2vw) scaleX(0.90); }
}
body.dia:not(.balada):not(.chuva) .day-cloud { opacity: 0.8; }
/* O sol vira sol de verdade: disco quente, sem listras retrô */ /* O sol vira sol de verdade: disco quente, sem listras retrô */
#sunDiaBg { #sunDiaBg {
@ -1255,10 +1258,10 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
width: 30vh; width: 30vh;
height: 4.6vh; height: 4.6vh;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(ellipse, rgba(25,60,35,0.42), transparent 68%); background: radial-gradient(ellipse, rgba(12,26,16,0.50), transparent 68%);
} }
/* montinho de terra gramado aos pés da pedra */ /* montinho de terra musgoso aos pés da pedra */
.grave-mound { .grave-mound {
position: absolute; position: absolute;
bottom: -1.8vh; bottom: -1.8vh;
@ -1267,57 +1270,90 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
width: 26vh; width: 26vh;
height: 5vh; height: 5vh;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(to bottom, #6fd486 0%, #43a75f 60%, #2e8348 100%); background: linear-gradient(to bottom, #6d955c 0%, #4a6c3f 60%, #34502c 100%);
box-shadow: inset 0 0.7vh 1.2vh rgba(255,255,210,0.30); box-shadow: inset 0 0.7vh 1.2vh rgba(225,232,190,0.20);
} }
/* pedra: topo arredondado, granito lilás com luz rosa do céu */ /* pedra gótica: arco ogival, ardósia escura, torta e comida pelo tempo */
.gravestone { .gravestone {
position: relative; position: relative;
width: 15vh; width: 15vh;
height: 19vh; height: 21vh;
border-radius: 7.5vh 7.5vh 0.8vh 0.8vh; transform: rotate(-2.5deg);
clip-path: polygon(50% 0%, 60% 2%, 71% 8%, 81% 18%, 88% 32%, 91% 50%,
91% 100%, 9% 100%, 9% 50%, 12% 32%, 19% 18%, 29% 8%, 40% 2%);
background: background:
linear-gradient(115deg, linear-gradient(115deg,
rgba(255,170,225,0.38) 0%, rgba(255,255,255,0.10) 34%, rgba(209,131,179,0.26) 0%, rgba(255,255,255,0.06) 34%,
rgba(30,18,55,0.28) 100%), rgba(8,5,18,0.50) 100%),
linear-gradient(to bottom, #bfaed4 0%, #9789b4 55%, #6f6494 100%); linear-gradient(to bottom, #4a4258 0%, #363048 55%, #241f34 100%);
box-shadow: box-shadow: inset 0 -1.4vh 2.4vh rgba(8,5,20,0.55);
inset 0 -1.4vh 2.2vh rgba(28,16,52,0.38), filter: drop-shadow(0 0 14px rgba(209,131,179,0.22));
0 0 26px rgba(255,120,200,0.30); }
/* musgo subindo pela base da pedra */
.gravestone::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 102%, rgba(74,105,60,0.60), transparent 42%),
radial-gradient(circle at 78% 103%, rgba(58,88,46,0.50), transparent 38%),
radial-gradient(circle at 50% 108%, rgba(66,96,52,0.40), transparent 50%);
}
/* rachadura descendo do arco */
.gravestone::after {
content: '';
position: absolute;
top: 7%;
left: 30%;
width: 0.35vh;
height: 30%;
transform: rotate(16deg);
border-radius: 1px;
background: rgba(8,5,20,0.60);
box-shadow: 1px 0 0 rgba(255,255,255,0.07);
}
.grave-skull {
position: absolute;
top: 13%;
width: 100%;
text-align: center;
font-size: 3.4vh;
color: #8d81a8;
text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.70);
} }
/* inscrição gravada (rebaixo: sombra clara embaixo, escura em cima) */ /* inscrição gravada (rebaixo: sombra clara embaixo, escura em cima) */
.grave-text { .grave-text {
position: absolute; position: absolute;
top: 23%; top: 33%;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-family: 'Courier New', monospace; font-family: Georgia, 'Times New Roman', serif;
font-weight: bold; font-weight: bold;
font-size: 3vh; font-size: 2.7vh;
letter-spacing: 0.3vh; letter-spacing: 0.42vh;
color: #4c4170; color: #9187ae;
text-shadow: 0 1px 0 rgba(255,255,255,0.38), 0 -1px 1px rgba(18,10,40,0.65); text-shadow: 0 1px 0 rgba(255,255,255,0.20), 0 -1px 1px rgba(5,3,14,0.80);
} }
.grave-line { .grave-line {
position: absolute; position: absolute;
top: 48%; top: 52%;
left: 22%; right: 22%; left: 24%; right: 24%;
height: 0.55vh; height: 0.5vh;
border-radius: 0.3vh; border-radius: 0.3vh;
background: rgba(64,54,96,0.55); background: rgba(14,10,30,0.62);
box-shadow: 0 1px 0 rgba(255,255,255,0.30); box-shadow: 0 1px 0 rgba(255,255,255,0.14);
} }
.grave-line.short { top: 56%; left: 30%; right: 30%; } .grave-line.short { top: 60%; left: 32%; right: 32%; }
/* tufos de grama para amarrar a base na cena */ /* tufos de capim para amarrar a base na cena */
.grass-tuft { .grass-tuft {
position: absolute; position: absolute;
bottom: -0.6vh; bottom: -0.6vh;
width: 3vh; width: 3vh;
height: 3.6vh; height: 3.6vh;
clip-path: polygon(8% 100%, 22% 22%, 36% 100%, 50% 0%, 64% 100%, 80% 30%, 94% 100%); clip-path: polygon(8% 100%, 22% 22%, 36% 100%, 50% 0%, 64% 100%, 80% 30%, 94% 100%);
background: linear-gradient(to top, #2e8a48, #74dd8d); background: linear-gradient(to top, #355730, #6f9a5e);
} }
.tuft-l { left: -8vh; } .tuft-l { left: -8vh; }
.tuft-r { right: -7vh; transform: scaleX(-1); } .tuft-r { right: -7vh; transform: scaleX(-1); }
@ -1379,6 +1415,7 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; }
<div class="grave-shade"></div> <div class="grave-shade"></div>
<div class="grave-mound"></div> <div class="grave-mound"></div>
<div class="gravestone"> <div class="gravestone">
<div class="grave-skull">&#x2620;&#xFE0E;</div>
<div class="grave-text">R.I.P.</div> <div class="grave-text">R.I.P.</div>
<div class="grave-line"></div> <div class="grave-line"></div>
<div class="grave-line short"></div> <div class="grave-line short"></div>