spotify-player-compact.user.css

/* ==UserStyle==
@name         Spotify Player Compact
@description  Makes spotify player single row and changes player buttons order
@version      0.1.0
@license      MIT
@namespace    github.com/crabvk
@author       Vyacheslav Konovalov <f4f7l1hvr@relay.firefox.com>
@updateURL    https://raw.githubusercontent.com/crabvk/userscripts/master/spotify-player-compact.user.css
@homepageURL  https://github.com/crabvk/userscripts
@preprocessor default
==/UserStyle== */

@-moz-document domain("open.spotify.com") {
/*** Hide useless elements ***/

/* UPGRADE button */
.Root__top-bar button[title="Upgrade to Premium"],
/* Spotify logo */
.Root__nav-bar div[role="banner"],
/* Install App button and expanded cover art (same selector for both) */
.Root__nav-bar > div:first-child > div:last-of-type {
    display: none;
}

/* Remove Expand button (shows when hover on cover) */
.Root__now-playing-bar button[aria-label="Expand"] {
    display: none;
}

/*** Change player size ***/

.Root__now-playing-bar > footer > div {
    height: 56px;
}

/*** Change player controls order ***/

.player-controls {
    flex-direction: row;
}

.player-controls__buttons {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 0;
    margin-right: 1rem;
}

.player-controls__buttons > .control-button-wrapper,
.player-controls__buttons > button {
    grid-row: 1;
}

/* Shuffle */
.player-controls__buttons > button:nth-of-type(1) {
    grid-column: 4;
}

/* Previous */
.player-controls__buttons > button:nth-of-type(2) {
    grid-column: 1;
}

/* Play/Pause */
.player-controls__buttons > button:nth-of-type(3) {
    grid-column: 2;
}

/* Next */
.player-controls__buttons > .control-button-wrapper:nth-of-type(1) {
    grid-column: 3;
}

/* Repeat */
.player-controls__buttons > .control-button-wrapper:nth-of-type(2) {
    grid-column: 5;
}

/*** Fix controls cursor ***/

.Root__now-playing-bar button[role="switch"],
.Root__now-playing-bar button.control-button,
.Root__now-playing-bar .player-controls__buttons > button,
.playback-bar .progress-bar,
.volume-bar .progress-bar,
.progress-bar__slider {
    cursor: pointer;
}

/*** Always show cover art in Player ***/

.Root__now-playing-bar div[role="contentinfo"] {
    --webkit-transform: none !important;
    transform: none !important;
}
}