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

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

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