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

Improve CSS (Finishes #9 )

Browse source
This commit is contained in:
Tyler-A 2020-07-06 23:39:08 -06:00
parent 5c4c029f79
commit ca83a1750f
8 changed files with 153 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

97
css/artist.css
View file

@ -1,97 +0,0 @@
div.artist {
background-color: var(--card-colour);
color: var(--card-text);
border-radius: 7px;
border-style: none;
padding: 10px;
padding-top: 20px;
margin: 5px auto;
width: 90%;
position: relative;
display: flex;
flex-direction: column;
}
div.artist > div.profile_pic {
text-align: center;
}
div.artist > div.profile_pic img {
width: 200px;
height: 200px;
}
div.artist > div.profile_pic > div.missing-circle {
background-color: #3a3a3aaa;
border-radius: 100px;
display: flex;
height: 200px;
width: 200px;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-bottom: 5px;
}
div.artist > div.info {
margin: 0;
text-align: center;
position: relative;
padding-bottom: 20px;
}
div.artist > div.info > span.name {
text-decoration: none;
color: var(--text-on-card);
vertical-align: middle;
font-size: larger;
}
div.artist > .followers {
background-color: var(--on-card-colour);
color: var(--on-card-text);
vertical-align: middle;
position: absolute;
padding: 1px 6px;
bottom: 0px;
right: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 7px 0 7px 0;
}
div.artist > div.info > span.genres {
font-size: smaller;
}
div.artist > .popularity {
background-color: var(--on-card-colour);
color: var(--on-card-text);
position: absolute;
padding: 1px 6px;
bottom: 0px;
left: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 0px 7px 0px 7px;
}
div.artist a {
color: var(--text-on-card);
text-decoration: none;
}
div.artist a:hover {
text-decoration: underline;
}
/* DESKTOP STYLES */
@media only screen and (min-width: 768px) {
div.artist {
width: 230px;
margin: 5px;
}
}

84
css/card.css Normal file
View file

@ -0,0 +1,84 @@
div.card {
/* Card only variables */
--border-radius: 5px;
background-color: var(--card-colour);
color: var(--card-text);
border-radius: var(--border-radius);
border-style: none;
padding: 10px;
padding-top: 20px;
margin: 5px auto;
width: 90%;
position: relative;
display: flex;
flex-direction: column;
}
div.card > div.image {
text-align: center;
}
div.card > div.image img {
--size: 200px;
width: var(--size);
height: var(--size);
}
div.card div.missing-image {
background-color: #3a3a3aaa;
justify-content: center;
border-radius: 100px;
align-items: center;
margin-bottom: 5px;
margin: 0 auto;
display: flex;
height: 200px;
width: 200px;
}
div.card > div.info {
text-align: center;
padding-bottom: 20px;
margin: 0;
}
div.card > div.info > .title { font-size: larger; }
div.card > div.info > .subtitle { font-size: smaller; }
/* Positioning For Absolute Elements */
div.card .corner {
position: absolute;
padding: 1px 6px;
background-color: var(--on-card-colour);
color: var(--on-card-text);
}
div.card .right { right: 0; }
div.card .left { left: 0; }
div.card .top { top: 0; }
div.card .bottom { bottom: 0; }
/* border-radius: top-left top-right lower-right lower-left */
div.card .popularity { border-radius: 0 var(--border-radius) 0 var(--border-radius); }
div.card .followers,
div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; }
div.card a {
color: var(--text-on-card);
text-decoration: none;
}
div.card a:hover {
text-decoration: underline;
}
/* DESKTOP STYLES */
@media only screen and (min-width: 768px) {
div.card {
width: 230px;
margin: 5px;
}
}

84
css/track.css
View file

@ -1,84 +0,0 @@
div.track {
background-color: var(--card-colour);
color: var(--card-text);
border-radius: 7px;
border-style: none;
padding: 10px;
padding-top: 20px;
margin: 5px auto;
width: 90%;
position: relative;
display: flex;
flex-direction: column;
}
div.track > div.cover {
text-align: center;
}
div.track > div.cover img {
width: 200px;
height: 200px;
}
div.track > div.info {
margin: 0;
text-align: center;
position: relative;
padding-bottom: 20px;
}
div.track > div.info > span.name {
text-decoration: none;
color: var(--text-on-card);
vertical-align: middle;
font-size: larger;
}
div.track > .duration {
background-color: var(--on-card-colour);
color: var(--on-card-text);
vertical-align: middle;
position: absolute;
padding: 1px 6px;
bottom: 0px;
right: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 7px 0 7px 0;
}
div.track > div.info > span.artist {
font-size: smaller;
}
div.track > .popularity {
background-color: var(--on-card-colour);
color: var(--on-card-text);
position: absolute;
padding: 1px 6px;
bottom: 0px;
left: 0px;
/* top-left top-right lower-right lower-left */
border-radius: 0px 7px 0px 7px;
}
div.track a {
color: var(--text-on-card);
text-decoration: none;
}
div.track a:hover {
text-decoration: underline;
}
/* DESKTOP STYLES */
@media only screen and (min-width: 768px) {
div.track {
width: 230px;
margin: 5px;
}
}