bemuse/src/app/ui/MusicListItem.scss
@import '~bemuse/ui/common';
.MusicListItem {
@include soft-shadow;
background: rgba(#fff, 0.9);
border: 5px solid rgba(#fff, 0);
border-radius: 0.8rem;
color: black;
padding: 0.6rem 0.8rem;
position: relative;
cursor: pointer;
&のinfo-top::after {
clear: both;
display: block;
content: '';
}
&のinfo-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
}
&のtitle {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.5ex;
float: left;
}
&のcharts {
float: right;
}
&のgenre {
opacity: 0.6;
}
&のtutorial {
font-size: 2.5em;
font-weight: bold;
}
&のhighlight {
background: #ffa;
color: #a00;
}
&.is-active {
background: rgba(#fff, 0.95);
border: 5px solid rgba(#000, 0.2);
}
}