Spotify/top-lists
0
0
Fork 0
Code Issues Activity

Adjust styling of everything & make mobile friendly

Browse source
This commit is contained in:
Oliver-Akins 2020-08-11 00:49:47 -06:00
parent dcc2a5d456
commit 8432da161c
1 changed files with 15 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/modals/DetailedTrack.vue
View file

@ -114,36 +114,41 @@ export default {
.modal { .modal {
background-color: var(--modal-background); background-color: var(--modal-background);
border-radius: var(--corner-rounding); border-radius: var(--corner-rounding);
padding: 0 15px 15px 15px;
overflow-y: auto;
max-height: 85%; max-height: 85%;
padding: 0 15px;
z-index: 11; z-index: 11;
width: 90%; width: 90%;
} }
h2 {
text-align: center;
}
.audio-features-container { .audio-features-container {
justify-content: space-evenly; justify-content: space-evenly;
flex-direction: row; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
display: flex; display: flex;
} }
.audio-feature { .audio-feature {
padding: 5px 5px 5px 27vw;
align-items: center; align-items: center;
display: flex; display: flex;
padding: 5px;
margin: 5px; margin: 5px;
} }
div.separator {
background-color: var(--accent1);
height: 2px;
width: 100%;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.modal { .modal {
width: 50%;
max-height: 75%; max-height: 75%;
width: 50%;
}
.audio-features-container {
flex-direction: row;
}
.audio-feature {
padding: 5px;
} }
} }
</style> </style>