66 lines
1.1 KiB
SCSS
66 lines
1.1 KiB
SCSS
/**
|
|
* Album component style.
|
|
*/
|
|
|
|
/** Variables */
|
|
$rowMarginTop: 30px;
|
|
$rowMarginBottom: 10px;
|
|
$artMarginBottom: 10px;
|
|
|
|
/* Style for an album row */
|
|
.row {
|
|
margin-top: $rowMarginTop;
|
|
}
|
|
|
|
/* Style for album arts */
|
|
.art {
|
|
display: inline-block;
|
|
margin-bottom: $artMarginBottom;
|
|
width: 75%;
|
|
height: auto;
|
|
|
|
/* doiuse-disable viewport-units */
|
|
|
|
max-width: 25vw;
|
|
|
|
/* doiuse-enable viewport-units */
|
|
}
|
|
|
|
.art:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Play button is based on the one in Songs list. */
|
|
.play {
|
|
composes: play from "./Songs.scss";
|
|
}
|
|
|
|
/* Play next button is based on the one in Songs list. */
|
|
.playNext {
|
|
composes: playNext from "./Songs.scss";
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.nameRow h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.artRow p,
|
|
.artRow img {
|
|
margin: 0;
|
|
}
|
|
|
|
.nameRow,
|
|
.artRow {
|
|
float: none;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-bottom: $rowMarginBottom;
|
|
}
|
|
|
|
.songs {
|
|
composes: songs from "./Songs.scss";
|
|
}
|
|
}
|