Bandcamp Dark

Dark theme for Bandcamp

/* ==UserStyle==
@name         Bandcamp Dark
@version      1.13.0
@description  Dark theme for Bandcamp
@author       jasu
@license      GPL-3.0
@namespace    https://github.com/jasuthemes/userstyles/tree/master/BandcampDark
@grant        GM_addStyle
@run-at       document-start
@include      http://bandcamp.com/*
@include      https://bandcamp.com/*
@include      http://*.bandcamp.com/*
@include      https://*.bandcamp.com/*
==/UserStyle== */
@-moz-document domain("bandcamp.com") {

    /*------------------------*/
    /*Original code by aricley*/
    /*------------------------*/
    #collection-container.collection-container,
    .home {
        background: #000 !important;
    }

    span,
    .area_text,
    .sort_controls,
    .text {
        color: white !important;
    }

    #pgBd.yui-skin-sam,
    .collection-item-details-container,
    #dlg0_h.hd,
    .blogunit-details-section,
    #propOpenWrapper {
        background: #262626 !important;
    }

    .collection-item-artist,
    h1 {
        color: #949494 !important;
    }

    .collection-item-title,
    h2,
    .message,
    .track_number.secondaryText {
        color: #FFF !important;
    }

    h3 {
        color: #FFED80 !important;
    }

    a,
    .tralbumData.tralbum-credits {
        color: #949494 !important;
    }

    li,
    .tralbumData.tralbum-about,
    #license.info,
    .tralbumData.tralbum-feed {
        color: #806300 !important;
    }

    button.sc-button.sc-button-small.sc-button-responsive.sc-button-addtoset {
        color: black !important;
    }

    .collection-item-gallery-container,
    #fan-suggestions.dotted-section.mine,
    .collection-stats.dotted-section.mine,
    .bcweekly-bd {
        background: #222222 !important;
    }

    p {
        color: #888888 !important;
    }

    .sound__soundActions {
        background: transparent !important;
    }

    button.sc-button.sc-button-small.sc-button-responsive.sc-button-addtoset {
        color: #111111 !important;
    }

    .ft.fakeFt {
        background: #555555 !important;
    }

    .bd.footerless {
        background: #999999 !important;
    }

    .walkthrough ol {
        background-color: #373737;
    }

    .walkthrough .button {
        background: #262626;
        border: #262626;
    }

    .fan-banner.empty.owner {
        background-color: #373737;
    }

    .menubar {
        background-color: #000;
        border-bottom: dotted #000 1px;
    }

    #menubar-wrapper {
        background-color: #000;
        border-bottom: dotted #000 1px;
    }

    .fan-bio .edit-profile a {
        border: 1px solid #373737;
        border-radius: 5px;
        outline: none;
        background: #373737;
        color: #828282;
        font-weight: 500;
        padding: 5px 9px;
        font-size: 11px;
        line-height: 15px;
        text-transform: uppercase;
        display: inline-block;
    }

    .menubar input#search-field {
        margin: 0;
        height: 21px;
        line-height: 21px;
        width: 222px;
        font-family: "Helvetica Neue", Arial, sans-serif;
        color: #fff;
        font-size: 13px;
        padding: 0 21px 0 3px;
        -webkit-user-select: text;
        text-align: center;
        background-color: #282828;
        border: 1px solid #282828;
        outline: none;
        border-radius: 3px;
    }

    .menubar input#search-field.focused {
        background-color: #282828;
        border: 1px solid #282828;
    }

    .grids {
        color: #fff;
        margin: 0 0 100px 0;
    }

    .recommendations-container {
        background-color: #373737;
        border-top: dotted #373737 1px;
    }

    .fan-container .top.editing {
        border-bottom: 1px solid #2a2a2a;
        background-color: rgb(25, 25, 25);
    }

    .ui-dialog.nu-dialog .ui-dialog-titlebar {
        padding: 15px 20px 12px;
        background-color: #282828;
        border-bottom: 1px solid #282828;
    }

    .ui-widget-content {
        border: 1px solid #373;
        background: #373737;
    }

    .notable,
    .bcdaily,
    .email-intake,
    .discover,
    .app-promo-desktop {
        background-color: #262626;
    }

    .bcdaily .bcdaily-story {
        min-height: 280px;
        background: #373737;
    }

    .notable-item {
        background-color: #373737;
    }

    .item-page {
        background: #373737;
        border: 1px solid #373737;
    }

    .follow-fan-btn {
        background-color: #373737;
        border: 1px solid #373737;
    }

    .spotlight-name,
    .spotlight-location,
    .spotlight-button,
    .spotlight-bio,
    .spotlight-link {
        color: #fff;
    }

    .aotd-large {
        background: #373737;
    }

    .factoid-title {
        color: #46C5D5;
    }

    #autocomplete-results.autocompleted {
        background: #262626;
        border: 1px solid #262626;
        color: white;
    }

    .searchwidget.keyboard-focus input[type=text]:focus {
        background: #262626;
        box-shadow: 0 0;
    }

    .hd {
        background-color: #262626;
    }

    .discover-detail-inner {
        background-color: #373737;
    }

    body.wordpress {
        background: #262626;
    }

    .wordpress .sidebar .textwidget {
        color: #fff;
    }

    .wordpress h1 a {
        display: block;
        height: 60px;
        background-size: 242px 28px;
        background-position: 24.6% 50%;
    }

    p {
        color: #ffffff !important;
    }

    .wordpress #content {
        color: #ffffff;
    }

    #dash-container .follow-fan,
    #dash-container .follow-band,
    #dash-container .follow-discover {
        border: 1px solid #373737;
        background: linear-gradient(to bottom, #373737 0%, #373737 100%);
    }

    html {
        background: #1E1E1E !important;
    }

    #stories-vm .story-innards {
        background-color: #373737;
    }

    .pane {
        color: #c7c7c7;
    }

    #settings-menubar {
        border-right: 1px solid #383838;
    }

    #settings-menubar li {
        border-left: 1px solid #383838;
        border-bottom: 1px solid #383838;
        border-top: 1px solid #383838;
    }

    .share_dialog.ui-dialog .ui-dialog-content {
        background-color: #262626;
    }

    .share_dialog .section_head {
        color: #fff;
    }

    .buy-dlg {
        color: #ffffff;
    }

    .menubar > ul > li .logo {
        background: url('https://www.dropbox.com/s/8s7km8r329l7qy7/bandcamp-logo-gray.png?dl=1') 0 0 no-repeat;
        background-size: contain;
        height: 20px;
        margin-top: 15px;
        width: 85px;
    }

    .hd-logo {
        background: transparent url('https://www.dropbox.com/s/8s7km8r329l7qy7/bandcamp-logo-gray.png?dl=1') no-repeat;
        background-size: 100%;
        margin-top: 24px;
        height: 25px;
        width: 156px;
    }

    .wordpress h1 a {
        display: block;
        text-indent: -999em;
        background: url('https://www.dropbox.com/s/mx80o2eenp43l0o/bandcamp-daily-retina-dark-theme.png?dl=1') no-repeat;
        height: 25px;
        background-size: 200px 24px;
        background-position: 24.6% 50%;
    }

    .wordpress .sidebarlogo {
        background: url(https://s4.bcbits.com/img/logo-gray.svg) no-repeat;
        background-size: 100%;
    }

    #pgBd {
        color: #fff;
    }

    .download-bottom-area {
        border-top: none;
        background: none;
    }

    .download .formats-container {
        border: 1px solid #373737;
        background-color: #373737;
    }

    .download .formats {
        list-style: none;
        color: #666;
        padding: 0;
        background-color: #373737;
        width: 170px;
        z-index: 2;
        cursor: default;
    }

    .download .formats li:hover {
        background-color: #262626;
    }

    ::-webkit-scrollbar,
    ::-webkit-scrollbar-corner {
        background: #000;
        width: 14px;
        height: 14px;
    }

    ::-webkit-scrollbar-button {
        display: none;
    }

    ::-webkit-scrollbar-thumb {
        background: #333;
    }

    ::-webkit-scrollbar-thumb:not(:active):hover {
        background: #383838;
    }

    ::-webkit-scrollbar-thumb:active,
    ::-webkit-scrollbar-thumb:hover:active {
        background: #5c5c5c;
    }



    /*-------------*/
    /*Added by jasu*/
    /*-------------*/
    
    
    
    body {
        background: #303030;
    }

    #hub .dig-deeper-item {
        background: #FFF0
    }

    .checkout-order-vm .group,
    .order-recap ul li,
    .themed .label-band-selector .bands-menu,
    .themed .label-band-selector .bands-menu .menu-artistpic {
        background: #262626;
    }

    .content {
        background-color: #262626;
    }

    #sidecart {
        background: #262626;
        color: #949494;
    }

    .tralbumData.tralbum-credits,
    a, .tralbumData {
        color: white !important;
    }

    .shipping-address-pane,
    .shipping-address-pane .address-label,
    .mixed-cart-title,
    .download-titles .download-title strong,
    .fan-bio{
        color: white;
    }

    #grid-tabs-sticky.fixed,
    #menubar-wrapper.header-rework-2018,
    #menubar-wrapper.header-rework-2018 .menubar-outer,
    .carousel-player-inner,
    .carousel-player .progress-bar,
    .menubar-2018,
    .pager .pagenum,
    .pager .nextprev {
        background: #262626;
    }

    #pgFt,
    .carousel-player .progress,
    .carousel-player .playpause {
        background: #5c5c5c;
    }

    .carousel-player .queue-icon,
    .carousel-player .vol-icon {
        fill: white;
    }

    .carousel-player .playpause .play {
        border-left: 15px solid white;
    }

    .carousel-player .playpause .pause {
        border-left: 5px solid white;
        border-right: 5px solid white;
    }

    .menubar-2018 .user-menu {
        background-color: #5c5c5c;
        border: #5c5c5c 1px solid;
    }

    .menubar-2018 .user-menu .user-menu-wrapper {
        overflow-y: hidden;
    }


    /* 03/11/19 */
    
    #nonartarea,
    #band-navbar,
    .wordpress .aod-embed,
    .purchases-item,
    .dig-deeper .filters-bar.fixed,
    .wordpress #comments,
    .wordpress #header,
    .wordpress #footer,
    .has-rec-footer #pgFt,
    .sidebar li,
    .hub-component:nth-child(2n),
    ol.tabs.fixed {
        background-color: #262626;
    }

    #settings-menubar li.highlighted,
    #settings-menubar li.highlighted.active,
    .back-to-label-link,
    .item .info {
        background-color: #303030;
    }

    .story-innards .story-footer {
        background-color: #303030;
        border-top: 1px solid #fff0;
    }

    a.custom-color,
    #artist,
    #album,
    #trackInfo a:not(.notSkinnable),
    #trackInfo .buy-link,
    #tagArea a,
    #rightColumn a,
    #name-section a,
    #indexpage a,
    #band-navbar a,
    #merch-item p a,
    #merch-item .buy a,
    #merch-item .buy button,
    #merch-item .more-merch a,
    .custom-link-color,
    .editable-grid a,
    .featured-grid a,
    .share-collect-controls a,
    .share-collect-controls button,
    .follow-unfollow,
    .follow-unfollow,
    .collected-by a,
    .subscribe a,
    .sub a,
    .video-list a,
    .sub .main a,
    .subwelcome a,
    .artists-grid-name a,
    .featured-grid-name,
    .label-welcome .buttons a.new,
    .themed .label-band-selector a.themeable,
    .tralbum-tags a,
    .nu-dialog .ui-widget-content {
        color: #fff;
    }

    .salesfeed .item-inner:hover {
        background: #5c5c5c;
    }

    #settings-menubar li.active {
        background: #262626;
        border-left: 2px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        border-top: 1px solid #eaeaea;
    }

    .rounded-gutter,
    .card-pane {
        background: #262626;
        color: #fff;
    }


    /* 09/11/19 */
    .follow-unfollow,
    .follow-unfollow-inactive {
        background: #262626;
    }

    .nu-dialog .ui-widget-content {
        color: white;
    }


    /* 07/12/19 */
    #s-daily,
    #s-daily input,
    dailyfooter,
    .footer-gradient {
        background: #262626;
    }

    article > article-title {
        color: #fff;
    }

    dailyfooter h2,
    a.pagination-link,
    .section-header .outline-text{
        -webkit-text-stroke: 0;
    }

    a.pagination-link .back-text {
        left: 0px;
        top: 0px;
        -webkit-text-stroke: 0;
    }


    /* 09/02/20 */
    /* Bandcamp logo in white */
    #b, #an, #d, #c, #am, #p {
        fill: #fff;
    }


    /* 09/04/20 */
    /* Feed and collection icons on menubar now white */
    .menubar-2018 .svg-icon {
        fill: #FFFFFF;
    }

    .menubar-2018 li.hoverable:hover {
        background: rgba(225, 225, 225, 0.1);
    }


    /* 26/04/20 */
    /* Background of element in tag browsing that I missed */
    .hub-component:nth-child(2n) .item .info {
        background: #303030;
    }

    /* Background of follow button in tag browsing that I missed */
    .fan-reviews .follow-fan a {
        background: #303030;
    }

    /* "View more items" now white */
    .dig-deeper .view-more {
        border: 1px solid #FFF;
        color: #FFF;
    }


    /* 01/05/20 */
    /* Menubar dropdown background on hover */
    .menubar-2018 .submenu-item a:hover {
        background: #303030;
    }

    /* Bottom of "album of the day" */
    .moreingenre {
        color: #fff;
    }

    /* "Features" sub-heading within bandcamp daily */
    .franchise-description {
        color: #fff;
    }

    /*  Bandcamp weekly player */
    .bcweekly-tracks {
        background: #222222;
    }

    /* Lower element */
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player .bcweekly-player-fade {
        background: rgba(255, 255, 255, 0) !important;
    }

    /* More elements on player */
    .bcweekly.expanded ~ .bcweekly-info .bcweekly-player > .col + .col,
    .bcweekly.busy ~ .bcweekly-info .bcweekly-player > .col + .col {
        background-color: #303030;
    }

    /* Play position bar */
    .bcweekly-player .scrubber,
    .bcweekly-player .scrubber-buffer,
    .bcweekly-player .scrubber-time {
        background: #262626;
        color: #fff;
    }

    /* Scrubber */
    .bcweekly-player .scrubber-thumb {
        background: #5c5c5c;
    }


    /* 05/06/20 */
    /* Featured panel background on tag hub */
    #hub .hub-component:nth-child(2n) {
        background: #262626;
    }

    /* Individual backgrounds on tag hub */
    #hub .item .info {
        background: #303030;
    }

    /* Fan follow button background on tag hub*/
    #hub .fan-reviews .follow-fan a {
        background: #303030;
    }


    /* 26/07/20 */
    /* Show more/less releases from followed artists on feed */
    #new-releases-vm .more-releases,
    #new-releases-vm .less-releases {
        background-color: #262626;
    }

    #new-releases-vm .more-releases:hover,
    #new-releases-vm .less-releases:hover {
        background-color: #303030;
    }

    /* tags background on feed */
    #stories-vm .story-innards .story-footer {
        background-color: #303030;
    }

    /* 15/09/20 */
    /* Community messages background */
    .community-feed .story .lock-banner,
    .community-feed .story .main-section,
    .community-feed .story > .actions {
        background: #262626;
    }


    /* 13/04/21 */
    /* Background of new live stream panel and page */
    .curated-shows,
    .live-listings .live-listing {
        background-color: #262626;
    }

    /* Live stream element background */
    .live-listing {
        background: #303030;
    }

    /* Live stream element text */
    .live-listing .show-details .show-title,
    .live-listing .show-details .show-artist,
    .live-listing .show-details .show-footer-details .show-time-container .show-date,
    .live-listing .show-details .show-footer-details .show-time-container .show-time,
    .live-listings .live-listing .show-details .show-title,
    .live-listings .live-listing .show-details .show-artist,
    .live-listings .live-listing .show-details .show-description,
    .live-listings .live-listing .show-details .show-time-container .show-date,
    .live-listings .live-listing .show-details .show-time-container .show-time,
    .section-title,
    .secondaryText{
        color: #fff;
    }

    /* Live stream calendar icon */
    .show-time-container .calendar-icon,
    .live-listings .live-listing .show-details .show-time-container .calendar-icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/d41b199953d8296dd573ba4d7e56dc527b7a0a82/BandcampDark/Resources/calendar-12.svg);
    }

    /* Live stream clock icon */
    .show-time-container .clock-icon,
    .live-listings .live-listing .show-details .show-time-container .clock-icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/9d0ef98682caa9b72229c689047b6621efa7a349/BandcampDark/Resources/clock-12.svg);
    }
    
    /* "Show more" button on live stream page */
    #live-listings .show-more {
        color: #fff;
        background: #262626;
    }
    
    /* Fixed the bandcamp weekly player */
    .bcweekly-player > .col+.col {
        background: #303030;
    }
    
     /* 15/04/21 */
    /* Changed some elements on homepage */
    .bd-section.factoid,
    .salesfeed,
    .carousel-bcweekly-container-container {
        background: #1e1e1e;
    }
    
    
    /* 15/04/22 */
    /* About us page */
    main>section#testimonials {
        background-color: #262626;
    }
    
    main>section#testimonials section.filters button {
        color: #878787;
    }
    

    /* 31/01/23 */
    /* Search bar tabs */
   #main-search-container > form > ul.filter-list {
        background-color: #262626;
    }
    
    /* Search results */
    form.menubar-search .search-autocomplete li a {
        background-color: #303030;
    }
    
    /* Search results hover */
    form.menubar-search .search-autocomplete li a:hover {
        background-color: #262626;
    }
    
    /* "See all results" and "Music tagged with..." */
    form.menubar-search .search-autocomplete li.results-see-all a, form.menubar-search .search-autocomplete li.results-tags a {
        background-color: #262626;
    }
    
    /* "See all results" hover */
    form.menubar-search .search-autocomplete li.results-see-all a:hover {
        background-color: #5c5c5c;
    }


    /* 31/08/23 */
    /* Multiple Bandcamp Daily elements*/
    /* Player ffwd and rrwd icons */
    article .next .icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/master/BandcampDark/Resources/icon-ffwd-w.svg) no-repeat;
        background-size: contain;
        background-position: 50%;
    }

    article .prev .icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/master/BandcampDark/Resources/icon-rrwd-w.svg) no-repeat;
        background-size: contain;
        background-position: 50%;
    }

    /* Add to wishlist button */
    .mpwl.wishlist-msg svg {
        fill: #fff;
    }

    /* Player progress bar handle */
    .progress-bar-handle {
        background: #fff;
    }

    /* Merch text on right */
    mpmerchformats {
        color: white;
    }

    /* Terms of Use page bold */
    .bd .conspicuous {
        background: none repeat scroll 0 0 black;
    }


    /* 28/09/23 */
    /* Bandcamp live elements */
    .show-type-container .show-type, .show-time-container .show-date, .show-time-container .show-time {
        color: #fff;
    }

    .show-type-container .headphone-icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/master/BandcampDark/Resources/headphone-outline-w.svg);
    }

    
    /* 14/11/23 */
    /* Following popup */
    .ui-dialog.nu-dialog.blank-title .ui-dialog-titlebar {
        background-color: #373737;
    }


    /* 04/12/23 */
    /* Pop-up music player on personal collection page*/
    .carousel-player .queue.show {
        background: #262626;
        border: 1px solid #5c5c5c;
    }
   
    .carousel-player .queue {
        background: #303030;
    }
    
    .carousel-player .queue li {
        border-bottom: 1px solid #303030;
    }
    
    .carousel-player .queue li.active {
        background: #5c5c5c;
    }
    
    .carousel-player .queue li.focus {
        background: #282828;
        border: 1px solid #282828;
    }
    
    .carousel-player .queue li:hover {
        background: #5c5c5c;
    }

    ::-webkit-scrollbar, ::-webkit-scrollbar-corner {
        background: #282828;
    }
    
    /*Hide original close icon */
    .carousel-player .queue-header .close-icon use {
        display: none; /* Hide the existing icon */
    }
    
    /* Display white close icon */
    .carousel-player .queue-header .close-icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/master/BandcampDark/Resources/close-20.svg);
    }
    
    /* Change prev/next icon */
    .carousel-player .transport .icon {
        background: url(https://raw.githubusercontent.com/jasuthemes/userstyles/master/BandcampDark/Resources/nextprev-w.png) 0px 0px / 40px 12px no-repeat transparent;
    }
}