packages/ui/lib/components/MiniPlayer/MiniTrackInfo/styles.scss
@import "../.../../../../common.scss";
.mini_track_info {
width: 100%;
flex: auto;
position: relative;
flex-flow: column;
margin-top: 100px;
.mini_cover {
max-width: 250px;
max-height: 250px;
position: absolute;
top: 25%;
left:50%;
transform: translate(-50%, -50%);
height: 85%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 1em;
background: transparent;
box-shadow: 15px 15px 45px darken($background, 5%), -15px -15px 45px lighten($background, 5%);
padding: 0.5em;
img {
top: 0;
width: 100%;
left: 0;
height: 100%;
box-shadow: 15px 15px 45px #21232c, -15px -15px 45px #373a49;
border-radius: 1em;
position: absolute;
}
}
.mini_track_info_text {
display: flex;
flex-flow: row;
transform: translate(-50%, -50%);
left: 50%;
top: 85%;
position: relative;
width: 22vh;
font-size: 1.5vh;
justify-content: space-between;
.left {
flex: 1 1 auto;
}
.right {
display: flex;
align-items: center;
flex: 0 0 auto;
i {
cursor: pointer;
color: $pink;
}
}
}
.mini_track {
font-weight: bold;
font-size: 2em;
margin-bottom: 0.3em;
text-align: left;
line-height: 1em;
}
.mini_artist {
font-size: 1.5em;
color: rgba($white, 0.6);
text-align: left;
line-height: 1em;
}
}