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

28
static/flexbox/sanic.css
View file

@ -84,9 +84,13 @@ td {
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
school" way of alternate coloring is used for now.
#queue table tr.playing td:first-of-type::before {
content: '\2BC8';
}
#queue table tr:not(.playing) td:first-of-type {
padding-left: 2em; /* TODO: do proper spacing */
}
table tr:nth-child(odd) td {
background:#1e1f1a;
@ -95,26 +99,12 @@ 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 {
#queue table tr:nth-child(odd).playing td,
#queue table tr:nth-child(even).playing td {
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;

BIN
static/img/playback.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 503 B