Vertical Mode (Suggestion)

[GreenRabbits]

It would be useful to have a Vertical Mode as the one in previous Spotify’s fullscreen mode. It looks more esthetic in my opinion as the album artwork and the title don’t have the same height and width. The option could be ungreyed only when Queue and Playlist Info are disabled or it could just display the title and the bottom, Album Artwork and Queue side-by-side and Playlist Info at the top like usual.

I've made multiple changes to the CSS:

_#content-top { flex-direction: column; }

artwork {

width: unset;

text-align: center; margin-bottom: 2vh; (To create a space between Artwork and Title) }

artwork-img { position: relative; }

info { width: unset; }

top-info { height: 0px; } (Otherwise the title is cropped, I didn’t find another solution)_

Here that the Spotify logo is below the Artwork instead of being at the top. I think the “info” div should be split to fix this and to make this setting compatible with Queue and Playlist Info.

[Selbi182]

How do you intent to make this compatible with Queue and Playlist Info? There really isn't any space

[Selbi182]

Vertical Mode is implemented :)

[GreenRabbits]

First of all, thank you, it really looks incredibly beautiful ! This feature might be used without Queue and Playlist Info mostly. Anyway, in order to make it compatible with Queue and Playlist Info, we could just put the Title at the top or at the bottom of Album Artwork and Queue, and put the Playlist Info at the upper-right corner. Here are two examples :

Achieving this requires to separate the Title, Queue and Playlist info into three separate divs. , I got "center-info-main" (corresponds to Title) and "top-info" (refers to Playlist Info) out of the "info" div. It is then possible to move each one separately to their right place. There may be a few CSS adjustments to do to arrange margins and padding. Here are the HTML document, the different elements and what they refer to.

<div id="top-info"> : <div id="center-info-main"> : <div id="info"> :