static: use different font

static/flexbox/index.html

@@ -68,7 +68,7 @@
       </div>
     </div>
     <div id="queue">
-      <table>
+      <table id="queue-table">
         <thead>
           <tr>
             <th>Position</th>
@@ -80,7 +80,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr class="odd">
             <td>1</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -88,7 +88,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>2</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -96,15 +96,15 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
-            <td>3</td>
+          <tr class="odd playing">
+            <td class="playing">3</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
             <td>undefined</td>
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>4</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -112,7 +112,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="odd">
             <td>5</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -120,7 +120,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>6</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -128,7 +128,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="odd">
             <td>7</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -202,49 +202,49 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>

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 {
@@ -24,6 +28,20 @@ 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: 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;
@@ -32,6 +50,25 @@ 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 {
+  background-color: #490b00;
+}
+
+td.playing {
+  background-image: url(../img/playback.png);
+  background-repeat: no-repeat;
+  background-position: left center;
+}
 
 #flexbox-container {
   display: flex;