/* Loosely based on mov.im, orange focus */
:root.blue {
	--bg: #0e1317;
	--bg-body: #141a21;
	--bg-button-hv: #192028;
	--bg-menu: #141a21;
	--bg-player-fix: #11161c;
	--bg-splash: #30353c;
	--bg-toast: var(--bg);
	--bg-trash: #0e1317aa;
	--border: #171f26;
	--border-cover: #212b36;
	--focus: #eb6600;
	--focus-dim: #b35000;
	--scroll: #30353c;
	--scroll-hv: #5a6367;
}

/* Blue + hue rotation -60, orange focus */
:root.green {
	--bg: #0e1713;
	--bg-body: #14221a;
	--bg-button-hv: #1a2922;
	--bg-menu: #131f19;
	--bg-player-fix: #111c17;
	--bg-splash: #313d38;
	--bg-toast: var(--bg);
	--bg-trash: #0e1713aa;
	--border: #17261e;
	--border-cover: #21362b;
	--focus: #ef6c00;
	--focus-dim: #b35000;
	--scroll: #313d38;
	--scroll-hv: #59665d;
}

/* Green focus, use in music.ini as themes = ['blue focusgreen', ...] */
:root.focusgreen {
	--focus: #00bd35;
	--focus-dim: #00800f;
}

/* Light theme */
:root.light {
	--bg: #f6f8fa;
	--bg-body: #eaeef2;
	--bg-button-hv: #e9f1f7;
	--bg-dim: #eaeef2;
	--bg-image: none;
	--bg-menu: #f2f6fa;
	--bg-player-fix: #f2f6fa;
	--bg-splash: #d0d7de;
	--bg-thumb: #eee;
	--bg-thumb-hv: #ddd;
	--bg-toast: var(--bg-button-hv);
	--bg-toast-error: #911d1d;
	--bg-trash: #f6f8faaa;
	--border: #d0d7de;
	--border-cover: #fafafa;
	--box-shadow: #eaeef2;
	--focus: #ef6c00;
	--focus-dim: #f3934d;
	--scroll: #d0d7de;
	--scroll-hv: #ccc;
	--text: #444;
	--text-dim: #999;
	--text-li-parent: #ccc;
	--text-locked: #aaa;
}

html.light #toast.error { color: #fff }
html.light #cover { opacity: 1 }

/* Material Design 3(ish) rounded corners */
html.material body { font-size: 1.1em }
html.material body > div, html.material .menu {
	padding: .5em;
	border-radius: 2em;
}
html.material button {
	min-width: 2.75em;
	padding: .75em;
	border-radius: 2em;
}
html.material li { padding: .2em 0 }

html.material #player.fix { border-radius: 0 0 2em 2em }
html.material #cover { border-radius: 1em }	
html.material #controls > button { min-width: 3.25em }

html.material #shares > .sharediv {
	max-width: 33em;
	margin-left: .25em;
}

html.material #playlist, html.material #tree {
	min-height: 2.64em;
	margin: 0 .25em;
}
	html.material #tree { margin-left: 1.5em }

html.material #trash { border-radius: 2em }
	html.material #trash:before { padding: .6em }

html.material #logdiv { padding-bottom: 1.25em }

html.material #popup { border-radius: 2em 2em 0 0 }

/* Display songs in tree horizontally
#tree li.song {
	display: inline-block;
	margin-right: 2.5em;
}
*/

/* Set a fixed height for the playlist
#playlist { height: 7.75em !important }
*/