diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 5a1ded4..79fb798 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -5,7 +5,7 @@ html, body { } div { - border: 1px dashed white; + /* border: 1px dashed white; */ font-weight: normal; font-family: Arial, Helvetica, sans-serif; @@ -28,6 +28,19 @@ table { 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; @@ -79,6 +92,14 @@ td.playing { #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 { @@ -132,7 +153,8 @@ td.playing { } #sanic-logo { - width: 50px; + width: 36px; + padding-left: 8px; } #xfade { @@ -143,6 +165,7 @@ td.playing { display: flex; flex-direction: column; flex-grow: 1; + border-bottom: 4px ridge #3a506b; } #controls_bottom { @@ -155,6 +178,7 @@ td.playing { background-color: #171812;; /* flex-grow: 1; */ width: 20%; /* frickel? */ + border-right: 4px ridge #3a506b; } #playlist_tracklist { diff --git a/static/img/table-header-gradient.png b/static/img/table-header-gradient.png new file mode 100644 index 0000000..d853129 Binary files /dev/null and b/static/img/table-header-gradient.png differ diff --git a/static/img/top-controls-bg.png b/static/img/top-controls-bg.png new file mode 100644 index 0000000..8107473 Binary files /dev/null and b/static/img/top-controls-bg.png differ