A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899@import "../../styles/diffuse/facet.css";
.connect-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0; padding: 0;}
.connect-item { align-items: center; display: flex; gap: var(--space-xs); margin-left: 0;}
.connect-item__info { display: flex; flex-direction: column; flex: 1; gap: var(--space-3xs); min-width: 0;}
.connect-item__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.connect-item__detail { color: oklch(from var(--text-color) l c h / 0.55); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.connect-item__tags { display: flex; flex-shrink: 0; gap: var(--space-3xs);}
.connect-item--disabled .connect-item__info { opacity: 0.2;}
.s3-scan-video { border-radius: 0; inset: 0; object-fit: cover; position: absolute; height: 100%; width: 100%; z-index: 1;}
.connect-qr-body { align-items: center; display: flex; justify-content: center;
& svg { background: white; border-radius: var(--radius-sm); height: 240px; padding: var(--space-sm); width: 240px; }}
.dropzone { align-items: center; border: 2px dashed var(--border-color); border-radius: var(--radius-md); color: oklch(from var(--text-color) l c h / 0.55); cursor: pointer; display: flex; flex-direction: column; font-size: var(--fs-sm); gap: var(--space-2xs); justify-content: center; padding: var(--space-md); transition: background-color 150ms, border-color 150ms, color 150ms;
&.dropzone--active { background-color: var(--form-color); border-color: var(--accent); color: var(--text-color); }}