A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170body { background-color: var(--bg-color); color: var(--text-color);}
main { width: min(var(--container-md), 100vw);}
.panel { border: 2px solid var(--form-color); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm);}
/** * Buttons */
button,.button { background: transparent; border: 2px solid var(--form-color); border-radius: var(--radius-md); color: currentColor; cursor: pointer; display: inline-block; font-size: var(--fs-xs); font-family: inherit; font-weight: 500; letter-spacing: var(--leading-relaxed); line-height: 1; padding: var(--space-xs) var(--space-sm); text-transform: uppercase;
& * { pointer-events: none; }
&[disabled] { cursor: not-allowed; opacity: 0.4; }
&.button--accent { border-color: var(--accent); color: var(--accent); }
&.button--active { background-color: var(--accent); border-color: var(--accent); color: var(--bg-color); }
& > .with-icon { padding-top: 1px; }}
a.button { text-decoration: none;}
.button-row { display: inline-flex; gap: var(--space-2xs);}
/** * Forms */
input,textarea { background: transparent; border: 2px solid var(--form-color); border-radius: var(--radius-md); color: inherit; font-size: var(--fs-sm); padding: var(--space-2xs); transition-duration: 250ms; transition-property: border-color; width: 100%;
&:focus { border-color: var(--accent); outline: none; }}
textarea { height: var(--container-xs); padding: var(--space-xs); resize: none;}
select { appearance: none; background: transparent; border: 2px solid var(--form-color); border-radius: var(--radius-md); color: inherit; font-family: inherit; font-size: var(--fs-sm); padding: var(--space-2xs) var(--space-xs); transition-duration: 250ms; transition-property: border-color; width: 100%;
&:focus { border-color: var(--accent); outline: none; }
option, optgroup { color: black; }}
/** * Misc */
.with-icon { align-items: center; display: inline-flex; gap: var(--space-2xs);}
/** * Separators */
hr,.separator { border: 0; border-top: 2px solid var(--form-color);}
.row { display: flex; flex-wrap: wrap; gap: var(--space-xs);}
/** * Tables */
table { border-collapse: collapse; width: 100%;}
th,td { border: 2px solid var(--form-color); padding: var(--space-2xs) var(--space-xs); text-align: left;}
th { font-weight: 600;}