mrleo1nidandClaude Opus 5.5
de4e59d9f8
An axe-core audit of every screen in both themes found low contrast on white text over the accent and on caption text, track rows using row roles without cells, and unlabelled progress bars. Accent fills now use a darker token, caption text meets 4.5:1, track lists are lists and progress bars are labelled. The queue drawer slides in from the right as designed, takes focus, closes on Escape and notes that the wave never ends. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
125 lines
2.0 KiB
CSS
125 lines
2.0 KiB
CSS
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
animation: pipuIn 0.2s ease-out;
|
|
}
|
|
|
|
.head h1 {
|
|
margin: 0 0 8px;
|
|
font-family: var(--font-display);
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.head p {
|
|
margin: 0;
|
|
color: var(--text2);
|
|
}
|
|
|
|
.label {
|
|
margin: 0 0 14px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text3);
|
|
}
|
|
|
|
.artists {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 18px 12px;
|
|
}
|
|
|
|
.artist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 6px;
|
|
border-radius: var(--radius-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.artist:hover {
|
|
background: var(--hover);
|
|
}
|
|
|
|
.avatar {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
transition:
|
|
box-shadow 0.15s,
|
|
transform 0.15s;
|
|
}
|
|
|
|
.on .avatar {
|
|
box-shadow:
|
|
0 0 0 3px var(--bg),
|
|
0 0 0 5px var(--accent);
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
.check {
|
|
position: absolute;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.genres {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.genre {
|
|
height: 38px;
|
|
padding: 0 16px;
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid var(--line);
|
|
background: var(--surface2);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.genre[aria-pressed='true'] {
|
|
background: var(--accent-fill);
|
|
border-color: var(--accent);
|
|
color: #fff;
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
.actions {
|
|
position: sticky;
|
|
bottom: 16px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--line2);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(28px) saturate(1.3);
|
|
}
|