Selector/Selector.Web/CSS/now.scss

93 lines
1.3 KiB
SCSS
Raw Normal View History

2021-11-11 19:54:28 +00:00
.app {
display: block;
}
$text-color: white;
2021-12-19 22:50:03 +00:00
$shadow-color: #1e1e1e;
.now-playing-card {
// max-width: 300px;
2021-12-19 22:50:03 +00:00
text-shadow: 2px 2px 2px $shadow-color;
.cover-art {
2021-12-19 22:50:03 +00:00
box-shadow: 4px 4px 2px $shadow-color;
2021-11-11 19:54:28 +00:00
margin-bottom: 15px;
}
img {
// margin: 15px;
}
2021-11-11 19:54:28 +00:00
}
.info-card {
margin-top: 10px;
margin-bottom: 10px;
img {
2021-11-11 19:54:28 +00:00
// margin: 15px;
}
}
.chart-card {
2022-10-01 23:36:06 +01:00
// width: 500px;
2022-11-13 21:44:02 +00:00
margin-top: 10px;
margin-bottom: 10px;
// width: 100%;
// max-width: max-content;
}
@media only screen and (min-width: 768px) {
2021-11-11 19:54:28 +00:00
.app {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
2021-11-11 19:54:28 +00:00
}
.now-playing-card {
position: fixed;
2021-11-11 19:54:28 +00:00
z-index: 10;
right: 20px;
bottom: 20px;
2021-11-11 19:54:28 +00:00
width: 250px;
}
}
@media only screen and (min-width: 768px) {
.info-card {
min-width: 200px;
max-width: 500px;
}
2022-11-13 21:44:02 +00:00
.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;
2021-12-19 22:50:03 +00:00
box-shadow: 2px 2px 2px $shadow-color;
}
.subtle-link {
color: $text-color;
text-decoration: none;
}