static: flexbox: move rangeinput.css + treeview.css + sanic.js one level up

static/flexbox/index.html

@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>Sanic - Flexbox layout</title>
-  <link rel="stylesheet" href="rangeinput.css">
+  <link rel="stylesheet" href="../rangeinput.css">
-  <link rel="stylesheet" href="treeview.css">
+  <link rel="stylesheet" href="../treeview.css">
   <link rel="stylesheet" href="sanic.css">
 </head>
 <body>
@@ -158,6 +158,6 @@
     </div>
   </div>
 
-  <script src="sanic.js"></script>
+  <script src="../sanic.js"></script>
 </body>
 </html>

static/rangeinput.css

@@ -0,0 +1,83 @@
+/* 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;
+  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 {
+  height: 5px;
+  border: 1px solid #1a2445;
+  border-right-color: #3a506b;
+  border-bottom-color: #3a506b;
+  background-color: #2e2e27;
+  background-repeat: repeat-x;
+}
+
+/* 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 */
+  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::-moz-range-thumb {
+  border: 1px solid #053a5f;
+  outline: 3px solid #053a5f;
+  outline-offset: 0.125rem;
+}

static/sanic.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function() {
+  function fillTable(withPositionColumn, tableBodyElementName, numElements, playingIndex) {
+    for (let i = 0; i < numElements; i++) {
+      let trElem = "";
+      let positionColumn = "";
+
+      if (i == playingIndex)
+        trElem += `<tr class="playing">`;
+      else
+        trElem += `<tr>`;
+
+      if (withPositionColumn)
+        positionColumn += `<td>${i + 1}</td>`
+
+      let exampleTableEntry =
+      `                                 \
+      ${trElem}                         \
+        ${positionColumn}               \
+        <td>T.E.E.D.</td>               \
+        <td>Garden (Calibre Remix)</td> \
+        <td>undefined</td>              \
+        <td>undefined</td>              \
+        <td>06:01</td>                  \
+      </tr>                             \
+      `
+
+      tableBodyElement = document.getElementById(tableBodyElementName);
+      tableBodyElement.innerHTML += exampleTableEntry;
+    }
+  }
+
+  fillTable(true, "queue-table-body", 8, 3);
+  fillTable(false, "playlist-table-body", 15, -1);
+});

static/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;
+}