diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html index 018ec7d..02856b0 100644 --- a/plugin/contents/ui/dancer.html +++ b/plugin/contents/ui/dancer.html @@ -1285,51 +1285,33 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; } box-shadow: inset 0 0.7vh 1.2vh rgba(225,232,190,0.20); } -/* pedra gótica: arco ogival, ardósia escura, torta e comida pelo tempo */ +/* pedra gótica: PNG do tileset CC0 de cemitério (OpenGameArt), tingido + de ardósia arroxeada em tools — ver gravestone.png */ .gravestone { position: relative; - width: 15vh; - height: 21vh; - 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: - linear-gradient(115deg, - rgba(209,131,179,0.26) 0%, rgba(255,255,255,0.06) 34%, - rgba(8,5,18,0.50) 100%), - linear-gradient(to bottom, #4a4258 0%, #363048 55%, #241f34 100%); - box-shadow: inset 0 -1.4vh 2.4vh rgba(8,5,20,0.55); + width: 17vh; + height: 17.3vh; /* aspecto do PNG 195x198 */ + background: url('gravestone.png') center / contain no-repeat; filter: drop-shadow(0 0 14px rgba(209,131,179,0.22)); } -/* musgo subindo pela base da pedra */ +/* musgo subindo pela base, recortado pela silhueta 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); + radial-gradient(circle at 18% 96%, rgba(74,105,60,0.60), transparent 40%), + radial-gradient(circle at 80% 97%, rgba(58,88,46,0.50), transparent 36%), + radial-gradient(circle at 50% 100%, rgba(66,96,52,0.42), transparent 46%); + -webkit-mask: url('gravestone.png') center / contain no-repeat; + mask: url('gravestone.png') center / contain no-repeat; } .grave-skull { position: absolute; - top: 13%; + top: 9%; width: 100%; text-align: center; - font-size: 3.4vh; + font-size: 3.2vh; color: #8d81a8; text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.70); } @@ -1341,21 +1323,21 @@ body.dia:not(.balada):not(.chuva) .grave-wrap { opacity: 1; } text-align: center; font-family: Georgia, 'Times New Roman', serif; font-weight: bold; - font-size: 2.7vh; - letter-spacing: 0.42vh; + font-size: 2.4vh; + letter-spacing: 0.4vh; color: #9187ae; text-shadow: 0 1px 0 rgba(255,255,255,0.20), 0 -1px 1px rgba(5,3,14,0.80); } .grave-line { position: absolute; - top: 52%; - left: 24%; right: 24%; + top: 51%; + left: 26%; right: 26%; height: 0.5vh; border-radius: 0.3vh; background: rgba(14,10,30,0.62); box-shadow: 0 1px 0 rgba(255,255,255,0.14); } -.grave-line.short { top: 60%; left: 32%; right: 32%; } +.grave-line.short { top: 59%; left: 33%; right: 33%; } /* tufos de capim para amarrar a base na cena */ .grass-tuft { diff --git a/plugin/contents/ui/gravestone.png b/plugin/contents/ui/gravestone.png new file mode 100644 index 0000000..478d216 Binary files /dev/null and b/plugin/contents/ui/gravestone.png differ