Selector/Selector.Web/CSS/now.scss
2022-11-13 21:44:02 +00:00

93 lines
1.3 KiB
SCSS

.app {
display: block;
}
$text-color: white;
$shadow-color: #1e1e1e;
.now-playing-card {
// max-width: 300px;
text-shadow: 2px 2px 2px $shadow-color;
.cover-art {
box-shadow: 4px 4px 2px $shadow-color;
margin-bottom: 15px;
}
img {
// margin: 15px;
}
}
.info-card {
margin-top: 10px;
margin-bottom: 10px;
img {
// margin: 15px;
}
}
.chart-card {
// width: 500px;
margin-top: 10px;
margin-bottom: 10px;
// width: 100%;
// max-width: max-content;
}
@media only screen and (min-width: 768px) {
.app {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.now-playing-card {
position: fixed;
z-index: 10;
right: 20px;
bottom: 20px;
width: 250px;
}
}
@media only screen and (min-width: 768px) {
.info-card {
min-width: 200px;
max-width: 500px;
}
.chart-card {
width: 500px;
}
}
.spotify-logo {
width: 21px;
img {
width: 21px;
}
}
.lastfm-logo {
width: 24px;
img {
width: 24px;
}
}
.popularity-progress {
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 2px 2px 2px $shadow-color;
}
.subtle-link {
color: $text-color;
text-decoration: none;
}