ampache_react/app/styles/Album.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";
    }
}