spicetify-themes/Kaapi/user.css

:root {
	
}

/*Round corner cover image*/
.card-image,
.card-placeholder-wrapper,
.card-image-content-wrapper,
.Card:not(.Card--artist) .Card__image,
.Card:not(.Card--artist) .Card__image-wrapper {
	border-radius: 10px !important;
	overflow: hidden !important
}


/*Thinner scrollbar*/
::-webkit-scrollbar {
	height: 6px !important;
	width: 6px !important;
	background-color: transparent;

}

/*Round corner scrollbar*/
::-webkit-scrollbar-thumb {
	border-radius: 3px !important;
}

/*Hide top and bottom buttons of scrollbar */
/*who uses those, lol*/
::-webkit-scrollbar-button {
	display: none !important;
}




/*Spice up search input background*/
.SearchInput {
	color: var(--modspotify_main_fg);
}
.SearchInput__input {
	color: var(--modspotify_secondary_fg);
	background-color: rgba(var(--modspotify_rgb_scrollbar_fg_and_selected_row_bg), 0.5) !important;
	border-radius: 4px !important;
	padding-left: 34px;
}

.sidebar:hover .sidebar-navbar.sidebar-scroll-element {
	opacity: 1!important;
}


/* Add round corner for Gerne and Mood cards */
.gc-image-container,
.gc-image {
	border-radius: 10px !important;
}

/*
Collage of 3 album covers is usually seen in Browse and Chart.
*/
.card-puff__image-wrapper,
.card-puff__info-container,
.card-puff__card-image {
	border-radius: 10px !important;
}

.card-puff__image-wrapper {
  overflow: visible;
}

.card-puff__card-image {
	box-shadow: 5px 0 30px rgba(0,0,0,0.7);
	overflow: visible;
}

.card-puff__title-container {
	background-color: transparent !important;
}

.card-puff.pressed .card-puff__image-wrapper,
.card-puff.pressed .card-puff__info-container {
	opacity: 0.7 !important;
}

.card-puff__title {
	padding: 5px 10px 5px 10px !important;
	background-color: var(--modspotify_main_bg) !important;
	border-radius: 4px;
	border: 2px solid var(--modspotify_main_fg);
}

/*
We use round corner on cover so they look weird in original
form, so I move last cover to the right 20px and first one to the left 20px
*/
.card-puff__card-image:nth-child(1) {
	right: 20px;
	box-shadow: 0 0 0 0 !important;
}

.card-puff__card-image:nth-child(3) {
	left: 20px;
}

.grid-overlay-label {
	top: 140px !important;
}




/*
In top of Browse usually has bunch of Playlist or Album cards,
and they has .carousel as a wrapper and it hides anything that
overflows from its zone, aka our shadow and lifting animation.
*/
.carousel {
	overflow: visible !important;
}



/*
Change text color in playlist - use secondary_fg instead of main_fg
*/
.tl-explicit .label,
.tl-premium .label,
.tl-cell:not(.tl-number),
.tl-cell a:link,
.tl-highlight {
  color: var(--modspotify_secondary_fg);
}





/* Adjust Position of border active tab in Nav bar at top
and add little glowing effect
*/
.nav.navbar-nav {
	overflow: hidden !important;
}

.nav.navbar-nav a {
	overflow: visible !important;
}

.nav.navbar-nav a::after {
	bottom: 0px !important;
	width: 100% !important;
}

.nav.navbar-nav .active  a::after{
	box-shadow: 0 0px 20px !important;
}

.nav.navbar-nav a:focus:not(.button):active::after{
	background-color: var(--modspotify_pressing_fg) !important;
}





/* [WINDOWS] Change Profile menu horizontal position */
body.body-container--windows .content-top-bar__profile-menu-button .dropdown {
	right: 190px !important;
}

body:not(.body-container--windows) .content-top-bar__profile-menu-button .dropdown {
	right: 20px !important;
}

/* Small tooltip */
#tooltip {
	box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
	border-radius: 6px !important;
	border: 1px solid var(--modspotify_main_fg);
	padding: 5px;
}

.tooltip-arrow-top, .tooltip-arrow-bottom {
	display: none !important;
}

/*
Button with text Play
*/

.Button--style-green,
.button.button-green, .button.button-white {
	border-radius: 6px;
	color: var(--modspotify_main_bg) !important;
}



/* Add box around Titles */

.glue-page-header:not(.glue-page-header--album):not(.glue-page-header--playlist):not(.glue-page-header--artist):not(.glue-page-header--dailymix):not(.glue-page-header--user):not(.glue-page-header--show)
	.glue-page-header__content-inner .glue-page-header__title-text,
.HomeHeader .Header__content-inner .Header__title-text-inner,
.MadeForYouHeader .Header__content-inner .Header__title-text-inner,
.RecentlyPlayedPage__header .Header__content-inner .Header__title-text-inner {
	background-color: var(--modspotify_main_bg);
	padding: 5px 20px;
	border: 5px solid var(--modspotify_main_fg) !important;
	border-radius: 6px;
	box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
	text-transform: uppercase;
}

.glue-page-header.glue-page-header--album .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--artist .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--dailymix .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--playlist .glue-page-header__content-inner .glue-page-header__title {
	margin-top: 10px;
}

span.glue-page-header__title-text {
	color: var(--modspotify_main_fg);
}

.glue-page-header .glue-page-header__content-inner .glue-page-header__button {
	margin-top: 40px;
}

.glue-page-header__content-inner,
.glue-page-header__data,
.glue-page-header__title,
.Header__content-inner,
.Header__data,
.Header__title,
.Header__title-text,
.Header__title-text-inner {
	overflow: visible !important;
}





/* Context Menu round corners and color*/

.context-menu {
	border: 2px solid var(--modspotify_main_fg);
	box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
	border-radius: 6px !important;
	overflow: hidden !important;
}


/* Sidebar gradient on selected item */
.SidebarListItem--is-active:after,
.RootlistItem--is-active:after,
/* For Linux */ #view-navigation-bar .item.active:after {
	background-color: transparent;
	background-image: linear-gradient(90deg, var(--modspotify_sidebar_indicator_and_hover_button_bg) , transparent);
	opacity: 0.2;
	bottom: unset;
	top: 5%;
	height: 90%;
	width: 100%
}

.Header__image-inner {
	box-shadow: unset;
}

/* Scrollbar color change */
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
  background-color: #4e4633;
}

/* Change color of headings in sidebar */
.SidebarList__title{
	color: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important;
}

/* Change color for top menu for playlist */
.tl-header th {
	color:var(--modspotify_indicator_fg_and_button_bg) !important
}

/*Round corners and add shadow around profile menu thing and some images*/
.GlueDropdown,
.image,
.Menu,
.profile .avatar,
.toggle-cover-size,
.body-container--unknown-os .ConnectPopup,
.body-container--windows .ConnectPopup {
/*	border: 2px solid var(--modspotify_main_fg);*/
	box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
	border-radius: 6px !important;
	overflow: hidden !important;
}

/*background color around the text playlist*/
  .glue-page-header__label span,
  .Header__label span {
	background-color: var(--modspotify_secondary_fg);
	color: var(--modspotify_main_bg);
	padding: 2px 10px;
  }

/*heart icon*/  
.view-player .nowplaying-add-button{
	color:var(--modspotify_sidebar_indicator_and_hover_button_bg) !important;
}