diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 1ab053b..0457ac9 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -6,6 +6,7 @@ +
@@ -16,15 +17,10 @@
- - - - - - + + + +
@@ -54,13 +50,11 @@
- -
-
Now playing: 00:00:00/100:00:00
+

Now playing: 00:00:00/100:00:00

@@ -85,7 +79,7 @@ - + 1 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -93,7 +87,7 @@ undefined 9:29 - + 2 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -101,15 +95,15 @@ undefined 9:29 - - 3 + + 3 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29 - + 4 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -117,7 +111,7 @@ undefined 9:29 - + 5 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -125,7 +119,7 @@ undefined 9:29 - + 6 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -133,7 +127,7 @@ undefined 9:29 - + 7 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) @@ -141,78 +135,6 @@ undefined 9:29 - - 8 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 9 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 10 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 11 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 12 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 13 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 14 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 15 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 - - - 16 - Chakra - Love Shines Through (Martin Roth's in Electro Love Remix) - undefined - undefined - 9:29 -
@@ -267,7 +189,7 @@ -
+
@@ -279,49 +201,49 @@ - + - + - + - + - + - + - + @@ -336,7 +258,5 @@ sanic mpd web ui 0.1.0 - by XenGi and coon © 2023 - - diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 709aec9..422c8d4 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -1,14 +1,7 @@ -:root { - --ribbon-width: 160px; -} - html, body { background-color: #09101d; color: #bbb; - - margin: 0; - padding: 0; - height: 100%; + height: 99%; } div { @@ -29,12 +22,6 @@ button { border-bottom-color: #3A3A3A; } -.borderless-button { - border: none; - background-color: inherit; - cursor: pointer; -} - input[type=text] { background-color: #28374a; color: white; @@ -74,8 +61,8 @@ table { } thead { - background: rgb(15,29,47); - background: linear-gradient(0deg, rgba(15,29,47,1) 0%, rgba(15,29,47,1) 50%, rgba(7,14,23,1) 100%); + background-repeat: repeat-x; + background-image: url(../img/table-header-gradient.png); } th { @@ -87,30 +74,19 @@ th { } td { - padding: 1px 0.5em; + padding: 1px 1px 1px 0.5em; border: solid black; border-width: 0 1px 1px 0; text-align: left; } -#queue { - display: flex; - flex-direction: column; - flex-grow: 1; - border-bottom: 4px ridge #3a506b; -} - #queue-table tr td:first-of-type { padding-left: 16px; } -#queue table tr.playing td:first-of-type::before { - content: '\2BC8'; -} - -#queue table tr:not(.playing) td:first-of-type { - padding-left: 2em; /* TODO: do proper spacing */ -} +/* 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; @@ -119,14 +95,24 @@ table tr:nth-child(odd) td { table tr:nth-child(even) td { background:#171812; } +*/ -#queue table tr:nth-child(odd).playing td, -#queue table tr:nth-child(even).playing td { +table tr.odd { + background-color: #1e1f1a; +} + +table tr.even { + background-color: #171812; +} + +#queue-table tr.playing { background-color: #490b00; } -table tr:hover td { - background-color: #354158 !important; /* TODO: remove !important */ +td.playing { + background-image: url(../img/playback.png); + background-repeat: no-repeat; + background-position: left center; } #flexbox-container { @@ -140,10 +126,11 @@ table tr:hover td { flex-direction: row; padding: 5px; - background: linear-gradient(0deg, rgba(3,7,11,1) 0%, rgba(14,27,43,1) 4%, rgba(41,55,74,1) 6%, rgba(18,35,56,1) 94%, rgba(40,68,104,1) 96%, rgba(168,182,200,1) 100%); + background-repeat: repeat-x; + background-image: url(../img/top-controls-bg.png); } -#controls-top > div { +#controls-top div { border-right: 1px solid black; } @@ -157,21 +144,10 @@ table tr:hover td { text-align: left; } -#playback-controls div:first-child { +#playback-controls { display: flex; - flex-direction: row; - justify-content: space-between; -} - -#playback-controls div button { - display: flex; - align-items: center; - justify-content: center; - - padding: 0; - - height: calc(var(--ribbon-width) / 4 - 8px); - width: calc(var(--ribbon-width) / 4 - 8px); + flex-direction: column; + width: 160px; } #progress { @@ -180,6 +156,7 @@ table tr:hover td { } #volume { + margin-left: 10px; width: 90%; } @@ -190,7 +167,6 @@ table tr:hover td { #queue-controls { display: flex; flex-direction: row; - justify-content: space-between; } #queue-xfade-control { @@ -204,11 +180,6 @@ table tr:hover td { flex-direction: row; } -#volume-control { - display: flex; - flex-direction: row; -} - #top-logo { display: flex; flex-direction: column; @@ -232,6 +203,13 @@ table tr:hover td { width: 20px; } +#queue { + display: flex; + flex-direction: column; + flex-grow: 1; + border-bottom: 4px ridge #3a506b; +} + #controls_bottom { display: flex; flex-direction: row; @@ -246,7 +224,7 @@ table tr:hover td { border-right: 4px ridge #3a506b; } -#results_tracklist { +#playlist_tracklist { display: flex; flex-direction: column; diff --git a/static/img/playback.png b/static/img/playback.png new file mode 100644 index 0000000..eebea58 Binary files /dev/null and b/static/img/playback.png differ 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
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined undefined 9:29
Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined