A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677@layer base, diffuse;.queue-section { display: flex; flex-direction: column; gap: var(--space-xs);}.queue-section + .queue-section { margin-top: var(--space-lg);}.queue-section__heading { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); opacity: 0.4; text-transform: uppercase;}.queue-list { display: flex; flex-direction: column; gap: var(--space-2xs); list-style: none; margin: 0; padding: 0;}.queue-item { align-items: center; display: flex; gap: var(--space-xs);}.queue-item--past { opacity: 0.35;}.queue-item__info { display: flex; flex-direction: column; flex: 1; gap: var(--space-3xs); min-width: 0;}.queue-item__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.queue-item__title--now { color: var(--accent);}.queue-item__detail { color: oklch(from var(--text-color) l c h / 0.6); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.queue-item__badge { background: oklch(from var(--accent) l c h / 0.15); border-radius: var(--radius-sm); color: var(--accent); flex-shrink: 0; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); padding: 2px var(--space-2xs); text-transform: uppercase;}.queue-item__reorder { display: flex; flex-direction: row; flex-shrink: 0; gap: 0; button { font-size: 75%; }}