packages/app/app/components/AlbumView/styles.scss
@import "../../vars";
@import "../../../../ui/lib/common.scss";
.album_view_container {
width: 100%;
height: 100%;
padding: 1rem 0 0 0;
.album_buttons {
display: flex;
flex-flow: row;
padding-top: 1rem;
a {
padding: 0.375rem 2.5rem;
}
}
.play_button {
background: $pink;
color: $white;
border-radius: 1.5rem;
text-transform: uppercase;
margin-right: 2rem;
}
.more_button {
border: 1px solid $white;
border-radius: 1.5rem;
}
.dimmable {
width: 100%;
height: 100%;
.album {
display: flex;
flex-flow: column;
}
.album_info_box {
display: flex;
margin: 0rem 1rem;
flex-flow: row;
img {
width: 15rem;
height: 15rem;
object-fit: contain;
border-radius: 0.5rem;
box-shadow: 0rem 0rem 1rem 0.5rem rgba($black, 0.4);
flex: 0 0 auto;
}
.album_details {
display: flex;
flex: 1;
margin: 0rem 1rem;
font-size: 16px;
flex-flow: column;
min-width: 300px;
label {
margin: 0 0.5rem 0 0;
color: rgba($white, 0.6);
}
.album_title {
display: flex;
flex-direction: row;
.album_text {
font-size: 32px;
line-height: 32px;
flex: 1;
@include ellipsis;
}
}
.album_artist {
margin: 1rem 0;
color: rgba($white, 0.6);
font-size: 20px;
a {
color: rgba($white, 0.6);
transition: $short-duration;
&:hover {
color: $white;
}
}
}
.album_genre {
margin: 0.125rem 0;
}
.album_year {
margin: 0.125rem 0;
}
.album_tracks {
margin: 0.125rem 0;
}
}
.album_favorites_button_wrap {
display: flex;
}
}
table {
margin: 3rem 1rem;
width: calc(100% - 2rem);
}
.error {
margin-top: 10rem;
text-align: center;
font-size: 1.2rem;
.message {
margin-top: 1.5rem;
}
}
}
}