start huge dashboard rework; improve dark theme

This commit is contained in:
ari melody 2025-10-21 15:37:40 +01:00
parent 14feb47640
commit f324c249f6
Signed by: ari
GPG key ID: CF99829C92678188
21 changed files with 365 additions and 235 deletions

View file

@ -155,7 +155,7 @@ dialog div.dialog-actions {
gap: .5em;
}
.card-title a.button {
.card-header a.button {
text-decoration: none;
}
@ -163,7 +163,7 @@ dialog div.dialog-actions {
* RELEASE CREDITS
*/
.card.credits .credit {
.card#credits .credit {
margin-bottom: .5em;
padding: .5em;
display: flex;
@ -172,24 +172,30 @@ dialog div.dialog-actions {
gap: 1em;
border-radius: 16px;
background: var(--bg-2);
background-color: var(--bg-2);
box-shadow: var(--shadow-md);
cursor: pointer;
transition: background .1s ease-out;
}
.card#credits .credit:hover {
background-color: var(--bg-1);
}
.card.credits .credit p {
.card#credits .credit p {
margin: 0;
}
.card.credits .credit .artist-avatar {
.card#credits .credit .artist-avatar {
border-radius: 12px;
}
.card.credits .credit .artist-name {
.card#credits .credit .artist-name {
color: var(--fg-3);
font-weight: bold;
}
.card.credits .credit .artist-role small {
.card#credits .credit .artist-role small {
font-size: inherit;
opacity: .66;
}
@ -308,32 +314,33 @@ dialog div.dialog-actions {
* RELEASE LINKS
*/
.card.links {
.card#links ul {
padding: 0;
display: flex;
gap: .2em;
}
.card.links a.button:hover {
.card#links a.button:hover {
color: var(--bg-3) !important;
background-color: var(--fg-3) !important;
}
.card.links a.button[data-name="spotify"] {
.card#links a.button[data-name="spotify"] {
color: #101010;
background-color: #8cff83
}
.card.links a.button[data-name="apple music"] {
.card#links a.button[data-name="apple music"] {
color: #101010;
background-color: #8cd9ff
}
.card.links a.button[data-name="soundcloud"] {
.card#links a.button[data-name="soundcloud"] {
color: #101010;
background-color: #fdaa6d
}
.card.links a.button[data-name="youtube"] {
.card#links a.button[data-name="youtube"] {
color: #101010;
background-color: #ff6e6e
}
@ -421,7 +428,7 @@ dialog div.dialog-actions {
* RELEASE TRACKS
*/
.card.tracks .track {
.card#tracks .track {
margin-bottom: 1em;
padding: 1em;
display: flex;
@ -433,43 +440,47 @@ dialog div.dialog-actions {
box-shadow: var(--shadow-md);
}
.card.tracks .track h3,
.card.tracks .track p {
.card#tracks .track h3,
.card#tracks .track p {
margin: 0;
}
.card.tracks h2.track-title {
.card#tracks h2.track-title {
margin: 0;
display: flex;
gap: .5em;
}
.card.tracks h2.track-title .track-number {
.card#tracks h2.track-title .track-number {
opacity: .5;
}
.card.tracks .track-album {
.card#tracks a:hover {
text-decoration: underline;
}
.card#tracks .track-album {
margin-left: auto;
font-style: italic;
font-size: .75em;
opacity: .5;
}
.card.tracks .track-album.empty {
.card#tracks .track-album.empty {
color: #ff2020;
opacity: 1;
}
.card.tracks .track-description {
.card#tracks .track-description {
font-style: italic;
}
.card.tracks .track-lyrics {
.card#tracks .track-lyrics {
max-height: 10em;
overflow-y: scroll;
}
.card.tracks .track .empty {
.card#tracks .track .empty {
opacity: 0.75;
}