A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366:host { --transition-durition: 750ms; container-type: inline-size; display: block; font-size: var(--fs-xs); font-size: calc((var(--fs-xs) + var(--fs-sm)) / 2);}
main { background: var(--color-3); color: white; display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; transition: background-color var(--transition-durition), color var(--transition-durition), opacity var(--transition-durition);}
/* Artwork */
.artwork { app-region: drag; flex: 1; position: relative; user-select: none;}
.artwork img { height: 100%; left: 0; object-fit: cover; opacity: 0; position: absolute; top: 0; transition-duration: var(--transition-durition); transition-property: opacity; width: 100%; z-index: 0;}
.artwork label { background: oklch(14% 0 0); border-radius: var(--radius-sm); box-shadow: var(--box-shadow-lg); font-size: 75%; font-weight: 600; left: var(--space-xs); letter-spacing: var(--tracking-wide); line-height: 0.75; padding: calc(var(--space-2xs) * 0.8) calc(var(--space-2xs) * 0.65); padding-bottom: calc(var(--space-2xs) * 0.675); position: absolute; text-box: trim-both cap alphabetic; text-transform: uppercase; top: var(--space-xs); transition: background-color var(--transition-durition), color var(--transition-durition); z-index: 10;}
/* Progress bars */
progress { appearance: none; border: 0; display: block; height: 4px; width: 100%;}
progress,progress::-webkit-progress-bar { background-color: color-mix(in oklch, currentColor 40%, transparent); overflow: hidden; border-radius: 4px;}
progress[value]::-webkit-progress-value { border-radius: 4px; background-color: color-mix(in oklch, currentColor 90%, transparent);}
progress[value]::-moz-progress-bar { border-radius: 4px; background-color: color-mix(in oklch, currentColor 50%, transparent);}
/* Controller */
.controller { flex-shrink: 0; padding: var(--space-sm); padding-top: 0; position: relative;
@container (min-width: 28em) { padding: var(--space-md); padding-top: 0; }}
.controller__background { inset: 0; opacity: 0.5; position: absolute; transition: background-color var(--transition-durition); z-index: 1;}
.controller__inner { margin-top: calc(var(--space-lg) * -1); position: relative; transition-duration: var(--transition-durition); transition-property: color; z-index: 10;}
.controller__inner.controller__inner--light-mode { color: rgba(0, 0, 0, 0.6);}
/* Now playing */
.now-playing { align-items: center; display: flex; gap: var(--space-xs);}
cite { display: block; flex: 1; font-size: 110%; font-style: normal; min-width: 0; text-shadow: var(--text-shadow-sm);
& > span, & > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }}
.fav-button { background: color-mix(in oklch, currentColor 7.5%, transparent); border: 0; border-radius: var(--radius-xl); color: color-mix(in oklch, currentColor 50%, transparent); cursor: pointer; flex-shrink: 0; font-size: 110%; padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs);
&[data-enabled="t"] { background-color: color-mix(in oklch, currentColor 25%, transparent); color: currentColor; }}
.controller__inner--light-mode cite { text-shadow: none;}
/* Progress */
.progress { cursor: pointer; margin: var(--space-2xs) 0; padding-top: var(--space-2xs);
@container (min-width: 35em) { margin: var(--space-xs) 0; }}
.timestamps { display: flex; font-size: 80%; font-weight: 500; justify-content: space-between; margin-top: var(--space-3xs); opacity: 0.4; text-shadow: var(--text-shadow-xs);}
.controller__inner--light-mode .timestamps { text-shadow: none;}
/* Controls */
.controller menu { align-items: center; display: flex; font-size: 230%; gap: var(--space-md); justify-content: center; margin: var(--space-xs) 0; padding: 0; text-align: center;
@container (min-width: 28em) { gap: var(--space-lg); margin: var(--space-sm) 0; }
@container (min-width: 35em) { margin: var(--space-md) 0; }
@container (min-width: 70em) { gap: var(--space-xl); }}
.controller .menu__loader { cursor: pointer; line-height: 0; transform-origin: center;}
.controller li { cursor: pointer; line-height: 0; list-style: none; transition-duration: var(--transition-durition); transition-property: opacity;
&[data-enabled="f"] { opacity: 0.4; }}
.controller .ph-pause,.controller .ph-play,.controller .menu__loader { font-size: 130%;}
.controller .ph-shuffle,.controller .ph-repeat { font-size: 55%;}
/* Volume */
.volume { align-items: center; display: flex; font-size: 75%; gap: var(--space-2xs); justify-content: space-between;}
.volume .progress-bar { cursor: pointer; flex: 1; padding: var(--space-2xs) 0;}
.volume i { cursor: pointer;}
/* Gradient blur */
.gradient-blur { bottom: 0; height: 150%; left: 0; pointer-events: none; position: absolute; right: 0; z-index: 2;}
.gradient-blur > div { position: absolute; inset: 0;}
.gradient-blur > div:nth-of-type(1) { backdrop-filter: blur(1px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 4.166666665%, rgba(0, 0, 0, 1) 8.333333332%, rgba(0, 0, 0, 0) 12.499999999% ); z-index: 1;}
.gradient-blur > div:nth-of-type(2) { backdrop-filter: blur(2px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 4.166666665%, rgba(0, 0, 0, 1) 8.333333332%, rgba(0, 0, 0, 1) 12.499999999%, rgba(0, 0, 0, 0) 16.666666666% ); z-index: 2;}
.gradient-blur > div:nth-of-type(3) { backdrop-filter: blur(4px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 8.333333332%, rgba(0, 0, 0, 1) 12.499999999%, rgba(0, 0, 0, 1) 16.666666666%, rgba(0, 0, 0, 0) 20.833333333% ); z-index: 3;}
.gradient-blur > div:nth-of-type(4) { backdrop-filter: blur(8px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 12.499999999%, rgba(0, 0, 0, 1) 16.666666666%, rgba(0, 0, 0, 1) 20.833333333%, rgba(0, 0, 0, 0) 25% ); z-index: 4;}
.gradient-blur > div:nth-of-type(5) { backdrop-filter: blur(16px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 16.666666666%, rgba(0, 0, 0, 1) 20.833333333%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 100% ); z-index: 5;}
.gradient-blur > div:nth-of-type(6) { backdrop-filter: blur(32px); mask: linear-gradient( to bottom, rgba(0, 0, 0, 0) 20.833333333%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 100% ); z-index: 6;}
.gradient-blur > div:nth-of-type(7) { backdrop-filter: blur(64px); mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%); z-index: 7;}