A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
2.7 kB · 154 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155:host { --transition-durition: 750ms; container-type: inline-size; display: block; font-size: var(--fs-xs); font-size: calc(var(--fs-sm) * 0.85);}
main { color: white; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: color var(--transition-durition), opacity var(--transition-durition);}
/* Now playing */
.now-playing { color: white; font-style: italic; font-weight: 400; line-height: var(--leading-normal); margin: var(--space-3xs) 0 0; overflow: hidden; padding: var(--space-sm) 0 var(--space-xs); text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
/* Progress bar */
.progress { cursor: pointer; padding: var(--space-2xs) 0;}
.progress__track { background-color: rgba(255, 255, 255, 0.25); border-radius: var(--radius-sm); height: 0.23em; overflow: hidden;}
.progress__fill { background-color: rgba(255, 255, 255, 0.325); height: 0.23em; transition: width 250ms linear;}
/* Controls */
.controls { align-items: center; color: rgba(255, 255, 255, 0.9); display: flex; justify-content: space-between; margin: var(--space-2xs); padding: 0; user-select: none;
@container (min-width: 28em) { justify-content: center; }}
.control-btn { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; font-family: inherit; margin: 0 var(--space-sm); padding: 0 var(--space-3xs);
@container (min-width: 42em) { margin: 0 var(--space-md); }}
.control-btn__icon { align-items: center; display: flex; height: 1.54em; justify-content: center; margin: var(--space-2xs) 0;
i { line-height: 0; }}
.control-btn__icon i.ph-repeat,.control-btn__icon i.ph-shuffle { font-size: 1.1em;}
.control-btn__icon i.ph-rewind,.control-btn__icon i.ph-fast-forward { font-size: 1.1em;}
/* Light indicators */
.light { height: 0.31em;}
.light--placeholder { height: 0.31em; width: 0;}
.light--small { border-radius: 50%; height: 0.31em; width: 0.31em; background-color: rgba(255, 255, 255, 0.25);}
.light--small.light--on-blue { background-color: rgb(157, 174, 255);}
.light--large { border-radius: var(--radius-sm); height: 0.31em; position: relative; width: 1.31em; left: -0.15em; background-color: rgba(255, 255, 255, 0.25);}
.light--large.light--on-green { background-color: rgb(198, 254, 153);}
/* Play text */
.play-text { font-family: Arial, ui-sans-serif, system-ui, sans-serif; font-size: 0.85em; font-weight: 700; letter-spacing: 0.31em; white-space: nowrap;}