sanic/static/flexbox/sanic.css

html, body {
  background-color: #09101d;
  color: #bbb;
  height: 99%;
}

div {
  /* border: 1px dashed white; */

  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

button {
  background-color: #28374a;
  color: #bbb;

  border-left-color: #545454;
  border-top-color: #545454;
  border-right-color: #3a3a3a;
  border-bottom-color: #3A3A3A;
}

input[type=text] {
  background-color: #28374a;
  color: white;

  border: 1px solid black;

  border-left-color: black;
  border-top-color: black;
  border-right-color:#545454;
  border-bottom-color: #545454;
}

input[type=checkbox] {
  appearance: none;
  background-color: #2e2e2e;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 5px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;

  border-left-color: #b9b9b9;
  border-top-color: #b9b9b9;
  border-right-color:#5e5e5e;
  border-bottom-color: #5e5e5e;
}

input[type="checkbox"]:checked {
  background-color: #cc0000;
}

table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0pt;
}

thead {
  background-repeat: repeat-x;
  background-image: url(../img/table-header-gradient.png);
}

th {
  font-weight: bold;
  padding: 2px 2px 2px 14px;
  border: solid #1c2c1a;
  border-width: 0 1px 0 0;
  cursor: pointer;
}

td {
  padding: 1px 1px 1px 0.5em;
  border: solid black;
  border-width: 0 1px 1px 0;
  text-align: left;
}

#queue-table tr td:first-of-type {
  padding-left: 16px;
}

/* This is probably a better way to generate alternate coloring on tables. However,
   background color for selected track is overwritten this way. Therefore the "old
   school" way of alternate coloring is used for now.

table tr:nth-child(odd) td {
  background:#1e1f1a;
}

table tr:nth-child(even) td {
  background:#171812;
}
*/

table tr.odd {
  background-color: #1e1f1a;
}

table tr.even {
  background-color: #171812;
}

#queue-table tr.playing {
  background-color: #490b00;
}

td.playing {
  background-image: url(../img/playback.png);
  background-repeat: no-repeat;
  background-position: left center;
}

#flexbox-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#controls-top {
  display: flex;
  flex-direction: row;

  padding: 5px;
  background-repeat: repeat-x;
  background-image: url(../img/top-controls-bg.png);
}

#controls-top div {
  border-right: 1px solid black;
}

#top-left-controls {
  display: flex;
  flex-direction: column;
  width: 100px;
}

#top-left-controls button {
  text-align: left;
}

#playback-controls {
  display: flex;
  flex-direction: column;
  width: 160px;
}

#progress {
  margin-left: 10px;
  width: 90%;
}

#volume {
  margin-left: 10px;
  width: 90%;
}

#queue-volume-controls {
  width: 150px;
}

#queue-controls {
  display: flex;
  flex-direction: row;
}

#queue-xfade-control {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#queue-xfade-buttons {
  display: flex;
  flex-direction: row;
}

#top-logo {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
  width: 50px;
}

#top-logo-container {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

#sanic-logo {
  width: 36px;
  padding-left: 8px;
}

#xfade {
  width: 20px;
}

#queue {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-bottom: 4px ridge #3a506b;
}

#controls_bottom {
  display: flex;
  flex-direction: row;
  flex-grow: 2;
}

#playlist_controls {
  background-color: #171812;;
  /* flex-grow: 1; */

  width: 20%; /* frickel? */
  border-right: 4px ridge #3a506b;
}

#playlist_tracklist {
  display: flex;
  flex-direction: column;

  width: 80%; /* frickel? */
}

#footer {
  background-color: #041936;
  text-align: right;
}