Selector/Selector.Web/CSS/now.scss

95 lines
1.4 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;
.card {
2021-12-19 22:50:03 +00:00
background-color: #333232;
color: $text-color;
margin: 5px;
2021-11-11 19:54:28 +00:00
padding: 15px;
2021-12-19 22:50:03 +00:00
box-shadow: 4px 4px 2px $shadow-color;
transition: box-shadow 0.5s;
&:hover {
box-shadow: none;
offset: 4px 4px;
}
}
.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;
}
}
@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;
}
}
.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;
}