some quick UI fixes for mobile users

This commit is contained in:
ari melody 2024-09-03 08:29:30 +01:00
parent 19d76ebc47
commit dc619821bd
Signed by: ari
GPG key ID: CF99829C92678188
3 changed files with 31 additions and 6 deletions

View file

@ -140,7 +140,7 @@ a.delete {
.release-artwork { .release-artwork {
width: 64px; width: 64px;
height: min-content; height: 64px;
border-radius: 4px; border-radius: 4px;
} }

View file

@ -551,3 +551,14 @@ dialog div.dialog-actions {
#addtrack ul li.new-track:hover { #addtrack ul li.new-track:hover {
background: #e0e0e0; background: #e0e0e0;
} }
@media only screen and (max-width: 1105px) {
#release {
flex-direction: column;
align-items: center;
}
.release-info {
width: auto;
}
}

View file

@ -532,12 +532,11 @@ footer a:hover {
#art-container { #art-container {
width: 100%; width: 100%;
margin-bottom: 2rem;
} }
#artwork { #artwork {
width: auto; width: auto;
max-width: 50vw; max-width: 60vw;
height: auto; height: auto;
max-height: 50vh; max-height: 50vh;
} }
@ -551,21 +550,25 @@ footer a:hover {
gap: 2rem; gap: 2rem;
height: auto; height: auto;
overflow-y: auto; overflow-y: auto;
mask-image: none;
} }
div#info > div { div#info > div {
min-width: auto; min-width: auto;
min-height: auto; min-height: auto;
padding: 0; padding: 0;
margin: 0; margin: 2em 0 0 0;
overflow-y: unset; overflow-y: unset;
mask-image: none;
} }
div#info p { div#info p {
margin: 0 auto; margin: 0 auto;
} }
div#overview p {
margin: .5em auto;
}
div#extras { div#extras {
display: none; display: none;
} }
@ -598,10 +601,18 @@ footer a:hover {
list-style: none; list-style: none;
} }
#share.active: : after { #share.active::after {
transform: translate(calc(-50% - .6em),1.5em); transform: translate(calc(-50% - .6em),1.5em);
} }
#credits h2 {
margin: 0 auto;
}
#lyrics p.album-track-subheading {
margin-bottom: 1em;
}
footer { footer {
height: 4rem; height: 4rem;
font-size: .8rem; font-size: .8rem;
@ -611,6 +622,9 @@ footer a:hover {
display: none; display: none;
} }
#overlay {
background-size: 100vw 4px;
}
} }
@keyframes background-init { @keyframes background-init {