Unearned shields go dead, and the halo leaves the honours row
Two bugs in one rule. The grey sat on the IMAGE while the breathing halo was an animation on the same image — and a filter in a keyframe outranks a static one, so the glow was painting the greyscale away. Worse, the selector that handed out that halo still read `img:not(.dark)` from when the class hung on the image; the class moved to the cell in the inscription pass, so every shield on the row was matching it, lit or not. The grey lives on the cell now, where nothing animates. And the halo is gone from the row entirely (Oliver): the glints do that job, and a permanent breathing glow under an occasional flash was two effects saying the same thing. The league panel's crest keeps its own. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
708ecbb858
commit
25ac21b852
1 file changed
+11
-8
+11
-8
@@ -355,7 +355,8 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
||||
grid-template-areas: "crest league" "crest level" "bar bar" "xp xp" "career career"; }
|
||||
/* THE CREST STANDS BESIDE THE LEAGUE (2026-08-31, Oliver: on its own row it pushed the text
|
||||
down), so the two things that say WHERE YOU ARE share a line instead of stacking. */
|
||||
#cdBadge { grid-area: crest; width: 56px; image-rendering: pixelated; align-self: center; }
|
||||
#cdBadge { grid-area: crest; width: 56px; image-rendering: pixelated; align-self: center;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
|
||||
#cdLeague { grid-area: league; align-self: end; font: 700 10px/1.5 Silkscreen, monospace;
|
||||
text-decoration: none; letter-spacing: 1.5px; }
|
||||
#cdLeague i { display: block; font-style: normal; font-size: 9px; opacity: 0.85; }
|
||||
@@ -387,13 +388,15 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
||||
#cdBadges img { height: 46px; image-rendering: pixelated; }
|
||||
#cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px;
|
||||
text-decoration: none; white-space: nowrap; }
|
||||
#cdBadges .badge.dark img { filter: grayscale(1) brightness(0.3); }
|
||||
/* AN UNEARNED SLOT IS DEAD (2026-08-31): the grey sits on the CELL, not the image, so nothing
|
||||
can animate over it — the breathing halo used to, because `filter` in a keyframe outranks a
|
||||
static one, and a stale `img:not(.dark)` selector (from when the class hung on the image) was
|
||||
handing that halo to every shield on the row, lit or not. That is why the dark slots glowed
|
||||
in colour instead of standing grey and still. */
|
||||
#cdBadges .badge.dark { filter: grayscale(1) brightness(0.38); }
|
||||
#cdBadges .badge.dark u { color: #3f4d45; }
|
||||
#cdBadges img.dark { filter: grayscale(1) brightness(0.3); }
|
||||
/* earned badges BREATHE — a subtle gold halo, CSS-only (the menu parks the game loop, CSS
|
||||
animations do not care). The dark slots stay dead, which is the point of them. */
|
||||
#cdBadges .badge:not(.dark) img, #cdBadges img:not(.dark), #cdBadge {
|
||||
animation: badgeGlow 2.6s ease-in-out infinite; }
|
||||
/* ...and the halo itself is GONE from this row (Oliver): the glints do that job now, and a
|
||||
permanent breathing glow under an occasional flash was two effects saying the same thing. */
|
||||
@keyframes badgeGlow {
|
||||
0%, 100% { filter: drop-shadow(0 0 2px rgba(232, 178, 58, 0.25)); }
|
||||
50% { filter: drop-shadow(0 0 7px rgba(232, 178, 58, 0.75)); } }
|
||||
@@ -1077,6 +1080,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="src/main.js?v=344"></script>
|
||||
<script type="module" src="src/main.js?v=345"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user