From 0be041b476aa4d11cd903fd405b2c2e7ea474fb2 Mon Sep 17 00:00:00 2001 From: coon Date: Mon, 27 Nov 2023 01:55:09 +0100 Subject: [PATCH 01/22] static: start of flexbox implementation --- static/flexbox/index.html | 43 +++++++++++++++++++++++++++++++++++++++ static/flexbox/sanic.css | 33 ++++++++++++++++++++++++++++++ static/flexbox/sanic.js | 0 3 files changed, 76 insertions(+) create mode 100644 static/flexbox/index.html create mode 100644 static/flexbox/sanic.css create mode 100644 static/flexbox/sanic.js diff --git a/static/flexbox/index.html b/static/flexbox/index.html new file mode 100644 index 0000000..583eb6a --- /dev/null +++ b/static/flexbox/index.html @@ -0,0 +1,43 @@ + + + + + Sanic - Flexbox layout + + + + +
+
+
+ + +
+
+
+ + + + +
+
+ + +
+
+
+ +
+
+
+ queue +
+
+ controls bottom +
+ +
+ + diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css new file mode 100644 index 0000000..8b8a136 --- /dev/null +++ b/static/flexbox/sanic.css @@ -0,0 +1,33 @@ +body { + background-color: #09101d; + color: #bbb; +} + +div { + border: 1px dashed white; +} + +button { + background-color: #28374a; + color: #bbb; +} + +#flexbox-container { + display: flex; + flex-direction: column; +} + +#controls-top { + display: flex; + flex-direction: row; +} + +#top-left-controls { + display: flex; + flex-direction: column; +} + +#playback-controls { + display: flex; + flex-direction: column; +} diff --git a/static/flexbox/sanic.js b/static/flexbox/sanic.js new file mode 100644 index 0000000..e69de29 From c17309cc43db424e6b440154bbeaef3901ca30c0 Mon Sep 17 00:00:00 2001 From: coon Date: Mon, 27 Nov 2023 20:50:11 +0100 Subject: [PATCH 02/22] static: add sanic logo image --- static/img/sanic-logo.webp | Bin 0 -> 7258 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 static/img/sanic-logo.webp diff --git a/static/img/sanic-logo.webp b/static/img/sanic-logo.webp new file mode 100644 index 0000000000000000000000000000000000000000..4ed3d29c82b40631f134ecc4d2a48d166999212e GIT binary patch literal 7258 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 jn>Lf#ULA^x{PoIricII5wd>f;ZXW;tZ! Date: Mon, 27 Nov 2023 20:51:38 +0100 Subject: [PATCH 03/22] static: work on basic layout + top controls --- static/flexbox/index.html | 41 +++++++++++++++++++++-- static/flexbox/sanic.css | 70 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 108 insertions(+), 3 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 583eb6a..46f74f3 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -25,8 +25,45 @@ -
+
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
00
+ +
+
+
+
+ + +
+
+
+

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

+ + +
+
+
@@ -36,7 +73,7 @@ controls bottom
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 8b8a136..dcbf986 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -1,6 +1,7 @@ -body { +html, body { background-color: #09101d; color: #bbb; + height: 99%; } div { @@ -12,22 +13,89 @@ button { color: #bbb; } +input { + background-color: #28374a; + color: white; +} + #flexbox-container { display: flex; flex-direction: column; + height: 100%; } #controls-top { display: flex; flex-direction: row; + justify-content: space-b; } #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; +} + +#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: 50px; +} + +#xfade { + width: 20px; +} + +#queue { + flex-grow: 1; +} + +#controls_bottom { + flex-grow: 2; +} + +#footer { + text-align: right; } From fe02f27585180d2cccb82878fc24999ae127ba57 Mon Sep 17 00:00:00 2001 From: coon Date: Tue, 28 Nov 2023 10:47:48 +0100 Subject: [PATCH 04/22] static: index.html: add playlist_controls + playlist_tracklist div containers --- static/flexbox/index.html | 6 +++++- static/flexbox/sanic.css | 10 ++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 46f74f3..8562cfa 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -70,7 +70,11 @@ queue
- controls bottom +
+ playlist controls +
+
+
- queue + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PositionArtistTitleAlbumGenreTime
1ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
2ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
3ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
4ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
5ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
6ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
7ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
playlist controls
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArtistTitleAlbumGenreTime
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
ChakraLove Shines Through (Martin Roth's in Electro Love Remix)undefinedundefined9:29
- +
- +
- +
- + xfade
@@ -50,18 +50,18 @@
- +

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

- +
From 67c31634f4771200f660ab73b9b362ba4ff71afa Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 13:30:24 +0100 Subject: [PATCH 07/22] static: add basic file tree view --- static/flexbox/index.html | 50 ++++++++++++++++++- static/flexbox/treeview.css | 91 ++++++++++++++++++++++++++++++++++ static/img/expand-collapse.svg | 7 +++ 3 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 static/flexbox/treeview.css create mode 100644 static/img/expand-collapse.svg diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 277dce8..8887e7d 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -3,6 +3,7 @@ Sanic - Flexbox layout + @@ -140,7 +141,54 @@
- playlist controls +
    +
  • +
    + / +
      +
    • +
      + 00_music +
        +
      • autosort
        • +
      • reimport
        • +
      • unsortable
        • +
      • youtube
        • +
      +
      +
      • +
    • +
      + 01_incoming +
        +
      • coon
        • +
      • cascha
        • +
      • Xen
        • +
      +
      +
      • +
    • +
      + 02_megablast +
        +
      • dnb
        • +
      • mix
        • +
      +
      +
      • +
    • +
      + 03_mfs +
        +
      • ambient
        • +
      • electronic
        • +
      +
      +
      • +
    +
    +
    • +
diff --git a/static/flexbox/treeview.css b/static/flexbox/treeview.css new file mode 100644 index 0000000..6f052b6 --- /dev/null +++ b/static/flexbox/treeview.css @@ -0,0 +1,91 @@ +/* https://iamkate.com/code/tree-views/ */ + +/* Custom properties */ + +.tree { + --spacing : 1.0rem; + --radius : 10px; +} + +/* Padding */ + +.tree li { + display : block; + position : relative; + padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px); +} + +.tree ul { + margin-left : calc(var(--radius) - var(--spacing)); + padding-left : 0; +} + +/* Vertical lines */ + +.tree ul li { + border-left : 2px solid #ddd; +} + +.tree ul li:last-child { + border-color : transparent; +} + +/* Horizontal lines */ + +.tree ul li::before { + content : ''; + display : block; + position : absolute; + top : calc(var(--spacing) / -2); + left : -2px; + width : calc(var(--spacing) + 2px); + height : calc(var(--spacing) + 1px); + border : solid #ddd; + border-width : 0 0 2px 2px; +} + +/* Summaries */ + +.tree summary { + display : block; + cursor : pointer; +} + +.tree summary::marker, +.tree summary::-webkit-details-marker { + display : none; +} + +.tree summary:focus { + outline : none; +} + +.tree summary:focus-visible { + outline : 1px dotted #000; +} + +/* Markers */ + +.tree li::after, +.tree summary::before { + content : ''; + display : block; + position : absolute; + top : calc(var(--spacing) / 2 - var(--radius)); + left : calc(var(--spacing) - var(--radius) - 1px); + width : calc(2 * var(--radius)); + height : calc(2 * var(--radius)); + border-radius : 50%; + background : #ddd; +} + +/* Expand and collapse buttons */ + +.tree summary::before { + z-index : 1; + background : #696 url('../img/expand-collapse.svg') 0 0; +} + +.tree details[open] > summary::before { + background-position : calc(-2 * var(--radius)) 0; +} diff --git a/static/img/expand-collapse.svg b/static/img/expand-collapse.svg new file mode 100644 index 0000000..f34809c --- /dev/null +++ b/static/img/expand-collapse.svg @@ -0,0 +1,7 @@ + + + + + + + From e8d8e1ef24ff44d3950922e3dc86f664757101a3 Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 15:57:52 +0100 Subject: [PATCH 08/22] static: fix broken css statement --- static/flexbox/sanic.css | 1 - 1 file changed, 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 1c7a9cd..addbc13 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -27,7 +27,6 @@ input { #controls-top { display: flex; flex-direction: row; - justify-content: space-b; } #top-left-controls { From 54130889e9178e8f3a907a34929c88023cbff68f Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 15:59:07 +0100 Subject: [PATCH 09/22] static: make tables occupy whole width --- static/flexbox/sanic.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index addbc13..410be61 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -18,6 +18,12 @@ input { color: white; } +table { + width: 100%; + table-layout: fixed; + border-spacing: 0pt; +} + #flexbox-container { display: flex; flex-direction: column; @@ -88,6 +94,8 @@ input { } #queue { + display: flex; + flex-direction: column; flex-grow: 1; } @@ -98,11 +106,16 @@ input { } #playlist_controls { - flex-grow: 1; + background-color: #171812;; + /* flex-grow: 1; */ + width: 20%; /* frickel? */ } #playlist_tracklist { - flex-grow: 4; + display: flex; + flex-direction: column; + + width: 80%; /* frickel? */ } #footer { From 697d651feb78e4996b07a71e24cbf5c313ed2eaa Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 16:00:37 +0100 Subject: [PATCH 10/22] static: use alternating colors on table --- static/flexbox/sanic.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 410be61..4c17732 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -24,6 +24,15 @@ table { border-spacing: 0pt; } + +table tr:nth-child(odd) td { + background:#1e1f1a; +} + +table tr:nth-child(even) td { + background:#171812; +} + #flexbox-container { display: flex; flex-direction: column; From e23bb0136a8498a0df2ba74187d1d0c03a058dad Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 16:01:08 +0100 Subject: [PATCH 11/22] static: use different color for footer --- static/flexbox/sanic.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 4c17732..5b448ab 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -128,5 +128,6 @@ table tr:nth-child(even) td { } #footer { + background-color: #041936; text-align: right; } From 35512fc088372efc5ee37775cd16f66b0d67358b Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 23:01:03 +0100 Subject: [PATCH 12/22] static: use "old school" way for alternate coloring of tables --- static/flexbox/index.html | 30 +++++++++++++++--------------- static/flexbox/sanic.css | 13 +++++++++++++ 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index 8887e7d..b689aef 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -68,7 +68,7 @@
-
+
@@ -80,7 +80,7 @@ - + @@ -88,7 +88,7 @@ - + @@ -96,7 +96,7 @@ - + @@ -104,7 +104,7 @@ - + @@ -112,7 +112,7 @@ - + @@ -120,7 +120,7 @@ - + @@ -128,7 +128,7 @@ - + @@ -202,49 +202,49 @@ - + - + - + - + - + - + - + diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 5b448ab..c118224 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -25,6 +25,10 @@ table { } +/* 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 + schoon way of alternate coloring is used for now. + table tr:nth-child(odd) td { background:#1e1f1a; } @@ -32,6 +36,15 @@ 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; +} #flexbox-container { display: flex; From 41ff1e3592c5ccf1ff5924788fbe6b03d6ef8152 Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 23:02:58 +0100 Subject: [PATCH 13/22] static: add playback arrow to position row --- static/flexbox/index.html | 4 ++-- static/flexbox/sanic.css | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/flexbox/index.html b/static/flexbox/index.html index b689aef..fa7826b 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -96,8 +96,8 @@ - - + + diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index c118224..5ff8e5d 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -24,6 +24,9 @@ table { border-spacing: 0pt; } +#queue-table tr td:first-of-type { + padding-left: 20px; +} /* 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 From da960cd34b4d818a277ae9bb17b729a618370ef0 Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 23:52:03 +0100 Subject: [PATCH 14/22] static: some formatting on table entries --- static/flexbox/sanic.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 5ff8e5d..99a77a6 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -24,6 +24,13 @@ table { border-spacing: 0pt; } +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: 20px; } From 34978ddb8d19e6c616a8e71014055c1370ced15d Mon Sep 17 00:00:00 2001 From: coon Date: Wed, 29 Nov 2023 23:53:51 +0100 Subject: [PATCH 15/22] static: add playback arrow image + red highlight background color --- static/flexbox/sanic.css | 12 +++++++++++- static/img/playback.png | Bin 0 -> 503 bytes 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 static/img/playback.png diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 99a77a6..6024ead 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -32,7 +32,7 @@ td { } #queue-table tr td:first-of-type { - padding-left: 20px; + padding-left: 16px; } /* This is probably a better way to generate alternate coloring on tables. However, @@ -56,6 +56,16 @@ 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; diff --git a/static/img/playback.png b/static/img/playback.png new file mode 100644 index 0000000000000000000000000000000000000000..eebea58b5cdcf35ecde2f5fcc81eef604ee65672 GIT binary patch literal 503 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4i*LmhONKMUokK+s%APn2Y5O=D-;yvr)B1( zGB9XNoIAnR`*46r+x(EgkI6w+9ZqcS+hvzj)+N#jV?G_$GI+d%Jqu2aCnN?9&;AkGY7LEa|jbZgO*aRSL_U z$;nFuoxd)drMW}!Y0)POv9B(>d|mIQ&Ac9X%0Vu<@@9*5Qsph1H~;I_*Up(f+pl&S zTV%ktXCYfJa@>wDR)Y=SBo<^gQ9q{OZD-1Ao57JuKccoAb~AHKnE}G9=lQnZ3Fg7#J8lUHx3v IIVCg!0I77>3IG5A literal 0 HcmV?d00001 From 24df91e473d9d3964f1b96bfd39ce60942aae570 Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 30 Nov 2023 00:13:20 +0100 Subject: [PATCH 16/22] static: use different font --- static/flexbox/sanic.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 6024ead..5a1ded4 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -6,6 +6,10 @@ html, body { div { border: 1px dashed white; + + font-weight: normal; + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; } button { From 2f029dd7f6dfc68f8f4f3695b5e2a36f773e060d Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 30 Nov 2023 22:30:36 +0100 Subject: [PATCH 17/22] static: comment out dashed debug boarder for div containers --- static/flexbox/sanic.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 5a1ded4..a7c7099 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; From 91407075857b66fc3e7d356494689d40e61edfec Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 30 Nov 2023 22:31:42 +0100 Subject: [PATCH 18/22] static: add table header gradient --- static/flexbox/sanic.css | 13 +++++++++++++ static/img/table-header-gradient.png | Bin 0 -> 602 bytes 2 files changed, 13 insertions(+) create mode 100644 static/img/table-header-gradient.png diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index a7c7099..e2b6c94 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -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; diff --git a/static/img/table-header-gradient.png b/static/img/table-header-gradient.png new file mode 100644 index 0000000000000000000000000000000000000000..d853129c7ce25f7ef3d0e8de69f288fb91f35a5b GIT binary patch literal 602 zcmeAS@N?(olHy`uVBq!ia0y~yU|?imV36csV_;zTFu|psfq}6#)7d$|)7e>}peR2r zGbfdSL1SX=L|c!;4l+mMgO@H6W$*6LNLj&`YS4d^F3@%mmF4# zQ=fNlOUb$4M-;=Rh&(EOWZ10d@#jS8&8Oz)Sle0WNg7=`Y57QCV?;*c&eq6_0iDY` z4tK2z+&7^x^5LGNk-DJ~kLUeqJve9EoJUq?9gl42un-bZT-?MvB|*_?wOd!G%3F8a zKg@mhj(Rg=q!XUZaF^6lInMu&egAIL&y$7of(*E}?7#8txPib8)>omo|JiMO`-}5I zJ=?l1%l5}Gr`dU~H{1F_@WN)^m>6@@O8y;p7=O(#IXOY*q<`><=Z)Wue=XCwP|aPk zZr5JZZ-u`YmaJU8RQkaK0SV23Z?lf?wvMX){oQBre);#8i*BBj$au=Yz`&N|?e4;G z7X-hGa?E95VBjq9h%9Dc;1&j9Muu5)Bp4VN*h@TpUD=;=%Zlr&_tmHF0L5#GYeb22 zer|4RUI~M9QEFmIYKlU6W=V#EyQgnJcq5-U0|SGhr;B3<$Mw0V6!{J)FdR6rjYDSI z|NT>Dw*H*C?9q(u`3ymv%F-(P+9&WWI^q3; Date: Thu, 30 Nov 2023 22:33:01 +0100 Subject: [PATCH 19/22] static: add gradient background for top controls --- static/flexbox/sanic.css | 8 ++++++++ static/img/top-controls-bg.png | Bin 0 -> 1909 bytes 2 files changed, 8 insertions(+) create mode 100644 static/img/top-controls-bg.png diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index e2b6c94..a31f1c8 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -92,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 { diff --git a/static/img/top-controls-bg.png b/static/img/top-controls-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..81074735fa7866afc8118c1497886343c6e5ac3a GIT binary patch literal 1909 zcmeAS@N?(olHy`uVBq!ia0y~yU|?flV6fo;k*>O@n;96GUsr`hlmsP~D-;yvr)B1( zDwI?fq$;FVWTr7NRNPt{8a*jRljCo>=w=qiz?i=C9XAi^)blNy85tUT_p+?v^&NH$ zjFugVe?NcctAD6`PG*wWY18K&`d34CCMJFSc=d9y&+_`3pM76u%B94xHLFNG-Kg{S zl=+3Pdmm;t|4Ogga5`~!*Su-#oeEF)oc!}b<;9-`!MnO%?UD=EmXCe=N8-4s&AL1B za_wDv;*SOW@bF*_oWfkju;kJ$yIp zGarVZvCmA*-=E`hQLfM_?tuQcJ#Er`bG}btQrM!OSH<)vNBrLp#rg@W90L4j@UrJ@ zv=1p+TAp|EV5Guw3Hk62r%(hFFHj`}Q`qAB*wsl`HyA?w2&)k1crC8vb_ zii8|(wQ}BU+qnF~#8lV0MMhb|4FM;E8hod+Z3qf_;_ulelchB)#56mQJ8Em{NzLqY zJ5%(F)_Qoldh0EXSh;j&gwfWVqi0raJrx?jy!Bbss;g1ak1r&wa13v*VP0B1ecrBb zcf7a9RZDx!pV-!Cb817N`)r%kMLuV2PH%}!j}{TrI_l*e9+!G^)#}_Qx2DbA_HNJV zZL#Im3*Elos>`i!kcz$XL*Z%B(^jb!3#TmS`c$;2Pg3Bqi^CoZCXbA=Gm8Sf-kh*Z z+gLR<_=-!=aW$W!BMgaAM|Qnzy(_)*{vq8Jf5r0t#GhbofA`-(k71X5;cvFBFW=v> z=&;ROc-(|5@BWm%e`CFUzpXkfK0DCgAj?^?#@L~d?Z>TO8k?#=U0oHYm-?$FP36f# zd94|K^LOeBJoc)+aZYDN(c#ed$<-0|Mkjl(Hm!XZT#%h=pYt_8w>H1)=*r(ta+{a zt$5n?neSdbJTcRb*X`7aiYG4HmQCHsmlc8eoq#T&zPR#l`@3GdFiPvZ3M!bFf+-c8*FAc@*ofU2M zj3?M4Pr8H}zhz)xY|V6b4)An#hGlyOhKf106Ky>XJIEZ34_>-RlwI3H@MOSTosKRG zFVXIVg z^W(ZbyT9+KX6N{76nwU?(BZ0%vS@$j%{yHZ6|Vekh7AITgp9wsR4Fo_|5(Z|AOC)l z&FSBF<}VIEIh*H0=aJ1m<~ol`AHDSTe!j$qbK+b!QICm;Lc9I{D-lgYt13tpG*Kx)1h0?yilTF{fa1li`BT zN4MF#H5|~pu;S*o?;CT?{TTim7cAZSXR4LKXV0p&OI`aK_T@f!v}@_f>H|;t41O%} zZhPWUH_K@u!=CvU&7U^>i(XKD_3hf7{g>GloMUzGGO)KF$e6h4y3M`2SMS~4pFZpF zUxo#oMLSDZZGHtRn3KHST^NKIlo>2OX4&szU|`@Z@Q5sCVBmNS!i-`QPRKGaFtC?+ z`ns||=av(dVp!$OozB3(Smo*B7-DfcH^kb{#gS+8;(!YW7%iB@pR-(eAT*HysKF}L4;!d!*y z1FVvB0^Zz@dCzSv_~yk#&bBu_i;jt&{2(PEn>vNo}-Q4CY}Z*2)uPWg9dLYPrYVaeuFPLaIl0(%w06w>UzX6#zzq`KSJ zdg7A+6aATK=Go5ie1_n=8KbLh*2~7aV7kqR8 literal 0 HcmV?d00001 From 5a8f3aee350dfb864aad6e9cedd2c8fbf0b7ebef Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 30 Nov 2023 22:33:32 +0100 Subject: [PATCH 20/22] static: adjust sanic logo --- static/flexbox/sanic.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index a31f1c8..dfc32f2 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -153,7 +153,8 @@ td.playing { } #sanic-logo { - width: 50px; + width: 36px; + padding-left: 8px; } #xfade { From 4e5e53d25724ab5908f0aef00562ec7ffb17fe12 Mon Sep 17 00:00:00 2001 From: coon Date: Thu, 30 Nov 2023 22:33:49 +0100 Subject: [PATCH 21/22] static: add shiny borders to bottom controls --- static/flexbox/sanic.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index dfc32f2..79fb798 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -165,6 +165,7 @@ td.playing { display: flex; flex-direction: column; flex-grow: 1; + border-bottom: 4px ridge #3a506b; } #controls_bottom { @@ -177,6 +178,7 @@ td.playing { background-color: #171812;; /* flex-grow: 1; */ width: 20%; /* frickel? */ + border-right: 4px ridge #3a506b; } #playlist_tracklist { From 67c70d4db1c78953a641bbb8dfd0cd9f6856ba00 Mon Sep 17 00:00:00 2001 From: coon Date: Fri, 1 Dec 2023 21:53:51 +0100 Subject: [PATCH 22/22] static: add custom style to range input control --- static/flexbox/index.html | 3 +- static/flexbox/rangeinput.css | 77 +++++++++++++++++++++++++++++++++++ static/flexbox/sanic.css | 8 ++++ 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 static/flexbox/rangeinput.css diff --git a/static/flexbox/index.html b/static/flexbox/index.html index fa7826b..009c080 100644 --- a/static/flexbox/index.html +++ b/static/flexbox/index.html @@ -3,6 +3,7 @@ Sanic - Flexbox layout + @@ -23,7 +24,7 @@
- +
diff --git a/static/flexbox/rangeinput.css b/static/flexbox/rangeinput.css new file mode 100644 index 0000000..73a4ffd --- /dev/null +++ b/static/flexbox/rangeinput.css @@ -0,0 +1,77 @@ +/* https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */ + +/********** Range Input Styles **********/ + +/* Range Reset */ +input[type="range"] { + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; +} + +/* Removes default focus */ +input[type="range"]:focus { + outline: none; +} + +/***** Chrome, Safari, Opera and Edge Chromium styles *****/ + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track { + height: 5px; + width: 70px; + border: 1px solid #1a2445; + border-right-color: #3a506b; + border-bottom-color: #3a506b; + background-color: #2e2e27; + background-repeat: repeat-x; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; /* Override default look */ + appearance: none; + margin-top: -12px; /* Centers thumb on the track */ + + /* custom styles */ + height: 11px; + margin-top: -4px; + width: 5px; + background: #640000; + border: 1px solid #812b25; + border-right-color: #21110f; + border-bottom-color: #21110f; +} + +input[type="range"]:focus::-webkit-slider-thumb { + border: 1px solid #21110f; + border-right-color: #812b25; + border-bottom-color: #812b25; +} + +/******** Firefox styles ********/ + +/* slider track */ +input[type="range"]::-moz-range-track { + background-color: #053a5f; + border-radius: 0.5rem; + height: 0.5rem; +} + +/* slider thumb */ +input[type="range"]::-moz-range-thumb { + border: none; /*Removes extra border that FF applies*/ + border-radius: 0; /*Removes default border-radius that FF applies*/ + + /* custom styles */ + background-color: #5cd5eb; + height: 2rem; + width: 1rem; +} + +input[type="range"]:focus::-moz-range-thumb { + border: 1px solid #053a5f; + outline: 3px solid #053a5f; + outline-offset: 0.125rem; +} diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css index 79fb798..6b2e072 100644 --- a/static/flexbox/sanic.css +++ b/static/flexbox/sanic.css @@ -118,6 +118,14 @@ td.playing { width: 160px; } +#progress { + margin-left: 10px; +} + +#volume { + margin-left: 10px; +} + #queue-volume-controls { width: 150px; }
Position
1 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
2 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
3 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
4 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
5 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
6 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)undefined 9:29
7 Chakra Love Shines Through (Martin Roth's in Electro Love Remix)
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) undefinedundefined 9:29
3
3 Chakra Love Shines Through (Martin Roth's in Electro Love Remix) undefined