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

This commit is contained in:
William Kuijltjes
2023-11-25 07:45:46 +01:00
committed by Lars van Rhijn
parent 66ac1076d3
commit 98e43aa688
3 changed files with 45 additions and 27 deletions

View File

@ -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;
}

View File

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

View File

@ -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">