Skip to content

Soundcloud Hyper Dark by junki

Imported and mirrored from https://raw.githubusercontent.com/JunkiEDM/scultradark/master/SC-HyperDark.user.css

Screenshot of Soundcloud Hyper Dark
Homepage Write a review Install Get Stylus

Details

Authorjunki

LicenseBSD 2-Clause

Categorysoundcloud.com

Created

Updated

Size313 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A functional, modern redesign of the outdated Soundcloud UX.

Notes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Soundcloud Hyper Dark
@description  A functional, modern redesign of the outdated Soundcloud UX.
@namespace    https://github.com/JunkiEDM
@author       JunkiEDM, IgChi, pawelos076232, tadghh (ec719ea)
@version      0.9.50
@homepageURL  https://github.com/JunkiEDM/scultradark
@supportURL   https://github.com/JunkiEDM/scultradark/issues
@license      BSD 2-Clause
@preprocessor uso
@advanced text user "Profile Name" "Profile"
@advanced text hue "Orange Hue" "-20"
@advanced text blu "Blue Hue" "15"
@advanced text font "Font" "Inter"
@advanced range avradius "Avatar Roundedness" [50, 0, 50, 2.5]
@advanced dropdown mcis "Iconset (Media Controls)" {
    phosphor    "Phosphor" <<<EOT 
    ph EOT;
    phosphorol  "Phosphor Outlined" <<<EOT 
    po EOT;
    spoticons   "Spotify" <<<EOT 
    sp EOT;
    fluentfill  "Fluent Filled" <<<EOT 
    ff EOT;
    fluentreg   "Fluent Outlined" <<<EOT 
    fo EOT;
    picon       "Picon (Low quality)" <<<EOT 
    pi EOT;
}
@advanced dropdown dist "Soundcloud for Artists Button" {
    dist-on    "Show" <<<EOT 
    --w1:46px;--w2:46px; EOT;
    dist-off   "Hide" <<<EOT 
    --w1:0px;--w2:0px; EOT;
}
@advanced dropdown probdg "Next Pro profile badges" {
    probdg-off    "Hide" <<<EOT 
    .proUnlimitedBadge, .creatorBadge {
        display: none;
    } EOT;
    probdg-a     "Style A" <<<EOT 
    .proUnlimitedBadge, .creatorBadge {
        margin-right: 1px;
        margin-top: 7px;
        margin-bottom: -12px;
        display: flex;
    }
    #app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons {
        bottom: 118px;
    }
    :is(.proUnlimitedBadge, .creatorBadge) svg > g[clip-path="url(#a)"] {
        transform: translateX(78px)
    }
    :is(.proUnlimitedBadge, .creatorBadge) svg > path[fill^="#fff"] {
        transform: translateX(-16px);
    }
    :is(.proUnlimitedBadge, .creatorBadge) svg > rect[fill^="#000"] {
        fill: #0000 !important;
    } EOT;
    probdg-b     "Style B" <<<EOT 
    .proUnlimitedBadge, .creatorBadge {
        display: flex;
        position: absolute;
        top: 198px;
        right: -124px
    }
    :is(.proUnlimitedBadge, .creatorBadge) svg > rect[fill^="#000"] {
        fill: #0000 !important;
    } EOT;
}
@advanced dropdown widget "Style embeds" {
    embeds-on   "Yes" <<<EOT 
    /**\/ EOT;
    embeds-off  "No" <<<EOT 
    /* EOT;
}
@advanced dropdown sort-pl "Playlist sorting mode" {
    sort-pl-reg "Normal" <<<EOT 
    column EOT;
    sort-pl-rev "Reversed" <<<EOT 
    column-reverse EOT;
}
@advanced dropdown sort-fol "Following list sorting mode" {
    sort-fol-reg    "Normal" <<<EOT 
    wrap EOT;
    sort-fol-rev    "Reversed" <<<EOT 
    wrap-reverse EOT;
}
@advanced dropdown compact "Compact mode" {
    compact-off   "Off" <<<EOT 
    /* EOT;
    compact-max   "Auto" <<<EOT 
    @media only screen and (max-width: /*[[cmth]]*\/) EOT;
    compact-on    "Always on" <<<EOT 
    @media only screen and (min-width: 0px) EOT;
}
@advanced range cmth "Compact mode auto threshold" [1240, 160, 2560, 40, "px"]
@advanced dropdown sin "Insights on sidebar" {
    stats-on    "Show" <<<EOT 
    height:100%; EOT;
    stats-off   "Hide" <<<EOT 
    height:0; EOT;
}
@advanced dropdown hin "Artist Insights on homepage" {
    hin-on  "Show Both" <<<EOT EOT;
    hin-a   "Latest Upload only" <<<EOT
    .artistConnectExperimentWrapper {
        display: none;
    } EOT;
    hin-b   "Artist Connect only" <<<EOT
    .l-content > div > div[classname*="latestUpload"]:not(.modular-home-mixed-selection) > div:has(.mixedModularHome__item .latestUploadContainer) {
        display: none;
    } EOT;
    hin-off "Hide Both" <<<EOT 
    [classname*="latestUpload"], [classname*="artistConnect"], .artistConnectExperimentWrapper, .mixedModularHome__item:has(.artistConnectExperimentWrapper) {
        display:none;
    } EOT;
}
@advanced dropdown gdpr "Cookie Notice" {
    gdpr-on     "Show" <<<EOT 
    display:inherit; EOT;
    gdpr-off    "Hide" <<<EOT 
    display:none; EOT;
}
@advanced dropdown promoted "Promoted tracks" {
    promo-off    "Hide" <<<EOT 
    display:none; EOT;
    promo-on     "Show" <<<EOT 
    display:revert; EOT;
}
@advanced dropdown prban "Promotion Banners" {
    prban-off    "Hide" <<<EOT 
    display:none; EOT;
    prban-on     "Show" <<<EOT 
    display:block; EOT;
}
@advanced dropdown gopro "Soundcloud Go/Next Links" {
    gopro-off    "Hide" <<<EOT 
    display:none; EOT;
    gopro-on     "Show" <<<EOT 
    display:flex; EOT;
}
@advanced dropdown adblk "Other Ads" {
    adblk-off    "Hide" <<<EOT 
    display:none; EOT;
    adblk-on     "Show" <<<EOT 
    display:revert; EOT;
}
@advanced dropdown evt "Events on homepage" {
    evt-on     "Show" <<<EOT 
    display:revert; EOT;
    evt-off    "Hide" <<<EOT 
    display:none; EOT;
}
@advanced dropdown msgwarn "First message warning" {
    msgwarn-on  "Show" <<<EOT EOT;
    msgwarn-off "Hide" <<<EOT
    .minorProtectionBanner__container {
        display: none;
    }
    .sc-classic .conversation__messages.showMinorProtectionBanner {
        padding-top: 64px;
    }  EOT;
}
@advanced dropdown logo "Sidebar logo" {
    logo-on     "Show" <<<EOT EOT;
    logo-off    "Hide" <<<EOT
    .sc-classic .show .header__logo {
        display: none;
    }
    .header__right {
        top: 14px;
    }
    .header__left {
        top: 108px;
    }
    .header__middle {
        top: 288px;
    }
    .sc-classic .l-search .l-fixed-left, .l-search .l-fixed-left {
        top: 338px;
    }
    .searchOptions__scrollable {
        height: 515px !important;
    } EOT;
}
@advanced color bg1 "Background color" #111
@advanced dropdown bgblur "Background blur" {
    blur-on   "Enabled" <<<EOT 
    /* EOT;
    blur-off  "Disabled" <<<EOT 
    /**\/ EOT;
}
@advanced dropdown lowmotion "Reduce motion" {
    lm-off  "No" <<<EOT 
    /* EOT;
    lm-on   "Yes" <<<EOT 
    /**\/ EOT;
}
@advanced dropdown home "Home button style" {
    regular     "Regular" <<<EOT 
     EOT;
    old         "Old" <<<EOT 
    -old EOT;
}
@advanced dropdown feed "Feed button style" {
    regular     "Regular" <<<EOT 
     EOT;
    old         "Old" <<<EOT 
    -old EOT;
}
@advanced dropdown libs "Library button style" {
    regular     "Regular" <<<EOT 
     EOT;
    old         "Old" <<<EOT 
    -old EOT;
}
==/UserStyle== *//* --- REMOVE THIS LINE TO SHOW ADVANCED FILTER CONTROLS ---
@advanced dropdown adv "Enable Advanced Filters?" {
    adv-off "Disabled" <<<EOT 
    /* ---[ Disabled ]--- *\/ EOT;
    adv-on "Enabled" <<<EOT 
    /*[[fil]]*\/ EOT;
}
@advanced text fil "Advanced CSS Filters" "brightness(100%) contrast(100%) saturate(100%)"
==/UserStyle== */

@-moz-document domain("soundcloud.com") {
    /* Font imports */
    @import url('https://rsms.me/inter/inter.css');
    @import url('https://style.sndcdn.com/css/interstate-a86f07cf94ae5a496b24.css');
    
    /* Icon select */
    @import url('https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/spoticons.css');
    @font-face {
        font-family: "Phosphor";
        src: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/regular/Phosphor.woff2") format("woff2"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/regular/Phosphor.woff") format("woff"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/regular/Phosphor.ttf") format("truetype"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/regular/Phosphor.svg#Phosphor") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    @font-face {
        font-family: "Phosphor-Fill";
        src: url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/fill/Phosphor-Fill.woff2") format("woff2"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/fill/Phosphor-Fill.woff") format("woff"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/fill/Phosphor-Fill.ttf") format("truetype"),
            url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web/src/fill/Phosphor-Fill.svg#Phosphor-Fill") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    @font-face {
        font-family: "FluentSystemIcons-Resizable";
        src: url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.woff2") format("woff2"),
          url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.woff") format("woff"),
          url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.ttf") format("truetype");
    }
    @font-face {
        font-family: picon;
        src: url(https://unpkg.com/picon);
    }
    
    
    /* navmenu icons */
    :root {
        --ic-old-home: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m16 3.08 14.44 10.31-.88 1.22-1.81-1.3v15.44h-8.5V21a3.25 3.25 0 1 0-6.5 0v7.75h-8.5V13.31l-1.81 1.3-.88-1.22L16 3.08Zm0 1.84L5.75 12.24v15.01h5.5V21a4.75 4.75 0 0 1 9.5 0v6.25h5.5v-15L16 4.91Z" fill="white" stroke="white"/></svg>');
        --ic-old-home-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.77 30.58 13.2l-1.16 1.62-1.67-1.19v15.13h-8.5V21a3.25 3.25 0 1 0-6.5 0v7.75h-8.5V13.62l-1.67 1.2-1.16-1.63L16 2.77Z" fill="white" stroke="white"/></svg>');
        --ic-old-stream: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.35 4.21A2.75 2.75 0 0 1 13 2.25h6.32a2.75 2.75 0 0 1 2.64 3.54L20 12.25h2.47a2.75 2.75 0 0 1 1.76 4.86L8.57 30.17l3.42-11.42H6l4.36-14.54ZM13 3.75c-.55 0-1.04.36-1.2.9l-3.78 12.6h6l-2.58 8.58 11.85-9.87c.9-.75.36-2.2-.8-2.2h-4.49l2.52-8.4c.24-.8-.36-1.61-1.2-1.61H13Z" fill="white" stroke="white"/></svg>');
        --ic-old-stream-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/sv...

Reviews

No reviews yet.