music.css

@font-face {
	font-family: Barlow;
	src: url("music.txt.woff") format("woff");
}

@font-face {
	font-family: BarlowSC;
	src: url("music.txtsc.woff") format("woff");
}

@font-face {
	font-family: Foundation;
	src: url("music.woff") format("woff");
}

:root {
	--bg: #10100f;
	--bg-body: #1a1a1a;
	--bg-button-hv: #1a1a1a;
	--bg-dim: var(--bg);
	--bg-image: url(music.theme.svg);
	--bg-menu: #121211;
	--bg-popup: #121211;
	--bg-scroll: transparent;
	--bg-splash: #212121;
	--bg-thumb: #eee;
	--bg-thumb-hv: #ddd;
	--bg-toast: var(--bg);
	--bg-toast-error: #911d1d;
	--bg-trash: #10100faa;
	--border: #1e1e1e;
	--border-cover: #3c3c3c;
	--box-shadow: #10100f;
	--focus: #1d91f0;
	--focus-dim: #1a6eac;
	--scroll: #292929;
	--scroll-hv: #3c3c3c;
	--text: #b4b4b4;
	--text-dim: #696969;
	--text-li-parent: #4c4c4c;
	--text-locked: #5a5a5a;

	--button-factor: .95;
	--button-size: 2.25em;
	--button-size-rel: calc(var(--button-factor) * var(--button-size));
	--radius: 4px;
	--space: .5em;
}

::selection {
	color: #fff;
	background-color: var(--focus);
}

::-webkit-resizer {
	border: 8px solid transparent;
	border-bottom: 8px solid var(--scroll);
	border-right: 8px solid var(--scroll);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track { background: var(--bg-scroll) }
::-webkit-scrollbar-thumb {
	background: var(--scroll);
	border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hv) }
::-webkit-scrollbar-corner { background: none }

* {
	scrollbar-color: var(--scroll) var(--bg-scroll);
	scrollbar-width: thin;

	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
	*:active, *:focus, *:hover { outline: none }

body, button, input, select {
	font-family: Barlow, "Segoe UI", sans-serif;
	line-height: 1.25em;
	word-spacing: .1em;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

body {
	background: var(--bg-body);
	transition: background .2s;
}

body > div {
	margin: .5em 2em;
	padding: var(--space);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: default;
}
	body > div:before {
		position: absolute;
		align-self: flex-start;
		left: .75em;
		margin-top: -.25em;
	}
	body > div { transition: background .4s, border-color .4s, opacity .4s }

body.hide > div, body.hide > div:before, body.hide > footer {
	opacity: 0;
	pointer-events: none;
}

body.mode #album, body.mode #title { pointer-events: none }

body.touch {
	font-family: BarlowSC, "Segoe UI", sans-serif;
	font-size: 1.1em;
	word-spacing: 1px;
}
	body.touch button, body.touch input, body.touch li {
		user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: transparent;
	}
	body.touch input[type=range] { width: 18em }
	body.touch li, body.touch #filter { padding: .4em 0 !important }
		body.touch li.open { padding-bottom: 0 !important }
	body.touch u { text-decoration: none }
	body.touch #current { line-height: 1.25em }
	body.touch #playlist {
		overflow-x: auto;
		white-space: nowrap;
	}
	/* DOES THIS WORK???? */
	body.touch *::-webkit-scrollbar {
		width: 4px !important;
		height: 4px !important;
	}
	body.touch #tree ul { margin-left: .5em }
	body.touch .toolbar.hidden { visibility: visible }
	body.touch #popup {
		top: -1px;
		border-top: none;
		border-radius: 0 0 var(--radius) var(--radius);
		animation: .4s popup-top;
	}

body.locked #stop, body.locked #previous, body.locked #next,
body.locked #enqueue, body.locked #random, body.locked #crossfade, body.locked #playlistbtn {
	color: var(--text-locked);
	pointer-events: none;
}
	body.locked #seek { pointer-events: none }
	body.locked #enqueue:before { content: "\f126" }
	body.locked #playlistdiv #trash { display: none !important }
body:not(.locked) #playlistdiv:hover #trash,
body:not(.locked) #library:hover .toolbar { visibility: visible }

button {
	display: inline-block;
	flex-shrink: 0;
	height: var(--button-size);
	padding: 0 calc(1.25 * var(--space) - 1px);
	font-size: calc(1em * var(--button-factor));
	white-space: nowrap;
	background: none;
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background .2s, border-color .4s, opacity .4s;
}
	button[disabled] { color: var(--text-dim) !important }
	button:before {
		font-size: calc(1em / var(--button-factor));
		transition: none;
	}
	button:empty {
		width: var(--button-size);
		height: var(--button-size);
		padding: 0 !important;
	}
		button:empty:before { width: unset }
	button:hover, .menu > button:focus { background: var(--bg-button-hv) }
	button::-moz-focus-inner { border: none }

button b {
	margin-left: .5em;
	padding: 0 .3em .2em .2em;
	font-size: .8em;
	font-weight: normal;
	color: var(--text-dim);
	vertical-align: top;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
	button b.filtertip { color: var(--focus-dim) }

input, select {
	width: 25em;
	padding: .1em;
	background: var(--bg);
	font-size: .8em;
	border: none;
	border-bottom: 1px solid var(--text);
	transition: background .4s;
}
	select option:checked { background: none }

input[type=range] {
	width: 14em;
	max-width: 90%;
	height: 11px;
	background: transparent;
	opacity: .5;
	border: none;
	outline: none !important;
	cursor: pointer;
	-moz-appearance: none;
	-webkit-appearance: none;
}
	input[type=range]::-moz-focus-outer { border: none }
	input[type=range]::-moz-range-track {
		height: 1px;
		background: var(--text);
	}
	input[type=range]::-webkit-slider-runnable-track {
		height: 1px;
		background: var(--text);
	}
	input[type=range]::-ms-track {
		height: 1px;
		background: var(--text);
		border: none;
	}
	input[type=range]::-moz-range-thumb {
		width: 11px;
		height: 11px;
		background: var(--bg-thumb);
		border: 1px solid var(--text);
		border-radius: 50%;
		-moz-appearance: none;
	}
		input[type=range]:hover::-moz-range-thumb { background: var(--bg-thumb-hv) }
	input[type=range]::-webkit-slider-thumb {
		width: 13px;
		height: 13px;
		margin-top: -6px;
		background: var(--bg-thumb);
		border: 1px solid var(--text);
		border-radius: 50%;
		-webkit-appearance: none;
	}
		input[type=range]:hover::-webkit-slider-thumb { background: var(--bg-thumb-hv) }
	input[type=range]::-ms-thumb { margin: 0 }
	input[type=range]::-ms-tooltip { display: none }
	input#volumeslider {
		display: none;
		width: unset;
		margin-right: .25em;
	}
		#controls.volume input#volumeslider { display: inline-block }

span { margin-left: .25em }

u { text-decoration: underline solid var(--text-dim) }

ul {
	margin-left: 0;
	list-style: none;
}
	#tree ul {
		display: none;
		margin-left: 1.25em;
	}

li.dim { color: var(--text-dim) !important }
	li.dim > ul { color: var(--text) }

li.dim:hover, li.dim:hover:before,
li.dim:focus, li.dim:focus:before,
li.parent:hover, li.parent:hover:before,
li.parent:focus, li.parent:focus:before,
li:hover .artist, li:focus .artist { color: var(--focus-dim) !important }

li:hover, li:hover:before,
li:focus, li:focus:before,
li.match:hover, li.match:hover:before,
li.match:focus, li.match:focus:before { color: var(--focus) !important }

/* li, li:before, li span.artist would cause flickering when moving mouse between song and folder */
a,
li:hover, li:hover:before,
li:hover span.artist,
li.parent:hover, li.parent:hover:before { transition: color .05s ease-in, background .4s, opacity .4s }

li#last:before { visibility: hidden }

#splash {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 150px;
	height: 150px;
	margin: auto;
	font-size: 150px;
	color: var(--bg-splash);
	border: none;
	z-index: -1;
	animation: 4s fade;
}
	@keyframes fade { from { opacity: 0 }}

#player {
	white-space: nowrap;
	overflow: hidden;
}
	#player > * {
		display: inline-block;
		vertical-align: middle;
		transition: max-width .4s, max-height .4s, min-width .4s, min-height .4s, opacity .4s, border-color .4s;
	}

#cover {
	min-width: 7em;
	max-width: 7em;
	min-height: 7em;
	max-height: 7em;
	flex-shrink: 0;
	margin: .25em;
	opacity: .7;
	border: 1px solid var(--border-cover);
	border-radius: var(--radius);
	cursor: zoom-in;
}
	#cover:hover, #cover.nofade { opacity: 1 }
	#player.big:not(.fix) > #cover {
		min-width: 300px;
		min-height: 300px;
		max-width: 300px;
		max-height: 300px;
	}
#player.full:not(.fix) #cover, #player.full:not(.fix) #current, #player.full:not(.fix) #current > *:not(#controls) {
	display: block;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
	#player.full #cover { cursor: zoom-out }
	#player.full:not(.fix) #current { width: unset }
	#player.full:not(.fix) #seek { margin-bottom: .5em }
	#player.full:not(.fix) #controls { justify-content: center }

#current {
	min-width: 0;	/* https://css-tricks.com/flexbox-truncated-text */
	flex-grow: 1;
	margin-left: .5em;
}
	#current > div {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

#title {
	font-weight: bold;
	letter-spacing: -.02em;
}

#time {
	display: inline-block;
	color: var(--text-dim);
	vertical-align: bottom;
}

#controls { margin: .25em 0 1px 0 }
	#controls > button {
		width: calc(.5em + var(--button-size));
		height: calc(.5em + var(--button-size));
		padding: 0;
	}
	#controls > button { flex-shrink: 1 }

#toast {
	position: fixed;
	top: 1em;
	right: 1em;
	background: var(--bg-toast) !important;
	box-shadow: 0 0 1px 1px var(--border);
	cursor: default;
	z-index: 3;
}
	#toast.error { background: var(--bg-toast-error) !important }
	#toast.hide { display: none }

body:not(.dim) #player.fix {
	position: fixed;
	top: -1px;
	left: 0;
	right: 0;
	margin: 0;
	padding: calc(.75 * var(--space));
	box-shadow: 0 0 2px 1px var(--box-shadow);
	animation: .4s fix;
	z-index: 2;
}
	@keyframes fix { from { transform: translateY(-100%) }}
	#player.fix #cover {
		min-width: 6em;
		max-width: 6em;
		min-height: 6em;
		max-height: 6em;
		cursor: row-resize;
		transition: opacity .4s;
	}
	#player.fix:before, #player.fix #time, #player.fix #seek { display: none }
	#player.fix {
		background: var(--bg-popup);
		border-radius: 0 0 var(--radius) var(--radius);
	}

#options button:before, #trash button:before, #popup button:before,
#toast:before, li:before { margin-right: .35em }

#playlistoptions, #shares {
		max-height: 0;
		overflow-y: hidden;
		transition: margin-top .2s, padding-top .2s, max-height .2s ease-out;
}
	#options.playlistbtn #playlistoptions, #options.share #shares {
		max-height: 11em;
		margin-top: .25em;
		padding-top: .25em;
		border-top: 1px solid var(--border);
		transition: max-height .2s ease-in;
	}

#playlistsdiv, #afterdiv { display: inline-block }

#shares > .sharediv {
	max-width: 32em;
	margin-left: .25em;
}
#shares	.uri { flex-grow: 1 }
#shares button:before { margin-right: 0 }
#shares input, #shares select {
	margin: 0 .25em;
	direction: rtl;
}

#playlistdiv > div { position: relative }

#trash {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--bg-trash);
	border-radius: var(--radius);
	box-shadow: -1px 1px 2px 1px var(--bg-trash);
	z-index: 1;
}
	#trash:before { font-size: calc(1em / var(--button-factor)) }
		#trash.over:before, #trash:hover:before { display: none }
		#trash:not(:hover):before { margin: auto }
		#trash:not(:hover) button { display: none }
	#trash:hover { background: var(--bg) }
	#trash:not(:hover) {
		width: var(--button-size-rel);
		height: var(--button-size-rel);
	}
	#playlistdiv.drag #trash {
		height: 100%;
		padding: .5em;
		border-left: 1px solid var(--border);
		transition: background .4s, opacity .4s;
	}
	#trash.drop, #trash.on { color: var(--focus) }

#playlist {
	min-height: var(--button-size-rel);
	max-height: 9.25em;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}
	#playlist:before, #playlist:after {
		display: block;
		width: 100%;
		height: 3px;
		position: sticky;
		top: 0;
		content: "";
		background-image: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
	}
		#playlist:after {
			top: unset;
			bottom: -1px;
			background-image: linear-gradient(to top, var(--bg) 0%, transparent 100%);
		}
	#playlist.resize {
		min-height: 4.5em;
		max-height: initial;
		overflow-y: scroll;
		resize: vertical;
	}

#playlist li {
	margin-left: 1.5em;
	border-top: 1px solid transparent;
	cursor: alias;
}
	#playlist li:before { margin-left: -1.25em }
	#playlist li[error="1"] { color: red }
	#playlist li.over { border-top: 1px dotted var(--focus) }
	#playlistdiv.drag li span { pointer-events: none }

#filter {
	min-width: 3em;
	margin: .25em;
	padding-top: .5em;
}

.spacer { flex-grow: 1 }

#tree {
	display: none;
	margin-left: 1.25em;
	list-style: none;
}
	#library.unfold #tree { display: block }

#tree li { cursor: pointer }
#tree li:before { margin-left: -1em }
#tree li:focus { text-decoration: underline solid var(--focus) }
#tree li:focus * { text-decoration: underline solid var(--bg) }
#tree li.dim:focus, #tree li.parent:focus { text-decoration: underline solid var(--focus-dim) !important }
#tree li.open > ul { display: block }
#tree li.parent { color: var(--text-li-parent) }
#tree li.parent .song, #tree li.match,
#tree li:hover > ul, #tree li:focus > ul { color: var(--text) }

#copyleft {
	padding-bottom: .8em;
	font-size: .8em;
	text-align: center;
}
	#copyleft * { color: var(--text-dim) }
		#copyleft *:hover { color: var(--text) }

#dim {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	background: var(--bg-dim);
	border: 0;
	border-radius: 0;
	opacity: 0;
	pointer-events: none;
}
	body.dim #dim { opacity: .8 }

#logdiv {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bg-popup);
	opacity: 1;
	z-index: 2;
}
	#log {
		flex-grow: 1;
		width: 100%;
		margin-top: var(--space);
		color: var(--text);
		white-space: pre;
		background: none;
		border: none;
		overflow-y: scroll;
		overscroll-behavior: contain;
	}

#popupdiv {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	background: none;
	border: none;
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}
	#popup {
		position: fixed;
		left: 0;
		right: 0;
		width: 20em;
		max-width: 90%;
		margin: auto;
		padding: .5em;
		background: var(--bg-popup);
		color: var(--text);
		text-align: right;
		border: 1px solid var(--border);
		border-radius: var(--radius) var(--radius) 0 0;
		box-shadow: 0 0 2px 1px var(--box-shadow);
		animation: .4s popup;
	}
		body:not(.touch) #popup {
			bottom: 0;
			border-bottom: none;
		}
		#popup input {
			max-width: calc(100% - 2em);
			margin-bottom: .5em;
			background: var(--bg-popup);
		}
		#popup > div { text-align: center }
		#popupicon { margin-top: 1em }
			#popupicon:before { font-size: 3em }
		@keyframes popup { from { transform: translateY(200%) }}
		@keyframes popup-top { from { transform: translateY(-200%) }}

:not(body).hide { display: none !important }

.title {
	width: fit-content;
	height: 1.25em;
	padding-right: 0.1em;
	cursor: alias;
}

.artist, .dim { color: var(--text-dim) }

.column {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.toolbar {
	display: flex;
	align-items: center;
}
	.toolbar.hidden { visibility: hidden }
	.toolbar.right { justify-content: flex-end }
	.toolbar.wrapped { flex-wrap: wrap }

.menu {
	position: absolute;
	background: var(--bg-menu);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px 2px var(--box-shadow);
	z-index: 2;
}
	.menu.delay { animation: .1s fade step-end }
	.menu button {
		display: block;
		width: 100%;
		background: var(--bg-menu);
		text-align: left;
		border-radius: 0;
	}
	.menu p { padding: .5em }

@media (min-width: 480px) {
	body { background-image: var(--bg-image) }
}

@media (max-width: 480px) {
	body > div { margin: calc(.5 * var(--space)) }
		body > div:before { display: none }

	#controls.volume button:not(#volume) { display: none }
}

@media (max-width: 740px) {
	body { font-family: BarlowSC, "Segoe UI", sans-serif }

	#player:not(.fix) { flex-direction: column }
		#player:not(.fix) #cover, #player:not(.fix) #current, #player:not(.fix) #time { display: block }
		#player:not(.fix) #cover, #player:not(.fix) #current, #player:not(.fix) #current > *:not(#seek) {
			min-width: 0;
			min-height: 0;
			max-width: 100%;
			max-height: 100%;
			width: unset !important;
			height: unset;
			margin-left: auto;
			margin-right: auto;
			padding: 0;
			justify-content: center;
			text-align: center;
		}
		#player:not(.fix) #cover { max-height: 10em }
		#player:not(.fix) #current { width: 100% !important }
		#player:not(.fix) #seek { padding: .5em }
		#player.fix #cover { margin: 0 }

	#options .toolbar.wrapped { justify-content: center }
}

*:before {
	display: inline-block;
	width: .8em;
	flex-shrink: 0;
	font-family: Foundation;
	text-align: center;
	letter-spacing: 0;
}

#after:before { content: "\f182" }
#color:before { content: "\f18f" }
#crossfade:before, .crossfade:before { content: "\f1b2" }
#debug:before { content: "\f156" }
#enqueue:before, .enqueue:before { content: "\f199" }
#library:before { content: "\f17b" }
	#library.unfold #unfold:before { content: "\f10d" }
#lock:before { content: "\f16a" !important }
	#lock.on:before { content: "\f20a" !important }
#logbtn:before { content: "\f1a1" }
#next:before { content: "\f17c" }
#options:before { content: "\f214" }
#player:before { content: "\f153" }
#playlistbtn:before { content: "\f18e" }
#playlistdiv:before { content: "\f103" }
#playpause:before, #playlibrary:before { content: "\f198" }
	#playpause.playing:before { content: "\f191" }
#playlistexport:before { content: "\f188" }
#playlistimport:before { content: "\f17f" }
#playlistload:before { content: "\f180" }
#playlistsave:before { content: "\f184" }
#popup #popupicon:before { content: "\f127" }
	#popup.lockdlg #popupicon:before { content: "\f16a" }
	#popup.savedlg #popupicon:before { content: "\f1ac" }
	#popup.sharedlg #popupicon:before { content: "\f12f" }
	#popup.unlockdlg #popupicon:before { content: "\f20a" }
#previous:before { content: "\f19c" }
#random:before, .random:before, #randomlibrary:before { content: "\f13a" }
#randomfiltered:before { content: "\f14b" }
#reload:before { content: "\f18d" }
#removesongs:before { content: "\f204" }
#repeatplaylist:before { content: "\f1a5"; transform: scale(-1, 1) }
	html:not(.colortoggle) #repeatplaylist.on:before { transform: none }	/* Don't mirror checkmark */
#share:before { content: "\f1ad" }
#splash:before { content: "\f1ed"; width: 1em }
#stop:before, #stopplayback:before { content: "\f1ef" }
#theme:before { content: "\f134" }
#trash:before { content: "\f204" }
#unfold:before { content: "\f10e" }
#volume:before { content: "\f211" }
	#volume.muted:before { content: "\f210" }

.folder:before { content: "\f150" }
.folder.open:before { content: "\f14e" }
.playing:before { content: "\f198" }
.playlist:before { content: "\f18e" }
.song:not(.playing):before { content: "\f17b"; color: var(--text-dim) }
button#cancel:before, button.clear:before, .close:before, .error:before { content: "\f217" }
button#ok:before, html:not(.colortoggle) button.on:before, #playlists button.on:before { content: "\f126" !important }
button.clip:before { content: "\f129" !important }
button.download:before { content: "\f143" }
button.filter:before { content: "\f14b" }
button.link:before { content: "\f165" }
button.min:before { content: "\f176" }
button.share:before { content: "\f1a6" }
	button.email:before { content: "\f16d" }
	button.facebook:before, button.fbmessenger:before { content: "\f1c4" }
	button.telegram:before { content: "\f132" }
	button.twitter:before { content: "\f1e4" }
	button.whatsapp:before { content: "\f131" }