packages/app/app/components/ArtistView/styles.scss
@import "../../mixin";
@import "../../vars";
.artist_view_container {
position: relative;
width: 100%;
height: 100%;
.dimmable {
width: 100%;
height: 100%;
}
.dimmable.loading {
display: flex;
flex-flow: column;
& > div {
flex: 1 1 auto;
}
hr {
width: 100%;
}
}
.artist {
display: flex;
flex-flow: column;
}
.artist_header {
display: flex;
width: 100%;
height: 25rem;
margin: 0 0 1rem;
flex-flow: column;
flex: 0 0 auto;
}
.artist_header_overlay {
display: flex;
flex: 0 1 auto;
flex-flow: column;
width: 100%;
height: 100%;
backdrop-filter: brightness(40%);
justify-content: flex-end;
}
.artist_header_container {
display: flex;
flex: 0 1 auto;
flex-flow: row;
width: 100%;
align-items: center;
}
.artist_avatar {
width: 10rem;
height: 10rem;
border: 2px solid $white;
border-radius: 50%;
margin: 1rem;
flex-shrink: 0;
}
.artist_name_container {
display: flex;
flex-flow: column;
flex: 1 1 auto;
margin: 1rem;
}
.artist_name_line {
display: flex;
flex-flow: row;
align-items: center;
h1 {
line-height: 1.15;
}
margin-bottom: 0.75em;
}
.on_tour {
@include roundCorners;
padding: 0.25rem;
background: $red;
text-transform: uppercase;
}
.artist_favorites_button_wrap {
margin-left: 0.25rem;
}
h1 {
font-size: 48px;
font-weight: normal;
margin-right: 1rem;
}
.artist_related_container {
display: flex;
flex-flow: row;
margin: 0.5rem 0;
&.loading {
display: none;
}
}
}