Some aesthetic changes to the dark mode colors and the table borders

marietje/marietje/static/marietje/css/custom.css

@@ -31,19 +31,6 @@ a {
     color: var(--text-color);
 }
 
-.table {
-    color: var(--text-color);
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-    background-color: var(--background-shade);
-    color: var(--text-color);
-}
-
-.table-striped > tbody > tr:nth-of-type(odd) > * {
-    color: var(--text-color);
-}
-
 input[type="text"], input[type="password"] {
     background-color: var(--background-shade-light);
     border: 1px solid var(--background-shade);
@@ -82,6 +69,19 @@ footer {
     text-align: center;
 }
 
+.table {
+    color: var(--text-color);
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--background-shade);
+    color: var(--text-color);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+    color: var(--text-color);
+}
+
 .marietjequeue {
     color: #777777;
 }
@@ -91,7 +91,24 @@ footer {
 }
 
 .marietjequeue-pre-start td {
-    border-bottom: 3px double #777777;
+    border-bottom: 3px double var(--text-color);
+}
+
+.marietjequeue-post-start td {
+    border-top: 3px double var(--text-color);
+}
+
+tr.requested_song{
+    border-left: 1px solid var(--text-color);
+}
+
+.currentsong {
+    border-bottom: 1px solid var(--text-color);
+    font-weight: bold;
+}
+
+.underline_cell {
+    border-bottom: 1px solid var(--text-color);
 }
 
 .block-button {
@@ -100,13 +117,10 @@ footer {
     transition: 1s transform ease-in-out;
 }
 
-.currentsong {
-        border-bottom: 1px solid #DDDDDD;
-}
-
 .navbar-text {
     color: var(--text-color);
 }
+
 .danger {
     color: red !important;
 }

marietje/marietje/static/marietje/css/variables.css

@@ -20,17 +20,19 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #202020;
+        --background-color: #181818;
-        --background-shade: #404040;
+        --background-shade: #282828;
-        --background-shade-light: #696969;
+        --background-shade-light: #404040;
 
-        --card-background: #696969;
+        --card-background: #404040;
-        --card-background-shade: #404040;
+        --card-background-shade: #282828;
-        --card-background-contrast: #ffffff;
+        --card-background-contrast: #dddddd;
 
         --title-color: #000000;
         --sub-title-color: #dddddd;
         --link-color: #007bff;
-        --text-color: #ffffff;
+        --text-color: #dddddd;
+
+        --bs-border-color: #282828;
     }
 }

marietje/queues/templates/queues/queue.html

@@ -71,7 +71,7 @@
                 <div id="queue-container">
                     <table class="table table-striped">
                         <thead>
-                        <tr class="table-header-style">
+                        <tr class="table-header-style underline_cell">
                             <td class="col-md-4">Artist</td>
                             <td class="col-md-4">Title</td>
                             <td class="col-md-2 d-sm-table-cell d-none">Requested By</td>
@@ -84,7 +84,9 @@
                         </thead>
                         <tbody class="queuebody">
                         <template v-for="(song, index) in queue">
-                            <tr :class="{ marietjequeue: (song.user === null), currentsong: (index === 0), 'fw-bold': (index === 0) }">
+                            <tr :class="{ marietjequeue: (song.user === null),
+                                    underline_cell: (index === queue[-1]), 
+                                    currentsong: (index === 0),}">
                                 <td class="artist"><% song.song.artist %></td>
                                 <td class="title"><% song.song.title %></td>
                                 <td class="d-sm-table-cell d-none requested-by">