mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-25 04:12:29 +01:00
315 lines
7.4 KiB
CSS
315 lines
7.4 KiB
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;
|
|
}
|
|
|