A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100@import "../../../styles/diffuse/facet.css";
.file-section { margin-top: var(--space-md);}
.file-section__title { color: oklch(from var(--text-color) l c h / 0.55); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wider); margin: 0 0 var(--space-xs); text-transform: uppercase;}
.file-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0; padding: 0;}
.file-item { align-items: center; display: flex; font-size: var(--fs-sm); gap: var(--space-xs); margin-left: 0;}
.file-item__info { display: flex; flex-direction: column; flex: 1; gap: var(--space-3xs); min-width: 0;}
.file-item__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.file-item__subtitle { color: oklch(from var(--text-color) l c h / 0.5); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.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); }}
.upload-indicator { color: var(--text-color); font-size: var(--fs-sm);}
#connect-source-fields { display: flex; flex-direction: column; gap: var(--space-sm);}
.connect-source-option { align-items: center; cursor: pointer; display: flex; font-size: var(--fs-sm); gap: var(--space-xs); text-align: left; width: 100%;}