packages/app/app/components/TrackRow/styles.scss
@import '../../vars';
.tracks_container {
display: flex;
flex: 1 1 auto;
flex-flow: column;
margin: 0 0.5rem;
.header {
margin-bottom: 1rem;
font-size: 16px;
font-variant: small-caps;
}
.expand_button {
display: flex;
justify-content: center;
padding: 0.5rem;
margin-top: 0.5rem;
transition: $short-duration;
cursor: pointer;
&:hover {
background: lighten($background, 5%);
}
}
table {
width: 100%;
}
thead {
font-variant: all-small-caps;
border-bottom: 1px solid $background2;
color: rgba($white, 0.5);
font-size: 20px;
}
th {
padding: 1rem;
text-align: left;
}
}
.add_button {
text-align: left;
}
.track {
transition: $short-duration;
cursor: pointer;
&:hover {
background: rgba($background2, 0.25);
}
&:last-child {
td {
border-bottom: none;
}
}
td {
padding: 1rem 1rem;
border-bottom: 1px solid $background2;
}
.track_number,
.track_duration {
text-align: center;
}
}
.track_thumbnail {
position: relative;
box-sizing: content-box;
padding: 0 !important;
img {
width: 3em;
height: 3em;
display: block;
object-fit: cover;
}
}
.track_row_buttons {
width: 1px;
}