cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

static: use modern css for alternate table coloring again

Browse source
This commit is contained in:
coon 2023-12-05 02:02:03 +01:00
parent 0eff220cc5
commit 19533e5d01
3 changed files with 24 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
static/flexbox/index.html
View file

@ -78,7 +78,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr id="$queue-id">
<td>1</td> <td>1</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -86,7 +86,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>2</td> <td>2</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -94,15 +94,15 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd playing"> <tr class="playing">
<td class="playing">3</td> <td>3</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>4</td> <td>4</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -110,7 +110,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>5</td> <td>5</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -118,7 +118,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>6</td> <td>6</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -126,7 +126,7 @@
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>7</td> <td>7</td>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@ -200,49 +200,49 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="even"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>
<td>undefined</td> <td>undefined</td>
<td>9:29</td> <td>9:29</td>
</tr> </tr>
<tr class="odd"> <tr>
<td>Chakra</td> <td>Chakra</td>
<td>Love Shines Through (Martin Roth's in Electro Love Remix)</td> <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
<td>undefined</td> <td>undefined</td>

28
static/flexbox/sanic.css
View file

@ -84,9 +84,13 @@ td {
padding-left: 16px; padding-left: 16px;
} }
/* This is probably a better way to generate alternate coloring on tables. However, #queue table tr.playing td:first-of-type::before {
background color for selected track is overwritten this way. Therefore the "old content: '\2BC8';
school" way of alternate coloring is used for now. }
#queue table tr:not(.playing) td:first-of-type {
padding-left: 2em; /* TODO: do proper spacing */
}
table tr:nth-child(odd) td { table tr:nth-child(odd) td {
background:#1e1f1a; background:#1e1f1a;
@ -95,26 +99,12 @@ table tr:nth-child(odd) td {
table tr:nth-child(even) td { table tr:nth-child(even) td {
background:#171812; background:#171812;
} }
*/
table tr.odd { #queue table tr:nth-child(odd).playing td,
background-color: #1e1f1a; #queue table tr:nth-child(even).playing td {
}
table tr.even {
background-color: #171812;
}
#queue-table tr.playing {
background-color: #490b00; background-color: #490b00;
} }
td.playing {
background-image: url(../img/playback.png);
background-repeat: no-repeat;
background-position: left center;
}
#flexbox-container { #flexbox-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

BIN
static/img/playback.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 503 B