kme.css

:root {
	--pixel-border: 1px solid;

	--near-black: #161616;
	--darkest-grey: #2f2f2f;
	--darkerer-grey: #383838;
	--darker-grey: #404040;
	--meme-grey: #696969;
	--light-grey: #808080;
	--lighter-grey: #909090;
	--bright-grey: #a3a3a3;

	--darkest-turq: #0d3435;
	--dark-turq: #246a6a;
	--mid-turq: #2c7b7b;
	--turq: #339999;
	--bright-turq: #5cddcc;

	--dark-turq-border: var( --pixel-border ) var( --dark-turq );

	--orange: #a97e3e;
	--bright-orange: #edb25a;

	--pink: #925572;
	--bright-pink: #d16598;

	--purple: #7652d1;
	--bright-purple: #8c90ff;

	--red: #8d2d2d;
	--bright-red: #c74040;
}

/* TODO nothing should be important */

/* TODO user selectable colors */

::-webkit-scrollbar {
	height: 16px;
	width: 16px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
	background-color: var( --darkest-grey );
	border-radius: 8px;
}

::-webkit-scrollbar-thumb {
	box-shadow: 0 0 0 8px var( --turq ) inset;
}

::-webkit-slider-thumb {
	box-shadow: -100vw 0 0 calc( 100vw - .4em ) var( --dark-turq );
	background-color: var( --turq );
	border-radius: 50%;
	appearance: none;
	height: .8em;
	width: .8em;
}

*:not( input[type="text"] ) {
	user-select: none;
}

.fright {
	float: right;
}

.fleft {
	float: left;
}

.left_marg {
	margin-left: .5em !important;
}

.drop {
	box-shadow: 0 0 2em 0 black;
	border-radius: .5em;
}

.overlay {
	position: absolute;
	padding: 1em;
	z-index: -1;
}

.overlay.show {
	z-index: 1;
}

.overlay.drop.show {
	z-index: 2;
}

.pre {
	white-space: pre;
}

html {
	background-color: black;
}

body, div, form {
	background-color: var( --darker-grey );
}

body {
	transition: opacity 200ms ease-out;
	font-family: monospace, monospace;
	color: var( --lighter-grey );
	overflow: hidden;
	font-size: 16px;
	height: 100vh;
	opacity: 0;
	margin: 0;
}

div.section {
	vertical-align: top;
	overflow: auto;
	padding: 1em;
}

div.playlistsection {
	height: calc( 100vh - 4.2em );
	width: calc( 100vw - 35em ); /* TODO this is going to keep happening */
	margin: 1em 0 0;
	padding: 0 1em;
}

div.playlistsection.smooth_scrolling {
	scroll-behavior: smooth;
}

body.display_controls_left div.playlistsection {
	float: right;
}

div.controlssection {
	max-height: calc( 100vh - 9.7em );
	width: 31em; /* TODO this is going to keep happening */
}

#seek {
	width: calc( 100vw - 36em ); /* TODO this is going to keep happening */
	position: absolute;
	padding: 1em 1em;
	font-size: 1em;
	margin: 0;
	bottom: 0;
	left: 0;
}

body.display_controls_left #seek {
	left: unset;
	right: 1em;
}

#seek input {
	width: 100%;
}

#seek input::-webkit-slider-thumb {
	box-shadow: -100vw 0 0 calc( 100vw - .5em ) var( --dark-turq );
	height: 1em;
	width: 1em;
}

fieldset[name="transport"],
output[name="times"] {
	text-align: center;
	width: 31em; /* TODO this is going to keep happening */
}

div.dropzone {
	border: var( --dark-turq-border );
	border-radius: .2em;
	padding: .5em;
	margin: 0 1em;
}

h2 {
	margin: 0;
}

#sources {
	right: 11em; /* TODO this is going to keep happening */
	top: 4.4em;
}

body.display_controls_left #sources {
	right: unset;
	left: 1.2em;
}

#sources select,
#sources input {
	width: -webkit-fill-available;
	width: -moz-available;
	display: block;
}

#sources input:not( [type="file"] ) {
	margin: 0 0 .5em 0;
}

::file-selector-button {
	visibility: hidden;
}

input[type="file"] {
	background-color: var( --darker-grey );
	color: transparent;
}

input + input:not( [type="file"] ) {
	margin-left: .5em;
}

input[type="file"]::before {
	background-color: var( --darkest-grey );
	color: var( --lighter-grey );
	content: "SELECT FOLDERS";
	border-radius: .2em;
	padding: .2em .4em;
	cursor: pointer;
}

#controls > fieldset:first-child {
	margin-top: 0;
}

form.contextmenu input:not( :last-child ) {
	margin: 0 0 .5em;
	display: block;
}

ul, ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

#list_editor {
	height: calc( 100vh - 4.2em );
	width: calc( 100vw - 34em ); /* TODO this is going to keep happening */
	padding-bottom: 0;
}

body.display_controls_left #list_editor {
	right: 0;
}

#list_editor > fieldset {
	background-color: inherit;
	padding: 0 0 1em;
	margin-top: 0;
	left: 0;
	top: 0;
}

#list_editor:not( [data-list="queue"] ) input[name="shuffle"] {
	display: none;
}

#list_editor > ol.dropzone {
  height: calc( 100vh - 9em );
  padding: 2em 0;
  overflow: auto;
}

#list_editor li.dragee {
	opacity: .25;
}

#playlist_filter {
	right: 1em;
	top: 13em;
}

body.display_controls_left #playlist_filter {
	right: unset;
	left: 1em;
}

#playlist_filter input[type="text"] {
	color: var( --turq );
}

#playlist_filter input[name="starts"] {
	width: 11ch;
}

#playlist_filter input[name="ends"] {
	width: 9ch;
}

#playlist_filter legend {
	text-transform: uppercase;
	margin-bottom: 0.25em;
}

fieldset {
	margin: .5em 0 0;
	border: 0;
}

fieldset[name="pffs"] {
	margin: 0;
}

legend {
	color: var( --turq );
}

fieldset.legend {
	border: var( --pixel-border ) var( --dark-turq );
	border-radius: .2em;
	clear: both;
}

fieldset.legend.nobum {
  border-bottom: none;
  border-right: none;
  border-left: none;
	border-radius: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

.bum {
	margin-bottom: .5em;
}

fieldset.stacked > label {
	display: block;
}

fieldset.stacked.fright,
fieldset.stacked.fleft,
fieldset.child {
	margin: 0;
}

fieldset:not( .legend ) {
	padding: 0;
}

output[name="played_folders_length"]::after,
output[name="played_tracks_length"]::after {
	content: attr( data-pl ) "\0000a0PLAYED";
}

output[name="queue_length"]::after {
	content: attr( data-ql ) "\0000a0QUEUED";
}

output[name="sequence_length"]::after {
	content: attr( data-sl ) "\0000a0TO";
}

output[name="times"]::before {
	content: attr( data-dura ) "\0000a0\002212\0000a0" attr( data-curt ) "\0000a0\00224A\0000a0" attr( data-rema );
}

output[name="playlist_length"]::before {
	content: attr( data-tracks ) "\0000a0IN\0000a0" attr( data-folders );
}

output[name="playlist_length"]::after {
	content: attr( data-broken );
	color: var( --red );
}

output[name="playlist_length"] {
	margin-bottom: .3em;
	display: block;
}

ol li {
	padding: .1em .5em .2em;
	color: var( --turq );
}

#playlist {
	overflow-wrap: break-word;
	padding-bottom: 1em;
}

#list_editor > ol,
#playlist {
	font-size: 1.5em;
}

#playlist ol li.played:not( .focussed ) {
	color: var( --dark-turq ) !important;
}

#playlist li.played:not( .focussed ) {
	color: var( --meme-grey ) !important;
}

li.broken {
	color: var( --red ) !important;
}

select:focus,
input:focus {
	outline: 2px solid var( --bright-turq ); /* user-agent seems to fail sometimes */
}

input.orange:focus {
	outline-color: var( --bright-orange ); /* user-agent seems to fail sometimes */
}

input.pink:focus {
	outline-color: var( --bright-pink ); /* user-agent seems to fail sometimes */
}

input.purple:focus {
	outline-color: var( --bright-purple ); /* user-agent seems to fail sometimes */
}

input.red:focus {
	outline-color: var( --bright-red ); /* user-agent seems to fail sometimes */
	color: var( --bright-grey );
}

select,
input {
	background-color: var( --darkest-grey );
	font-family: monospace, monospace;
	border-radius: .2em;
	font-size: inherit;
	color: inherit;
	padding: 0;
	border: 0;
}

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	margin: 0 .5em;
	padding: .4em;
}

input[type="radio"] {
	border-radius: 50%;
	padding: .42em;
}

input[type="range"] {
	background-color: var( --darkest-grey );
	border-radius: 1em;
	cursor: ew-resize;
	appearance: none;
	overflow: hidden;
	margin: 0;
}

label.range::after {
	color: var( --lighter-grey );
	vertical-align: text-top;
	content: attr( data-op );
	margin-left: .5em;
	font-size: 90%;
}

fieldset[name="transport"] {
	background-color: var( --darker-grey );
	position: absolute;
	bottom: 1em;
}

fieldset[name="transport"] input {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border-radius: 0.4em;
	margin-bottom: 1em;
	height: 3em;
	width: 3em;
}

fieldset[name="transport"] input:hover {
	background-color: var( --dark-turq );
}

input[name="prevFolder"],
input[name="prevTrack"] {
	background-image: url( "next.png" );
	transform: scaleX( -1 );
}

input[name="backFolder"],
input[name="backTrack"] {
	background-image: url( "back.png" );
}

input[name="nextFolder"],
input[name="nextTrack"] {
	background-image: url( "next.png" );
}

input[name="pawsTrack"] {
	background-image: url( "paws.png" );
}

input[name="stopTrack"] {
	background-image: url( "stop.png" );
}

input:checked {
	background-color: var( --turq );
}

output:not( [name="playlist_length"] ) + input {
	margin-left: .5em;
}

input[type="button"],
input[type="text"],
select {
	padding: .2em .4em .2em;
}

input[type="text"] {
	padding-bottom: .3em;
	vertical-align: top;
}

select {
	padding-bottom: .2em;
	margin-bottom: .5em;
}

input[type="button"],
select {
	cursor: pointer;
}

#playlist > li::before {
	content: attr( data-folder_struct );
	font-weight: bold;
}

ol li::after {
	content: attr( data-title );
}

#playlist > li:not( :first-of-type ) {
	padding-top: .5em;
}

#playlist ol {
	background-color: var( --darker-grey );
	margin-top: .5em;
}

#playlist:not( .filtered ) ol li:nth-child( odd ) {
	background-color: var( --darkerer-grey );
}

#playlist.filtered li.filtered li.filtered,
#list_editor ol.dropzone > li {
	border-bottom: var( --pixel-border ) var( --meme-grey );
}

#playlist ol li.playing:not( .broken ) {
	background-color: var( --dark-turq ) !important;
}

#playlist ol li.playing:not( .broken, .focussed ) {
	color: var( --darkest-grey ) !important;
}

#playlist li.focussed {
	color: var( --bright-turq ) !important;
}

#playlist li.unpref,
#playlist li.pref {
	border-left: .3em solid limegreen;
	border-radius: .2em 0 0 .2em;
	padding-left: .3em;
}

#playlist li.unpref {
	border-left-color: orangered;
}

fieldset.orange input[type="button"],
fieldset[name="sequence_fs"] input,
input[type="button"].orange,
#spp input {
	background-color: var( --orange );
	color: var( --darkest-grey );
}

input.orange:checked {
	background-color: var( --orange );
}

input[type="button"].pink,
input.pink:checked {
	background-color: var( --pink );
	color: var( --near-black );
}

input[type="button"].purple,
input.purple:checked {
	background-color: var( --purple );
	color: var( --near-black );
}

input[type="button"].red {
	background-color: var( --red );
}

#spp input {
	background-color: var( --turq );
}

#playlist ol li[data-ignorable="?"],
#playlist ol li[data-sequence*=":"],
#playlist ol li[data-queue*="/"] {
	padding-left: 0;
}

#playlist ol li[data-ignorable="?"]::before,
#playlist ol li[data-sequence*=":"]::before,
#playlist ol li[data-queue*="/"]::before {
	color: var( --darkest-grey );
	border-radius: .1em;
	margin-right: .5em;
	padding: 0 .25em;
}

#playlist ol li[data-ignorable="?"][data-sequence*=":"][data-queue*="/"]::before {
	background-image: linear-gradient( to right, var( --purple ), var( --pink ), var( --orange ) );
	content: attr( data-ignorable ) "\0000a0|\0000a0" attr( data-sequence ) "\0000a0|\0000a0" attr( data-queue );
}

#playlist ol li[data-ignorable="?"][data-sequence*=":"]::before {
	background-image: linear-gradient( to right, var( --purple ), var( --pink ) );
	content: attr( data-ignorable ) "\0000a0|\0000a0" attr( data-sequence );
}

#playlist ol li[data-ignorable="?"][data-queue*="/"]::before {
	background-image: linear-gradient( to right, var( --purple ), var( --orange ) );
	content: attr( data-ignorable ) "\0000a0|\0000a0" attr( data-queue );
}

#playlist ol li[data-sequence*=":"][data-queue*="/"]::before {
	background-image: linear-gradient( to right, var( --pink ), var( --orange ) );
	content: attr( data-sequence ) "\0000a0|\0000a0" attr( data-queue );
}

#playlist ol li[data-ignorable="?"]::before {
	background-color: var( --purple );
	content: attr( data-ignorable );
}

#playlist ol li[data-sequence*=":"]::before {
	background-color: var( --pink );
	content: attr( data-sequence );
}

#playlist ol li[data-queue*="/"]::before {
	background-color: var( --orange );
	content: attr( data-queue );
}

label.child {
	text-indent: 1ch;
}

#controls:not( .show_cont_played_folders ) fieldset[name="played_folders_length_fs"],
#controls:not( .show_cont_played_tracks ) fieldset[name="played_tracks_length_fs"],
#controls:not( .show_cont_queue ) fieldset[name="queue_length_fs"],
body:not( .scroll_to_playing ) #controls label.smooth_scrolling,
#controls:not( .sequence_prev_next ) label.sequence_prev_next,
#controls:not( .show_cont_sequence ) label.cont_sequence,
#controls:not( .show_cont_queue ) label.cont_queue,
#controls.hide_shuffle_by fieldset.shuffle_by,
#controls.hide_cont_folder span.skip_folders,
#controls.hide_cont_folder label.cont_folder,
#controls.hide_shuffle_by label.skip_played,
#controls.hide_shuffle_by span.skip_folders,
fieldset[name="sequence_fs"]:not( .show ),
#playlist.filtered li:not( .filtered ),
#list_editor div.dropzone li,
#controls span.skip_tracks,
input[name="fixBreakages"],
fieldset[name="folder"],
#spp:not( .show ) {
	display: none !important;
}

input[name="fixBreakages"] {
	margin-left: .5em;
}

#list_editor li {
	padding: .2em 0 .3em;
	cursor: grab;
}

#list_editor ol.dropzone > li::before {
	content: attr( data-folder );
	color: var( --lighter-grey );
}

#list_editor ol.dropzone > li:not( [data-title] )::before {
	font-weight: bold;
	font-size: 120%;
}

#list_editor li::after {
	content: attr( data-title );
	margin-left: .5em;
	display: block;
}

fieldset[name="folder"] {
	border-radius: 1.5em;
	vertical-align: 1em;
	margin-right: 1em;
}

fieldset[name="folder"] input {
	margin-bottom: 0;
}

#controls.hide_cont_folder span.skip_tracks,
#controls.hide_shuffle_by span.skip_tracks {
	display: inline !important;
}

#controls:not( .hide_cont_folder, .hide_shuffle_by ) fieldset[name="folder"] {
	display: inline-block !important;
}

kbd {
	color: var( --turq );
}

label kbd {
	vertical-align: text-top;
	font-size: 90%;
}

label kbd::before {
	content: "(";
}

label kbd::after {
	content: ")";
}

input[name="fixBreakages"].show,
div.dropzone,
.ib {
	display: inline-block !important;
}

.smaller {
	font-size: 80%;
}

fieldset.fright label:last-child input,
fieldset.stacked.fright input {
	margin-right: 0;
}

fieldset.condensed {
	margin-top: 0.3em;
}