packages/ui/lib/components/AlbumPreview/styles.scss
@import "../../common";
.album_preview {
position: relative;
display: flex;
flex-flow: row;
height: 100%;
max-height: 240px;
.album_cover {
@include roundCorners;
position: relative;
height: auto;
min-height: 240px;
width: 240px;
background-size: cover !important;
background-position: center !important;
flex: 0 0 auto;
overflow: hidden;
&:hover {
.album_cover_overlay {
opacity: 0.85;
}
}
}
.album_cover_overlay {
position: relative;
display: flex;
width: 100%;
height: 100%;
opacity: 0;
background: $black;
transition: $short-duration;
flex-flow: row;
justify-content: space-between;
align-items: flex-end;
button.ui.button {
border: 1px solid rgba($white, 0.3);
margin: 1em;
opacity: 1;
&:hover,
&:active,
&:focus {
border: none;
i {
color: rgba($black, 0.9);
}
}
i {
color: rgba($white, 0.8);
}
}
}
.track_list {
flex: 1 1 auto;
overflow: auto;
padding-right: 1em;
padding-left: 1em;
table {
width: 100%;
}
}
}