arimelody.me/public/style/music.css
ari melody 6efd47c6c6 major UI/UX improvements
Signed-off-by: ari melody <ari@arimelody.me>
2024-08-31 01:52:18 +01:00

137 lines
2.5 KiB
CSS

@import url("/style/index.css");
div.music {
margin-bottom: 1rem;
padding: 1.5rem;
display: flex;
flex-direction: row;
gap: 1.5em;
border: 1px solid #222;
border-radius: 4px;
background-color: #ffffff08;
transition: background-color .1s;
text-decoration: none;
cursor: pointer;
}
div.music:hover {
background-color: #fff1;
}
div.music a {
text-decoration: none;
}
.music h1:hover,
.music h2:hover,
.music h3:hover {
background: initial;
}
.music-artwork img {
border: 1px solid #888;
}
.music-title {
margin: 0;
color: #eee;
font-size: 1.6em;
line-height: 1.6em;
}
.music-year {
color: #888;
}
.music-artist {
margin: -.5rem 0 0 0;
font-size: 1em;
color: #aaa;
}
h3[class^=music-type] {
margin: 0 0 1rem 0;
font-size: .8em;
color: #eee;
}
h3.music-type-single {
color: var(--tertiary);
}
h3.music-type-compilation {
color: var(--secondary);
}
h3.music-type-album {
color: var(--primary);
}
h3.music-type-upcoming {
color: #f47070;
}
.music-links {
width: fit-content;
margin: .5em 0;
padding: 0;
display: flex;
gap: .5rem;
flex-wrap: wrap;
line-height: 1.7em;
justify-content: center;
}
.music-links li {
list-style: none;
}
.music-links li a {
padding: .2em .5em;
border: 1px solid #65b4fd;
color: #65b4fd;
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation: list-item-fadein .2s forwards;
animation-delay: 0s;
opacity: 0;
}
.music-links li a:hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
}
h2.question {
margin: 1rem 0;
padding: 1rem 1.5rem;
border-radius: 4px;
cursor: pointer;
}
.collapse {
margin: -1rem 0 1rem 0;
padding: .5em 1.5em;
border-radius: 4px;
}
@media screen and (max-width: 740px) {
div.music {
flex-direction: column;
}
.music-artwork,
.music-details {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
}