Spotify Side Mode

Re-arrange elements in now playing bar to fit narrow window.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

/* ==UserStyle==
@name         Spotify Side Mode
@namespace    https://github.com/dearrrfish/my-userscripts
@version      1.0.0
@description  Re-arrange elements in now playing bar to fit narrow window.
@author       dearrrfish
@license      MIT
@homepageURL  https://github.com/dearrrfish/my-userscripts
@supportURL   https://github.com/dearrrfish/my-userscripts/issues
==/UserStyle== */

body {
    font-family: Microsoft Yahei;
}

@media screen and (max-width: 700px) {
    body {
        min-width: unset;
    }

    .now-playing-bar-container {
        min-width: unset
    }

    .now-playing-bar {
        width: 100%;
        min-height: 70px;
        padding: 10px 20px;
        height: unset;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .now-playing-bar__left {
        width: auto;
        order: 1;
    }

    .now-playing-bar__center {
        width: 100%;
        order: 3;
    }

    .now-playing-bar__right {
        max-width: 25%;
        min-width: unset;
        order: 2;
    }

    .now-playing-bar__right__inner {
        width: 100%;
    }
}