styles.css

body {
	min-width: auto !important;
	overflow: hidden;
}

.navbar-link__text {
	margin-right: 0 !important;
}

.Root__top-container {
	grid-template-areas: "nav-bar main-view" "nav-bar now-playing-bar" !important;
}

.Root__nav-bar {
	background-color: rgb(0,0,0,0.15) !important;
	overflow-y: initial !important;
	width: auto !important;
}

.Root__now-playing-bar,
._26d9e31a05dd5fba3afe1b281ae2cf9e-scss ._66febc2caff37c822a831232b6e73171-scss {
	background-color: rgb(0,0,0,0.15) !important;
}

._5cc30ad41e9c87b4c45756acdbac4a4c-scss:focus,
._5cc30ad41e9c87b4c45756acdbac4a4c-scss:hover,
._8e5150a4e789e81616d957dd43b62c31-scss:focus,
._8e5150a4e789e81616d957dd43b62c31-scss:hover {
	background-color: rgb(0,0,0,0.3) !important;
}

._8e5150a4e789e81616d957dd43b62c31-scss,
._5cc30ad41e9c87b4c45756acdbac4a4c-scss {
	background: rgb(0,0,0,0.3) !important;
}

._26d9e31a05dd5fba3afe1b281ae2cf9e-scss ._66febc2caff37c822a831232b6e73171-scss:hover,
._5cc30ad41e9c87b4c45756acdbac4a4c-scss:hover,
._8e5150a4e789e81616d957dd43b62c31-scss:hover {
	cursor: pointer;
}

.Rootlist__divider {
	background-color: #fff !important;
	border-color: #fff !important;
    opacity: 0.6 !important;
}

.now-playing-bar-container {
	background-color: transparent !important;
	border-top: none !important;
	margin-right: 16px !important;
}

.NavBar__download-item,
.navBar-link--active,
._34098cfd13d48e2910679f35aea2c377-scss,
._34098cfd13d48e2910679f35aea2c377-scss:hover {
	background-color: transparent !important;
}

.navBar-group-header {
	padding-right: 24px !important;
}

.RecentlyPlayedWidget__playing-icon {
	width: auto !important;
	margin-left: 5px !important;
}

.control-button--circled:after {
	border-width: 2px !important;
}

.ArtistAbout__insights {
	-webkit-box-flex: 2 !important;
	flex: 2 !important;
}

/* Fix flash of unstyled content in "Connect to a device" menu */
img.connect-header__image {
	height: 86px;
	/* Flip color */
	filter: invert(1);
}

/* Getting rid of matte gray */
.react-contextmenu,
.connect-device-list-container,
.connect-device-list-item,
.connect-device-list-item__icon,
.connect-device-list-item__device-subtitle {
	background-color: #ffffff !important;
	color: #000000 !important;
	font-weight: 600 !important;
}

.react-contextmenu-item,
.connect-device-list-item {
	opacity: 0.6 !important;
}

.react-contextmenu-item.active,
.react-contextmenu-item:hover,
.connect-device-list-item--active,
.connect-device-list-item:hover {
	opacity: 1 !important;
	background-color: #ffffff !important;
	color: #000000 !important;
}

.connect-title__text,
.connect-title__help {
	color: #000000 !important;
}

a.connect-title__help {
	opacity: 0.6 !important;
}

.connect-device-list-container .btn {
	color: #000000 !important;
	border: 1.5px solid #000000 !important;
	font-weight: 600 !important;
	opacity: 0.6 !important;
}

.connect-device-list-container .connect-info .btn:not(.disabled):focus,
.connect-device-list-container .connect-info .btn:not(.disabled):hover,
a.connect-title__help:hover {
	opacity: 1 !important;
	background-color: #ffffff !important;
	color: #000000 !important;
}

._3802c04052af0bb5d03956299250789e-scss {
	background-color: transparent !important;
}

/* Getting rid of green */
.btn.btn-green,
.btn.btn-blue,
button._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss,
._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss,
._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss:hover {
	background-color: transparent !important;
}

._3a2318b538bc2aae78113023036a879a-scss button._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss {
	background-color: #000 !important
}

._8e7d398e09c25b24232d92aac8a15a81-scss.e8b2fe03d4e4726484b879ed8ff6f096-scss {
	border: 2px solid #ffffff !important;
    transition-duration: .2s !important;
    transition-timing-function: linear !important;
}

/* Button borders */
.btn.btn-green,
.btn.btn-blue,
button._11f5fc88e3dec7bfec55f7f49d581d78-scss,
button._8fec0262e00c11513faad732021ed012-scss,
._137ec408b14ac4ea5aec6ded3d95f328-scss.be059487cfa7b71ee0f482c8e5be2b7e-scss {
	border: 1.5px solid #ffffff !important;
    transition-duration: .2s !important;
    transition-timing-function: linear !important;
}

.c5e6b4072cbe57bc7ba7879658445010-scss:before {
	border-color: #ffffff !important;
}

.ConnectBar {
	background-color: #ffffff !important;
	color: #0E0E0E !important;
	font-weight: var(--glue-font-weight-bold) !important;
}

.ConnectBar:after,
._3a923fa2dfd1f66547507cb7a617062d-scss:after {
	border-bottom-color: #ffffff !important;
}
.connect-device-list-container:before {
	border-top-color: #ffffff !important;
}

.control-button--active,
.control-button--active:after,
.control-button--active:hover,
.control-button--active:hover:after,
.tracklist-row--active .tracklist-col .position,
.tracklist-row--active .tracklist-col .tracklist-duration,
.tracklist-row--active .tracklist-col .tracklist-name,
.tracklist-row--active .tracklist-col .tracklist-play-pause,
.GlueDropTarget--active .ExtraControls__toggle-queue {
	color: #fff !important;
	opacity: 1 !important;
}

.navBar-link {
	opacity: 0.6 !important;
}

.navBar-link--active,
.navBar-link:hover {
	opacity: 1 !important;
}

.RootlistItem--is-drop-target-active .GlueDropTarget:after,
.GlueDropTarget--active .ExtraControls__toggle-queue:after,
.CreatePlaylistButton--is-drop-target-active:after {
	border-color: #ffffff !important;
}

.navBar-link--active:before,
.RootlistItem--is-active:before,
._137ec408b14ac4ea5aec6ded3d95f328-scss.be059487cfa7b71ee0f482c8e5be2b7e-scss:before,
._11f5fc88e3dec7bfec55f7f49d581d78-scss,
.control-button--active-dot:after {
    background-color: #ffffff !important;
}

.mo-info-name,
.UserWidget__link--is-active,
.Rootlist__playlists-header,
.RootlistItemFolder__name,
.navBar-item .GlueDropTarget--active
.navBar-item .GlueDropTarget--active:after,
svg,
.RootlistItem--is-drop-target-active .GlueDropTarget,
.RootlistItem--is-drop-target-active .GlueDropTarget:after,
.CreatePlaylistButton--is-drop-target-active:after,
.btn.btn-fg-green,
.GlueDropTarget--active .ExtraControls__toggle-queue,
.GlueDropTarget--active .ExtraControls__toggle-queue:after,
.control-button--active,
.control-button--active:not(.control-button--disabled):focus,.control-button--active:not(.control-button--disabled):hover,
.control-button--active:not(.control-button--disabled):active:focus,.control-button--active:not(.control-button--disabled):active:hover,
.GlueDropTarget--active .media-object,
.GlueDropTarget--active .media-object:after,
.link-subtle,
._5b19a565b23999d36876ec6bf38a33bf-scss,
.b86d4985215ef0b3ba87440586d38841-scss, /* As of 9/1/20 */
.a65d8d62fe56eed3e660b937a9be8a93-scss,
.a65d8d62fe56eed3e660b937a9be8a93-scss:hover,
.e8ea6a219247d88aa936a012f6227b0d-scss._4b308d5c9250cfb0620ce3b40765ef4a-scss ._6b1ff8eab07810e2b7845ffe28430e38-scss,
.e8ea6a219247d88aa936a012f6227b0d-scss._4b308d5c9250cfb0620ce3b40765ef4a-scss .da0bc4060bb1bdb4abb8e402916af32e-scss {
    color: #ffffff !important;
}

/* Make the little green playing icon green */
._5814e6eb4f933d11bfa18c01b92eff76-scss {
	filter: brightness(0) invert(1) !important;
}

/* Make the loading indicator images match the gradient color */
._918ff6c00e0a5647144abd99dcbd846d-scss {
	filter: brightness(0) invert(1) !important;
	opacity: 0.1 !important;
}

.navBar-item .GlueDropTarget--active:after,
.RootlistItem--is-drop-target-active .GlueDropTarget:after,
.CreatePlaylistButton--is-drop-target-active:after,
.GlueDropTarget--active .ExtraControls__toggle-queue:after,
.GlueDropTarget--active .media-object:after {
    border: 1px solid #ffffff !important;
}

.inputBox-input {
    caret-color: #ffffff !important;
}

.btn-transparent:hover,
.btn.btn-green:not(.disabled):hover,
.btn.btn-blue:not(.disabled):hover,
.contentSpacing > nav > ul > li > div > a:hover {
	background-color: hsla(0,0%,100%,.1) !important;
}

/* Uhh... make the #b3b3b3 text semi transparent instead */
.ec1b5762556429ac3aeedbae72433491-scss,
._3a60fe1505c09248ad7c72d04a0cf07f-scss,
._966e29b71d2654743538480947a479b3-scss a,
.c6287512c50a737d01bd9db32b301fab-scss a {
	color: hsla(0,0%,100%,.6) !important;
}

.feedbackBar-animation-enter,
.feedbackBar-animation-enter-active,
.feedbackBar-animation-enter-done,
.feedbackBar-animation-exit,
.feedbackBar-animation-exit-active,
.feedbackBar-animation-exit-done {
	/* Center text in feedback bar */
	text-align: center !important;
	background-color: rgba(24,24,24,.7) !important;
}

.SearchInputBox__input {
	caret-color: #ffffff !important;
}

.SearchInputBox {
	background-color: #0E0E0E !important;
}

li.tracklist-row.tracklist-row--active,
button.connect-device-list-item.connect-device-list-item--active {
	border-left: 4px white solid !important;
	margin-left: -4px !important;
}

/* Add in sessionInfo as long as it is active (active is defined a couple levels down) */

.tracklist-row--active:before,
.asideButton-container > nav > ul > li > div > a:before,
.contentSpacing > nav > ul > li > div > a:before,
.Search__content > nav > ul > li > div > a:before,
.artist-header > nav > ul > li > div > a:before,
.RecentlyPlayedWidget__link--active:after,
.progress-bar--is-active .progress-bar__fg,
.control-button--active-dot:after,
.RootlistItem--is-active:before,
.Rootlist__drop-indicator {
	background-color: #ffffff !important;
}

/* Responsive */
@media (max-width: 720px) {
	.Root__top-container {
		grid-template-columns: 75px calc(100% - 75px) !important;
	}

	.navBar-logo--size-large,
	.navbar-link__text,
	.UserWidget__user-link,
	.recently-played.navBar-group,
	.Rootlist__playlists {
		display: none !important;
	}

	.navBar-logo--size-small {
		display: block !important;
		padding-left: 0 !important;
	}

	.logo .spotify-logo {
    width: 100% !important;
  }

	.now-playing-bar {
		padding: 0 !important;
	}

	.navBar-item .download-icon {
		height: 25px !important;
		width: 25px !important;
	}
}

@media (min-width: 721px) {
	.Root__top-container {
		grid-template-columns: 200px calc(100% - 200px) !important;
	}

	.SearchInputBox {
		left: 200px !important;
	}

	.sessionInfo {
		padding: 0 !important;
		margin: 0 0 5px !important;
	}

	.UserWidget__container {
		padding: 8px 21px !important;
	}

	._4d7ff6840cca9e0da25e8df55e3a9475-scss {
		height: 200px !important;
	}

	._4d7ff6840cca9e0da25e8df55e3a9475-scss .cover-art {
		width: 200px !important;
		height: 200px !important;
	}

	._958f2c2b6b2a2b2456f034ab40efdd8e-scss {
		height: 200px !important;
	}

	._958f2c2b6b2a2b2456f034ab40efdd8e-scss .cover-art {
		max-width: 200px !important;
		max-height: 200px !important;
	}
}

/* Hide album cover art when the now playing bar gets small */
@media (max-width: 835px) {
	.now-playing__widget-overlay {
		display: none !important;
	}
}

/* Centering artist header image */
[dir=ltr] header.artist-header {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Centering tracklist buttons */
.tracklist-top-align {
	position: relative !important;
    top: 50% !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

.tracklist-top-align.position {
    margin-top: 0 !important;
}


/* Adding pointers to things that are clickable */
.tracklist-play-pause,
.btn {
	cursor: pointer !important;
}

/* Moving play icon a little to the right*/
a.navBar-link.link-subtle.RecentlyPlayedWidget__link.active {
    padding-right: 16px !important;
}

/* New lil toast dudes are blue, lets make them white with black text */
/* Same with the playing on other device thingy */
div[role=alert],
._3a923fa2dfd1f66547507cb7a617062d-scss {
	background-color: #ffffff !important;
	color: #000000 !important;
}

/* Create playlist */
._9eb5acf729a98d62135ca21777fef244-scss {
	background-color: #ffffff !important;
	color: #000000 !important;
}

._110dbc41d89af63f97cdd8b7cd7fea47-scss {
	border: 2px solid #ffffff !important;
}

/* Center headers */
._80e9295c4bd7a5a37b069da6ec674a8f-scss>:first-child {
    grid-column: 2/6 !important;
}

._09de7f5685fbf244f783483fedae7419-scss {
    text-align: center !important;
}

header.artist-header>* {
    text-align: center !important;
}

header.artist-header h1 {
		max-width: 100% !important;
}

/* Remove padding and backgrounds on cards */
._3802c04052af0bb5d03956299250789e-scss {
		background: none !important;
		padding: 5px 5px 4px !important;
}

/* Wrap titles of playlists */
._3957b7dd066dbbba6a311b40a427c59f-scss {
	white-space: normal !important;
}

/* Have header span full width*/
.b00fbb9732b9fe65ded1ba887be5aef9-scss {
	max-width: 100% !important;
}

/* Extend background gradient */
/*
html {
	 TODO change to match color of inner grid thing
	background-color: transparent !important;
}*/

._59ed5f1313c7c4b211995d2b6463683f-scss {
		height: 100% !important;
    background-image: linear-gradient(rgba(0,0,0,.5),rgb(16, 16, 16)) !important;
}

.cacb8cb3c5f560fff6c0be6aae25b5d0-scss {
	background-color: transparent !important;
}

.Rootlist__playlists ._42e396c53c0ac7b28348a662fbea6b6e-scss .e9c3cf2352cbd27d4aaa4923727f9a70-scss {
	background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.7)) !important;
}

.Rootlist__playlists ._42e396c53c0ac7b28348a662fbea6b6e-scss.active .e9c3cf2352cbd27d4aaa4923727f9a70-scss {
	background: linear-gradient(135deg,#450af5,#c4efd9) !important;
}

/* Box shadow on playlist image */
._4c838ef3d2b6da1a61669046bbfae3d1-scss {
    box-shadow: 4px 4px 20px rgba(0,0,0,.5) !important;
}

/* Playlist cards  play button centering */
._1de9257b60b3c93e84ea27e0f0862af8-scss {
    min-height: 52px !important;
}

/* Search icon in search field should stay it's og color */
svg.ded5a23eeb23e836ffb86a831d247eab-scss {
    color: #121212 !important;
}

/* Move the serarch results and whatever over to the left. Why is it not on the left... */
._80e9295c4bd7a5a37b069da6ec674a8f-scss>:first-child {
    grid-column: 1/-1 !important;
}

/* Remove excessive padding on genre pages */
.b52041c11d94a229b2b96389e3a11ce1-scss {
	padding: 30px 0 0 !important;
}

.e2300c9b30532b21d4fab24ee0047c59-scss {
	height: auto !important;
}

/* Remove maxWidth from grid view */
.contentSpacing {
	max-width: none !important;
}

/* Full page gradient bring it BACK */

/* This is the title bar */
._83d9fef4ae69148dc1fc9b8323f8528b-scss._2dc8cce76d72af90f5e00e781db42541-scss {

}

/*
TODOs
- Sample middle of gradient color for menus so they aren't just black
- Fill in thumbs up or thumbs down (probably only thumbs up)
  if we know we already thumbsed up it (or maybe if it's in your library?)
- Get search page to have a gray to black gradient
- Apply cursor to button types, but not if they contain the class "disabled"
*/