Style the Anthem melody bars and caption

This commit is contained in:
github-actions[bot] authored and GitHub committed 2026-10-13 01:18:34 +00:00
1 parent a6a97bc6db
commit 8587e172a4
1 file changed
+41 -4
+41 -4
View File
@@ -140,6 +140,9 @@ header p {
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
font-family: inherit;
font-size: 1rem;
color: inherit;
}
.style-chip:hover {
@@ -167,28 +170,58 @@ header p {
align-items: center;
}
.title-card.is-playing .title-text {
animation: title-glow 0.9s ease-in-out infinite alternate;
}
@keyframes title-glow {
from { text-shadow: 0 2px 4px rgba(0,0,0,0.3); letter-spacing: 0; }
to { text-shadow: 0 0 18px rgba(255,255,255,0.55); letter-spacing: 0.04em; }
}
.title-text {
color: white;
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 2rem;
margin-bottom: 1.25rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
overflow-wrap: anywhere;
}
.visualization {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0.5rem;
gap: 3px;
height: 100px;
width: 100%;
}
.bar {
width: 20px;
flex: 1 1 0;
max-width: 16px;
min-width: 4px;
border-radius: 4px 4px 0 0;
transition: height 0.3s ease;
transition: height 0.2s ease, transform 0.12s ease, opacity 0.12s ease;
opacity: 0.85;
}
.bar.on {
transform: scaleY(1.08);
opacity: 1;
filter: brightness(1.25);
}
.bar.rest {
opacity: 0.35;
}
.melody-caption {
color: rgba(255,255,255,0.82);
font-size: 0.85rem;
margin-top: 0.85rem;
letter-spacing: 0.02em;
}
/* Controls */
@@ -209,6 +242,10 @@ header p {
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none;
display: inline-block;
font-family: inherit;
line-height: 1.2;
}
#share-button:hover {