diff --git a/static/flexbox/index.html b/static/flexbox/index.html new file mode 100644 index 0000000..009c080 --- /dev/null +++ b/static/flexbox/index.html @@ -0,0 +1,264 @@ + + + + + Sanic - Flexbox layout + + + + + + +
+
+
+ + +
+
+
+ + + + +
+
+ + +
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+ xfade +
+
+ +
00
+ +
+
+
+
+ + +
+
+
+

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

+ + + +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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
+
+
+
+
    +
  • +
    + / +
      +
    • +
      + 00_music +
        +
      • autosort
        • +
      • reimport
        • +
      • unsortable
        • +
      • youtube
        • +
      +
      +
      • +
    • +
      + 01_incoming +
        +
      • coon
        • +
      • cascha
        • +
      • Xen
        • +
      +
      +
      • +
    • +
      + 02_megablast +
        +
      • dnb
        • +
      • mix
        • +
      +
      +
      • +
    • +
      + 03_mfs +
        +
      • ambient
        • +
      • electronic
        • +
      +
      +
      • +
    +
    +
    • +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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
+
+
+ +
+ + 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 new file mode 100644 index 0000000..6b2e072 --- /dev/null +++ b/static/flexbox/sanic.css @@ -0,0 +1,202 @@ +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; +} + +input { + background-color: #28374a; + color: white; +} + +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 + schoon 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; +} + +#volume { + margin-left: 10px; +} + +#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; +} diff --git a/static/flexbox/sanic.js b/static/flexbox/sanic.js new file mode 100644 index 0000000..e69de29 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 @@ + + + + + + + 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/sanic-logo.webp b/static/img/sanic-logo.webp new file mode 100644 index 0000000..4ed3d29 Binary files /dev/null and b/static/img/sanic-logo.webp 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