Nenw's spotify theme

README.md

Nenw's Spotify Theme

Customized version of dribbblish spicetify theme

Installation

1. Download all assets and put assets into /path/to/spicetify/Themes/nenw/
2. Put dribbblish.js into /path/to/spicetify/Extensions/
3. Run following:

$ spicetify config current_theme nenw
$ spicetify config extensions dribbblish.js
$ spicetify config color_scheme nenw

color.ini

[nenw]
main_fg                               = 689f38
active_control_fg                     = 689f38
secondary_fg                          = 363636
secondary_bg                          = 689f38
main_bg                               = f1f1f1
sidebar_and_player_bg                 = ffffff
cover_overlay_and_shadow              = 202020
indicator_fg_and_button_bg            = ffffff
pressing_fg                           = 1a73e8
slider_bg                             = b4b7b4
sidebar_indicator_and_hover_button_bg = dedede
scrollbar_fg_and_selected_row_bg      = cccccc
pressing_button_fg                    = 5f5e68
pressing_button_bg                    = 202124
selected_button                       = 4285f4
miscellaneous_bg                      = 689f38
miscellaneous_hover_bg                = 689f38
preserve_1                            = fff1e6

dribbblish.js

// Hide popover message
document.getElementById("popover-container").style.height = 0;

function waitForElement(els, func, timeout = 100) {
    const queries = els.map(el => document.querySelector(el));
    if (queries.every(a => a)) {
        func(queries);
    } else if (timeout > 0) {
        setTimeout(waitForElement, 300, els, func, --timeout);
    }
}

// Add "Open User Profile" item in profile menu
new Spicetify.Menu.Item(window.__spotify.username, false, () => window.open(window.__spotify.userUri)).register();

waitForElement([".LeftSidebar", ".LeftSidebar__section--rootlist .SidebarList__list"], (queries) => {
    /** Replace Playlist name with their pictures */
    function loadPlaylistImage() {
        const sidebarItem = queries[1].childNodes;

        for (let i = 0; i < sidebarItem.length; i++) {
            const item = sidebarItem[i];
            let link = item.getElementsByTagName("a");
            if (!link || !link[0]) continue;
            link = link[0];

            let href = link.href.replace("app:", "");

            if (href.indexOf("playlist-folder") != -1) {
                const button = item.getElementsByTagName("button")[0]
                button.classList.add("Button", "Button--style-icon-background", "Button--size-28",);
                // item.setAttribute("data-tooltip", item.innerText);
                // link.firstChild.innerText = item.innerText.slice(0, 3);
				link.firstChild.innerText = item.innerText;
                continue;
            }

            if (href.indexOf("chart") != -1) {
                href = href.replace("chart:", "user:spotifycharts:playlist:");
            }

            Spicetify.CosmosAPI.resolver.get({
                url: `sp://core-playlist/v1/playlist/${href}/metadata`,
                body: { policy: { picture: true } },
            }, (err, res) => {
                if (err) return;
                const meta = res.getJSONBody().metadata;
                item.firstChild.className = "playlist-picture"
                item.firstChild.style.backgroundImage = `url(${meta.picture})`;
                // item.firstChild.setAttribute("data-tooltip", item.textContent);
            });
        }
    }

    loadPlaylistImage();

    new MutationObserver(loadPlaylistImage)
        .observe(queries[1], {childList: true});

    /** Replace Apps name with icons */

    /** List of avaiable icons to use:
    addfollow           filter          more                skipforward15
    addfollowers        flag            newradio            sort
    addsuggestedsong    follow          notifications       sortdown
    album               fullscreen      offline             sortup
    artist              gears           pause               spotifylogo
    attach              headphones      play                star
    block               heart           playlist            stations
    bluetooth           helpcircle      plus                subtitles
    browse              home            podcasts            tag
    camera              inbox           queue               time
    check               instagram       radio               track
    collection          lightning       refresh             trending
    copy                localfile       released            user
    devices             locked          repeat              video
    discover            lyrics          repeatonce          volume
    download            menu            search              watch
    downloaded          messages        share               x
    edit                mic             shuffle             helpcircle
    email               minimise        skip
    events              mix             skipback15
    */

    function replaceTextWithIcon(el, iconName) {
        if (iconName) {
            el.classList.add(`spoticon-${iconName}-24`);
        }

        // el.parentNode.setAttribute("data-tooltip", el.innerText);
        // el.innerText = "";
    }

    queries[0].querySelectorAll(".LeftSidebar__section:not(.LeftSidebar__section--rootlist) [href]")
        .forEach(item => {
            let icon = ((app) => {switch (app) {
                case "genius":                  return "lyrics";
                case "JQBX":                    return "addsuggestedsong";
                case "bookmark":                return "tag";
                case "reddit":                  return "discover";
                case "made-for-you":            return "user";
                case "recently-played":         return "time";
                case "collection-songs":        return "collection";
                case "collection:albums":       return "album";
                case "collection:artists":      return "artist";
                case "collection:podcasts":     return "podcasts";
                case "playlist:local-files":    return "localfile";
                case "stations":                return "stations";
                /**
                 * Uncomment 3 lines below if you're using old version of Spotify that
                 * does not have Home/Browse/Radio app icons by default.
                 */
                //case "home":					return "home";
                //case "browse":	                return "browse";
                //case "radio":	                return "radio";
            }})(item.href.replace("spotify:app:", ""));

            replaceTextWithIcon(item.firstChild, icon);
        });

    waitForElement([`[href="spotify:app:recently-played"]`], ([query]) => {
        replaceTextWithIcon(query.firstChild, "time");
    });
});

waitForElement(["#search-input"], (queries) => {
    queries[0].setAttribute("placeholder", "");
});

waitForElement(["#main-container"], (queries) => {
    const shadow = document.createElement("div");
    shadow.id = "dribbblish-back-shadow";
    queries[0].prepend(shadow);
});

waitForElement([".LeftSidebar"], (queries) => {
    const fade = document.createElement("div");
    fade.id = "dribbblish-sidebar-fade-in";
    queries[0].append(fade);
});

user.css

:root {
	--bar-height: 70px;
	--bar-cover-art-size: 40px;
	--cover-border-radius: 8px;
	--section-border-radius: 8px;
	--sidebar-width: 85px;
	--main-corner-radius: 15px;
	--main-gap: 10px;
	/* If you are using SpotifyNoControl.exe, set this variable to 0 */
	--os-windows-icon-dodge: 1;
}

div#popover-container::before {
    content: "You haven't installed 'dribbblish.js' extension. Please run follow instruction on theme README page.";
    font-size: 30px;
}
/*
@font-face {
    font-family: "Google Sans Display";
    src: url("https://local_resource_host/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Google Sans Display";
    src: url("https://local_resource_host/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: url("https://local_resource_host/fonts/Roboto.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: url("https://local_resource_host/fonts/RobotoMedium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
}
*/

body {
	--glue-font-family: "Google Sans Display", "spotify-circular", "Noto Sans CJK JP Bold", "spotify-circular-cyrillic", "spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
	--info-font-family: "Roboto", "spotify-circular", "Noto Sans CJK JP Thin", "spotify-circular-cyrillic", "spotify-circular-arabic", "spotify-circular-hebrew", "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "Meiryo", "MS Gothic", sans-serif;
	letter-spacing: 0;
}

/*Round corner cover image*/

.card-image,
.card-placeholder-wrapper,
.card-image-content-wrapper,
.card-image-wrapper,
.Card .Card__image,
.Card .Card__image-wrapper {
    border-radius: var(--cover-border-radius) !important;
    overflow: hidden !important;
}

/*Hide some annoying elements like profile name and pic, upgrade button and device connect bar at bottom */

.profile.content-top-bar__profile-link,
.upgrade-button,
.view-player .remote-playback-bar {
    display: none !important;
}

/*Thinner scrollbar*/

::-webkit-scrollbar {
    height: 6px !important;
    width: 6px !important;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent !important;
}

/*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;
}

/*Hide cover image overlay*/

.card-overlay,
.Card__overlay {
    visibility: visible;
    opacity: 0;
    background: linear-gradient(transparent, rgba(var(--modspotify_rgb_cover_overlay_and_shadow), 0.5));
    border-radius: var(--cover-border-radius) !important;
    transition: opacity cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
}

.card .card-button-add,
.card .card-button-play,
.card .card-button-more {
    visibility: visible;
    opacity: 0;
    transition: opacity cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
}

.card.playing .card-button-play,
.playing .card .card-button-play {
    opacity: 1 !important;
}

.Card__image-hit-area:hover .Card__add-button,
.Card__image-hit-area:hover .Card__more-button,
.Card__image-hit-area:hover .Card__overlay,
.Card__image-hit-area:hover .Card__play-button {
    opacity: 1;
}

.card-image-hit-area:hover .card-overlay,
.card-image-hit-area:hover .card-button-add,
.card-image-hit-area:hover .card-button-play,
.card-image-hit-area:hover .card-button-more {
    opacity: 1;
}

.glue-page-header__content .glue-page-header__image-inner {
    border-radius: var(--cover-border-radius);
    box-shadow: unset !important;
}

.glue-page-header__full-description-overlay {
    box-shadow: unset !important;
}

.card-placeholder-wrapper {
    background: transparent !important;
}

/*Spice up search input background*/

.SearchInput {
    color: var(--modspotify_main_fg);
}

.SearchInput__input {
    color: var(--modspotify_secondary_fg);
    background-color: transparent;
    padding-left: 34px;
    border-radius: 0;
    border-bottom: 0;
}

/* Remove gradient background */

.glue-page-header__background-color {
    background-image: none !important;
    background: var(--modspotify_main_bg);
}

.Carousel__grid-wrapper::after {
    border: 2px solid var(--modspotify_scrollbar_fg_and_selected_row_bg);
    border-radius: var(--section-border-radius);
}

.GlueSectionDivider,
.section-divider {
    padding: 48px 0 14px;
}

.section-divider>* {
    color: var(--modspotify_secondary_fg);
}

.card-info-subtitle-metadata,
.card-info-subtitle-description,
.Card__info-subtitle-description,
.Card__info-subtitle-metadata {
    letter-spacing: 0;
    font-size: 12px;
}

.GlueSectionDivider__description {
    display: none;
}

.card-info-title a,
.card-horizontal .card-info-title span,
.Card__info-title a {
    letter-spacing: 0;
    font-weight: 500;
    font-size: 15px;
    color: var(--modspotify_secondary_fg);
}

.tracklist-station-container::after {
    background: transparent !important;
}

.GlueHeader__background-overlay {
    background: var(--modspotify_main_bg) !important;
}

/* Move navigation buttons and search field to the right and down */

.browser-navigation-top-bar {
    margin-top: 15px !important;
    margin-left: 8px;
}

.SearchInput__input,
.SearchInput__searchIcon,
.SearchInput__clearButton {
    margin-top: 15px !important;
}

.content-top-bar__profile-menu-button {
    margin-top: 15px !important;
}

.body-container--windows:not(.with-buddy-list):not(.messagebar) .content-top-bar__profile {
	margin-right: calc(var(--os-windows-icon-dodge) * 110px) !important;
	margin-top: calc(var(--os-windows-icon-dodge) * -5px);
}

/* Spice up Fullscreen mode */

#view-player .album-art .album-art__image {
    border-radius: 30px !important;
    box-shadow: 0 10px 70px rgba(var(--modspotify_rgb_cover_overlay_and_shadow), .5) !important;
}

#view-player .album-art .album-art__image .card-image-content-wrapper,
#view-player .album-art .album-art__image .card-image-content-wrapper .card-image {
    border-radius: 30px !important;
}

#video-player .album-art__foreground {
    flex-direction: row;
    text-align: left;
}

#video-player .album-art__background {
    background-color: initial;
}

#video-player .album-art__track-details {
    padding-left: 50px;
    line-height: initial;
    max-width: 50%;
}

#video-player .album-art__track-title {
    font-size: 84px;
    margin-top: 0;
    line-height: initial;
    transition: color cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

#video-player .album-art__artist-name {
    font-size: 54px;
    margin-top: 0;
    line-height: initial;
    transition: color cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
}

/* Remove section divider */

.section-divider {
    border-bottom: 0 !important;
}

/* Adjust Position of border active tab in Nav bar at top */

.nav.navbar-nav li {
    margin: 0;
}

.nav.navbar-nav a {
    overflow: visible !important;
    padding: 0;
    margin-right: 64px;
    color: var(--modspotify_secondary_fg);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
}

.nav>li.active>a {
    color: var(--modspotify_secondary_fg);
}

.nav.navbar-nav a::after {
    bottom: 0px;
    width: 12px;
    height: 4px;
    border-radius: 4px;
    z-index: -1;
    background-color: transparent;
    transition: 0.2s ease-in;
    transition-property: width, background-color;
}

.nav.navbar-nav li.active a::after {
    background-color: var(--modspotify_main_fg);
}

.nav.navbar-nav a:focus:not(.button):active::after {
    background-color: var(--modspotify_main_fg);
    width: 100%;
}

/* Notification bar */

#content-wrapper #view-message-bar {
    position: absolute !important;
    width: calc(100% - 160px) !important;
    margin-left: 80px !important;
    border-radius: 0 0 10px 10px !important;
}

.alert,
.alert a,
.alert .close {
    color: var(--modspotify_secondary_fg) !important;
}

/* Small cover Big cover mechanism */

.now-playing.cover-size-transition.active.image-expanded #now-playing-image-small {
    display: none;
}

.now-playing.cover-size-transition.active.image-expanded .cover-image-link-wrapper {
    flex: 0 1 10px;
}

#view-now-playing a.image {
    overflow: visible !important;
}

/* Profile arrow in top left */

.content-top-bar__profile-menu-button .dropdown {
    position: fixed !important;
    top: 10px !important;
    -webkit-app-region: no-drag !important;
}

/* [WINDOWS] Change Profile menu horizontal position */

body.body-container--windows .content-top-bar__profile-menu-button .dropdown {
	right: calc(var(--os-windows-icon-dodge) * 170px + 20px) !important;
}

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

/* Small tooltip */

#tooltip,
.Tooltip {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    background-color: var(--modspotify_secondary_fg);
    color: var(--modspotify_main_bg);
    padding: 10px 10px;
}

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

/* Home page */

.tracklist-podcast .tl-progress .row-progress__bar {
    background-color: var(--modspotify_main_fg);
}

.Header__background-color {
    background-color: unset !important;
    background-image: unset;
}

.Header__background-overlay {
    background: unset;
}

/* Button */

.Button,
.button {
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    letter-spacing: 0;
}

.Button.Button--style-green,
.Button.Button--style-stroke,
.Button.Button--style-icon-stroke,
.Button.Button--style-icon-background,
.button.button-green,
.button.button-white,
.button.button-with-stroke,
.button.button-icon-with-stroke {
    border-radius: 20px;
    border: 0;
    background-color: var(--modspotify_indicator_fg_and_button_bg);
    color: var(--modspotify_secondary_fg) !important;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.16) !important;
}

.Button.Button--style-icon-stroke,
.Button.Button--style-icon-background {
    border-radius: 50%;
}

.Button--style-green:hover,
.Button--style-stroke:hover,
.Button--style-icon-stroke:hover,
.Button--style-icon-background:hover,
.button.button-green:hover,
.button.button-white:hover,
.button.button-with-stroke:hover,
.Button--style-icon-background:hover,
.button.button-icon-with-stroke:hover {
    transform: none !important;
    background-color: var(--modspotify_indicator_fg_and_button_bg) !important;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.26) !important;
}

.Button.Button--style-stroke::after,
.Button.Button--style-icon-stroke::after,
.Button.Button--style-icon-background::after,
.button.button-with-stroke::after,
.button.button-icon-with-stroke::after {
    box-shadow: none !important;
}

.glue-page-header__title-text,
.Header__title-text {
    color: var(--modspotify_secondary_fg) !important;
}

.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 menus */

.context-menu,
.Menu,
.dropdown-menu,
.dropdown-interior-menu {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
    border-radius: 8px !important;
    padding: 0;
    border: 0;
    background-color: rgba(var(--modspotify_rgb_sidebar_and_player_bg), 0.85);
    backdrop-filter: blur(25px);
}

.context-menu .item,
.Menu .MenuItem {
    padding: 0 30px;
    font-size: 14px !important;
    line-height: 40px !important;
    font-family: var(--info-font-family);
}

.context-menu .item.parent:after {
    top: 0;
}

.context-menu .item.with-icon-svg:before {
    top: 0;
    height: 40px;
    background-position: center;
}

.context-menu .sep {
    margin: 0 0;
    height: 0;
}

.context-menu .item.hover:not(.disabled),
.Menu .MenuItem.selected,
.dropdown-interior-menu>li.selected,
.dropdown-interior-menu>li>a:focus,
.dropdown-menu>li.selected,
.dropdown-menu>li>a:focus,
.dropdown-submenu:focus>a,
.dropdown-menu>.active>a,
.dropdown-menu>.active.selected,
.dropdown-menu>.active>a:focus,
.dropdown-interior-menu>.active>a,
.dropdown-interior-menu>.active.selected,
.dropdown-interior-menu>.active>a:focus {
    background-color: rgba(var(--modspotify_rgb_sidebar_indicator_and_hover_button_bg), 0.2);
}

.context-menu .item:first-child,
.Menu .MenuItem:first-child {
    border-radius: 8px 8px 0 0;
}

.context-menu .item:last-child,
.Menu .MenuItem:last-child {
    border-radius: 0 0 8px 8px;
}

.Menu__title {
    letter-spacing: 0;
    font-weight: 500;
    text-align: left;
}

.navbar-overflow .selected a {
    background-color: transparent;
}

.PopoverMenu__arrow {
    display: none;
}

#menu-wrapper ::-webkit-scrollbar {
    display: none;
}

.glue-page-header__label span,
.Header__label span {
    color: var(--modspotify_secondary_fg);
    padding: 5px 0;
}

.glue-page-header__label .header-verified-check {
    background-color: transparent;
}

body.remotebar .view-player .player-bar-wrapper {
    height: 100%;
}

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

/* Change info font */

.Card__info-wrapper,
.card-info-wrapper {
    font-family: var(--info-font-family);
    margin-top: 20px;
}

/* Section title font color */

.GlueSectionDivider__title,
.section-divider-title {
    color: var(--modspotify_secondary_fg);
    font-family: var(--glue-font-family);
    font-weight: 500;
}

.section-divider-description {
    padding-top: 6px;
}

/* Sidebar */
.LeftSidebar {
    width: var(--sidebar-width);
}

.LeftSidebar .SidebarListItem {
    font-weight: 400;
}

.LeftSidebar .SidebarListItem.SidebarListItem--is-active,
.RootlistItem--is-active {
    font-weight: 500;
}

.LeftSidebar .SidebarListItem,
.RootlistItem {
    padding-top: 12px;
    padding-bottom: 12px;
}

.scrollbar-style-visible-linux .RootlistItem,
.scrollbar-style-visible-mac .RootlistItem,
.scrollbar-style-visible-windows .RootlistItem {
    padding-right: var(--left-sidebar-padding-right);
    padding-left: var(--left-sidebar-padding-left);
}

.SidebarListItem--is-active:after,
.RootlistItem--is-active:before {
    background-color: var(--modspotify_pressing_button_fg);
    opacity: 0.2;
    bottom: unset;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    left: 17px;
    z-index: -1;
}

.LeftSidebar__section .SidebarListItem--is-active:after {
    top: 6px;
}

.LeftSidebar__scroll-section .SidebarListItem--is-active:after {
    top: 3px;
}

.body-container--mac .sidebar-top-items__drag-area,
.body-container--windows .sidebar-top-items__drag-area {
    height: 0;
}

.body-container--windows .LeftSidebar {
	margin-top: calc(var(--os-windows-icon-dodge) * 30px);
}

.RootlistItem--is-active:before {
    top: 3px;
}

.SidebarListItem__inner {
    align-items: center;
}

.SidebarList__title {
    display: none;
}

.SidebarListItem__play-button,
.RootlistItemPlaylist__play-button {
    z-index: 3;
    position: absolute;
    margin-left: 15px;
    margin-top: 15px;
}

.SidebarListItem__play-button .Button {
    width: 32px;
    height: 32px;
}

/* Mood card */

.gc-image-container,
.gc-image {
    border-radius: var(--cover-border-radius) !important;
}

.gc-label-text-wrapper {
    overflow: unset;
}

.gc-label-text {
    font-size: 14px;
    font-family: var(--info-font-family);
    font-weight: 400;
    color: var(--modspotify_main_bg);
    border-radius: 4px;
    background-color: var(--modspotify_secondary_fg);
    padding: 4px 8px;
}

.genre-card:hover .gc-label-text {
    border: 0;
}

/* Playlist item */

.tl-cell,
.TableCell {
    font-family: var(--info-font-family);
    font-weight: 400;
    height: 50px;
}

.tl-cell:not(.tl-number),
.tl-cell a:link,
.tl-highlight,
.TableCell:not(.tl-number),
.TableCell a:link {
    color: var(--modspotify_secondary_fg);
}

.tl-row.selected .tl-cell,
.tl-row.selected:hover .tl-cell,
.TableRow.TableRow--is-selected .TableCell {
    background-color: rgba(var(--modspotify_rgb_sidebar_indicator_and_hover_button_bg), 0.2) !important;
}

.tl-row .tl-cell:first-child,
.TableRow .TableCell:first-child {
    border-radius: 4px 0 0 4px;
}

.tl-row .tl-cell:last-child,
.TableRow .TableCell:last-child {
    border-radius: 0 4px 4px 0;
}

@media screen and (max-width: 950px) {
    .tl-cell.tl-more {
        border-radius: 0 4px 4px 0;
    }
}

.tl-explicit .label,
.tl-premium .label {
    color: var(--modspotify_slider_bg);
    border: 1px solid var(--modspotify_slider_bg);
}

.tl-row.current .tl-cell:not(.tl-number),
.tl-row.current .tl-cell a:link,
.tl-row.current .tl-highlight,
.TableCellSong--track-is-playing .TableCellSong__featuredArtist,
.TableCellSong--track-is-playing .TableCellSong__text-truncator,
.TableCellSong--track-is-playing .TableCellSong__track-name {
    color: var(--modspotify_main_fg);
}

.TableCell {
    border-top: 0;
}

.tl-attention-highlight {
    height: 50px;
}

/* Sort element: color, remove label */

.section-divider .GlueDropdown,
select {
    color: var(--modspotify_secondary_fg);
    font-weight: 400;
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 0;
}

[data-ta-id="sorting-wrapper"] {
    float: right !important;
}

[data-ta-id="sorting-wrapper"] label {
    display: none;
}

/* Search bar in app */

.h-search {
    border-bottom: 1px solid var(--modspotify_main_fg);
    border-radius: 0;
}

.focus .h-search,
.h-search:focus {
    background: none;
}

/* Card buttons */

.Card__play-button,
.card .card-button-play {
    left: unset !important;
    top: unset !important;
    right: 10px;
    bottom: 10px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.card .card-button-play.button-play::before,
.card .button-play.playing::before {
    line-height: 45px !important;
    font-size: 20px !important;
    padding-left: 13px !important;
}

.card-button-more {
    left: unset !important;
    top: 10px !important;
    right: 0;
    transform: none !important;
    margin: 0;
}

.card-button-more::before {
    padding-left: 0;
    text-align: center;
    transform: rotate(90deg);
}

.card-button-add {
    left: unset !important;
    top: unset !important;
    bottom: 15px;
    right: 60px;
    transform: none !important;
    margin: 0;
}

.card-button-add::before {
    padding-left: 0;
    text-align: left;
}

.Card__play-button {
    left: unset !important;
    top: unset !important;
    right: 10px;
    bottom: 10px;
    transform: none !important;
}

.Card__play-button .Button.Button--style-icon-background,
.Card__play-button .Button.Button--style-icon-stroke {
    width: 45px !important;
    height: 45px !important;
}

.Card__play-button .Button.Button--style-icon-stroke:before,
.Card__play-button .Button.Button--style-icon-background:before {
    line-height: 45px !important;
    font-size: 20px !important;
}

.Card__add-button {
    left: unset !important;
    top: unset !important;
    bottom: 10px;
    right: 60px;
    transform: none !important;
}

.Card__more-button {
    left: unset !important;
    top: 0 !important;
    right: 0;
    transform: rotate(90deg);
}

/* Concert page */

.concert-title span {
    color: var(--modspotify_secondary_fg) !important;
}

.location__container .location__name {
    letter-spacing: 0;
    font-weight: 500;
    color: var(--modspotify_secondary_fg);
}

#concerts h1 {
    font-weight: 500;
    color: var(--modspotify_secondary_fg);
}

/* Bio page */

.biography__container {
    margin-top: 30px;
    padding: 16px;
    border-radius: var(--section-border-radius);
    border: 2px solid var(--modspotify_scrollbar_fg_and_selected_row_bg);
}

.biography__container .section-divider {
    padding: 0;
}

.rankings__container {
    margin-top: 30px;
    padding: 16px;
    border-radius: var(--section-border-radius);
    border: 2px solid var(--modspotify_scrollbar_fg_and_selected_row_bg);
}

.rankings__container h4 {
    margin: 0;
    padding: 0;
    letter-spacing: 0 !important;
    color: var(--modspotify_secondary_fg) !important;
    font-family: var(--glue-font-family) !important;
    font-weight: 500 !important;
}

.rankings__topcities.title {
    padding: 32px 0 16px;
}

.section-divider.section-divider-borderless {
    margin-bottom: 16px;
}

.section-divider.section-divider-borderless h2 {
    color: var(--modspotify_secondary_fg) !important;
    font-family: var(--glue-font-family);
    font-weight: 500;
    letter-spacing: 0;
}

.biography__container .biography__image-carousel {
    border-radius: var(--cover-border-radius);
    overflow: hidden;
    margin-bottom: 32px;
}

.biography__container .bio-show {
    margin-left: 0;
}

.biography__container .listening {
    margin-bottom: 0;
}

.rankings__info {
    padding-top: 0;
    margin-bottom: 32px;
}

/* Toggle button */

.slider {
    background: var(--modspotify_secondary_fg);
    border: 0;
    height: 18px;
    border-radius: 9px;
}

.slider.enabled {
    background: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}

.slider.enabled div {
    background: var(--modspotify_main_fg);
}

.slider div {
    transition: all 0.3s ease;
    background: var(--modspotify_secondary_fg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-radius: 11px;
}

/* Friend list */

.buddy-list-title h3 {
    font-weight: 500;
    color: var(--modspotify_secondary_fg);
}

.buddy-list-title {
    padding-top: 16px;
}

.friend .user .name {
    font-weight: 500;
    font-family: var(--info-font-family);
    color: var(--modspotify_secondary_fg);
}

.friend .context a,
.friend .song-artist a,
.friend .song-title a {
    font-weight: 400;
    font-family: var(--info-font-family);
    color: var(--modspotify_secondary_fg);
}

.buddy-card .card .button {
    right: 0;
    bottom: 0;
}

.buddy-card .card .button:before {
    font-size: 16px !important;
    line-height: 40px !important;
}

/*Force player bar to has fixed height*/

.view-player {
    height: var(--bar-height) !important;
    border-top: 0;
    padding: 0 15px;
    width: calc(100% - var(--sidebar-width) - var(--main-gap));
    position: absolute;
    bottom: var(--main-gap);
    left: var(--sidebar-width);
    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
    z-index: 2;
    /* Glowing effect */
    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--modspotify_rgb_main_bg), 0.85), var(--modspotify_main_bg) 70%);
}

body.video-full-screen .view-player {
    left: 0;
    width: 100%;
}

/* Player Progress bar */

.view-player .now-playing {
    overflow: unset;
}

.view-player .now-playing-container .button-add {
    color: var(--modspotify_main_fg) !important;
}

.progress-container .progress-bar,
.progress-container .inner {
    top: 0 !important;
    margin-top: 0 !important;
    height: 2px;
}

.progress-container .progress-bar-wrapper {
    top: 4px !important;
    height: 6px;
}

.progress-container .progress-bar-wrapper:hover .inner,
.progress-container .progress-bar-wrapper:hover .progress-bar,
.progress-container .progress-bar-wrapper.active .inner,
.progress-container .progress-bar-wrapper.active .progress-bar {
    height: 6px;
}

.view-player .player-controls-container .progress-container {
    position: fixed;
    width: calc(100% - var(--sidebar-width) - var(--main-gap));
    bottom: calc(var(--bar-height) + var(--main-gap));
    margin: 0;
    left: var(--sidebar-width);
}

body.video-full-screen .view-player .player-controls-container .progress-container {
    width: 100%;
    left: 0;
}

.progress-container .inner {
    background-color: var(--modspotify_main_fg) !important;
}

#player-text-elapsed,
#player-text-remaining {
    display: none;
}

/* Player Control buttons */

.view-player .player-controls-container {
    text-align: left;
    flex: 1 1;
    order: 0;
    min-width: 220px;
}

.view-player .player-bar-spacer {
    display: none;
}

.view-player .now-playing-container {
    flex: 2 1;
    order: 2;
    min-width: 0;
}

.view-player .now-playing-container .caption {
    align-items: center;
    justify-content: center;
    font-family: var(--info-font-family);
}

.view-player .track {
    letter-spacing: 0;
}

.view-player .track a {
    color: var(--modspotify_secondary_fg);
    font-weight: 500;
}

.view-player .text-container .text-item-container-track {
    height: 20px;
}

.view-player .now-playing-container .caption .text-container,
.view-player .now-playing .cover-image-link-wrapper {
    flex: unset;
}

.view-player .extra-controls-container {
    flex: 1 1;
    order: 3;
    padding-right: 0;
    min-width: 220px;
}

@media (max-width:900px) {
    #video-fullscreen-button {
        display: none;
    }
    .volumebar-container {
        width: 80px;
    }
    .view-player .player-controls-container .button {
        margin: 2px;
    }
}

.view-player .player-controls-container .controls {
    margin-top: 4px;
    display: flex;
}

button#player-button-previous {
    order: 1;
}

button#player-button-play {
    order: 2;
}

.skip-button-container {
    order: 3;
}

button#player-button-shuffle,
#player-button-thumbs-down,
.view-player button[data-interaction-intent="skip-back"] {
    order: 4;
}

button#player-button-repeat,
#player-button-thumbs-up,
.view-player button[data-interaction-target="skip-forward-button"] {
    order: 5;
}

.view-player .player-controls-container .controls .button-repeat.active,
.view-player .player-controls-container .controls .button-shuffle.active,
.view-player .player-controls-container .controls .button-thumbs-down.active,
.view-player .player-controls-container .controls .button-thumbs-up.active {
    color: var(--modspotify_active_control_fg);
}

.view-player .player-controls-container .controls .button-play,
.view-player .player-controls-container .controls .button-play:after {
    box-shadow: unset !important;
    border-radius: 0 !important;
    width: 35px;
    height: 35px;
}

.view-player .player-controls-container .controls .button-play:before {
    font-size: 35px !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
}

/* Player cover art */

.view-player .now-playing-container .caption .cover-image-link {
    flex-basis: var(--bar-cover-art-size);
    width: var(--bar-cover-art-size);
    height: var(--bar-cover-art-size);
}

.view-player .now-playing .cover-image-link figure {
    width: var(--bar-cover-art-size);
    height: var(--bar-cover-art-size);
    border-radius: 3px;
    overflow: hidden;
}

.view-player .now-playing .cover-image-link-wrapper {
    width: var(--bar-cover-art-size);
    height: var(--bar-cover-art-size);
}

/* Input form */

.form-control,
.form-control:focus {
    color: var(--modspotify_secondary_fg);
    background-color: var(--modspotify_indicator_fg_and_button_bg);
    font-family: var(--info-font-family);
}

#view-modal .playlist-annotate .description-field-wrapper {
    color: var(--modspotify_secondary_fg);
}

/* Connect Device Popup */

/* Cannot edit svg colors, hide it away */

.ConnectPopup__devices-image {
    display: none;
}

.ConnectPopup {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    border-radius: 3px !important;
}

.button.button-blue {
    color: var(--modspotify_secondary_fg);
}

/* Volume bar */

.view-player .extra-controls-container .volumebar-container .progress-bar-wrapper.active .inner,
.view-player .extra-controls-container .volumebar-container:hover .inner {
    background-color: var(--modspotify_sidebar_indicator_and_hover_button_bg);
}

/* Search page */

.SearchHeader__sticky-wrapper {
    background-image: unset;
    background-color: unset;
    border-bottom: 0;
}

.SearchInput__searchIcon {
    color: var(--modspotify_main_fg);
}

/* Notification */
.notification-bubble-container>div {
    background: var(--modspotify_main_fg);
    color: var(--modspotify_secondary_fg);
}

.view-player .text-container .text-item-container .text-item .scroll-text-container:after {
    background: unset;
}

.view-player .player-bar-wrapper {
    padding-top: 2px;
}

.view-player .player-controls-container .button-repeat.active:after,
.view-player .player-controls-container .button-shuffle.active:after {
    display: none;
}

.view-player .extra-controls-container .volumebar-container .progress-bar .inner {
    background-color: var(--modspotify_main_fg);
}

#now-playing-image-large {
    z-index: 9999;
}

#view-now-playing {
    /* position: absolute; */
    max-width: 300px;
    max-height: 300px;
    width: unset;
    height: unset;
    position: absolute;
}

.now-playing-large {
    border-top: 0;
}

#view-now-playing.expanded,
#view-now-playing.expanded .large.image {
    width: 300px;
    height: 300px;
}

#view-now-playing.expanded {
    bottom: calc(var(--bar-height) + var(--main-gap));
    left: var(--sidebar-width);
}

#view-now-playing a.image.large figure,
#view-now-playing a.image.large figure .cover-image {
    height: 100% !important;
}

.playlist-picture {
    width: var(--left-sidebar-item-height);
    height: var(--left-sidebar-item-height);
    background-size: cover;
    border-radius: 50%;
    margin: 0 auto;
}

.playlist-picture span {
    display: none !important;
}


.SidebarListItemLink {
    z-index: 2;
    justify-content: center;
}

.RootlistItem__link .SidebarListItemLink {
    margin-left: 0;
}

.RootlistItemFolder__arrow:hover {
    color: var(--modspotify_main_bg);
}

.SidebarListItemLink:link,
.SidebarListItemLink:visited,
.RootlistItem__link {
    padding-left: 0;
    color: var(--modspotify_main_bg);
}

.RootlistItemFolder__arrow {
    color: var(--modspotify_main_bg);
    padding: 0;
    position: absolute;
    z-index: 3;
    margin-left: 15px;
    margin-top: 15px;
    width: 28px;
    height: 28px;
}

.LeftSidebar__section {
    margin: 0;
}

.LeftSidebar__section.LeftSidebar__section--rootlist {
    padding: 18px 0;
}

#new-playlist-button-mount-point {
    display: none;
}

#menu-wrapper {
    width: 100%;
    min-width: 100%;
}

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

.lyrics-lines-container .no-lyrics-message {
    color: var(--modspotify_secondary_fg);
}

.RootlistItemPlaylist__offline-indicator {
    display: none;
}

.online-container {
    color: var(--modspotify_secondary_fg);
}

.lyrics-lines-container .lyrics-list-animated .lyrics-line[data-animation-index="2"],
.lyrics-lines-container .lyrics-list-animated .lyrics-line[data-animation-index="3"] {
    color: var(--modspotify_secondary_fg);
}

.SidebarListItemLink:before {
    color: var(--modspotify_preserve_1);
    margin-right: 0;
}

.SidebarListItem__label {
    overflow: unset;
}

.SidebarListItem__label:before {
    color: var(--modspotify_preserve_1);
}

.sidebar .sidebar-navbar {
    background-color: var(--modspotify_secondary_bg);
    padding-bottom: 10px;
    z-index: 0;
}

.LeftSidebar__scroll-section {
    background-color: unset;
}

.main-view-wrapper {
    position: absolute;
    width: calc(100% - var(--sidebar-width) - var(--main-gap));
    height: calc(100% - var(--bar-height) - var(--main-gap) * 2);
    left: var(--sidebar-width);
    top: var(--main-gap);
    border-radius: var(--main-corner-radius) var(--main-corner-radius) 0 0;
    overflow: hidden;
}

.SidebarListItemLink:focus,
.SidebarListItemLink:hover,
.SidebarListItemLink--is-highlighted:hover,
.SidebarListItemLink--is-highlighted:link,
.SidebarListItemLink--is-highlighted:visited {
    color: unset;
}

/* Large artist image */

.glue-page-header--with-responsive-height-large {
    height: calc(100vh + 44px);
    max-height: unset;
}

.glue-page-header--with-responsive-height-large .glue-page-header__content-wrapper {
    justify-content: center;
    padding-left: 70px;
}

.glue-page-header--with-responsive-height-large .glue-page-header__content .glue-page-header__count-label {
    position: relative;
    right: unset;
    left: 0;
    text-align: left;
}

.glue-page-header__content .glue-page-header__label {
    padding-top: 0;
}

.glue-page-header__top-bar {
    background: unset;
}

.container,
.glue-page-wrapper {
    padding-left: 60px;
    padding-right: 60px;
}

button[data-button=add-recommendation] {
    background-color: var(--modspotify_pressing_button_bg);
    color: var(--modspotify_main_bg);
}

/* Custom Elements added by extensions */

#dribbblish-back-shadow {
    position: absolute;
    width: calc(100% - var(--sidebar-width) - var(--main-gap));
    height: calc(100% - var(--main-gap) * 2);
    left: var(--sidebar-width);
    top: var(--main-gap);
    box-shadow: 0 0 10px 3px #0000003b;
    border-radius: var(--main-corner-radius);
    z-index: 1;
}

#dribbblish-sidebar-fade-in {
    position: absolute;
    bottom: 0;
    width: var(--sidebar-width);
    height: 10%;
    background: linear-gradient(to top, var(--modspotify_secondary_bg) 10%, transparent);
    z-index: 3;
    pointer-events: none;
}

/*
Nenw Style
============
*/

body {
	/* Korean hanja should be handled in KoPubWorldDotum, and Japanese kanji fallbacks to the Noto Sans CJK JP */
	--glue-font-family: 'KoPubWorldDotum', 'Noto Sans CJK JP', sans-serif;
	--info-font-family: 'Roboto', 'KoPubWorldDotum', 'Noto Sans CJK JP', sans-serif;
	--sidebar-width: 300px;
}

/* Disable sidebar playlist no text */
.playlist-picture {
	margin: 0;
	margin-left: 20px;
}

.playlist-picture span {
	display: inline !important;
}

.playlist-picture > div {
	position: absolute;
}

.RootlistItem__inner {
	padding-left: 50px;
}

/* Disable sidebar category no text */
.SidebarListItem__label {
	display: flex;
	flex: 1;
	justify-content: flex-start;
}

.SidebarListItem__label::before, .SidebarListItemLink::before {
	margin: 0 20px;
	width: 32px;
	text-align: center;
}

.SidebarListItem__play-button, .RootlistItemPlaylist__play-button {
	left: 0;
}

/* Fix sidebar forder style */
.RootlistItemFolder__arrow {
	position: relative;
	margin: 0 20px;
	width: 32px;
	height: 32px;
}

.RootlistItemFolder .RootlistItem__inner {
	padding-left: 0;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.RootlistItemFolder .SidebarListItemLink {
	justify-content: flex-start;
}

/* Clarify sidebar unscrollable region */
.LeftSidebar > .LeftSidebar__section:first-child {
	background: rgba(0, 0, 0, .05);
	margin-top: 20px;
}

/* Fix sidebar hover & active background */
.SidebarListItemLink {
	display: flex;
	color: var(--modspotify_main_bg) !important;
}

.SidebarListItem::after, .RootlistItem::before {
	content: "";
	display: block;
	position: absolute;
	left: 17px;
	right: 17px !important;
	bottom: unset;
	width: unset !important;
	height: 50px;
	border-radius: 10px;
	background-color: var(--modspotify_pressing_button_fg);
	z-index: -1;
	opacity: 0;
	transition: opacity .4s ease;
}

.LeftSidebar__scroll-section .SidebarListItem::after, .RootlistItem::before {
	top: 3px;
}

.LeftSidebar__section .SidebarListItem::after {
	top: 6px;
}

.SidebarListItem:hover::after, .RootlistItem:hover::before {
	opacity: 0.1;
}

.SidebarListItem--is-active::after, .RootlistItem--is-active::before {
	opacity: 0.2 !important;
}

/* Slider tweak */
.slider {
	background: rgba(var(--modspotify_rgb_secondary_fg), .3);
}

/* Input text tweak */
.h-search {
	background: var(--modspotify_indicator_fg_and_button_bg);
    border-radius: 10px;
	border: 2px solid var(--modspotify_scrollbar_fg_and_selected_row_bg);
}

.SearchInput__input {
	background-color: var(--modspotify_indicator_fg_and_button_bg);
	padding: 15px 30px;
	border: 2px solid var(--modspotify_scrollbar_fg_and_selected_row_bg) !important;
	border-radius: 30px !important;
}

.SearchInput__iconContainer {
	left: 10px;
    right: 10px;
}

/* Disable tracklist border */
table[class*="tracklist"] .tl-header th, table[class*="tracklist"] .tl-cell, table[class*="tracklist"] {
	border: none;
}

/* Scrollbar tweak */
::-webkit-scrollbar-button {
	background-image: unset !important;
}

.scrollbar-style-visible-mac::-webkit-scrollbar-thumb:hover,
.scrollbar-style-visible-mac ::-webkit-scrollbar-thumb:hover,
.scrollbar-style-visible-windows::-webkit-scrollbar-thumb:hover,
.scrollbar-style-visible-windows ::-webkit-scrollbar-thumb:hover,
.scrollbar-style-visible-linux::-webkit-scrollbar-thumb:hover,
.scrollbar-style-visible-linux ::-webkit-scrollbar-thumb:hover {
	background-color: var(--modspotify_secondary_bg);
}

/* Change highlight color to increase readability */
.tl-filter-highlight {
	background-color: var(--modspotify_secondary_bg);
	color: var(--modspotify_main_bg);
}

.tl-row:hover.playing .tl-highlight, .tl-row.contextmenu-active.playing .tl-highlight {
	color: var(--modspotify_secondary_bg);
}