Padrões
Listas
Tela de listas criadas pelo usuário. Grade de cards com collage de capas 2×2, nome da lista e contagem de discos. Botão "+" para criar nova lista.
Visão geral
Listas
Anatomia
Listas
1
Preview de capas (collage 2×2)
grid-template-columns: repeat(2, 1fr) gap:1px. 4 capas de discos da lista. Sem cover: fundo #1a1a1a com ♪.
2
Nome da lista
font-size:12px font-weight:600 color:#f5f5f5. white-space:nowrap overflow:hidden text-overflow:ellipsis.
3
Contagem de discos
font-size:10px color:#888. Formato: "N discos".
4
Ícone de acesso
Chevron direito stroke:#444 · indica que o card é tappable. Navega para a lista específica.
+
Botão criar lista
w-8 h-8 rounded-full bg:#C8F53C · ícone + em #0f0f0f · no header à direita. Abre bottom sheet de criação.
Specs
| Elemento | Valor |
|---|---|
| Grade de cards | grid-template-columns: repeat(2, 1fr), gap:12px |
| Card bg | #1a1a1a border:1px solid #2a2a2a border-radius:12px |
| Collage grid | grid-template-columns: repeat(2, 1fr) gap:1px bg:#0a0a0a |
| Collage aspect-ratio | 1/1 (quadrado) |
| Célula de capa | aspect-ratio:1/1 overflow:hidden |
| Nome font-size | 12px font-weight:600 |
| Contagem font-size | 10px color:#888 |
| Info padding | 10px 12px |
| Botão criar | 32×32px rounded-full bg:#C8F53C |