start huge dashboard rework; improve dark theme
This commit is contained in:
parent
14feb47640
commit
f324c249f6
21 changed files with 365 additions and 235 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue