Interface changes

spotify_stylus_style.css

/*
 * Intended for use with Stylus https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
 * Can be used with other similar tools
 * Rule used for setup in stylus is :
 * Applies to [ URLs on domain ] : [open.spotify.com]
 * Design changes :
 * Height increased for playlist items
 * Scaled album images to improve visibility
 * Scaled now playing image indicator for better visibility
 * Text colors changed to a light green
 * Now playing bar fixed to bottom on
 * Now playing bar increased font size for time indicators
 * Increased height of currently playing bar and changed color
 * Added borders to top bar and bottom bar
 * Box shadow added to items
 * base color : #1db954 || rgb(29 185 84)
 */
/* change text coloring */
h1, h2, h3, h4, h5, h6 {
	color       : rgba(29, 185, 84, 1) !important;
	text-shadow : 2px 1px 5px black;
}
/* change heart iocn coloring */
.spoticon-heart-32 {color : rgba(29, 185, 84, 1) !important;}
/* adjust header bar to sidebar changed width */
header {max-width : calc(100vw - 200px) !important;}
/* Force topbar visible at all times */
header > div:nth-child(1) {
	width         : 100%;
	opacity       : 1 !important;
	max-width     : calc(100vw - 200px);
	border-bottom : 2px solid rgba(29, 185, 84, 1);
}
/* Force topbar visible at all times */
[data-testid="topbar-content-wrapper"] [data-testid="topbar-content"] > * {opacity : 1 !important;}
/* force left sidebar thinner and clear overlaid elements */
#main .Root__top-container .Root__nav-bar {
	overflow-y : hidden;
	overflow-x : scroll;
	width      : 215px;
}
/* enforce border on navigation buttons in header */
header > div:nth-child(2) > button {border : 3px solid rgba(29, 185, 84, 1) !important;}
/* Enforce color of most of the text */
.standalone-ellipsis-one-line {color : rgba(29, 185, 84, 1) !important;}
/* diferentiate links ever so slightly from above stiling */
a, span {color : rgba(162, 204, 177, .9) !important;}
/* *** Change tracklist item styles *** */
/* Change tracklist items height, border, box shadow, animate */
[data-testid="tracklist-row"] {
	transition                : all ease 250ms;
	height                    : 65px;
	border-bottom             : 2px solid rgba(29, 185, 84, 0.9);
	border-left               : 2px solid rgba(29, 185, 84, 0.8);
	border-bottom-left-radius : 0;
	border-top-left-radius    : 0;
	box-shadow                : inset 25px -7px 50px 5px rgba(29, 185, 84, 0.25);
}
/* clear hover background */
[data-testid="tracklist-row"]:hover {
	background : initial !important;
	box-shadow : inset 25px -7px 20px 5px rgba(29, 185, 84, 0.25);
}
/* make track number visible during hover */
[data-testid="tracklist-row"]:hover div:nth-child(1) span {display : block !important;}
/* track number in list moved higher for visibility and to not rest behind the play button */
[data-testid="tracklist-row"] > div > div > span {top : -14px;}
/* Make all tracklist row buttons visible, set color, set size */
[data-testid="tracklist-row"] button {
	color         : rgba(29, 185, 84, 1);
	height        : 21px;
	width         : 21px;
	opacity       : 1 !important;
	border-radius : 5px;
	margin-top    : 0;
	margin-left   : -3px;
}
/* make tracklist button icon size larger */
[data-testid="tracklist-row"] button > svg { width : 21px;height : 21px; }
/* fix play button height placement */
[data-testid="tracklist-row"] > div > div > button {margin-top : 8px;}
/* Modify now playing image when present*/
[data-testid="tracklist-row"] div:nth-child(1) img {
	/* 	height : 80px; */
	left  : -20px;
	top   : -30px;
	width : 50px;
}
/* prevent now playing image hiding on hover  --- colides with search songs lists */
[data-testid="tracklist-row"]:hover div:nth-child(1) img {
	display        : initial !important;
	pointer-events : none;
}
/* Change album art image size */
[data-testid="tracklist-row"] div:nth-child(2) img {
	width  : 61px;
	height : 61px;
}
/* *** now-playing-tracklist-row styles *** */
/* Change tracklist active item - height and color */
[data-testid="tracklist-row"].now-playing-tracklist-row {
	box-shadow : inset 0px 25px 0px 0 rgba(29, 185, 84, 0.25);
	height     : 85px;
	background : rgba(29, 185, 84, 0.2);
}
/* Change tracklist active item - equalizer gif */
[data-testid="tracklist-row"].now-playing-tracklist-row > div:nth-child(1) img {
	height : 80px;
	top    : -30px;
}
/* Change tracklist active item - album art */
[data-testid="tracklist-row"].now-playing-tracklist-row > div:nth-child(2) > img {
	width  : 80px;
	height : 80px;
}
/* Change tracklist active item - set text color, font size and weight */
[data-testid="tracklist-row"].now-playing-tracklist-row span {
	color       : #1DB954 !important;
	overflow    : visible;
	font-size   : 18px;
	font-weight : 800;
}
/* *** now-playing-tracklist-row styles END *** */
/* Change list height on artist pages to match above changes */
/* *** playlist adjustments *** */
.contentSpacing {padding : 0 5px;}
.contentSpacing [role="grid"] > div:nth-child(1) {margin-right : -30px;margin-bottom:0;}
/* hide sentinel due to overlap with playlist */
[data-testid="bottom-sentinel"] {display : none;}
/* *** end playlist adjustment *** */
/* *** cards title *** */
.main-view-container__scroll-node-child > section > div {grid-gap : 10px;}
section[aria-label] > div:nth-child(1) {
	border-top    : 2px solid rgba(29, 185, 84, 0.6);
	border-bottom : 2px solid rgba(29, 185, 84, 0.6);
	margin-bottom : 10px;
}
section[aria-label] > div:nth-child(1) > div {
	padding-top    : 5px;
	padding-bottom : 5px;
	margin-bottom  : 0;
}
/* *** end cards title *** */
/* cards */
section[aria-label] > div:nth-child(2) {overflow-y : initial !important;}
/* Sections restyle prevent targeting of shortcuts section due to padding issues */
section[aria-label]:not([aria-label="Shortcuts"]) > div:nth-child(2) > div {
	padding       : 13px;
	text-overflow : initial !important;
	white-space   : initial !important;
	border-radius : 7px;
	box-shadow    : inset 0 0 4px #1DB954;
	border        : 2px solid rgba(29, 185, 84, 0.9);
}
/* card image scaled and filling  */
section[aria-label] > div:nth-child(2) > div [data-testid="card-image"] {
	border-radius : 5px 5px 0 0;
	width         : calc(100% + 26px);
	margin-left   : -13px;
	margin-top    : -13px;
	height        : calc(100% + 13px);
	box-shadow    : 0 7px 4px 0 rgba(29, 185, 84, 0.6);
}
/* end cards */
/* *** Search page styles *** */
.contentSpacing section[aria-label] > div:nth-child(2) > a > div > h3 {
	color       : rgba(29, 185, 84, 1) !important;
	text-shadow : 2px 1px 5px black;
}
.contentSpacing section[aria-label] [data-testid="scroll-wrapper"] > div > a h3 {
	color       : rgba(29, 185, 84, 1) !important;
	text-shadow : 2px 1px 5px black;
}
/* *** Search page styles end *** */
.main-view-container {padding-bottom : 1px;}
/* Pin playing bar to bottom of window */
.Root__now-playing-bar {
	position   : fixed;
	border-top : 2px solid rgba(29, 185, 84, 1);
	bottom     : 0;
}
/* change buttons color */
.player-controls__buttons button {color : rgba(29, 185, 84, 1);border-color : rgba(29, 185, 84, 1);}
/* change buttons size */
.player-controls__buttons button svg {
	width        : 20px;
	height       : 20px;
	color        : rgba(29, 185, 84, 1);
	fill         : rgba(29, 185, 84, 1);
	border-color : rgba(29, 185, 84, 1);
}
/* change progress bar height*/
.progress-bar__fg_wrapper,
.progress-bar__bg {
	height : 9px;
}
/* change progress bar height and color */
.progress-bar__fg {
	height           : 9px;
	background-color : rgba(29, 185, 84, 1);
}
/* change progress bar time font and color*/
.playback-bar__progress-time {
	color       : rgba(29, 185, 84, 1);
	font-weight : 800;
	font-size   : 15px;
}
/* change progress bar knob*/
.middle-align.progress-bar__slider {
	display      : inline-block;
	opacity      : 1;
	top          : 4px;
	width        : 9.5px;
	height       : 9.5px;
	border-style : solid;
}
/* change progress bar knob backer*/
.player-controls .progress-bar .hitter {
	position       : absolute;
	content        : "";
	top            : 1px;
	left           : 1px;
	width          : 10px;
	height         : 10px;
	z-index        : 70000;
	pointer-events : none;
	background     : blue;
}

todo :: use some form of trickery or tampermonkey to fix the album details footer from being poorly positioned

Not recommending for spotify premium due to lack of testing done with a premium subscription feature set, meaning i have no clue how the site would change when a premium subscription account accesses it.

Resolved most notable issues, some features i know nothing about may have been overlooked.

TODO :: review changes done by spotify team and make sure all visuals still sit nicely in place