A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211:host { display: flex; flex-direction: column; height: 100%;
/* Don't inherit the surrounding text colour. This element lives inside the window's <dialog>, whose UA stylesheet sets `color: CanvasText`; Firefox on Windows maps that to the OS window text colour, which is white in dark mode, leaving the search row and action buttons unreadable on the panel. */ color: var(--text-color);}
/************************************ SEARCH***********************************/
search { margin-bottom: var(--grouped-button-spacing);}
search input { color: inherit; flex: 1;}
search select { color: inherit; max-width: 33%;}
/************************************ TABLE***********************************/
.sunken-panel { flex: 1; min-height: 80px; outline: none;}
:host([resizable]) .sunken-panel { resize: both;}
.virtual-header { position: sticky; top: 0; z-index: 1;}
table { table-layout: fixed; width: 100%;}
table th { cursor: pointer; user-select: none; width: 30%;
&:after { font-size: 82%; position: absolute; right: 6px; }}
table th.col-title { width: 40%;}
table th.col-num + th.col-title { width: 35%;}
table th[aria-sort="ascending"]::after { content: " ▼";}
table th[aria-sort="descending"]::after { content: " ▲";}
.col-num { cursor: default; text-align: right; user-select: none;}
table th.col-num { width: 5%;}
table th.col-num::after { content: none;}
.virtual-scroll table { will-change: transform;}
table tbody tr { cursor: pointer;}
table td { overflow: hidden; text-overflow: ellipsis;}
/************************************ ACTIONS***********************************/
.actions-row { flex-wrap: wrap; margin-top: var(--element-spacing);}
/************************************ PLAYLIST PICKER***********************************/
.picker-overlay { align-items: center; background: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 100;}
.picker-window { min-width: 240px; max-width: 320px;}
.picker-body { display: flex; flex-direction: column; gap: 6px;
form { margin-bottom: 0; }}
.picker-list { border: 2px inset #dfdfdf; display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; padding: 2px;}
.picker-item { background: none; border: none; box-shadow: none; cursor: pointer; font-family: "Pixelated MS Sans Serif", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; padding: 2px 4px; text-align: left; width: 100%;
&:hover { background: var(--dialog-blue); color: #fff; }}
.picker-item--create { font-style: italic;}
.picker-group-label { color: gray; font-size: 90%; margin-top: 4px; padding: 0 4px; user-select: none;}
.picker-form-actions { justify-content: flex-end; margin-top: 4px;}
/************************************ GROUP HEADERS***********************************/
table tbody tr.group-header { cursor: default;
& td { background: var(--button-face); border-bottom: 1px solid var(--button-shadow); color: var(--button-shadow); font-size: 82%; letter-spacing: 0.05em; padding: 0 4px; text-transform: uppercase; user-select: none; }}