setto.basspistol.com/_sass/trackplayer.scss

113 lines
1.8 KiB
SCSS
Raw Normal View History

2020-08-03 21:40:11 +02:00
#trackArt {
overflow-x: hidden;
flex: 1 1 50%;
min-width: 512px;
height: 100vh;
padding: 0;
margin: 0;
2020-08-04 10:48:11 +02:00
background-size: 100%;
2020-08-05 11:35:30 +02:00
background: _palette(bg-alt);
background: linear-gradient(180deg, _palette(bg-alt) 0%, _palette(accent1-alt) 180%);
2020-08-04 12:07:59 +02:00
2020-08-03 21:40:11 +02:00
> section {
position: absolute;
height: 100vh;
width: 50%;
2020-08-04 10:48:11 +02:00
background: transparent;
2020-08-03 21:40:11 +02:00
padding: 0;
margin: 0;
text-align: center;
> * {
margin: 40px;
}
}
.coverartwrapper {
margin-top: 120px;
margin-left: 50%;
2020-08-04 12:14:55 +02:00
transform: translateX(-50%);
2020-08-03 21:40:11 +02:00
width: 50%;
padding-top: 50%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
.coverartwrapped {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 100%;
padding-bottom: 0;
background-size: cover;
}
.playbutton {
cursor: pointer;
justify-self: center;
}
}
#trackInfo {
flex: 1 1 50%;
height:100vh;
overflow-y: scroll;
overflow-x: hidden;
margin: 0;
padding: 0;
section {
text-align: left;
> * {
margin: 20px;
}
.info {
margin: 20px;
padding: 0;
}
2020-08-05 12:32:24 +02:00
p:first-child {
2020-08-05 10:48:20 +02:00
margin-top:80px;
}
2020-08-03 21:40:11 +02:00
}
.post-nav-next {
text-align: right;
}
.post-nav {
text-align: left;
}
}
.playerlogo {
}
@media only screen and (max-width: 1023px) {
#trackArt {
2020-08-05 10:48:20 +02:00
2020-08-03 21:40:11 +02:00
min-width: 100%;
section {
position: absolute;
top: 0;
margin: 0;
width: 100%;
height: 80vh;
}
}
#trackInfo {
2020-08-05 10:48:20 +02:00
height: unset;
overflow-y: unset;
section {
2020-08-05 12:32:24 +02:00
p:first-child {
margin-top:20px;
2020-08-05 10:48:20 +02:00
}
}
}
2020-08-03 21:40:11 +02:00
}
2020-08-04 10:48:11 +02:00
.bouncer {
-webkit-animation: backgroundSize 10s ease infinite;
-moz-animation: backgroundSize 10s ease infinite;
animation: backgroundSize 10s ease infinite;
}