A functional, modern redesign of the outdated Soundcloud UX.
/* ==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.46
@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 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 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 lowmotion "Reduce motion" {
embeds-off "No" <<<EOT
/* EOT;
embeds-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://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.woff2") format("woff2"),
url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.woff") format("woff"),
url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.ttf") format("truetype"),
url("https://unpkg.com/@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://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.woff2") format("woff2"),
url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.woff") format("woff"),
url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.ttf") format("truetype"),
url("https://unpkg.com/@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/svg" viewBox="0 0 32 32"><path d="M12.99 2.25c-1.22 0-2.29.8-2.64 1.96L6 18.75h6L8.56 30.17l15.68-13.06a2.75 2.75 0 0 0-1.76-4.86H20l1.94-6.46a2.75 2.75 0 0 0-2.64-3.54H13Z" fill="white" stroke="white"/></svg>');
--ic-old-library: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 4.25A2.75 2.75 0 0 1 7.75 7v18a2.75 2.75 0 1 1-5.5 0V7A2.75 2.75 0 0 1 5 4.25Zm8 0A2.75 2.75 0 0 1 15.75 7v18a2.75 2.75 0 1 1-5.5 0V7A2.75 2.75 0 0 1 13 4.25Zm7.68 0c1.05 0 1.99.62 2.4 1.56l.08.17 6.63 18.24a2.63 2.63 0 0 1-4.88 1.97l-.07-.17-6.63-18.24a2.63 2.63 0 0 1 2.47-3.53ZM5 5.75c-.69 0-1.25.56-1.25 1.25v18a1.25 1.25 0 0 0 2.5 0V7c0-.69-.56-1.25-1.25-1.25Zm8 0c-.69 0-1.25.56-1.25 1.25v18a1.25 1.25 0 0 0 2.5 0V7c0-.69-.56-1.25-1.25-1.25Zm7.68 0c-.74 0-1.27.7-1.1 1.4l.04.12 6.63 18.24a1.13 1.13 0 0 0 2.16-.66l-.03-.12L21.75 6.5a1.13 1.13 0 0 0-1.07-.74Z" fill="white" stroke="white"/></svg>');
--ic-old-library-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 4.25a2.75 2.75 0 0 1 2.75 2.58V25a2.75 2.75 0 0 1-5.5.17V7A2.75 2.75 0 0 1 5 4.25Zm8 0a2.75 2.75 0 0 1 2.74 2.58l.01.17v18a2.75 2.75 0 0 1-5.5.17V7A2.75 2.75 0 0 1 13 4.25Zm7.68 0c1.05 0 1.99.62 2.4 1.56l.08.17 6.63 18.24a2.63 2.63 0 0 1-4.88 1.97l-.07-.17-6.63-18.24a2.63 2.63 0 0 1 2.47-3.53Z" fill="white" stroke="white"/></svg>');
--ic-home: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" stroke="white" stroke-width="0.38" d="M11.53 2.41a.75.75 0 0 1 .94 0l8.5 6.8c.18.13.28.35.28.58V21c0 .41-.34.75-.75.75h-6a.75.75 0 0 1-.75-.75v-4.5a1.75 1.75 0 1 0-3.5 0V21c0 .41-.34.75-.75.75h-6a.75.75 0 0 1-.75-.75V9.79c0-.23.1-.44.28-.59l8.5-6.79Zm-7.28 7.74v10.1h4.5V16.5a3.25 3.25 0 1 1 6.5 0v3.75h4.5v-10.1L12 3.96l-7.75 6.19Z"/></svg>');
--ic-home-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" stroke="white" stroke-width="0.38" d="M12.47 2.41a.75.75 0 0 0-.94 0l-8.5 6.8a.75.75 0 0 0-.28.58V21c0 .41.34.75.75.75h6c.41 0 .75-.34.75-.75v-4.5a1.75 1.75 0 1 1 3.5 0V21c0 .41.34.75.75.75h6c.41 0 .75-.34.75-.75V9.79c0-.23-.1-.44-.28-.59l-8.5-6.79Z"/></svg>');
--ic-stream: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" stroke="white" fill-rule="evenodd" d="M4.25 14.5c0-.69.56-1.25 1.25-1.25h21c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-21c-.69 0-1.25-.56-1.25-1.25v-13Zm1.5.25v12.5h20.5v-12.5H5.75ZM8.25 9c0-.414.336-.75.75-.75h14c.414 0 .75.336.75.75s-.336.75-.75.75H9c-.414 0-.75-.336-.75-.75Zm3-5c0-.414.336-.75.75-.75h8c.414 0 .75.336.75.75s-.336.75-.75.75h-8c-.414 0-.75-.336-.75-.75Z"/></svg>');
--ic-stream-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" stroke="white" fill-rule="evenodd" d="M4.25 14.5c0-.69.56-1.25 1.25-1.25h21c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-21c-.69 0-1.25-.56-1.25-1.25v-13Zm4-5.5A.75.75 0 0 1 9 8.25h14a.75.75 0 0 1 0 1.5H9A.75.75 0 0 1 8.25 9Zm3-5a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75Z"/></svg>');
--ic-library: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" stroke="white" stroke-width="0.3" d="M3.25 4c0-.41.34-.75.75-.75h3c.41 0 .75.34.75.75v16c0 .41-.34.75-.75.75H4a.75.75 0 0 1-.75-.75V4Zm1.5.75v14.5h1.5V4.75h-1.5Zm5-.75c0-.41.34-.75.75-.75h3c.41 0 .75.34.75.75v16c0 .41-.34.75-.75.75h-3a.75.75 0 0 1-.75-.75V4Zm1.5.75v14.5h1.5V4.75h-1.5Zm4.31 2.08a.76.76 0 0 0-.53.92l3.37 12.56c.1.4.52.64.92.53l2.9-.78c.4-.1.63-.51.52-.91L19.38 6.58a.75.75 0 0 0-.92-.53l-2.9.77Zm4.1 12.37L16.67 8.09l1.45-.39 2.97 11.1-1.45.4Z"/></svg>');
--ic-library-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" stroke="white" stroke-width="0.3" d="M4 3.25a.75.75 0 0 0-.75.75v16c0 .41.34.75.75.75h3c.41 0 .75-.34.75-.75V4A.75.75 0 0 0 7 3.25H4Zm6.5 0a.75.75 0 0 0-.75.75v16c0 .41.34.75.75.75h3c.41 0 .75-.34.75-.75V4a.75.75 0 0 0-.75-.75h-3Zm5.06 3.58a.76.76 0 0 0-.53.92l3.37 12.56c.1.4.52.64.92.53l2.9-.78c.4-.1.63-.51.52-.91L19.38 6.58a.75.75 0 0 0-.92-.53l-2.9.77Z"/></svg>');
}
:root {
--ph-font: Phosphor-Fill;
--ph-play: "\e3d0";
--ph-pause: "\e39e";
--ph-next: "\e5a6";
--ph-prev: "\e5a4";
--ph-repeat: "\e3f6";
--ph-repeat-1: "\e3f8";
--ph-shuffle: "\e422";
--ph-volume-0: "\e458";
--ph-volume-1: "\e452";
--ph-volume-2: "\e450";
--po-font: Phosphor;
--po-play: var(--ph-play);
--po-pause: var(--ph-pause);
--po-next: var(--ph-next);
--po-prev: var(--ph-prev);
--po-repeat: var(--ph-repeat);
--po-repeat-1: var(--ph-repeat-1);
--po-shuffle: var(--ph-shuffle);
--po-volume-0: var(--ph-volume-0);
--po-volume-1: var(--ph-volume-1);
--po-volume-2: var(--ph-volume-2);
--sp-font: glue1-spoticon;
--sp-play: "\f132";
--sp-pause: "\f130";
--sp-next: "\f148";
--sp-prev: "\f146";
--sp-repeat: "\f13e";
--sp-repeat-1: "\f200";
--sp-shuffle: "\f144";
--sp-volume-0: "\f1EF";
--sp-volume-1: "\f206";
--sp-volume-2: "\f15e";
--ff-font: FluentSystemIcons-Resizable;
--ff-play: "\ea69";
--ff-pause: "\e995";
--ff-next: "\e922";
--ff-prev: "\eaa5";
--ff-repeat: "\f002";
--ff-repeat-1: "\f004";
--ff-shuffle: "\f000";
--ff-volume-0: "\ec49";
--ff-volume-1: "\ec41";
--ff-volume-2: "\ec43";
--fo-font: FluentSystemIcons-Resizable;
--fo-play: "\ea6a";
--fo-pause: "\e996";
--fo-next: "\e923";
--fo-prev: "\eaa6";
--fo-repeat: "\f003";
--fo-repeat-1: "\f005";
--fo-shuffle: "\f001";
--fo-volume-0: "\ec4a";
--fo-volume-1: "\ec42";
--fo-volume-2: "\ec44";
--pi-font: picon;
--pi-play: "play";
--pi-pause: "pause";
--pi-next: "next";
--pi-prev: "previous";
--pi-repeat: "repeat";
--pi-repeat-1: "repeat1";
--pi-shuffle: "shuffle";
--pi-volume-0: "mute";
--pi-volume-1: "quiet";
--pi-volume-2: "louder";
}
/* Required colours */
:root {
--shd-modal-width: 880px;
--shd-accent-primary: #f50;
--shd-accent-secondary: #f30;
--shd-accent-orange: hsl(calc(20deg + /*[[hue]]*/deg) 100% 61%);
--shd-accent-blue: hsl(calc(203deg + /*[[blu]]*/deg) 100% 65%);
--shd-bg-primary: /*[[bg1]]*/;
--shd-bg-lighter: #1a1a1a;
--shd-bg-darker: #0d0d0d;
--shd-bg-translucent: #1119;
--shd-bg-dropdown: #191919aa;
--shd-ds-small: drop-shadow(0 2px 5px #0009);
--fil: /*[[adv]]*/;
--hue: /*[[hue]]*/;
--blu: /*[[blu]]*/;
--sin: /*[[sin]]*/;
--gdpr: /*[[gdpr]]*/;
--font: /*[[font]]*/;
--font-main: /*[[font]]*/Variable, /*[[font]]*/ var, /*[[font]]*/, "InterVariable", "Inter var", Inter, Interstate, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Garuda, Verdana, Tahoma, sans-serif;
}
/* soundcloud colors */
:root {
--special-color: var(--shd-accent-orange);
--surface-color: var(--shd-bg-lighter);
--surface-rgb: 17,17,17;
--primary-color: #fff;
--primary-rgb: 255,255,255;
--secondary-color: #999;
--secondary-rgb: 153,153,153;
--highlight-color: #303030;
--highlight-rgb: 48,48,48;
--link-color: #699fff;
--link-rgb: 105,159,255;
--overlay-color: hsla(0,0%,100%,.4);
--overlay-rgb: 255,255,255,0.4;
--imageBorder-color: hsla(0,0%,100%,.15);
--imageBorder-rgb: 255,255,255,0.15;
--background-surface-color: var(--shd-bg-primary);
--background-highlight-color: #303030;
--background-light-color: #fff;
--background-dark-color: var(--shd-bg-primary);
--font-primary-color: #fff;
--font-secondary-color: #999;
--font-link-color: #699fff;
--font-special-color: var(--special-color);
--font-error-color: #d61348;
--font-light-color: #fff;
--font-dark-color: #111;
--button-disabled-background-color: #303030;
--button-disabled-font-color: #999;
--button-special-background-color: var(--special-color);
--button-special-font-color: #fff;
--button-light-background-color: #fff;
--button-light-font-color: #000;
--button-dark-background-color: var(--shd-bg-primary);
--button-dark-font-color: #fff;
--button-primary-background-color: #fff;
--button-primary-font-color: #000;
--button-primary-hover-font-color: rgba(0,0,0,.4);
--button-primary-disabled-background-color: #fff;
--button-primary-disabled-font-color: #000;
--button-primary-selected-background-color: #303030;
--button-primary-selected-font-color: #fff;
--button-primary-selected-hover-font-color: hsla(0,0%,100%,.4);
--button-primary-selected-active-font-color: #fff;
--button-primary-selected-active-background-color: #303030;
--button-primary-loading-background-color: #fff;
--button-primary-loading-font-color: rgba(0,0,0,.6);
--button-primary-loading-icon-color: #000;
--button-primary-active-background-color: #fff;
--button-primary-active-font-color: #000;
--button-secondary-background-color: #303030;
--button-secondary-font-color: #fff;
--button-secondary-hover-font-color: hsla(0,0%,100%,.4);
--button-secondary-disabled-background-color: #303030;
--button-secondary-disabled-font-color: #fff;
--button-secondary-selected-background-color: #303030;
--button-secondary-selected-active-background-color: #303030;
--button-secondary-loading-background-color: #303030;
--button-secondary-loading-font-color: hsla(0,0%,100%,.6);
--button-secondary-loading-icon-color: #fff;
--button-secondary-active-background-color: #303030;
--button-secondary-active-font-color: #fff;
--button-tertiary-font-color: #fff;
--button-tertiary-hover-font-color: hsla(0,0%,100%,.4);
--button-tertiary-disabled-background-color: #000;
--button-tertiary-disabled-font-color: #fff;
--button-tertiary-selected-background-color: #000;
--button-tertiary-selected-active-background-color: #000;
--button-tertiary-loading-background-color: #000;
--button-tertiary-loading-font-color: hsla(0,0%,100%,.6);
--button-tertiary-loading-icon-color: #fff;
--button-tertiary-active-font-color: #fff;
--overlay-default-color: hsla(0,0%,100%,.4);
--link-standard-color: #699fff;
--link-standard-focus-box-shadow: 0 0 0 2px #699fff;
--link-standard-active-color: rgba(105,159,255,.6);
--link-standard-hover-color: #699fff;
--link-standard-disabled-color: rgba(105,159,255,.6);
--link-primary-color: #fff;
--link-primary-focus-box-shadow: 0 0 0 2px #699fff;
--link-primary-disabled-color: hsla(0,0%,100%,.6);
--link-primary-active-color: hsla(0,0%,100%,.6);
--link-primary-hover-color: hsla(0,0%,100%,.4);
--link-secondary-color: #999;
--link-secondary-focus-box-shadow: 0 0 0 2px #699fff;
--link-secondary-disabled-color: hsla(0,0%,60%,.6);
--link-secondary-active-color: hsla(0,0%,60%,.6);
--link-secondary-hover-color: hsla(0,0%,60%,.4);
--tag-focused-box-shadow: 0 0 0 2px #699fff inset;
--tag-default-background-color: #303030;
--tag-default-font-color: #fff;
--tag-default-font-hover-color: hsla(0,0%,100%,.4);
--tag-selected-background-color: #fff;
--tag-selected-font-color: #000;
--tag-selected-font-hover-color: rgba(0,0,0,.4);
--input-default-background-color: #303030;
--input-default-border-color: transparent;
--input-default-font-color: #fff;
--input-placeholder-background-color: #303030;
--input-placeholder-font-color: #999;
--input-focused-background-color: #303030;
--input-focused-border-color: #999;
--input-focused-font-color: #fff;
--input-invalid-background-color: #303030;
--input-invalid-border-color: #d61348;
--input-disabled-background-color: hsla(0,0%,100%,.15);
--input-disabled-font-color: #fff;
--checkbox-default-background-color: transparent;
--checkbox-default-border-color: #666;
--checkbox-checked-background-color: var(--special-color);
--checkbox-checked-border-color: var(--special-color);
--toggle-on-handle-color: #000;
--toggle-on-handle-hover-color: rgba(0,0,0,.4);
--toggle-off-body-color: #999;
--toggle-off-body-hover-color: #999;
--toggle-off-handle-color: #000;
--toggle-off-handle-hover-color: rgba(0,0,0,.4);
}
@supports not (font-variation-settings: normal) {
:root {
--font-main: /*[[font]]*/, Inter, Interstate, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Garuda, Verdana, Tahoma, sans-serif;
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root {
--shd-bg-translucent: var(--shd-bg-primary);
--shd-bg-dropdown: #151515;
}
}
@supports not (selector(:has(*))) {
:root {
--shd-modal-width: 550px;
}
}
.sc-classic {
font-family: var(--font-main);
font-feature-settings: 'liga' 1, 'calt' 1;
}
/*[[lowmotion]]*/
*, *:hover, *:focus, *:before, *:after {
transition: unset !important;
}
/**/
}
@-moz-document regexp("http(?:s)?:\/\/(?:|www\.)?(?:|secure\.)?soundcloud\.com\/?(?:(?!jobs|settings\/connections)(?:.|[\?\&=\-_\/+])*)") {
/* ----------- IMPORT ULTRA DARK (https://uso.kkx.one/style/176264) ----------- */
/* Modification of SoundCloud Ultra Dark by IgChi: userstyles.org/styles/176264 */
.l-collection,
.listenNetwork {
margin-left: 15px;
margin-right: 15px
}
#app:not(body[marginwidth="0"][marginheight="0"] #app),
#app header:not(.g-flex-row-spread) {
height: calc(100vh - 90px)
}
.g-z-index-header-menu[style] {
border: 1px solid #fff!important;
box-shadow: 0 0 10px var(--shd-bg-darker)!important
}
html {
min-height: 100vh;
}
body:not(html[stylus-iframe="https://soundcloud.com"] > body), body.sc-classic {
background: var(--shd-bg-primary) !important;
max-width: 100%;
overflow-y: auto;
overflow-x: clip;
padding-right: 0px !important; /* Prevent bump when opening track cover */
}
::-webkit-scrollbar,
div::-webkit-scrollbar {
width: 10px
}
::-webkit-scrollbar-track,
div::-webkit-scrollbar-track {
background: var(--shd-bg-darker)
}
::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
background: #222
}
::-webkit-scrollbar-thumb:hover,
div::-webkit-scrollbar-thumb:hover {
background: #444
}
#dropdown-button-53 ul:last-child {
border-bottom: 0
}
.loading {
background: url(https://a-v2.sndcdn.com/assets/images/loader-db80c58.gif) center center no-repeat;
filter: invert(1)
}
h2.selectionModule__titleText {
font-size: 28px;
font-weight: 600;
color: #fff
}
.playableTile {
width: 120px;
padding-bottom: 60px
}
.userBadge__usernameLink,
a.playableTile__heading {
text-align: center;
font-weight: 400;
font-size: 14px;
color: #fff!important
}
.userBadge__usernameLink:hover,
a.playableTile__heading:hover {
text-align: center;
font-size: 14px;
color: #fff
}
.sc-classic .badgeList__item, .badgeList__item {
width: 150px
}
.l-collection {
margin-right: 15px
}
.playableTile__usernameHeading,
a.playableTile__usernameHeading {
color: #fff;
opacity: .6;
font-weight: 200;
text-align: center;
}
.playableTile__usernameHeadingContainer {
width: 100%;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
}
#app header,
.header__inner {
width: 230px;
box-sizing: border-box
}
a.playableTile__usernameHeading:hover {
opacity: 1;
color: #fff;
text-decoration: underline
}
.sc-border-light-bottom,
.sc-border-light-right,
.sc-border-light-top,
.selectionModule {
border: 0
}
.image__lightOutline .image__full {
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
.listenArtworkWrapper__artwork .image__lightOutline .image__full {
box-shadow: 0 0 20px 0 #0008;
}
.moreActions, .imageEditDropdown,
.sc-classic .moreActions, .sc-classic .imageEditDropdown {
border: 1px solid #6663;
border-radius: .5rem;
background: var(--shd-bg-translucent);
backdrop-filter: blur(32px);
padding: 5px 0;
box-shadow: 2px 2px 12px #0006;
}
.moreActions .moreActions__button.sc-button-medium,
.imageEditDropdown .sc-button
{
border: 0;
background: 0 0;
color: #b3b3b3;
cursor: default;
font-size: 14px!important;
transition: color .2s,border-color .2s;
}
.moreActions .moreActions__button.sc-button-medium:before {
filter: contrast(0) brightness(1.2);
transition: filter .2s;
}
.moreActions .moreActions__button.sc-button-medium:hover, .imageEditDropdown .sc-button:hover {
color: #fff;
background: #333
}
.moreActions .moreActions__button.sc-button-medium:not(.sc-button-selected):hover:before {
filter: contrast(0) brightness(2);
/* transition: filter 0.2s; */
}
#app {
display: flex
}
#app header {
background: 0
}
.header__inner {
background: var(--shd-bg-primary);
display: flex;
flex-direction: column;
height: 100%
}
.header__inner .header__logo {
width: 100%;
background: 0
}
.header__inner .header__logo .header__logoLink {
width: 20%;
margin-left: 100px;
background: #f40;
/*background: linear-gradient(#f70,#f00);*/
background: linear-gradient(#f80,#f10) !important;
/*-webkit-mask-size: contain;*/
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAWCAQAAAAs/tcnAAABMUlEQVR4Ac3UJfQUARTGUaxnrBHpPeDu7u7uTg/QO/SK9q1U3KHg2i7fH4exNeSdc9/ZNL/RHfRfjdHOuOajt246b7Fh/T38WO/9OnfM7s+hx3gUh5XNWYN7D4wnTlOe6OGsv/6eQlQFmNX9WScTs4jqwD3DOr/j04gJxHyiOsCiTgITibnEdGIJURc410lgJrGYmE+sIuoCz1301BstGwxueqQLiVXEMmI9cVp7c9WIYmAqkUysIjYQa4mtRAJtJwb//kgXEdOJTcR2Yiuxi2g/wIYfgTnEBmIFsYvYS+whDhCdBFo/ApuJvcRO4hBxhDhMHCU6Cbz5EThKHCe+7BNEcXceKFxB/e7yFs0h1hP1u/OHXHiL6nfnr2nhO6jfR3r50L5cR9O+oX5+/FX8vfkElmh0Xu+KRLEAAAAASUVORK5CYII=);
mask-repeat: no-repeat;
mask-position: center;
mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAWCAQAAAAs/tcnAAABMUlEQVR4Ac3UJfQUARTGUaxnrBHpPeDu7u7uTg/QO/SK9q1U3KHg2i7fH4exNeSdc9/ZNL/RHfRfjdHOuOajt246b7Fh/T38WO/9OnfM7s+hx3gUh5XNWYN7D4wnTlOe6OGsv/6eQlQFmNX9WScTs4jqwD3DOr/j04gJxHyiOsCiTgITibnEdGIJURc410lgJrGYmE+sIuoCz1301BstGwxueqQLiVXEMmI9cVp7c9WIYmAqkUysIjYQa4mtRAJtJwb//kgXEdOJTcR2Yiuxi2g/wIYfgTnEBmIFsYvYS+whDhCdBFo/ApuJvcRO4hBxhDhMHCU6Cbz5EThKHCe+7BNEcXceKFxB/e7yFs0h1hP1u/OHXHiL6nfnr2nhO6jfR3r50L5cR9O+oX5+/FX8vfkElmh0Xu+KRLEAAAAASUVORK5CYII=);
}
.header__inner .header__right {
box-shadow: 2px 2px 24px #0003;
border-radius: 8px;
position: absolute;
left: 10px;
height: 90px;
background: linear-gradient(30deg, #401702 -200%, #1a181890);
border: 1px solid #35333355;
transition: box-shadow 3s
}
.header__inner .header__right:hover {
box-shadow: 2px 2px 12px #0009;
transition: box-shadow 0.5s
}
.header__inner .header__right div.header__userNav {
position: absolute;
bottom: 0;
width: 100%
}
.creatorsNavigation {
margin: 15px
}
.creatorSubscriptionsButton {
display: none;
}
.header__soundInput .left {
z-index: 1;
position: absolute;
top: 40px;
left: 110px
}
.header__soundInput {
position: absolute;
top: 44px;
left: 93px;
z-index: 2;
width: 69px;
}
.header__soundInput, .header__upload {
height: 46px;
}
.sc-classic .header__right > .header__link,
.sc-classic .header__right > .header__link:before,
.header__inner .header__right div.header__userNav .header__userNavUsernameButton {
/*[[dist]]*/
}
.sc-classic .header__right > .header__link {
position: absolute;
float: right;
top: 0;
right: 0;
z-index: 2;
width: calc(var(--w1) - var(--w2));
padding: 12px 0px 12px var(--w2);
display: block;
align-items: center;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
opacity: .75;
transition: opacity 0.2s;
}
.sc-classic .header__right > .header__link:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: var(--w2);
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%23fff' d='M1.62 10h12v2h-12v-2zm6.526-7v6H7.094V3h-1.58L7.62 0l2.105 3H8.146zm-5.99 1.257l2.867 4.096-.862.603-2.868-4.095L0 5.766l.003-3.665 3.446 1.25-1.294.906h.001zm12.05.582l-2.868 4.096-.863-.604 2.868-4.096-1.293-.905 3.445-1.25.004 3.665-1.293-.906z'/%3E%3C/svg%3E%0A");
background-size: 50%;
background-position: 50%;
background-repeat: no-repeat;
}
.sc-classic .header__right > .header__link:hover {
opacity: 1;
}
@supports (selector(:has(*))) { /* move artists button to bottom if more button isn't found */
.sc-classic .header__right:not(:has(.header__moreButton)) > .header__link {
top: unset;
bottom: 0;
height: 46px;
padding: 0px 0px 0px var(--w2);
}
.sc-classic .header__right:not(:has(.header__moreButton)) > .header__link:before {
background-position: 50% 42%;
}
.sc-classic .header__inner .header__right:not(:has(.header__moreButton)) div.header__userNav .header__userNavUsernameButton {
width: 100%;
}
}
.sc-classic .header__userNavAvatar:after {
content: "/*[[user]]*/";
position: absolute;
max-width: calc(140px - var(--w1));
white-space: nowrap;
overflow: hidden;
height: 100%;
align-self: center;
left: 36px;
top: 0;
display: flex;
align-items: center;
opacity: .75;
color: #fff;
transition: opacity 0.2s;
}
.sc-classic .header__userNavUsernameButton:after {
transition: opacity 0.2s;
}
.sc-classic .header__userNavUsernameButton:hover .header__userNavAvatar:after,
.sc-classic a.selected.header__userNavUsernameButton .header__userNavAvatar:after {
opacity: 1;
}
.sc-classic .header__userNavUsernameButton:focus:not(:hover):not(.selected):after,
.sc-classic .header__navMenu>li>a:focus:not(:hover):not(.selected),
.sc-classic a:focus:not(:hover):not(.selected) .notificationIcon:before {
opacity: .75;
}
.header__inner .header__right div.header__userNav .header__userNavUsernameButton {
width: calc(207px - var(--w1));
position: absolute;
bottom: 46px;
left: 0;
}
.header__inner .header__right div.header__userNav .header__userNavUsernameButton .header__userNavUsername {
display: block
}
.header__inner .header__right ul.header__navMenu {
position: absolute;
bottom: 0;
right: 0
}
.header__navWrapper {
width: 90%
}
.header__navWrapper .header__navMenu {
width: 100%;
display: flex;
flex-direction: column
}
.header__navWrapper .header__navMenu li {
width: 100%
}
#app .l-container:not(.siteTakeoverOverlay) {
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box
}
#app .l-container.l-content:not(.siteTakeoverOverlay) {
width: calc(100% - 230px);
position: relative;
left: 230px
}
#app .l-container.l-content .l-fluid-fixed {
padding: 0 15px;
min-height: 130vh
}
#app .l-container.l-content .l-fluid-fixed .l-main {
margin-right: 330px
}
#app .l-container.l-content .l-fluid-fixed .l-sidebar-right {
right: 15px;
transition: right .2s, background .2s
}
@media(max-width:1000px) {
#app .l-container.l-content .l-fluid-fixed .l-main {
margin-right: 50px
}
#app .l-container.l-content .l-fluid-fixed .l-sidebar-right {
right: -260px!important;
z-index: 9;
padding: 0 15px;
background: #181818
}
#app .l-container.l-content .l-fluid-fixed .l-sidebar-right:hover {
right: 0!important
}
}
#app .l-container #content {
overflow: hidden;
box-sizing: border-box;
position: relative;
margin-bottom: 90px;
padding-bottom: 40px;
}
#app .l-container #content .l-about-rows,
#app .l-container #content .listenEngagement {
border: 0;
margin-left: 15px
}
#app .l-container #content .truncatedAudioInfo.m-collapsed.m-overflow .truncatedAudioInfo__wrapper {
-webkit-mask-image: linear-gradient(to top, transparent 0, #000 40px)
}
#app .l-container #content .truncatedAudioInfo.m-collapsed.m-overflow .truncatedAudioInfo__wrapper::after {
background: 0
}
#app .l-container #content .sc-button.sc-button-small:not(.sc-button-follow).sc-button-selected:before {
filter: hue-rotate(360deg)
}
#app .l-container #content .sc-button.sc-button-small:not(.sc-button-follow):before {
filter: contrast(0) brightness(2);
}
#app .l-container #content .sc-button.sc-button-small:not(.sc-button-follow).sc-button-repost:not(.sc-button-selected):before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c3RhdHNfcmVwb3N0PC90aXRsZT48cGF0aCBkPSJNMiA2djVjMCAxLjEwNS45MDIgMiAyLjAwOSAyaDYuOTg3SDEwbC0yLTJINFY2aC0uNUg2TDMgMyAwIDZoMnptNC0zaC0uOTk2IDYuOTg3QzEzLjA5OCAzIDE0IDMuODk1IDE0IDV2NWgtMlY1SDhMNiAzem0xMCA3aC02bDMgMyAzLTN6IiBmaWxsPSIjMjIyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=)
}
#app .l-container #content .truncatedUserDescription.m-overflow.m-collapsed .truncatedUserDescription__wrapper::after {
background: linear-gradient(rgba(255, 255, 255, 0), var(--shd-bg-primary))
}
#app .l-container #content .dropbar {
width: calc(100% - 230px);
transform: translate3d(15px, -120px, 0)
}
#app .l-container #content .dropbar .dropbar__content {
width: 100%;
box-sizing: border-box;
background: linear-gradient(var(--shd-bg-darker), 80%, #1110)
}
#app .l-container #content .statsOverview .dropbar .dropbar__content {
height: 50px
}
#app .l-container #content .statsOverview .dropbar .dropbar__content .statsDropbarTabs__tab {
padding: 10px 0
}
#app .l-container #content .dropbar .dropbar__content .userDropbar {
padding: 14px 0;
background: transparent;
}
#app .l-container #content .dropbar.m-active {
transform: translate3d(15px, -46px, 0)
}
#app .l-container #content .statsOverview .dropbar.m-active {
transform: translate3d(-15px, -46px, 0)
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-edit:hover,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-message:hover,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-more:hover,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-share:hover {
transform: scale(1.06)
}
/*#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow:hover {
box-shadow: inset 0 0 0 2px #f50
}*/
#app .l-container #content .l-user-hero {
z-index: 9998;
min-height: 0px
}
#app .l-container #content .l-user-hero:after {
z-index: -1;
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: var(--shd-bg-primary)
}
#app .l-container #content .l-user-hero .profileHeader {
min-height: 250px;
margin: 0
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo,
#app .l-container #content .l-user-hero .profileHeader .profileHeader__info {
height: 100%
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__avatar.sc-media-image {
position: absolute;
left: 40px;
top: 40px;
/* filter: drop-shadow(5px 5px 3px #090909);*/
z-index: 9;
transform: scale(1.075);
}
.imageContent h2 {
color: #ccc
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content {
display: flex;
height: 100%;
max-height: 192px;
overflow: visible;
justify-content: flex-end;
flex-direction: column;
align-items: flex-end;
flex-shrink: 1;
transform-origin: bottom right;
z-index: 10;
pointer-events: none;
position: relative;
margin-right: 345px;
float: right;
bottom: 16px;
/*bottom: 45px;
left: 87%;*/
filter: drop-shadow(2px 6px 12px #000);
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content > * {
pointer-events: all;
}
/*#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content h2, */#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content .profileHeaderInfo__userName {
margin-top: 0px;
background: 0;
font-size: 4.5rem;
/*font-size: clamp(4em, calc(8vw - 70px), 6em);*/
line-height: 1;
letter-spacing: -.005em;
font-weight: 700; /* 900 */
color: #fff;
padding-right: 25px;
text-align: right;
overflow-x: hidden;
overflow-y: clip;
max-width: calc(100vw - 850px);
text-overflow: ellipsis;
white-space: nowrap;
}
.profileHeaderInfo__premiumIndicator, .profileHeaderInfo__verifiedBadge {
/*margin-left: -40px;
left: 50px;*/
right: 10px;
position: absolute!important;
padding-right: 0!important;
filter: contrast(1.2) brightness(1.1) hue-rotate(/*[[blu]]*/deg);
top: 8px!important;
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content h4 {
margin-top: -10px
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content br {
display: none;
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderInfo__content h2 {
margin-top: -8px
}
#app .l-container #content .l-user-hero .profileHeader .profileHeaderBackground {
min-height: 405px;
background: var(--shd-bg-primary)
}
/*#app .l-container #content .l-user-hero .profileHeader .profileHeaderBackground .profileHeaderBackground__visual {
background-size: cover;
background-position: center;
min-height: 405px;
position: relative
}*/
#app .l-container #content .l-user-hero .profileHeader .profileHeaderBackground .profileHeaderBackground__visual:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
/*background: linear-gradient(transparent 80%, #1112 90%, #111 100%);*/
}
#app .l-container #content .commentForm__wrapper {
border: 0;
background: var(--shd-bg-darker);
border-radius: 8px;
}
#app .l-container #content .commentForm__wrapper input {
color: #fff;
background: var(--shd-bg-darker);
border: 0;
border-radius: 8px;
}
#app .l-container #content .l-vertical-bar {
/*z-index: 9;*/
position: absolute;
top: 290px;
width: 100%;
padding-bottom: 40px;
}
#app .l-container #content .l-vertical-bar .userInfoBar {
position: unset
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons {
margin-right: 340px;
/*left: calc(100vw - 875px);*/
/*left: 25%;*/
/*width: 50%;*/
height: 40px;
bottom: 84px;
display: flex;
justify-content: flex-end;
z-index: 9;
filter: drop-shadow(2px 6px 8px #0006);
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-more:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDE0IDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPm1vcmU8L3RpdGxlPjxnIGZpbGw9IiMyMjIiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSI3IiBjeT0iMiIgcj0iMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMiIgcj0iMiIvPjwvZz48L3N2Zz4=)
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-edit,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-message,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-more,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-share {
width: 39px;
height: 39px;
text-indent: 100px;
overflow: hidden;
background: 0 0;
border: 0;
filter: brightness(10);
cursor: default
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-startstation,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-insights {
border: 0;
min-width: 130px;
white-space: normal;
padding: 11px 44px;
will-change: transform;
line-height: 1.6;
vertical-align: middle;
font-size: 11px;
font-weight: 400;
text-align: center;
height: auto;
margin: 0 15px 0 0;
text-transform: uppercase;
letter-spacing: .16em;
cursor: default
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-edit:before,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-message:before,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-more:before,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-share:before {
background-size: contain
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow {
background: rgba(24, 24, 24, .7);
color: #fff;
/*box-shadow: inset 0 0 0 2px #b3b3b3*/
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow.sc-button-selected {
color: var(--shd-accent-primary)
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-startstation,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-insights {
background: var(--shd-accent-primary);
background: linear-gradient(#f60,#f40);
box-shadow: inset 0px 0px 0px #c200;
filter: brightness(1) contrast(1) hue-rotate(/*[[hue]]*/deg);
transition-duration: 0.7s;
border-radius: 500px;
color: #fff;
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-startstation:hover,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-insights:hover {
background: #ff3d00;
background: linear-gradient(#f60,#f40);
box-shadow: inset -2px -8px 16px #c20c;
filter: brightness(0.9) contrast(1.3) hue-rotate(/*[[hue]]*/deg) hue-rotate(-2deg);
transition-duration: 0.2s;
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-startstation:before,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-insights:before,
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow:before {
left: 36px;
background-position: 50% 45%;
filter: brightness(10)
}
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium {
display: flex;
justify-content: space-evenly;
align-items: center;
border: 0;
padding-right: calc(109vw - 100%);
padding-left: 10px;
margin-top: -80px;
flex-flow: wrap;
}
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium .g-tabs-link {
font-size: 12px;
line-height: 16px;
font-weight: var(--glue-font-weight-bold);
font-weight: 330;
text-transform: uppercase;
letter-spacing: .16em;
color: #fff!important;
opacity: .6;
position: relative;
border: 0;
display: inline-block;
margin: 10px;
padding: 5px 10px;
text-decoration: none;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear, font-weight .2s linear
}
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium .g-tabs-link.active,
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium .g-tabs-link:hover {
opacity: 1;
font-weight: 600; /* alongside navfix */
padding: 6px 4.7%!important;
}
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium .g-tabs-link.active:before {
content: "";
height: 2px;
background: var(--shd-accent-primary);
width: 30px;
position: absolute;
display: block;
left: 50%;
bottom: 0;
margin-left: -15px
}
#app .l-container #content .sound__soundActions {
background: 0 0;
overflow: unset
}
#app .l-container #content .sc-background-light {
background: 0 0;
border: 0
}
#app .l-container #content a:not(.sc-button-startstation,.sc-button-small),
#app .l-container #content h1,
#app .l-container #content h2,
#app .l-container #content h3 {
color: #fff
}
#app .l-container #content .compactTrackListItem__trackTitle,
#app .l-container #content p {
color: #b3b3b3
}
#app .l-container #content .l-inner-fullwidth {
margin-left: 0;
margin-right: 0
}
#app .l-container #content .selectionModule__description {
color: #fff;
opacity: .6;
font-weight: 200
}
/*follow button*/
#app .l-container #content .userBadge__actions .sc-button:not(.sc-button-selected),
.sc-button-follow:not(.sc-button-cta):not(.sc-button-selected):not(.playbackSoundBadge__follow):not(.playableTile__actionButton) {
border: 0;
border-radius: 120px;
background: var(--shd-accent-primary) !important;
color: #fff !important;
padding: 0 15px;
transition-duration: 0.25s;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
#app .l-container #content .userBadge__actions .sc-button:not(.sc-button-selected):hover, .sc-button-follow:not(.sc-button-cta):not(.sc-button-selected):not(.playbackSoundBadge__follow):not(.playableTile__actionButton):not(.m-boldIcon):hover {
background: var(--shd-accent-secondary) !important;
filter: drop-shadow(2px 2px 6px #000) hue-rotate(/*[[hue]]*/deg) var(--fil) !important;
transition-duration: 0.25s;
}
#app .l-container #content .systemPlaylistDetails {
padding: 0 0 0 15px
}
#app .l-container #content .l-sidebar-right {
right: 15px
}
#app .l-container #content .sc-border-light {
border: 0
}
#app .l-container #content .sc-border-light .compactTrackListItem.clickToPlay:hover {
background: rgba(0, 0, 0, .2)
}
#app .l-container #content .sc-border-light .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
background: 0
}
#app .l-container #content .soundBadge__additional {
background: linear-gradient(to right, transparent, var(--shd-bg-primary) 17px);
top: 0
}
.sc-classic #app .l-container #content .soundBadge.active:not(.compact) .soundBadge__additional,
.sc-classic #app .l-container #content .soundBadge.hover:not(.compact) .soundBadge__additional,
.sc-classic #app .l-container #content .soundBadge.selected:not(.compact) .soundBadge__additional,
.sc-classic #app .l-container #content .soundBadge:hover:not(.compact) .soundBadge__additional {
background: linear-gradient(to right, transparent, var(--shd-bg-darker) 17px);
}
#app .l-container #content .soundBadge__additional .sc-button {
background: 0 0;
border: 0
}
#app .l-container #content .soundBadge__additional .sc-button-small.sc-button-more:before {
filter: brightness(3)
}
#app .l-container #content .soundBadge__additional .sc-button-small.sc-button-active.sc-button-more:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDE0IDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPm1vcmU8L3RpdGxlPjxnIGZpbGw9IiMyMjIiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSI3IiBjeT0iMiIgcj0iMiIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMiIgcj0iMiIvPjwvZz48L3N2Zz4=)
}
#app .l-container #content .soundTitle__usernameTitleContainer {
display: flex;
flex-direction: column-reverse;
align-items: flex-start
}
.l-search .l-fixed-top,
.searchOptions__footer {
display: none
}
#app .l-container #content .soundTitle__usernameTitleContainer .soundTitle__title {
font-size: 14px;
line-height: 16px;
/*letter-spacing: .015em;*/
color: #eee;
transition-duration: 0.2s!important;
transition-property: color, font-weight, filter, opacity;
}
.searchOptions__container {
width: 220px
}
.search__listWrapper {
padding-right: 15px
}
.sc-classic .l-search .l-main, .l-search .l-main {
margin: 0 0 0 15px;
padding-top: 0
}
.compactTrackList__moreLink:focus,
.compactTrackList__moreLink:hover {
background: var(--shd-bg-darker)
}
.sound__trackList {
margin-top: 0;
border-radius: 5px
}
.g-dark input[type=search] {
padding-right: 28px;
box-shadow: 2px 2px 24px #0003;
transition-duration: 3s
}
.g-dark input[type=search]:focus,
.sc-classic .frontContent__actions input[type=search]:focus {
box-shadow: 2px 2px 12px 2px #0a0a0a;
z-index: 99999;
background: #0a0a0a;
transition-duration: 0.25s
}
.g-dark input[type=search]:hover {
box-shadow: 2px 2px 16px #0009;
z-index: 99999;
transition-duration: 1s!important
}
#app .l-container #content .soundTitle__usernameTitleContainer .soundTitle__title:hover {
text-decoration: none;
color: #fff!important;
filter: drop-shadow(0px 0px 6px #fff8);
transition-duration: 0.12s!important;
}
#app .l-container #content .soundTitle__usernameTitleContainer .soundTitle__username {
font-size: 12px;
line-height: 20px;
/*letter-spacing: .015em;*/
color: #b3b3b3;
width: auto;
flex: 0;
transition-duration: 0.2s;
}
#app .l-container #content .soundTitle__usernameTitleContainer .soundTitle__username:hover {
text-decoration: none;
color: #fff!important;
transition-duration: 0.1s;
}
#app .l-container #content .playableTile__playButton {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
border-radius: 8px;
}
#app .l-container #content .playableTile__playButton .playButton {
border: 4px solid #fff;
transform: scale(.5);
background: 0 0
}
.playControls__inner {
height: 90px;
position: relative
}
.playControls__inner .playControls__wrapper {
margin: 0;
min-width: 100%
}
.playControls__inner .playControls__wrapper .playControls__elements {
position: unset
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge {
position: absolute;
padding: 0 0 0 16px;
height: 90px;
box-sizing: border-box
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__avatar {
height: 55px;
min-width: 55px;
margin: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__avatar .sc-artwork {
margin: 0;
width: 100%!important;
height: 100%!important
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer {
display: flex;
margin: 0 16px;
flex: 0;
flex-direction: column-reverse;
align-items: flex-start;
width: auto;
max-width: 270px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer .playbackSoundBadge__lightLink {
font-size: 12px;
line-height: 16px;
color: #b3b3b3;
width: auto;
flex: 0;
padding: 5px;
background-color: #0006;
border-radius: 8px;
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer .playbackSoundBadge__lightLink:hover {
text-decoration: underline;
color: #fff
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer .playbackSoundBadge__title {
margin-bottom: unset;
width: auto;
max-width: 100%;
flex: 0
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer .playbackSoundBadge__title a {
font-size: 14px;
line-height: 20px;
color: #fff;
padding: 5px;
margin-bottom: 3px;
background-color: #0006;
border-radius: 8px;
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__titleContextContainer .playbackSoundBadge__title a:hover {
text-decoration: underline
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__soundBadge .playbackSoundBadge__actions {
position: relative;
background: #0006;
border-radius: 5px;
top: -2px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControl {
background: 0 0;
border: 0;
color: #b3b3b3;
width: 32px;
min-width: 32px;
height: 32px;
position: relative
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir {
cursor: default;
position: absolute;
margin: 0;
width: 32px;
height: 32px;
background-image: unset;
color: #b3b3b3;
transition: color 0.3s;
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control:not(.disabled):hover,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir:not(.disabled):hover {
color: #fff
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir:before {
position: relative;
top: 16px;
left: 1px;
width: 32px;
height: 32px;
font-size: 16px;
font-family: glue1-spoticon;
font-family: Phosphor;
font-family: var(--/*[[mcis]]*/-font);
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: inherit;
vertical-align: bottom;
display: inline-block;
text-decoration: inherit
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__play.playing:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play.playing:before {
content: "\f130";
content: "\fd38";
content: var(--/*[[mcis]]*/-pause);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__play:hover:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play:hover:after {
border-color: #fff
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__play:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 500px;
border: 2px solid #fff9;
transition: border-color 0.3s;
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__play,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play {
top: 15px;
left: calc(50% - 16px);
transform: scale(1.5)!important
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__play:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play:before {
left: 0;
content: "\f132";
content: "\fd5a";
content: var(--/*[[mcis]]*/-play);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__prev,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__prev {
top: 15px;
left: calc(50% - 16px - 80px);
transform: scale(1.5)!important
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__prev:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__prev:before {
content: "\f146";
content: "\fdb5";
content: var(--/*[[mcis]]*/-prev);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__next,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__next {
top: 15px;
left: calc(50% - 16px + 80px);
transform: scale(1.5)!important
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__next:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__next:before {
content: "\f148";
content: "\fdb7";
content: var(--/*[[mcis]]*/-next);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat {
top: 15px;
left: calc(50% - 16px + 144px);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl:before {
background-image: none;
content: "\f13e";
content: "\f96b";
content: var(--/*[[mcis]]*/-repeat);
opacity: 1
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl:after {
background-image: none;
cursor: default
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl.m-one:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl.m-one:before {
content: "\f200";
content: "\f96c";
content: var(--/*[[mcis]]*/-repeat-1);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl.m-all:before,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl.m-one:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl.m-all:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl.m-one:before {
cursor: default;
color: var(--shd-accent-primary)!important;
opacity: 1
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl.m-all:after,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__repeat .repeatControl.m-one:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl.m-all:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__repeat .repeatControl.m-one:after {
background: var(--shd-accent-primary)!important;
opacity: 1;
border-radius: 50px;
width: 4px;
height: 4px;
top: 28px;
left: 14px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__shuffle,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__shuffle {
top: 15px;
left: calc(50% - 16px - 144px);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__shuffle .shuffleControl:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__shuffle .shuffleControl:before {
background-image: none;
content: "\f144";
content: "\f994";
content: var(--/*[[mcis]]*/-shuffle);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__shuffle .shuffleControl:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__shuffle .shuffleControl:after {
background-image: none
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__shuffle .shuffleControl.m-shuffling:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__shuffle .shuffleControl.m-shuffling:before {
color: var(--shd-accent-primary)!important;
opacity: 1
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.playControls__shuffle .shuffleControl.m-shuffling:after,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__shuffle .shuffleControl.m-shuffling:after {
background: #1db954!important;
border-radius: 50px;
width: 4px;
height: 4px;
top: 28px;
left: 14px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.volume__button,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.volume__button {
top: 15px;
transform: scale(1.5)
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__control.volume__button:before,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.volume__button:before {
top: 14px;
left: -5px;
background-image: none;
/*content: "\f15e";
content: "\fdce";*/
}
.volume.muted .volume__button:before {
content: "\fdd2";
content: var(--/*[[mcis]]*/-volume-0);
}
.volume[data-level="1"] .volume__button:before,
.volume[data-level="2"] .volume__button:before,
.volume[data-level="3"] .volume__button:before,
.volume[data-level="4"] .volume__button:before,
.volume[data-level="5"] .volume__button:before {
content: "\fdcf";
content: var(--/*[[mcis]]*/-volume-1);
}
.volume[data-level="6"] .volume__button:before,
.volume[data-level="7"] .volume__button:before,
.volume[data-level="8"] .volume__button:before,
.volume[data-level="9"] .volume__button:before,
.volume[data-level="10"] .volume__button:before {
content: "\f15e";
content: "\fdce";
content: var(--/*[[mcis]]*/-volume-2);
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline {
position: absolute;
width: 50%;
top: 45px;
left: 25%
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__duration,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__timePassed {
color: #b3b3b3
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper {
top: -1px;
cursor: default
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper:hover .playbackTimeline__progressBar {
background: var(--shd-accent-primary)
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper .playbackTimeline__progressHandle {
background: #c84200;
box-shadow: 2px 2px 2px var(--shd-bg-darker);
position: relative;
top: -4px;
transform: translateX(-6px);
height: 12px;
width: 12px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper .playbackTimeline__progressBackground {
background: #404040
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper .playbackTimeline__progressBar {
background: #b3b3b3
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper .playbackTimeline__progressBackground,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__timeline .playbackTimeline__progressWrapper .playbackTimeline__progressBar {
height: 4px;
border-radius: 5px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume {
position: absolute;
top: 15px;
right: 40px
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper {
width: 40px;
border: 0;
transform-origin: center bottom;
bottom: -5px;
left: -5px;
background: #000000cc;
border-radius: 5px;
box-shadow: 0 0 5px var(--shd-bg-darker)
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper:hover .volume__sliderProgress {
background: var(--shd-accent-primary)!important
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper:hover .volume__sliderHandle {
opacity: 1
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper:after,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper:before {
border: 0
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper .volume__sliderBackground,
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper .volume__sliderProgress {
width: 4px;
left: 5px;
border-radius: 0
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper .volume__sliderProgress {
background: var(--shd-accent-primary)
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper .volume__sliderBackground {
background: #1d1d1d
}
.playControls__inner .playControls__wrapper .playControls__elements .playControls__volume .volume__sliderWrapper .volume__sliderHandle {
width: 10px;
border-radius: 50%;
height: 10px;
left: 5px;
background: #fff;
opacity: 0
}
.sc-browsers-enable-gpu,
.userNetworkInfo .userNetworkTabs {
width: 100%
}
.playControls__bg,
.playControls__inner,
.sc-classic .playControls__bg,
.sc-classic .playControls__inner{
width: 100%;
border: 0;
background: var(--shd-bg-translucent);
border-top: 1px solid #222c;
box-shadow: 0 0 5px var(--shd-bg-primary);
}
input,
select,
textarea {
background: var(--shd-bg-primary);
border-color: #333
}
.g-dark input[type=password],
.g-dark input[type=search],
.g-dark input[type=text],
.g-dark select,
.g-dark textarea,
.sc-classic .frontContent__actions input[type=search]{
color: #999;
background: var(--shd-bg-lighter);
transition: 3s
}
.collectionSection__filters {
position: absolute;
right: 120px
}
.sc-input {
display: inline-block;
font-family: var(--font-main);
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 2px 7px;
border-radius: 4px;
border: 1px solid #222;
transition: border-color .1s
}
.sc-button-active:not(.sc-button-nostyle):not(:hover):not(.sc-button-transparent):not(.sc-button-like):not(.sc-button-repost):not(.sc-button-more):not(.addToPlaylistButton):not(.sc-button-queue):not(.imageEditDropdownButton):not(.sc-button-dropdown):not(.sc-button-queue):not(.createPlaylistSuggestion__add):not(.hintButton):not(.sc-button-privacy):not(.sc-button-delete):not(.sc-button-icon),
.sc-button-selected:not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(:hover):not(.sc-button-transparent):not(.sc-button-like):not(.sc-button-repost):not(.addToPlaylistButton):not(.playbackSoundBadge__follow):not(.sc-button-queue):not(.createPlaylistSuggestion__add):not(.hintButton):not(.sc-button-dropdown):not(.sc-button-privacy):not(.sc-button-delete):not(.sc-button-icon) {
border-color: var(--shd-bg-lighter);
/*background: #111;*/
border: 0;
border-radius: 120px;
background: var(--shd-accent-primary) !important;
box-shadow: inset -1px -2px 8px #f40c;
color: #fff !important;
padding: 0 15px;
transition-duration: 0.5s;
filter: hue-rotate(/*[[hue]]*/deg);
}
.sc-button-active:not(.sc-button-nostyle):not(:hover):not(.sc-button-transparent):not(.sc-button-like):not(.sc-button-repost):not(.sc-button-more):not(.addToPlaylistButton):not(.sc-button-queue):not(.imageEditDropdownButton):not(.sc-button-dropdown):not(.sc-button-queue):not(.createPlaylistSuggestion__add):not(.hintButton):not(.sc-button-privacy):not(.sc-button-delete):not(.sc-button-icon),
.sc-button-selected:not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.sc-button-transparent):not(.sc-button-like):not(.sc-button-repost):not(.addToPlaylistButton):not(.playbackSoundBadge__follow):not(.sc-button-queue):not(.createPlaylistSuggestion__add):not(.hintButton):not(.sc-button-dropdown):not(.sc-button-privacy):not(.sc-button-delete):not(.sc-button-icon) {
border-color: #fff;
border: 0;
border-radius: 120px;
background: var(--shd-accent-primary) !important;
box-shadow: inset -1px -2px 8px #f40c;
color: #fff !important;
padding: 0 15px;
transition-duration: 0.2s;
filter: hue-rotate(/*[[hue]]*/deg);
}
.sc-button-selected:not(.sc-button-like):not(.sc-button-repost):not(.playbackSoundBadge__follow):not(.sc-button-queue):not(.m-boldIcon):not(.sc-button-privacy):before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICA8cGF0aCBmaWxsPSJyZ2IoMjU1LCAyNTUsIDI1NSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNTQyIDEuMTY3YzIuMTA3IDAgMi43OTUgMi4yNDYgMS42MSA1LjMzMi0uNDQ0Ljc5My4wMyAxLjIxMS4zMjIgMS4zMzIgMi4wMjYuODM2IDIuODc1IDIuMjEzIDMuMDI2IDMuODM2di41ODNILjU4M3YtLjU4M2MuMTUxLTEuNjIzIDEtMyAzLjAyNi0zLjgzNi4yOTItLjEyLjc2Ni0uNTQuMzIyLTEuMzMxLTEuMTg0LTMuMDk1LS40OTctNS4zMzMgMS42MS01LjMzM3pNMTMuNDcgMy4xOGwuMDU4LjA1LjIzLjIyOGEuNDE1LjQxNSAwIDAgMSAuMDU3LjUyNmwtLjA1My4wNjUtMi43MTQgMi43MTRhLjQwOS40MDkgMCAwIDEtLjUuMDY2bC0uMDQ1LS4wMy0uMDQzLS4wMzgtMS40NzItMS40NzJhLjQyMi40MjIgMCAwIDEtLjA1MS0uNTI3bC4wNTQtLjA2Ni4yMjktLjIzYS40MTUuNDE1IDAgMCAxIC41MjgtLjA1NWwuMDY1LjA1My45NDIuOTQzIDIuMTgyLTIuMTgzYS40MS40MSAwIDAgMSAuNTMzLS4wNDR6Ii8+Cjwvc3ZnPgo=) !important;
}
.sc-button-selected:not(.sc-button-like):not(.sc-button-repost):not(.playbackSoundBadge__follow):not(.sc-button-queue):before {
filter: invert(0)!important
}
.chartsMain_listHeader, .sc-classic .chartsMain_listHeader,
.collection.m-overview .collection__section:not(:last-child), .sc-classic .collection.m-overview .collection__section:not(:last-child),
.g-form-section-head, .sc-classic .g-form-section-head,
.g-modal-title-h1, .sc-classic .g-modal-title-h1,
.g-tabs, .sc-classic .g-tabs,
.mixedSelectionModule, .sc-classic .mixedSelectionModule,
.sc-border-dark-bottom, .sc-classic .sc-border-dark-bottom,
.sc-border-light-bottom, .sc-classic .sc-border-light-bottom,
.searchTitle__text, .sc-classic .searchTitle__text,
.selectionModule, .sc-classic .selectionModule,
.statsOverview__main:before, .sc-classic .statsOverview__main:before,
.statsOverview__top:before, .sc-classic .statsOverview__top:before,
.sc-classic .velvetCakeModule {
border-bottom-color: #181818
}
.collection.m-overview .collection__section:not(:last-child) {
margin-bottom: 10px
}
.collection__oneRowSection {
min-height: unset
}
.mixedSelectionModule, .sc-classic .mixedSelectionModule, .sc-classic .velvetCakeModule {
margin-bottom: 20px
}
.selectionPlaylistBanner {
height: 415px
}
.selectionPlaylistBanner {
background: linear-gradient(to right, #1d0101, #200122)
}
.queue__scrollableInner.g-scrollable-inner, .sc-classic .queue__scrollableInner.g-scrollable-inner {
background: 0 0
}
.l-fluid-fixed .l-main, .sc-classic .l-fluid-fixed .l-main {
padding: 15px 15px 0 0
}
.l-fluid-fixed .l-sidebar-right {
/*top: 15px*/
top: 0;
}
.g-tabs-link:focus,
.g-tabs-link:hover {
border-color: var(--shd-accent-primary)
}
.paging-eof:before, .sc-classic .paging-eof:before {
display: none
}
.playbackSoundBadge .playbackSoundBadge__like {
background: #131313
}
.playControls .g-z-index-control-bar .m-visible,
.playControls.m-visible .playControls__inner {
z-index: 9999
}
.l-sidebar-right:first-child[style] {
top: 15px!important
}
.l-footer.standard {
padding: 0;
font-size: 10px;
z-index: 1;
top: -15px
}
.playControls:not(.m-queueVisible) {
z-index: 9999;
overflow-x: visible;
}
.dialog {
z-index: 9999999;
background: var(--shd-bg-primary);
box-shadow: 0 0 15px #000
}
a.sc-link-dark,
a.sc-link-medium {
color: #eee
}
a.sc-link-dark:hover,
a.sc-link-medium:hover {
color: #fff
}
.soundList__item {
margin-bottom: 12px
}
.sound.streamContext .commentForm.visible.m-small {
margin-top: 20px
}
.visualSound .visuals::after {
transition: opacity .3s ease-in-out;
opacity: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8) 100%)
}
.visualSound.playing.focused .visuals::after {
opacity: 1;
}
.sc-tag,
.artistConnectSoundBadge__tag>.sc-tag.sc-tag-small,
.sc-tag:visited {
color: #ccc!important;
background: #2d2d2d;
box-shadow: inset 0 0 2px #000;
border: none
}
.sc-tag:hover {
background: #222!important;
}
.queueItemView.m-active,
.queueItemView:hover a.sc-link-light:hover,
.queue__title,
.sc-ministats,
.sc-classic .queueItemView.m-active,
.sc-classic .queueItemView:hover a.sc-link-light:hover,
.sc-classic .queue__title,
.sc-classic .sc-ministats {
color: #fff
}
.queueFallback__stationMode,
.queue__panel,
.sc-classic .queueFallback__stationMode,
.sc-classic .queue__panel {
border-color: #333
}
.backgroundGradient__buffer[style] {
/*background: #200122!important;
background: -webkit-linear-gradient(to right, #1d0101, #200122)!important;
background: linear-gradient(to right, #1d0101, #200122)!important*/
filter: saturate(2) contrast(0.75) brightness(0.5);
}
/* brighten buttons */
.sc-button-queue:before,
.sc-button-small.sc-button-cta.sc-button-follow:before,
.sc-button-medium.sc-button-delete:before,
.sc-button-report:before {
filter: brightness(7.5)
}
/*.gritter-close,*/
.queueItemView__more.sc-button-small.sc-button-more,
.queueItemView__remove.sc-button-small.sc-button-icon:not(.sc-button-stretch-icon),
.queue__hide,
.queue__hide:focus,
.queue__hide:hover,
.quotaMeter__dropdownButton:after,
.sc-ministats-small.sc-ministats-sounds:not(.sc-ministats-inverted):before,
.sc-button-small.sc-button-download:before,
.sc-button-small.sc-button-upload:before,
.sc-button-medium.sc-button-camera:before,
.sc-button-medium.sc-button-repost:before,
.sc-button-medium.sc-button-mastering:before,
.sc-button-medium.sc-button-share:before,
.sc-button-medium.sc-button-copylink:before,
.sc-button-medium.sc-button-upload:before,
.sc-button-medium.sc-button-edit:before,
.sc-button-medium.sc-button-distribute:before,
.sc-button-medium.sc-button-more:not(.sc-button-active):before,
.sc-button-medium.sc-button-message:before,
.sc-button-medium.sc-button-startstation:before,
.sc-button-medium.sc-button-download:before,
.sc-button-small.sc-button-follow:before {
filter: invert(1)
}
.playControls__queue,
.sc-classic .playControls__queue {
bottom: 100px;
right: unset;
left: 240px
}
.queue__fallback.queue__itemWrapper,
.sc-classic .queue__fallback.queue__itemWrapper {
height: 70px;
padding-top: 67px
}
.queue__itemsHeight,
.sc-classic .queue__itemsHeight {
background: 0 0
}
.queueItemView,
.queue__fallback.queue__itemWrapper,
.sc-classic .queueItemView,
.sc-classic .queue__fallback.queue__itemWrapper {
background: #151515f3
}
.queue__panel,
.sc-classic .queue__panel {
background: #151515
}
.queueItemView.m-active,
.queueItemView:hover,
.sc-classic .queueItemView.m-active,
.sc-classic .queueItemView:hover {
background: var(--shd-bg-darker);
box-shadow: 0 0 5px var(--shd-bg-primary)
}
.g-z-index-header-menu {
z-index: 11000
}
a.playableTile__heading,
a.playableTile__heading:hover,
.sc-classic .playableTile__mainHeading,
.sc-classic .playableTile__mainHeading:hover {
font-size: 14px
}
.linkMenu, .sc-classic .linkMenu {
box-shadow: 0 1px 8px var(--shd-bg-darker);
background: var(--shd-bg-primary);
border: 1px solid #3338;
border-radius: 4px;
}
.sc-button-dropdown:focus:not(.sc-button-disabled):not(:disabled) {
box-shadow: 0 0 2px 1px #ccc6;
}
.modal.modalWhiteout, .sc-classic .modal.modalWhiteout {
background: hsla(0, 0%, 0%, .9)
}
.g-modal-section, .sc-classic .g-modal-section,
.tabs__headingContainer, .tabs__tabs, .sc-classic .tabs__headingContainer, .sc-classic .tabs__tabs {
background: var(--shd-bg-darker)
}
.embedPanel__tabLink,
.embedPanel__upsellTabLink {
background: inherit
}
.composeMessage__bottomWrapper, .sc-classic .composeMessage__bottomWrapper {
border: 0
}
.sc-classic .conversation__form {
border-top: 1px dashed #4448;
}
.userNetwork {
margin: 40px 15px 15px
}
.sc-classic .l-fixed-top-one-column > .l-top {
background: var(--shd-bg-primary);
top: 0;
width: calc(100% - 235px)
}
.l-one-column > .l-main {
padding: 30px 15px 15px
}
.stationHeader {
height: 560px
}
.coverFlow__item {
margin-top: 30px
}
.stationHeader__tracks {
bottom: 360px
}
.stationCoverFlow.g-box-full .playableTile {
width: unset
}
.compactTrackListItem.clickToPlay.active,
.compactTrackListItem.clickToPlay:focus,
.compactTrackListItem.clickToPlay:hover {
background: var(--shd-bg-darker);
color: #999
}
.compactTrackListItem.clickToPlay.active .compactTrackListItem__additional,
.compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional,
.compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
background: 0
}
.profileUploadFooter {
background: inherit;
padding-bottom: 100px
}
.inboxItem.active, .inboxItem.unread, .inboxItem:focus, .inboxItem:hover, .inbox__item:before,
.sc-classic .inboxItem.active, .sc-classic .inboxItem.unread, .sc-classic .inboxItem:focus, .sc-classic .inboxItem:hover, .sc-classic .inbox__item:before, /* v0.9.161 */
.modal__modal/*:not(#overlay_634 .modal__modal)*/,
.sc-button-disabled,
.sc-button-disabled:focus,
.sc-button-disabled:hover,
.sc-button.sc-pending,
.sc-button.sc-pending:focus,
.sc-button.sc-pending:hover,
.sc-button:disabled,
.sc-button:disabled:hover {
background: var(--shd-bg-darker)
}
.suggestedUserList__item {
width: 10%
}
.conversation__actions, .sc-classic .conversation__actions {
width: calc(100% - 245px);
height: 55px;
background: var(--shd-bg-primary);
padding-top: 15px;
padding-left: 0;
margin-left: 0;
box-shadow: none;
}
.sc-classic .conversationActions__userActions, .conversationActions__userActions, .conversationActions__buttons {
margin: 0px 15px;
}
.sc-classic .l-messages-left, .l-messages-left {
width: 220px;
top: 410px;
left: 10px;
bottom: 95px;
z-index: 1000
}
.sc-classic .l-messages-main, .l-messages-main {
padding: 0 15px;
margin-bottom: 90px;
}
.conversationParticipant {
font-size: 32px;
color: #fff
}
.sc-classic .conversation__messages, .conversation__messages {
padding-right: 15px;
padding-top: 72px;
}
.dropdownMenu.g-z-index-content[style] {
background: var(--shd-bg-primary);
}
.ownActivity.large .ownActivity__user {
width: 100%;
border: none
}
.ownActivity.large .ownActivity__action,
.ownActivity.large .ownActivity__additional {
right: 120px
}
.readMoreTile__countWrapper {
background: var(--shd-bg-primary)
}
.localeSelectorContent, .sc-classic .localeSelectorContent {
background: var(--shd-bg-darker)
}
.fullHero {
background: linear-gradient(to right, #1d0101, #200122)!important
}
.queue,
.sc-classic .queue {
background: 0 0;
box-shadow: 0 0 15px #0a0a0a
}
.sc-button .collectionSection__action {
position: absolute;
right: 100px
}
.trackItem:active, .trackItem:hover,
.trackItem.active, .trackItem.hover,
.sc-classic .trackItem.active, .sc-classic .trackItem.hover {
background-color: var(--shd-bg-darker);
}
.trackItem:not(.m-disabled).active .trackItem__additional, .trackItem:not(.m-disabled).hover .trackItem__additional,
.sc-classic .trackItem:not(.m-disabled).active .trackItem__additional, .sc-classic .trackItem:not(.m-disabled).hover .trackItem__additional {
background: #f2f2f2;
background: linear-gradient(90deg,#0d0d0d0d,#0d0d0d 17px);
right: 12px;
}
.gritter-item-wrapper {
background: #222;
color: #fff;
border: none;
box-shadow: 0 0 5px #000
}
.queueItemView:hover.m-active,
.uploadMain__chooserContainer,
.uploadMain__foot {
background: #131313;
border: 1px solid #1d1d1d!important
}
/* .removeFromNextUp {
filter: invert(1) brightness(2.2)
}
.removeFromNextUp:hover {
filter: none
} */
.sc-button-medium.sc-button-like:before/*,
.sc-toggle:not(.toggleFormControl__toggle),
.sc-toggle:not(.toggleFormControl__toggle):before*/ {
filter: invert(1)
}
/*.queueFallback__toggle .sc-toggle, .queueFallback__toggle .sc-toggle:before {
filter: none;
}*/
.searchOptions__scrollable {
width: 220px!important;
height: 465px!important
}
.header__left {
position: absolute;
top: 160px;
width: 100%
}
.header__middle {
position: absolute;
top: 340px;
width: 98%
}
.header__right {
position: absolute;
top: 65px;
width: 90%
}
.header__logo {
position: absolute;
top: -150px;
width: 100%
}
.sc-classic .header__link.uploadButton:not(.sc-classic .header__link.header__goUpsell, .sc-classic .header__link.header__goUpsell_side_by_side_experience, .sc-classic .header__link.header__proUpsell_side_by_side_experience) { /* center upload text dynamically for other languages */
justify-content: center;
align-items: center;
display: flex;
padding: 0;
text-align: center;
float: none;
height: 100%;
}
.sc-classic .uploadButton, .uploadButton {
transition-duration: 0.2s;
transition-property: background-color, box-shadow, filter;
}
.sc-classic .uploadButton.selected, .uploadButton.selected {
background: var(--shd-bg-translucent);
border-radius: 8px;
box-shadow: inset 0 6px 16px #0009;
filter: brightness(.5);
transition-duration: 0.1s;
}
.uploadButton__title {
width: 69px;
transition: color 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header__soundInput > .uploadButton.selected .uploadButton__title, .header__soundInput:hover .uploadButton__title {
color: #fff;
}
.sc-classic .header__link.header__goUpsell, .sc-classic .header__link.header__goUpsell_side_by_side_experience, .sc-classic .header__link.header__proUpsell_side_by_side_experience {
/*[[gopro]]*/
padding: 4px;
transform: translateY(317px);
opacity: 0.8;
transition-property: color, opacity;
}
.sc-classic .header__link.header__goUpsell:active, .sc-classic .header__link.header__goUpsell:focus, .sc-classic .header__link.header__goUpsell:hover, .sc-classic .header__link.header__goUpsell_side_by_side_experience:active, .sc-classic .header__link.header__goUpsell_side_by_side_experience:focus, .sc-classic .header__link.header__goUpsell_side_by_side_experience:hover, .sc-classic .header__link.header__proUpsell_side_by_side_experience:active, .sc-classic .header__link.header__proUpsell_side_by_side_experience:focus, .sc-classic .header__link.header__proUpsell_side_by_side_experience:hover {
opacity: 1;
}
.sc-classic .header__link.header__goUpsell:nth-of-type(2), .sc-classic .header__link.header__goUpsell_side_by_side_experience:nth-of-type(2), .sc-classic .header__link.header__proUpsell_side_by_side_experience:nth-of-type(2) {
float: right;
}
.sc-background-white {
background: var(--shd-bg-primary)
}
.accountConnectionControl__displayName,
.accountEmailsControl__list,
.accountSettings__accountInfo,
.accountSocialItem__name,
.sc-select,
.settingsMain,
.settingsMain input,
.uploadMain__hqNote {
color: #ccc
}
.notificationsPreferences__table .sc-border-light-bottom {
border-bottom: 1px solid #ccc
}
.statsOverview {
margin: 15px
}
.sc-button-selected.sc-button-medium.sc-button-like:before {
filter: none
}
.sc-classic .image__whiteOutline .image__full,
.image__whiteOutline .image__full {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
.sc-classic .inbox__listWrapper, .inbox__listWrapper {
top: 100px;
bottom: 0
}
.sc-classic .inbox .send-message-button, .inbox .send-message-button {
margin-top: 15px
}
.header__goUpsell,
.header__proUpsell {
z-index: 501;
font-size: 10px;
color: #777!important;
position: absolute;
top: 35px;
left: -2px;
padding: 0 10px
}
.emptyNetworkPage.emptyReposts .emptyNetworkPage__image {
filter: invert(1)
}
.sc-button-active.sc-button-queue:before,
.sc-button-selected.sc-button-medium.sc-button-repost:before,
.sc-button-selected.sc-button-queue:before {
filter: brightness(1)
}
#app .l-container #content .sc-button-small.sc-button-active.sc-button-more:before,
#app .l-container #content .sc-button-small.sc-button-selected.sc-button-more:before {
filter: invert(0)!important
}
.sc-button-small.sc-button-icon:not(.sc-button-stretch-icon),
.sc-button-small.sc-button-responsive:not(.sc-button-stretch-icon) {
background: initial
}
.playableTile__actions {
z-index: 100
}
.sc-button-medium.sc-button-addtoset:before {
filter: brightness(10)
}
.tileGallery {
margin: 0 auto;
width: 90%
}
.tileGallery .playableTile {
width: 150px
}
.queue__itemWrapper,
.sc-classic .queue__itemWrapper {
background: #fff0
}
.featuredProfiles {
background: #0000
}
.dropdownMenu.g-z-index-overlay {
z-index: 9999
}
.soundTitle__title.sc-font.g-type-shrinkwrap-inline.g-type-shrinkwrap-large-primary span {
font-size: 20px
}
#app .l-container #content .soundTitle__usernameTitleContainer .soundTitle__username.g-opacity-transition-500.g-type-shrinkwrap-inline.g-type-shrinkwrap-large-secondary.soundTitle__usernameHero.sc-type-medium {
font-size: 14px
}
.playControls.m-queueVisible.m-visible .playControls__queue {
border: 1px solid #6668;
}
.spotlight h3, .userstream__header h3 {
font-size: 20px
}
.userNetworkComments__item.sc-border-light-top {
border-top: 1px solid #333
}
.userNetworkComments__item .commentBadge__body {
color: #ccc;
font-size: 16px;
margin: 10px 35px
}
.emptyNetworkPage__image {
filter: invert(1) brightness(1.5) drop-shadow(2px 2px 0 var(--shd-bg-darker))
}
.backgroundGradient.m-imageOverlay .backgroundGradient__imageOverlay {
filter: blur(15px) brightness(.3);
transform: none
}
.sc-button-small.sc-button-selected.sc-button-follow:before {
filter: invert(0) brightness(.5)
}
.headerImageEditDropdown {
background: #000
}
.headerImageEditDropdown__button {
color: #fff
}
.headerImageEditDropdown__button:focus,
.headerImageEditDropdown__button:hover {
color: var(--shd-accent-primary);
background: #000;
outline: 0
}
.sc-button.sc-button-translucent.sc-button-active:not(.sc-button-cta),
.sc-button.sc-button-translucent:not(.sc-button-cta):focus,
.sc-button.sc-button-translucent:not(.sc-button-cta):hover {
background: #000;
color: var(--shd-accent-primary)
}
.activeUpload__form,
.activeUpload__hqNote,
.activeUpload__shareContainer,
.editAccessTab__quietTeaser.g-upsell-container,
.quotaMeterWrapper,
.statsOverview__separator,
.tokenInput__wrapper.tagInput__wrapper.sc-input.sc-input-medium,
.trackManager__upsellWrapper,
.sc-classic .activeUpload__form,
.sc-classic .activeUpload__hqNote,
.sc-classic .activeUpload__shareContainer,
.sc-classic .editAccessTab__quietTeaser.g-upsell-container,
.sc-classic .quotaMeterWrapper,
.sc-classic .statsOverview__separator,
.sc-classic .tokenInput__wrapper.tagInput__wrapper.sc-input.sc-input-medium,
.sc-classic .trackManager__upsellWrapper {
background: var(--shd-bg-primary)
}
.activeUpload__savedFieldsSharingContainer,
.activeUpload__shareContainer input,
.dialog__content div,
.quotaMeter__percentage,
.soundEditTabs,
.soundEditTabs input,
.statsOverview__titleRow.g-flex-row-centered-spread,
.statsOverview__titleRow.g-flex-row-centered-spread input,
.statsSummary.g-flex-row-centered {
color: #ccc
}
.quotaMeter__background.sc-background-dark {
background: #321100
}
.quotaMeter__minutesUsed[style] {
background: var(--shd-accent-primary)!important
}
.quotaMeter__link {
color: gray!important
}
.soundBadge.active:not(.compact),
.soundBadge.hover:not(.compact),
.soundBadge.selected:not(.compact),
.soundBadge:hover:not(.compact),
.sc-classic .soundBadge.active:not(.compact),
.sc-classic .soundBadge.hover:not(.compact),
.sc-classic .soundBadge.selected:not(.compact),
.sc-classic .soundBadge:hover:not(.compact),
.topStats__wrapperEligible:focus,
.topStats__wrapperEligible:hover,
.uploadTarget__frame,
.sc-classic .uploadTarget__frame{
background: var(--shd-bg-darker)
}
.sc-classic .uploadTarget__frame {
border-radius: 12px;
border: 1px solid #4448;
}
.sc-classic .uploadTarget.entered .uploadTarget__title {
color: #ccc;
border: 2px dashed #4448;
border-radius: 8px;
}
.topStatsModule__header.l-container.sc-background-light .g-flex-row-spread {
padding: 20px
}
.tokenInput__wrapper.tagInput__wrapper.sc-input.sc-input-large,
.topStatsModule__item,
.topStatsModule__item:last-child,
.topStatsModule__upsell.sc-border-dark.sc-background-white.sc-type-small {
border-color: #1d1d1d;
background: #131313
}
.topStatsItemPlaceholder__text {
filter: invert(.95)
}
.statsOverview__main.l-container {
border: 1px solid #1d1d1d;
background: #131313;
padding: 15px!important;
margin-top: 15px!important
}
.userStatsLegend.sc-border-dark-top {
border-color: #1d1d1d
}
.topStatsList__emptyText,
.topStatsList__upsell {
-webkit-flex-grow: 1.2;
flex-grow: 1.2
}
.statsChartHeader__count.sc-type-medium {
color: #ccc;
font-size: 20px
}
.commentBadgeList__item.sc-border-light-top,
.conversationMessage__from.sc-type-h3.sc-truncate,
.dateSelectStats.g-flex-row input,
.g-flex-row-centered-spread,
.newMessageForm.sc-clearfix,
.newMessageForm.sc-clearfix input,
.quotaMeter__boldLine,
.sc-font-light.medium.profileUploadFooter__text,
.soundBadge__extraItem.soundBadge__duration,
.statsEmptyGraphTips.sc-type-large.sc-text,
.topStatsFullItem__text.sc-type-large.sc-truncate,
.topStatsHeader__title.g-modal-title-h1,
.topStatsModule__upsell.sc-border-dark.sc-background-white.sc-type-small,
.uploadMain__content {
color: #ccc
}
.stats__xAxis text, .sc-classic .stats__xAxis text {
fill: #fff
}
.commentBadge__body {
padding-left: 15px;
padding-top: 5px;
padding-bottom: 10px
}
.sc-button-medium.sc-button-pageleft:before,
.sc-button-medium.sc-button-pageright:before {
filter: invert(1)
}
.recipientChooser .tokenInput__wrapper, .sc-classic .recipientChooser .tokenInput__wrapper {
background: 0 0
}
.quotaMeterWrapper.sc-border-light {
border: 1px solid #1d1d1d!important;
background: #131313
}
/*.dashbox,*/
.statsBadge .statsBadge__upsell.sc-border-light-top {
display: none
}
.tokenInput__token, .sc-classic .tokenInput__token {
background: var(--shd-bg-dropdown);
border: 1px solid #4448;
}
.spotlight__item {
padding: 0
}
.conversation__form {
padding-left: 5px
}
.sidebarHeader.g-flex-row-centered-spread.sc-link-light.sc-border-light-bottom {
border-bottom: 1px solid #181818
}
.userSuggestionList__item {
padding: 5px 0
}
.historicalPlays.m-soundBadge .historicalPlays__item,
.soundBadgeList.compact .soundBadgeList__item {
padding: 3px 0
}
.sidebarContent[style] {
min-height: unset!important
}
.sidebarModule {
margin-bottom: 15px
}
.statsBadge__recent {
margin: 0
}
.l-fluid-fixed .l-sidebar-right .l-footer {
top: 0;
padding-bottom: 95px
}
.l-front {
position: relative;
margin: auto!important;
width: 85%;
color: #fff
}
.frontMobileTeaser__device {
filter: invert(.982) hue-rotate(180deg);
}
.frontMobileTeaser {
background: var(--shd-bg-primary);
}
.header__loginMenu {
padding: 16px 6px 2px;
}
.header__loginMenu .loginButton {
margin-right: 5px;
}
.header__loginMenu .signupButton {
margin-left: 5px;
}
.g-opacity-transition.sc-button.sc-button-medium.loginButton {
border-color: #666!important;
background-color: transparent!important;
color: #fff!important
}
.uploadLoggedOut__testimonials {
background-color: var(--shd-bg-primary)!important
}
a.soundActions__purchaseLink {
color: #ccc!important;
font-size: 1em;
top: 1.5px;
transition: color 0.25s;
}
a.soundActions__purchaseLink:hover {
color: #fff!important;
transition: color 0.25s;
}
/*----------------------------------------------------------------- IMPORT QUITE DARK (https://33kk.github.io/uso-archive/?style=143738) -----------------------------------------------------------------*/
/* Snippets from 'SoundCloud - Quite Dark' by pawelos076232: userstyles.org/styles/143738 */
.g-dark-bg,
.g-dark-list,
.unreadConversations,
.profileMenu__list {
background-color: #222
}
.sc-classic .headerMenu.m-light, .headerMenu.m-light { /*modified*/
background-color: var(--shd-bg-primary);
border-color: #333;
transition-duration: 1s;
box-shadow: none;
}
.m-light .headerMenu__link:focus,
.m-light .headerMenu__link:hover,
.sc-classic .m-light .headerMenu__link:focus,
.sc-classic .m-light .headerMenu__link:hover {
background-color: #0d0d0d80;
transition-duration: 0.25s;
box-shadow: 16px -4px 12px #1114 inset;
}
.m-light .headerMenu__link, /*unmodified*/
.m-light .headerMenu__link:focus,
.m-light .headerMenu__link:hover,
.sc-classic .m-light .headerMenu__link,
.sc-classic .m-light .headerMenu__link:focus,
.sc-classic .m-light .headerMenu__link:hover {
color: #ccc
}
.m-light a[class*="profileMenu__"]:after {
filter: invert(1)
}
.m-light .headerMenu__list, .sc-classic .m-light .headerMenu__list {
border-color: #1c1c1c
}
.dropdownContent__container {
background-color: var(--shd-bg-primary);
border-color: #333
}
.dropdownContent__listItem,
.dropdownContent__header,
.dropdownContent__main,
.sc-classic .dropdownContent__listItem,
.sc-classic .dropdownContent__header,
.sc-classic .dropdownContent__main {
border-bottom-color: #6664
}
.notificationBadge__link:focus {
border-color: #333
}
.sc-classic .blockCheckbox.m-disabled {
color: #666;
}
.sc-classic .notificationBadge__main, .notificationBadge__main,
.sc-classic .blockCheckbox.m-disabled .blockCheckbox__title,
.sc-classic .blockCheckbox,
.sc-classic .radioGroup .radioGroup__sublabel,
.sc-classic .availabilityRadioGroup.radioGroup.vertical .radioGroup__sublabel {
color: #999
}
/*.header__navMenu > li > a.selected,
.header > li > a:focus,
.userNav__item.selected,
.userNav__button.selected,
.header__navMenu > li > a.header__moreButton.selected {
background-color: #222
}*/
body,
textarea,
select,
button,
input,
.sc-text,
a:hover,
a.sc-ministats:hover,
a.sc-link-dark,
a.sc-link-light:hover,
.sc-buylink,
.sc-buylink:visited,
.commentPopover.darkText .commentPopover__body,
.moreActions__group .moreActions__link,
.blockCheckbox__title,
.truncatedAudioInfo__collapse:focus,
.statsBadge__upsell-text > span,
.localeSelector__body,
.localeSelectorContent__link:hover,
.sc-button-nostyle,
.commentBadge:hover .commentBadge__title a,
.sc-classic textarea,
.sc-classic select,
.sc-classic button,
.sc-classic input,
.sc-classic .sc-text,
.sc-classic a:hover,
.sc-classic a.sc-ministats:hover,
.sc-classic a.sc-link-dark,
.sc-classic a.sc-link-light:hover,
.sc-classic .sc-buylink,
.sc-classic .sc-buylink:visited,
.sc-classic .commentPopover.darkText .commentPopover__body,
.sc-classic .moreActions__group .moreActions__link,
.sc-classic .blockCheckbox__title,
.sc-classic .truncatedAudioInfo__collapse:focus,
.sc-classic .statsBadge__upsell-text > span,
.sc-classic .localeSelector__body,
.sc-classic .localeSelectorContent__link:hover,
.sc-classic .sc-button-nostyle,
.sc-classic .commentBadge:hover .commentBadge__title a,
.sc-classic ._10BTeIqCrlRC9qFdVckf7v:hover, .sc-classic ._1PFHeR8bDiS4o1IWHAwVDu:disabled{
color: #ccc
}
a.sc-link-dark:hover,
a.sc-link-medium:hover,
.sc-buylink:hover {
color: white
}
/*--------------------------- BEGIN CUSTOM STYLING ---------------------------*/
.g-z-index-header-menu[style] {
border-radius: 32px!important;
border: none!important;
}
/*.sc-button-icon-light {
border: 0!important;
border-radius: 120px;
background: #0AF!important;
color: #000!important;
font-weight: bold;
padding: 0 15px!important;
filter: invert(1)brightness(105%)contrast(150%)hue-rotate(-20deg)!important;
}*/
.sc-classic .activitiesListFull__item + .activitiesListFull__item {
border-top: 1px solid var(--shd-bg-lighter);
}
.sc-classic .notificationBadge__link:focus:after {
border-bottom: 1px solid var(--button-secondary-background-color);
border-top: 1px solid var(--button-secondary-background-color);
}
.sc-classic .activitiesListFull {
margin-bottom: 80px;
}
a.sc-link-verylight, .localeSelector {
color: #ccc!important;
transition-duration: 0.25s
}
.localeSelector > .sc-text {
color: #999;
transition-duration: 0.25s
}
a.sc-link-verylight:hover, .localeSelector:hover {
color: #fff!important;
transition-duration: 0.25s
}
.localeSelector > .sc-text:hover {
color: #ccc;
transition-duration: 0.25s
}
.notificationBadge--unread {
background: linear-gradient(220deg, rgb(255 0 35 / 15%) 0%, rgb(255 0 141 / 0.05) 30%, #1110 75%)!important;
}
.notificationBadge__link:hover {
box-shadow: 12px 8px 18px #000c;
transition-duration: 0.25s;
}
.notificationBadge__link {
transition-duration: 1s;
}
.latestActivities__container:hover, .unreadConversations__container:hover, .profileMenu:hover, .moreMenu:hover, .dialog:hover {
box-shadow: 2px 1px 16px #000;
transition: top 0s, left 0s, box-shadow 0.25s;
}
.latestActivities__container, .unreadConversations__container, .profileMenu, .moreMenu, .dialog {
box-shadow: 8px 4px 32px #000a;
transition: top 0s, left 0s, box-shadow 1s;
}
.visualSound.listenContext .visualSound__wrapper {
background: var(--shd-bg-primary);
}
/* queue and dropdowns */
.sc-classic .dropdownContent__container, .dropdownContent__container, .sc-classic .headerMenu.m-light, .headerMenu.m-light, .sc-classic .dialog, .dialog, .playControls__queue, .sc-classic .playControls__queue {
border-radius: 12px;
border: 1px solid #4448;
background-color: var(--shd-bg-dropdown);
backdrop-filter: blur(32px);
}
.sc-classic .m-light .headerMenu__list:first-child li:first-child .headerMenu__link {
border-radius: 12px 12px 0 0;
}
.sc-classic .m-light .headerMenu__list:last-child li:last-child .headerMenu__link {
border-radius: 0 0 12px 12px;
}
.dropdownContent__listItem:hover, .queueItemView:hover {
box-shadow: inset 6px -4px 64px #0006;
}
.dropdownContent__listItem, .dropdownContent__listItem:hover, .queueItemView, .queueItemView:hover {
transition: box-shadow ease-out 0.3s;
}
.playbackSoundBadge__like.sc-button-small.sc-button-icon:before, .playbackSoundBadge__like.sc-button-small.sc-button-icon:not(.sc-button-selected):hover:before, .playbackSoundBadge__follow:before, .playbackSoundBadge__follow:hover:before {
filter: invert(1) hue-rotate(180deg) contrast(1.5);
transition-duration: 0.25s;
}
.playbackSoundBadge__like.sc-button-small.sc-button-icon:not(.sc-button-selected):before, .playbackSoundBadge__follow:before {
filter: invert(1) hue-rotate(180deg) contrast(1.5) brightness(0.7);
transition-duration: 0.25s;
}
.playbackSoundBadge__showQueue, .playbackSoundBadge__showQueue:not(.sc-button-selected):hover, .m-queueVisible .playbackSoundBadge__actions .playbackSoundBadge__showQueue:not(.sc-button-selected) {
filter: invert(1) hue-rotate(180deg) contrast(1.5) hue-rotate(/*[[hue]]*/deg) var(--fil);
transition-duration: 0.25s;
}
.playbackSoundBadge__showQueue:not(.sc-button-selected) {
filter: invert(1) hue-rotate(180deg) contrast(1.5) brightness(0.7);
transition-duration: 0.25s;
}
.queue__panel, .queueItemView, .queue__fallback.queue__itemWrapper,
.sc-classic .queue__panel, .sc-classic .queueItemView, .sc-classic .queue__fallback.queue__itemWrapper {
background-color: inherit;
}
.queueItemView.m-active, .queueItemView:hover {
background-color: #1114!important;
}
.queueItemView.m-active, .queueItemView:hover, .queueItemView {
transition: box-shadow ease-out 0.3s, background-color ease-out 0.3s;
}
.queueItemView:hover.m-active, .uploadMain__chooserContainer, .uploadMain__foot {
background-color: #1116!important;
border: none!important;
}
.queueItemView__username {
color: #ccc!important;
}
.queueItemView__title a {
color: #fff!important;
}
/* .moreActions .moreActions__button.sc-button-medium.sc-button-like:before {
filter: invert(1) brightness(0.5);
} */
.sc-button-follow:not(.sc-button-nostyle):not(.sc-button-transparent):not(.playbackSoundBadge__follow):hover {
background: var(--shd-accent-secondary) !important;
transition-duration: 0.25s;
}
.sc-button-follow:not(.sc-button-nostyle):not(.sc-button-transparent):not(.playbackSoundBadge__follow) {
border-color: var(--shd-bg-lighter);
border: 0;
border-radius: 120px;
background: var(--shd-accent-primary) !important;
color: #fff !important;
padding: 0 15px;
transition-duration: 0.25s;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.audibleAttributeDesc, .listenInfo__releaseTitle, .listenInfo__releaseData {
color: #b3b3b3;
}
.playButton.m-stretch {
transition-duration: 1s
}
.playButton.m-stretch:hover {
filter: drop-shadow(2px 2px 6px #000);
transition-duration: 0.25s
}
.sc-button-small.sc-button-follow.sc-button-icon-light:before {
filter: invert(0);
}
.featuredProfiles {
z-index: 10;
border-radius: 12px;
backdrop-filter: blur(12px);
transition-duration: 0.4s;
-webkit-transform: translateY(-220px);
transform: translateY(-220px);
}
.featuredProfiles:hover {
backdrop-filter: blur(12px);
transition-duration: 0.2s
}
.modal.modalWhiteout {
backdrop-filter: blur(12px);
}
.g-tabs-link, .g-tabs-link:visited, .sc-classic .g-tabs-link, .sc-classic .g-tabs-link:visited {
color: #ccca!important;
transition-duration: 1s;
}
.g-tabs-link:hover {
color: #ccc;
transition-duration: 0.25s;
}
.sc-button:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-active):not(.sc-button-selected):not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton):not(.tileGallery__sliderButton):not(.playbackSoundBadge__follow):not(.editSnippet__playButton .sc-button-xxlarge):not(.moreActions__button):not(.spotlightRemove), .sc-button-group .sc-button-insights.sc-button-cta, .imageEditDropdown .sc-button, .uiEvoButton {
border-color: var(--shd-bg-lighter);
background: var(--shd-bg-primary);
color: #ccc;
transition-duration: 0.25s;
}
.sc-button:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-active):not(.sc-button-selected):not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton):not(.tileGallery__sliderButton):not(.editSnippet__playButton .sc-button-xxlarge):not(.moreActions__button):not(.spotlightRemove):hover, .sc-button-group .sc-button-insights.sc-button-cta:hover, .imageEditDropdown .sc-button:hover .uiEvoButton:hover {
border-color: #fff6;
background: #222;
color: #eee;
filter: drop-shadow(2px 2px 6px #000);
transition-duration: 0.25s;
}
.sc-button-selected.sc-button-like:not(.playableTile__actionWrapper .sc-button-selected.sc-button-like):not(.playbackSoundBadge__like):not(.sc-button-transparent):not(.sc-button:hover):not(.moreActions__button), .sc-button-selected.playbackSoundBadge__follow, .sc-button-selected.sc-button-repost, .sc-button-selected.addToPlaylistButton, .sc-button-selected.createPlaylistSuggestion__add {
border-color: var(--shd-bg-lighter);
background: var(--shd-bg-primary);
transition-duration: 0.25s;
}
.sc-button-active:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-selected):not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton),
.sc-button-selected.sc-button-like:not(.playableTile__actionWrapper .sc-button-like):not(.sc-button-transparent):not(.moreActions__button):hover,
.sc-button-selected.sc-button-repost:not(.playableTile__actionWrapper .sc-button-like):not(.sc-button-transparent):not(.moreActions__button):hover,
.sc-button-selected.playbackSoundBadge__follow:hover, .sc-button-selected.sc-button-repost:not(.moreActions__button):not(.sc-button-icon):hover,
.sc-button-selected.addToPlaylistButton:hover,
.sc-button-selected.createPlaylistSuggestion__add:hover,
.uiEvoButton.uiEvoButton--isSelected:hover,
.sc-button-dropdown.sc-button-active:not(.sc-button-dropdown-plain),
.sc-button-dropdown:hover:not(.sc-button-dropdown-plain),
.sc-button-dropdown.sc-button-selected:not(.sc-button-dropdown-plain) {
border-color: #f506;
background: #310;
filter: drop-shadow(2px 2px 6px #000) hue-rotate(/*[[hue]]*/deg) var(--fil);
transition-duration: 0.25s;
}
.sc-border-light, .sc-classic .sc-border-light {
border: 1px solid #222;
border-radius: 4px;
background-color: var(--shd-bg-primary);
}
.modal__content {
border-radius: 16px;
}
.modal__modal {
border-radius: 16px;
margin-bottom: 120px;
/*height: calc(100% + 120px)!important*/
}
.tabs__tabs {
border-radius: 16px 16px 0px 0px;
}
/*.visuals__container {
filter: brightness(0.3) blur(6px);
}*/
/*.sc-button-group > .sc-button-medium:not(.sc-button-follow) {
filter: brightness(1)!important;
}*/
.g-type-shrinkwrap-block:not(.profileHeaderInfo__userName):not(.soundTitle__info),
.g-type-shrinkwrap-inline,
.g-type-shrinkwrap-block:not(.profileHeaderInfo__userName),
.g-type-shrinkwrap-block:not(.profileHeaderInfo__userName):hover,
.g-type-shrinkwrap-block:visited,
.g-type-shrinkwrap-inline,
.g-type-shrinkwrap-inline:hover,
.g-type-shrinkwrap-inline:visited,
.sc-classic .g-type-shrinkwrap-block:not(.profileHeaderInfo__userName),
.sc-classic .g-type-shrinkwrap-block:not(.profileHeaderInfo__userName):hover,
.sc-classic .g-type-shrinkwrap-block:visited,
.sc-classic .g-type-shrinkwrap-inline,
.sc-classic .g-type-shrinkwrap-inline:hover,
.sc-classic .g-type-shrinkwrap-inline:visited {
background-color: rgba(0,0,0,.5);
backdrop-filter: blur(6px);
}
.profileHeaderInfo__additional {
border-radius: 6px;
}
/* rounded album art */
.sc-artwork:not(.image__rounded), .visuals__container, .directSupport__box, .fullHero {
border-radius: 8px;
}
.soundBadge__artwork>div>.sc-artwork:not(.image__rounded) {
border-radius: 6px
}
.trackItem__image>div>.sc-artwork:not(.image__rounded), div.compactTrackListItem__image>.sc-artwork:not(.image__rounded), .userAudibleSearchResultItem .sc-artwork:not(.image__rounded) {
border-radius: 4px;
}
/* slight blue shift */
.directSupport__copy {
color: #eee;
}
.directSupport__box {
filter: hue-rotate(/*[[blu]]*/deg) var(--fil);
}
.sc-label {
background: #1110;
border: 1px solid #9993;
color: #999;
}
.sc-label.sc-label-clearance, .sc-label.sc-label-geoblocked, .sc-label.sc-label-mastered, .sc-label.sc-label-monetizable, .sc-label.sc-label-restricted, .sc-label.sc-label-scheduled, .sc-label-blue {
filter: hue-rotate(/*[[blu]]*/deg) var(--fil);
}
.sc-label.sc-label-private {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.sc-label.sc-label-private:not(.sc-label-icon-only) {
border-radius: 20px
}
.sc-label.sc-label-monetizable-possible, .sc-label.sc-label-monetization-restriction {
background: #f5f5f5;
border: 1px solid #d6d6d6;
filter: invert(1) brightness(1.75);
}
/* fix choose image culling */
.imageChooser__chooseButton, .imageChooser__chooseButton:hover {
border-color: transparent;
transition-duration: 0.25s;
}
.imageChooser__chooseButton {
background: #0006;
opacity: 0.75;
}
.imageChooser__chooseButton:hover {
background: #1118;
opacity: 1;
}
.dialog.rounded {
border-radius: 12px;
}
.dialog__arrow {
border: none;
background: #222;
}
.soundEditForm, .audibleEditForm__audio, .audibleEditForm__progress, .audibleEditForm__form,
.sc-classic .soundEditForm, .sc-classic .audibleEditForm__audio, .sc-classic .audibleEditForm__progress, .sc-classic .audibleEditForm__form{
background: var(--shd-bg-darker);
}
.listenEngagement, .sc-classic .listenEngagement {
box-shadow: none;
}
.dropdownContent__listItem {
border-bottom: none;
}
.profileHeader__info {
z-index: auto;
position: initial!important;
}
.g-tabs-item {
z-index: 10;
filter: drop-shadow(2px 4px 6px #000);
}
.sc-button:disabled, .sc-button:disabled:hover {
border: none;
color: #666
}
.sc-select, .sc-input, .sc-classic .sc-select, .sc-classic .sc-input {
border: 1px solid #222;
}
/* autoplay etc switch toggle */
.sc-toggle.sc-toggle-off {
filter: brightness(0.4) contrast(2) hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) brightness(1) contrast(1.3) saturate(1.4) var(--fil);
}
.sc-toggle.sc-toggle-on {
border: 2px solid #222;
}
.sc-toggle.sc-toggle-active:before {
box-shadow: inset 2px -2px 12px #0004;
}
.sc-toggle-active .sc-toggle-handle {
box-shadow: inset -4px -4px 12px #0002;
}
.sc-toggle-active:hover .sc-toggle-handle {
box-shadow: inset -2px -2px 9px #0003, -3px 1px 9px #0003;
}
.blockCheckbox__icon {
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) brightness(1) contrast(1.3) saturate(1.4) var(--fil);
}
.blockCheckbox__icon:not(.m-checked *) {
filter: brightness(0.4) contrast(2) hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) brightness(1) contrast(1.3) saturate(1.4) var(--fil);
}
.m-disabled .blockCheckbox__icon {
filter: brightness(0.225) hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) brightness(1) contrast(1.3) saturate(1.4) var(--fil);
}
.progressBar__inner {
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) saturate(1.5) var(--fil);
}
.progressBar.blue .progressBar__inner {
filter: hue-rotate(/*[[blu]]*/deg) hue-rotate(10deg) saturate(1.1) var(--fil);
}
/* spotlight editing */
.spotlight.editing .spotlight__item, .sc-classic .spotlight.editing .spotlight__item {
background: transparent;
transition-duration: 1s;
padding: 5px 22px 4px 12px;
margin: 4px -22px 4px -12px;
border-radius: 8px;
}
.spotlight.editing .spotlight__item:hover, .sc-classic .spotlight.editing .spotlight__item:hover {
background: #0006;
border: 1px solid #3336;
transition-duration: 0.25s;
box-shadow: 3px 3px 14px -3px #0008;
}
.sc-classic .keyboardShortcuts__shortcutsGroup>dl>dt>kbd>kbd {
background: #fff1;
color: #fff;
font-weight: 400;
border-radius: 5px;
box-shadow: 2px 4px 6px #000a;
}
#app .l-container #content {
overflow: visible;
}
.createPlaylistSuggestion__addContainer, .editTrackItem__additional, .editTrackItem.m-active .editTrackItem__additional, .editTrackItem.m-hover .editTrackItem__additional, .editTrackItem.m-dragging .editTrackItem__additional { /*Remove linear-gradient background on some selection areas*/
background: none;
}
.commentFormDisabled, .sc-classic .commentFormDisabled {
background: #0003;
border-radius: 8px;
}
/*fix infobar wrapping mess*/
.listenEngagement__footer {
flex-wrap: wrap-reverse;
}
.listenEngagement__stats {
flex-wrap: nowrap;
}
.soundActions {
flex-wrap: wrap;
}
.sc-ministats-item {
white-space: nowrap;
}
.sc-radio-radio {
background-color: #333;
border: 1px solid #222;
}
.sc-radio-input:disabled+.sc-radio-radio, .sc-radio:hover .sc-radio-input:disabled+.sc-radio-radio {
background-color: #222;
border: 1px solid #111;
}
.sc-radio-input:checked+.sc-radio-radio {
background-color: var(--shd-accent-primary);
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
box-shadow: inset 0 0 0 2px #333;
}
.compactTrackListItem__user {
color: #ccc;
}
.sc-classic .compactTrackListItem__number, .sc-classic .compactTrackListItem__trackTitle, .compactTrackListItem__trackTitle {
color: #999;
}
.g-modal-section {
margin-bottom: 2px;
}
.g-modal-section:last-child {
border-radius: 0px 0px 16px 16px;
}
::-webkit-resizer, div::-webkit-resizer {
background: #181818;
}
/* dark inputs */
input[type=date]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus,
input[type=date]:hover, input[type=email]:hover, input[type=password]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=text]:hover, input[type=url]:hover, select:hover, textarea:hover{
border-color: #333;
box-shadow: 0px 0px 12px #0008;
transition-duration: 0.25s;
}
input[type=date], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
transition-duration: 0.25s;
}
.comboBoxList { /* dark autocomplete */
background-color: #333;
border: 1px solid #222;
border-top: 0 solid #222;
transition-duration: 0.25s;
}
.comboBoxList__item.selected {
background-color: #222;
transition-duration: 0.25s;
}
.textfield.invalid .textfield__input {
border-color: #c02;
box-shadow: 0px 0px 12px #8004;
transition-duration: 0.25s;
}
.g-input-validation {
color: #c34;
}
.webProfileControl__icon {
border-radius: 8px;
}
.sc-social-logo-interactive>.sc-social-logo-personal:after {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+c2gtd2Vic2l0ZS0xNi1jb2xvcjwvdGl0bGU+PHBhdGggZD0iTTggMkM0LjY4OCAyIDIgNC42ODggMiA4czIuNjg4IDYgNiA2IDYtMi42ODggNi02LTIuNjg4LTYtNi02em0tLjYgMTAuNzU4QTQuNzkzIDQuNzkzIDAgMCAxIDMuMiA4YzAtLjM3Mi4wNDgtLjcyNi4xMjYtMS4wNzRMNi4yIDkuOHYuNmMwIC42Ni41NCAxLjIgMS4yIDEuMnYxLjE1OHptNC4xNC0xLjUyNGExLjE5IDEuMTkgMCAwIDAtMS4xNC0uODM0aC0uNlY4LjZjMC0uMzMtLjI3LS42LS42LS42SDUuNlY2LjhoMS4yYy4zMyAwIC42LS4yNy42LS42VjVoMS4yYy42NiAwIDEuMi0uNTQgMS4yLTEuMnYtLjI0NmMxLjc1OC43MTQgMyAyLjQzNiAzIDQuNDQ2IDAgMS4yNDgtLjQ4IDIuMzgyLTEuMjYgMy4yMzR6IiBmaWxsPSIjNThmIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=) no-repeat 50% 50%;
}
.moreActions__group:not(:first-child), .sc-classic .moreActions__group:not(:first-child) {
border-top: 1px solid #6661;
}
.sound.streamContext .soundTitle.m-visualSound .soundTitle__info {
margin-left: -3px;
padding-left: 3px;
padding-bottom: 3px;
}
.soundTitle__info {
padding-left: 3px;
}
.sc-ministats-reposts {
color: #b3b3b3;
transition-duration: 0.25s;
}
.sc-ministats-reposts:hover {
text-decoration: none;
color: #fff!important;
transition-duration: 0.25s;
}
.ext-emoji { /*compatibility with third-party emoji scripts*/
display: inline-block!important;
}
.g-scrollbar {
box-shadow: none;
}
@media (max-width: 1000px) {
#app .l-container #content .truncatedUserDescription.m-overflow.m-collapsed .truncatedUserDescription__wrapper::after {
background: linear-gradient(rgba(255, 255, 255, 0), #181818);
}
}
.banner {
justify-items: center;
}
.sc-classic .l-product-banners { /* promotion banners */
position: relative;
margin-left: inherit;
margin-right: inherit;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
backdrop-filter: blur(64px);
box-shadow: 2px 2px 24px #0003;
z-index: 1000;
margin-bottom: -3px;
}
.sc-classic .l-product-banners .banner {
background: var(--shd-bg-lighter);
background: linear-gradient(30deg, #401702 -500%, #1a181890 130%);
border: 1px solid #35333355;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 8px 30px;
font-size: 14px;
margin-left: -1px;
}
.sc-classic .l-product-banners .banner img {
width: 22px;
height: 22px;
}
.sc-classic .banner__closeIcon {
width: 20px;
height: 20px;
}
.sc-classic .l-product-banners .banner.m-alert {
background-color: #221b1b;
font-size: 15px;
}
.sc-classic .l-product-banners .banner.m-alert > * {
transform: scale(0.92);
transform-origin: bottom center;
z-index: 9;
}
.l-product-banners {
/*[[prban]]*/
}
.playControls__bg, .sc-classic .playControls__bg {
backdrop-filter: brightness(0.8) blur(32px);
margin-bottom: 1px; /* fix blur issues with hw acceleration on */
border-bottom: 1px solid #111;
}
.spotlightRemove, .sc-classic .spotlightRemove, .g-button-remove {
filter: brightness(0.55) contrast(6.4);
border-radius: 100%;
box-shadow: inset 0 -0.3px 3px 3px #d7d7d7;
min-width: fit-content !important;
padding: 0;
transition-duration: 0.25s;
}
.spotlightRemove:hover, .sc-classic .spotlightRemove:hover, .g-button-remove:hover {
filter: brightness(0.54) contrast(6.4);
}
/* dumbass insights update */
.insightsSidebarModule__title,
.sc-classic .insightsSidebarModule__title {
font-size: 14px;
color: #999;
margin-bottom: -8px;
margin-top: -12px;
}
.insightsSidebarModule__plays {
font-size: 36px;
margin-bottom: 0px;
}
.insightsSidebarModule__timeframe {
font-size: 14px;
margin-bottom: 12px;
}
header.g-flex-row-spread {
height: revert;
}
.trackMonetizationResources__item {
border-radius: 16px;
}
.sc-button.sc-button-transparent {
border-radius: 8px;
}
.sc-button-small.sc-button-transparent {
border-color: #0000;
}
.trackMonetizationResources__payment {
filter: invert(1) contrast(0.05) brightness(1.5);
}
.g-oscp-section-header:before {
background-color: #222;
}
.creatorsNavigation__onSoundCloudLinkNewBadge {
border: 0px;
color: #fff;
font-size: 11px;
padding-right: 4px;
background-color: var(--shd-accent-primary);
border-radius: 12px;
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) var(--fil);
text-align: center;
display: none; /* just get rid of it, its ugly and only shows on the 'promote' tab, which isnt new */
}
.profileMenu__newBadge {
border-radius: 8px;
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-5deg) var(--fil);
padding-right: 4px;
display: none;
}
.userBadgeListItem__action {
display: flex;
justify-content: center;
}
/* make the discover tile carousel less empty */
.tileGallery__sliderPanel {
margin-right: 7.8vw;
}
.tileGallery .playableTile, .sc-classic .tileGallery .userBadgeListItem {
width: 9vw;
transform: scale(1.2);
transform-origin: top left;
height: 11vw;
}
.sc-classic .userBadgeListItem__action {
transform: scale(0.83);
transform-origin: 50% 80%;
}
.sc-classic .tileGallery .userBadgeListItem {padding-bottom: 0;}
.tileGallery {
width: 100%;
}
.tileGallery__slider--large, .tileGallery__slider--normal {
transform: scale(0.96);
}
.tileGallery__sliderPeekForward {
background: linear-gradient(to right, #0000 5%, #1119 60%, var(--shd-bg-primary) 80%);
left: auto!important;
}
.tileGallery__sliderPeekBackward {
right: auto!important;
background: linear-gradient(to left, #0000 10%, #1119 60%, var(--shd-bg-primary) 80%);
}
.tileGallery__sliderButton, .tileGallery__sliderButton:not(.artistShortcutsGallery .tileGallery__sliderButton):focus { /* background-color: #333; */
border: none;
outline: none;
border-radius: 50%;
transition: background-color 0.2s, transform 0.2s, brightness 0.4s;
transform: scale(1.5);
transform-origin: center;
top: 48px;
}
.tileGallery__sliderPeek:hover .tileGallery__sliderButton, .tileGallery__sliderButton:hover {
transform: scale(1.6);
filter: brightness(1.2);
transition: transform 0.2s, filter 0.3s;
}
.tileGallery__sliderButton:after {
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.tileGallery__sliderPeek {
display: block;
opacity: 0;
width: 0px;
pointer-events: none;
transition-property: opacity, width;
transition-duration: 0.6s;
transition-timing-function: ease-in;
}
.tileGallery.m-hasItemsBackward .tileGallery__sliderPeekBackward, .tileGallery.m-hasItemsForward .tileGallery__sliderPeekForward {
display: block;
opacity: 1;
width: 96px;
pointer-events: auto;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.sc-classic .l-search .l-fixed-left, .l-search .l-fixed-left {
z-index: 1000;
position: fixed;
top: 390px;
filter: hue-rotate(/*[[hue]]*/deg);
}
/*.soundBadge__additional {
background: none;
}*/
/*.createPlaylist__savedContainer > div > div > div > div > .soundBadge__extraItem.soundBadge__audibleAttributes.sc-label-group {
margin-right: -10vw;
padding-left: 4vw;
}*/
.createPlaylist__savedContainer > div > div > .soundBadge__additional {
right: -200px;
background: none;
}
.sc-classic .profileHeaderInfo__additional, .profileHeaderInfo__additional {
margin-top: -8px;
margin-right: 30px;
background: none !important;
backdrop-filter: none !important;
color: #fff;
font-weight: 400;
font-size: 2em;
opacity: 0.9;
}
.featuredProfiles .featuredProfiles__title {
border-bottom: none!important;
color: #fff;
padding-left: 10px;
margin-bottom: -92%;
/*margin-bottom: -114%; 5 profiles */
margin-top: 118%;
}
.featuredProfiles.expanded .featuredProfiles__title {
border-bottom: none!important;
}
.sc-icon-large.sc-icon-user {
background-size: 18px 18px;
margin-top: 3px;
margin-right: 2px;
}
.featuredProfiles__item {
border-bottom: none!important;
}
.profileHeader__chooserWrapper.right {
margin-right: 340px;
margin-top: -15px;
}
button.imageEditDropdownButton.sc-button-camera.sc-button-translucent.profileHeader__headerImageEditChooser.right.sc-button.sc-button-medium.sc-button-responsive {
background: none!important;
border-color: #0000!important;
transition: 0.3s ease-out!important;
}
/*.sound__content {
overflow-x: visible!important;
}*/
.userBadge.m-horizontal .userBadge__avatar {
margin-left: 10px;
}
.featuredProfiles {
right: 6px!important;
height: 420px!important;
}
.profileHeader {
padding: 0!important;
overflow: visible!important;
}
/*.featuredProfiles {
right: 360px!important;
}*/
.sc-button-group {
display: inline-flex!important;
flex-direction: row;
}
.userInfoBar {
padding-top: 20px!important;
}
:not(.artistConnectContainerItem__userInfo)>.profileHeaderBackground > div {
border-radius: 0px 0px 32px 32px!important;
box-shadow: inset 0px -10px 24px 4px #1118;
height: 69.5%;
background-size: auto 280px;
width: calc(100vw - 580px);
background-color: #1110!important;
}
.featuredProfiles.expanded {
-webkit-transform: translateY(60px)!important;
transform: translateY(60px)!important;
}
.featuredProfiles__wrapper.g-scrollable-inner {
height: 420px!important;
}
.l-fluid-fixed .l-sidebar-right {
top: -240px!important;
}
.profileHeader__link {
left: 0!important;
bottom: 144px!important;
z-index: 3;
}
div#content>div>div.l-fluid-fixed:only-child div.l-sidebar-right {
top: 4px!important;
}
.header__navWrapper .header__navMenu li a {
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-1deg) saturate(1.5) var(--fil) !important;
}
.header__navWrapper .header__navMenu li a.selected {
filter: hue-rotate(/*[[hue]]*/deg) hue-rotate(-1deg) contrast(0.8) brightness(1.2) contrast(1.5) saturate(1.5) var(--fil) !important;
}
/*.backgroundGradient__buffer {
border-radius: 24px;
}*/
.selectionPlaylistBanner {
border-radius: 32px;
/* box-shadow: 3px 5px 24px -2px #000; */
/* filter: drop-shadow(-3px -6px 4px #fff1); */
box-shadow: 2px 4px 16px -4px #0005;
}
.repostOverlay__container, .sc-classic .repostOverlay__container {
backdrop-filter: blur(32px);
background-color: var(--shd-bg-dropdown);
border-radius: 8px;
border: 1px solid #292929;
}
.repostOverlay__youReposted, .sc-classic .repostOverlay__container:not(.repostOverlay--uiEvo) .repostOverlay__youReposted {
color: #ccc;
}
.sc-ministats-small.sc-ministats-reposts.repostOverlay__messageRepostIcon:before {
filter: brightness(2.2);
}
.repostOverlay__close:hover {
filter: brightness(1.25);
transition: filter 0.2s;
}
.repostOverlay__close {
transition: filter 0.4s;
}
.repostOverlay__message {
overflow-x: visible;
}
.repostCaptionForm__loadingBar {
background: #0007;
height: 25px;
}
.editTrackItem.m-active, .editTrackItem.m-hover {
background: linear-gradient(60deg, #563526 -10%, #48202b 160%)!important;
}
.sc-status-icon-verified.sc-status-icon-medium {
width: 24px;
height: 24px;
background-size: 24px;
}
.profileHeaderInfo__avatar.sc-media-image {
transition: filter 1s;
}
.profileHeaderInfo__avatar.sc-media-image:hover {
filter: drop-shadow(5px 5px 12px #0006);
transition: filter 0.4s;
}
.sc-button-small:not(.sc-button-cta), .sc-button-medium:not(.sc-button-cta):not(.sc-button-nostyle) {
font-size: 12px;
}
.infoStats__value {
font-size: 24px!important;
}
.infoStats__title {
font-size: 14px!important;
}
.userInfoBar__buttons .sc-button-group a.sc-button-startstation.sc-button.sc-button-medium.sc-button-responsive {
padding-top: 12px!important;
}
.sc-status-icon-verified.sc-status-icon-small {
width: 14px;
height: 14px;
background-size: 14px;
}
.sc-classic .userBadgeListItem__title .userBadgeListItem__verifiedBadge { /* fix verified badge wrapping */
width: 12px;
display: block;
top: -4px;
}
.sc-status-icon.sc-status-icon-verified.sc-status-icon-small.sc-ir {
filter: contrast(1.2) brightness(1.1) hue-rotate(/*[[blu]]*/deg) var(--fil);
}
.profileHeaderBackground > div > .backgroundGradient > .backgroundGradient__buffer {
border-radius: 0px 0px 32px 32px!important;
}
/*.audibleEditForm__form {
margin-bottom: 96px;
}*/
/* next pro badge */
/*[[probdg]]*/
.sc-classic .sc-button-selected.playbackSoundBadge__follow.sc-button-follow:before {
/*filter: brightness(0.5) sepia(1) contrast(2) saturate(24) hue-rotate(-2deg) saturate(1.1)!important;*/
filter: invert(0) hue-rotate(8deg) brightness(1.1)!important;
}
/* callout bubbles */
.callout__bubble, .sc-classic .callout__bubble {
background-color: var(--shd-bg-dropdown);
border-radius: 12px;
border: solid 2px var(--shd-accent-primary);
backdrop-filter: blur(60px);
filter: drop-shadow(2px 6px 12px #0009) hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.callout__bubble:before, .sc-classic .callout__bubble:before {
bottom: -12px;
background-color: #191919;
background: linear-gradient(-45deg, var(--shd-accent-primary) -50%, #191919 50%, #19191900 55%);
border-bottom: solid 2px var(--shd-accent-primary);
border-right: solid 2px var(--shd-accent-primary);
}
.callout__captionBody {
color: #ccc;
}
.callout__title {
color: #fff;
}
.callout__captionImage {
filter: brightness(0.9) invert(1) hue-rotate(180deg) hue-rotate(/*[[hue]]*/deg) saturate(2);
}
.callout__button {
filter: hue-rotate(calc(/*[[hue]]*/deg * -1));
}
.calloutBackground {
filter: hue-rotate(/*[[hue]]*/deg);
}
/* modify sidebar jank */
.infoStats {
margin-bottom: 15px;
margin-top: -15px;
}
.l-sidebar-right .l-fixed:before {
content: "";
margin-bottom: -20%!important;
height: fit-content;
}
.l-sidebar-right .l-fixed:after {
margin-bottom: 0;
padding: 0;
}
.userSidebar:before, .userSidebar {
transition: margin-bottom 0.1s, top 0.5s;
}
/* Fix header boundry preventing clicks on upper-right of the user's profile */
.profileHeader__link {
width: calc(100vw - 580px);
}
.profileHeader__edit {
width: calc(100vw - 860px);
}
.profileHeader__chooserWrapper.right {
margin-right: 12px;
}
/* Reposition verified badges */
.userDropbar__verifiedBadge .sc-status-icon-verified.sc-status-icon-medium {
width: 18px;
height: 18px;
background-size: 18px;
margin-top: -8px;
margin-left: -4px;
}
.userBadge__verifiedBadge .sc-status-icon-verified.sc-status-icon-small {
width: 14px;
height: 14px;
background-size: 14px;
margin-top: -2px;
}
/* Fix header size on banner-less profiles */
.profileHeaderBackground div .backgroundGradient {
height: 70%;
}
/* make side nav more dynamic */
.sc-classic .g-nav-item>.g-nav-link, .g-nav-item>.g-nav-link {
background-position: 5px -28px;
font-weight: 300;
filter: brightness(0.8) contrast(1.2) drop-shadow(0px 0px 0px #0000);
transition: font-weight 0.2s, filter 0.1s;
}
.sc-classic .g-nav-item.active>.g-nav-link, .g-nav-item.active>.g-nav-link {
font-weight: 440;
filter: drop-shadow(0px 0px 6px #fff4);
}
.sc-classic .g-nav-item>.g-nav-link:hover:not(.g-nav-item.active>.g-nav-link), .g-nav-item>.g-nav-link:hover:not(.g-nav-item.active>.g-nav-link) {
filter: brightness(0.9) contrast(1.1) drop-shadow(0px 0px 6px #fff8);
}
/* unify transitions */
.notificationIcon:before {
transition: opacity 0.2s
}
.g-dark .sc-type-light, .g-dark a {
transition: color 0.2s;
}
/* Change font to Inter */
body, button, input, select, textarea, .soundTitle__uploadTime, .sc-type-light, .sc-tag, .sc-tag:visited, .soundTitle__title, .sc-font-light, .sc-button, .sc-button-small:not(.sc-button-cta), .sc-type-medium, .sc-type-small, .sc-ministats, .sc-font-body, .sc-input, .soundTitle.listenContext .soundTitle__title, .soundTitle.listenContext .soundTitle__title.g-type-shrinkwrap-inline:hover,
body a, .sc-type-h1, .sc-type-h2, .sc-type-h3, .sc-type-h4, .sc-type-h5, .sc-type-h6, h1, h2, h3, h4, h5, h6, h7, h8, p, .sc-font, .mixedSelectionModule__titleText, .sc-classic .g-type-marketing-header, .sc-classic .notificationBadge,
.app-header-black-title {
font-family: var(--font-main) !important;
}
.spotlightTitle, .sc-classic .spotlightTitle, .userstream__header, .sc-classic .userstream__header, .sc-font, .sc-classic .sc-font, input.headerSearch__input.sc-input.g-all-transitions-300::placeholder,
.sidebarHeader__more, .sc-classic .sidebarHeader__more, .sc-font-light, .sc-classic .sc-font-light, .sc-type-medium, .sc-classic .sc-type-medium, .sc-type-small, .sc-classic .sc-type-small, .soundTitle__title, .sc-classic .soundTitle__title, .sc-ministats, .sc-classic .sc-ministats, .sc-input, .sc-input::placeholder, .header, .sc-classic .header, .mixedSelectionModule__titleText, .sc-classic .mixedSelectionModule__titleText, .sc-classic .velvetCakeModule__titleText, .notificationsPreferences__bodyCell, .sc-classic .notificationsPreferences__bodyCell, .notificationsPreferences__headerCell, .sc-classic .notificationsPreferences__headerCell, .sc-classic .staticPage h2,
input[type=date]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, input[type=tel]::placeholder, input[type=text]::placeholder, input[type=url]::placeholder, select::placeholder, textarea::placeholder, #onetrust-pc-sdk .ot-accordion-layout .ot-cat-header, #onetrust-consent-sdk #onetrust-pc-sdk .category-host-list-handler, #onetrust-pc-sdk #ot-pc-desc .privacy-notice-link, .sc-media-content .userItem__details,
.sc-media-content .userItem__details, .sc-classic .frontContent__actions input[type=search]::placeholder, .sc-classic .tokenInput__input, .sc-classic ._10BTeIqCrlRC9qFdVckf7v, .sc-classic .l-footer.marketing a, .downloadLandingIntro__subheader, .sc-classic .downloadLanding__heading, .sc-classic .downloadLandingSection__header, .sc-classic .downloadLandingSection__copy, .sc-classic .commentForm .commentForm__input, .sc-select {
font-weight: 300;
}
body a, .sc-classic .header, .statsSummary__metricValue, .soundTitle__uploadTime, .sc-type-light, .sc-tag, .sc-tag:visited, .sc-button, .sc-button-small:not(.sc-button-cta), .statsBadge__value, .sc-classic .statsBadge__value, .infoStats__value, .sc-classic .infoStats__value, .soundTitle.listenContext .soundTitle__title, .soundTitle.listenContext .soundTitle__title.g-type-shrinkwrap-inline:hover, .sc-classic .soundTitle.listenContext .soundTitle__title, .sc-classic .soundTitle.listenContext .soundTitle__title.g-type-shrinkwrap-inline:hover,
body, .g-type-shrinkwrap-large-secondary, .g-type-shrinkwrap-large-secondary:visited, .g-type-shrinkwrap-secondary, .g-type-shrinkwrap-secondary:visited, .sc-type-h1, .sc-type-h2, .sc-type-h3, .sc-type-h4, .sc-type-h5, .sc-type-h6, .gritter-title, .sc-classic .g-form-section-title, .sc-classic .g-type-marketing-info, #onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-b-addl-desc, .sc-type-large, .directSupport__copy, .signinRedirectMessage__text,
.sc-buylink-medium, .sc-classic .soundTitle__uploadTime, .sc-classic .headerSearch__input, .compactTrackListItem__trackTitle, .sc-classic .compactTrackListItem__trackTitle, button.headerSearch__submit.submit.sc-ir, form.headerSearch, #onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-b-addl-desc, .insightsSidebarModule.sc-font div:not(.insightsSidebarModule__plays),
.sc-classic .g-type-shrinkwrap-large-secondary, .sc-classic .g-type-shrinkwrap-large-secondary:visited, .sc-classic .g-type-shrinkwrap-secondary, .sc-classic .g-type-shrinkwrap-secondary:visited, .sc-link-primary, .header__navWrapper .header__navMenu li a, .topStatsFullItem__count, .sc-label, .sc-classic .editTrackModalButton, .commentItem__createdAt, .commentItem__separator, .commentItem__timestamp, .commentItem__body, .creatorLikeInline {
font-weight: 400;
}
.uiEvoButton, .repostOverlay--uiEvo .repostOverlay__message, .repostOverlay--uiEvo .repostOverlay__youReposted, .artistNavigationItem__name, .storyItemViewerHeader__username a, .signupModule__title, .onSoundCloudTeaser__title.sc-font-light, .sc-classic .g-type-marketing-header, .frontHero__title, .onSoundCloudTeaser__title.sc-font-light, .insightsSidebarModule__plays, a.userStatsLegend__itemTitleWrapper, .uploadButton__status, .linkMenu__groupTitle, .sc-classic .g-type-shrinkwrap-large-primary, .sc-classic .g-type-shrinkwrap-primary:not(.soundTitle__title), .listenInfo__releaseData, .sc-classic .listenInfo__releaseData {
font-weight: 600;
}
.sc-classic .ui-datepicker th, .sc-classic .compactTrackListItem.active, .sc-classic .compactTrackListItem.active .compactTrackListItem__content, .sc-classic .compactTrackListItem.active .compactTrackListItem__number, .sc-classic .compactTrackListItem.active .compactTrackListItem__plays, .sc-classic .compactTrackListItem.active .compactTrackListItem__trackTitle, .sc-classic .compactTrackListItem.active .compactTrackListItem__user {
font-weight: 700;
}
@supports (font-variation-settings: normal) {
body, button, input, select, textarea, .soundTitle__uploadTime, .sc-type-light, .sc-tag, .sc-tag:visited, .soundTitle__title, .sc-font-light, .sc-button, .sc-button-small:not(.sc-button-cta), .sc-type-medium, .sc-type-small, .sc-ministats, .sc-font-body, .sc-input, .soundTitle.listenContext .soundTitle__title, .soundTitle.listenContext .soundTitle__title.g-type-shrinkwrap-inline:hover,
body a, .sc-type-h1, .sc-type-h2, .sc-type-h3, .sc-type-h4, .sc-type-h5, .sc-type-h6, h1, h2, h3, h4, h5, h6, h7, h8, p, .sc-font, .mixedSelectionModule__titleText, .sc-classic .g-type-marketing-header,
.app-header-black-title {
font-family: var(--font-main)!important;
}
.mixedSelectionModule__titleText, .sc-classic .mixedSelectionModule__titleText, .sc-classic .velvetCakeModule__titleText, .sc-classic .header, body, .soundTitle__usernameTitleContainer .soundTitle__title:hover, .sc-classic .soundTitle__title:hover, .g-nav-item>.g-nav-link:hover:not(.g-nav-item.active>.g-nav-link), .notificationsPreferences__bodyCell, .notificationsPreferences__headerCell {
font-weight: 330;
}
}
.statsBadge__value, .infoStats__value {
font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif!important;
}
.sc-media-content .userItem__details {
color: #ccc!important;
font-weight: 300!important;
font-size: 13px;
}
/* LIDL soundcloud ad */
.siteTakeoverOverlay {
left: 230px;
right: 330px;
top: 0px;
width: calc(100vw - 580px)!important;
clip-path: inset(0px 0px 0px 0px);
z-index: 1000;
bottom: calc(103% - 5vw);
border-radius: 0px 0px 8px 8px;
overflow: hidden;
transition: bottom 1s, border-bottom 0.8s;
border-bottom: 0px solid #0000;
}
.siteTakeoverOverlay:hover {
bottom: calc(136% - 64vw);
border-bottom: 6px solid #0008;
}
.sc-checkbox-check {
filter: invert(1) brightness(1.2);
border: 1px solid #ddd!important;
transition: 0.2s!important;
}
.checkbox:hover .sc-checkbox-check {
box-shadow: 0px 0px 12px #fff8;
border: 1px solid #ccc!important;
}
/*.tabs {
padding-bottom: 120px;
}*/
.sidebarInfoBox {
background: var(--shd-bg-primary);
border: 1px solid #222!important;
border-radius: 4px;
box-shadow: 0px 0px 24px #0004;
}
.listenContent__visual .commentFormDisabled {
background: var(--shd-bg-lighter);
}
.soundTitle.m-visualSound.listenContext .soundTitle__uploadTime {
color: #fff;
text-shadow: 0 4px 8px #0008;
}
.soundTitle.m-visualSound.streamContext .soundTitle__uploadTime {
color: #fff;
text-shadow: 0 2px 6px #000c;
}
.sc-classic .m-light .headerMenu__link, .sc-classic .m-light .headerMenu__link:focus, .sc-classic .m-light .headerMenu__link:hover {
color: #ccc;
}
.gritter-item {
color: #ccc;
}
.gritter-title {
color: #fff;
}
.sc-button.sc-button-translucent:not(.sc-button-cta) {
background-color: inherit;
}
/*.sc-button-selected {
border: 1px solid #f50;
}*/
/* stats fixes */
.statsLineChart__ticks, .statsLineChart__bottom, .stats__xAxis, .stats__yAxis {
filter: invert(0.9);
}
.g-stats-icon-orange:not(.g-tabs-link .g-stats-icon-orange), .sc-text-orange, .statsLineChart__lines, .topStatsItem__visual, .sc-background-orange, .topStatsFullItem__visual {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.statsSummary__metricValue {
font-size: 24px;
}
.statsBarChart, .userStatsLegend__items {
filter: hue-rotate(180deg) brightness(1.25) invert(1) contrast(0.92) hue-rotate(/*[[hue]]*/deg) hue-rotate(5deg) brightness(1.1) var(--fil);
}
a.userStatsLegend__itemTitleWrapper {
color: #000!important;
font-weight: 600;
}
.g-tabs-link.active {
color: var(--shd-accent-primary)!important;
}
.sc-classic .g-tabs-link:focus, .sc-classic .g-tabs-link:hover {
color: #ccc!important;
border-color: var(--shd-accent-primary);
}
.sc-toggle.toggleFormControl__toggle:not(.sc-toggle-active) {
border: 2px solid #393939;
background: #333;
}
.sc-toggle.toggleFormControl__toggle:not(.sc-toggle-active) .sc-toggle-handle {
background: #ddd;
}
.notificationsPreferences__table .sc-border-light-bottom {
border-bottom: 1px solid #222;
}
.sc-classic .show .header__logo {
background: inherit!important;
}
.sc-classic .l-fluid-fixed .l-user-main {
padding-top: 50px; /* old: 30px */
}
.sc-button-next, .sc-button-pause, .sc-button-play, .sc-button-prev, .sc-button.sc-button-blocked, .sc-button.sc-button-play.sc-button-disabled:disabled, .sc-button.sc-button-play:disabled, .sc-button.sc-button-play:disabled:hover {
background-color: var(--shd-accent-primary);
background: linear-gradient(#f60,#f40);
filter: brightness(1) contrast(1) hue-rotate(/*[[hue]]*/deg)!important;
transition-duration: 0.5s;
}
.sc-button-next.sc-button-focus, .sc-button-next:focus, .sc-button-next:hover, .sc-button-pause.sc-button-focus, .sc-button-pause:focus, .sc-button-pause:hover, .sc-button-play.sc-button-focus, .sc-button-play:not(.playableTile__playButton .playButton):focus, .sc-button-play:not(.playableTile__playButton .playButton):hover, .sc-button-prev.sc-button-focus, .sc-button-prev:focus, .sc-button-prev:hover {
background-color: var(--shd-accent-secondary);
background: linear-gradient(#f60,#f40);
box-shadow: inset -2px -8px 16px #c20c;
filter: brightness(0.9) contrast(1.3) hue-rotate(/*[[hue]]*/deg) hue-rotate(-2deg)!important;
transition-duration: 0.2s;
}
/* Color changer (switched from https://33kk.github.io/uso-archive/?style=123974 to simpler method) */
.waveform canvas, .repeatControl:after, .commentPopover__username, a.commentPopover__username:hover, a.commentPopover__username:visited, .volume__sliderHandle, .volume__sliderProgress, .sc-button-play, .playbackTimeline, .heroPlayButton, #app > header > div > div.header__left > div, #app > header > div > div.header__right.sc-clearfix > a:not(.sc-classic .header__link.header__goUpsell, .sc-classic .header__link.header__goUpsell_side_by_side_experience, .sc-classic .header__link.header__proUpsell_side_by_side_experience), .sc-button-active, .sc-button-selected, .sc-button-cta, .sc-button-cta:hover, .sc-button-cta:focus, .sc-button-cta:visited, .sc-toggle:before, #content > div > div.l-listen-wrapper > div.l-about-main > div > div:nth-child(1) > div > div > div > div.listenEngagement__extras > div.listenEngagement__shuffle > div > label > span, .moreMenu__link.moreMenu__goUpsell, .newItemBadge.newItems__some, .sc-status-icon:not(.sc-status-icon-verified), .g-tabs-link.active, .sc-classic .g-tabs-link, .g-required-label:after, .sc-button-startstation, .sc-orange, .uiEvoButton, .uiEvoButton--isSelected, .uiEvoButton.uiEvoButton--isSelected:hover, /*.tabs__tabNew:not(.g-tabs-link.active .tabs__tabNew):not(.g-tabs-link:hover .tabs__tabNew), */ .tileGallery__sliderButton:active:after, .tileGallery__sliderButton:focus:after, .tileGallery__sliderPeek:hover .tileGallery__sliderButton:after, .mobileLandingDemo__static,
.imageCrop__zoomSlider, .sc-classic .imageCrop__zoomSlider {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
/* soundcloud stories */
.uiEvoButton {
border-radius: 5px;
}
.uiEvoButton--isSelected, .uiEvoButton.uiEvoButton--isSelected:hover {
background-color: var(--shd-accent-primary);
}
.artistShortcutsModal {
background: radial-gradient(transparent 0, black 100%);
backdrop-filter: sepia(0.5) saturate(1) hue-rotate(/*[[hue]]*/deg) hue-rotate(-20deg) brightness(1.2) contrast(8) blur(200px);
}
.artistShortcutsModalContent {
height: calc(100% - 90px);
}
#overlay_634 .modal__modal {
background: var(--shd-bg-primary);
border: 1px solid #222
}
.sc-classic .suggestedTags, .suggestedTags {
background-color: var(--shd-bg-lighter);
border: 1px solid #222;
}
.sc-classic .suggestedTags__listItem.selected, .suggestedTags__listItem.selected {
background-color: var(--shd-bg-primary);
}
#overlay_40417 {
border-radius: 4px;
}
.sc-classic .tokenInput.focused .tokenInput__wrapper, .tokenInput.focused .tokenInput__wrapper {
border-color: #444;
}
.audibleEditForm {
border-radius: 12px;
border: 1px solid var(--shd-bg-primary);
margin-bottom: 144px;
}
.fullListenHero.fullHero.l-inner-fullwidth {
border-radius: 0px 0px 0px 32px;
}
.selectionPlaylistBanner .backgroundGradient__buffer {
border-radius: 16px;
}
.sc-tag.sc-tag-large {
border-radius: 12px;
backdrop-filter: blur(6px);
background: #2a2a2abb;
box-shadow: 1px 4px 4px #0006;
transition-duration: 0.15s;
}
.sc-tag.sc-tag-large:hover {
background: #333;
box-shadow: 0px 3px 8px #0006;
}
.artistShortcutsGallery .tileGallery__sliderPeek {
z-index: -1;
}
.tileGallery.m-hasItemsBackward .tileGallery__sliderPeekBackward, .tileGallery.m-hasItemsForward .tileGallery__sliderPeekForward {
z-index: 1;
}
.chartTrack.m-interactive:hover, .chartTrack.m-playing,
.sc-classic .chartTrack.m-interactive:hover, .sc-classic .chartTrack.m-playing{
background-color: #090909;
}
.g-oscp-section {
border-bottom: none;
}
.reports__headers {
background-color: var(--shd-bg-primary);
}
._4OE7oO4wnIjZNEbkMLsPQ {
background-color: rgb(13 13 13 / 70%);
}
.inboxItem.active {
filter: hue-rotate(/*[[hue]]*/deg);
}
.inboxItem.active {
filter: hue-rotate(/*[[hue]]*/deg);
}
.inboxItem.active .conversationBadge {
filter: hue-rotate(calc(/*[[hue]]*/deg * -1));
}
.l-signin .l-main {
border: none;
}
.header__loginMenu {
padding: 10px 0px;
/*transform: scale(0.9);*/
}
.playlistConsumerSubUpsell__messageBox, .sc-classic .playlistConsumerSubUpsell__messageBox {
background-color: var(--shd-bg-darker);
border: 1px solid var(--shd-bg-lighter);
border-radius: 8px;
padding: 18px
}
.playlistConsumerSubUpsell__messageDescription, .sc-classic .playlistConsumerSubUpsell__messageDescription {
margin-bottom: 12px;
}
.sc-classic .listenLogin, .listenLogin {
background-color: var(--shd-bg-primary);
padding: 0;
}
.sc-classic .listenLogin .sc-media-content {
display: flex;
justify-content: space-between;
}
.uploadLoggedOut__header {
background: url(https://a-v2.sndcdn.com/assets/images/img-upload-hero-0fd428fc.jpg) 100% 100%/1240px 460px no-repeat;
}
.uploadLoggedOut__testimonials {
background-image: none;
}
.uploadLoggedOut__testimonialListItem {
background: #222;
}
.header__inner .header__right {
filter: hue-rotate(/*[[hue]]*/deg)
}
.header__userNav, .header__inner .header__right .left {
filter: hue-rotate(calc(/*[[hue]]*/deg * -1));
}
#app .l-container #content .l-vertical-bar .userInfoBar .profileTabs.g-tabs.g-tabs-medium {
margin-top: -25px;
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons {
bottom: 120px;
right: 20px;
}
@media only screen and (max-width: 1000px) {
.profileHeaderBackground__visual, .profileHeader__link {
width: calc(100vw - 320px)!important;
}
.profileTabs.g-tabs.g-tabs-medium {
padding-right: calc(100vw - 120%)!important;
}
.userInfoBar__buttons, .profileHeaderInfo__content.sc-media-content {
margin-right: 80px!important;
}
}
@media only screen and (min-width: 1925px) {
:not(.artistConnectContainerItem__userInfo)>.profileHeaderBackground > div {
/*height: 30vh;*/
/*background-size: 100% 100%!important;*/
/*filter: blur(20px);*/
/* height: 280px; */
background-repeat: repeat-x;
background-size: max(1335px, 100%);
background-position: left center;
}
.profileHeader .profileHeaderInfo__avatar.sc-media-image {
filter: drop-shadow(5px 5px 12px #0006);
}
}
.userInfoBar__buttons {
position: relative;
}
.profileTabs .g-tabs-item .g-tabs-link {
letter-spacing: .12em!important;
margin: 0.2vw!important;
font-size: 14px!important;
padding: 6px 5%!important;
white-space: nowrap;
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-follow, #app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-startstation, #app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons .sc-button-insights {
font-size: 12px;
letter-spacing: .12em;
white-space: nowrap;
line-height: 125%;
}
.insightsSidebarModule.sc-font { /*show/hide sidebar insights*/
padding: 0;
margin-top: 20px;
/*[[sin]]*/
overflow-y: clip;
transition-duration: 0.5s;
}
.insightsSidebarModule__plays {
font-weight: 600;
}
.insightsSidebarModule.sc-font div:not(.insightsSidebarModule__plays) {
font-weight: 400;
margin-top: -6px;
}
.insightsSidebarModule__timeframe {
font-size: 14px;
}
.insightsSidebarModule__title {
font-size: 16px;
}
/* gdpr aka cookie consent dickbar */
#onetrust-consent-sdk #onetrust-banner-sdk,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info, #onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-txt .ot-ven-dets {
background-color: var(--shd-bg-primary);
}
#onetrust-banner-sdk #onetrust-policy-text, #onetrust-banner-sdk .ot-dpd-desc, #onetrust-banner-sdk .ot-b-addl-desc {
color: #fff!important;
font-weight: 400;
}
.onetrust-pc-dark-filter {
background: #0002;
pointer-events: none;
}
#onetrust-consent-sdk {
/*[[gdpr]]*/
}
.onetrust-pc-dark-filter.ot-fade-in {
pointer-events: none;
}
#onetrust-consent-sdk #onetrust-pc-sdk, #onetrust-consent-sdk #ot-search-cntr, #onetrust-consent-sdk #onetrust-pc-sdk .ot-switch.ot-toggle, #onetrust-consent-sdk #onetrust-pc-sdk ot-grp-hdr1 .checkbox, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title:after, #onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk, #onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-cnt, #onetrust-consent-sdk #onetrust-pc-sdk #ot-anchor,
#onetrust-consent-sdk #onetrust-pc-sdk #filter-btn-handler {
background-color: var(--shd-bg-primary);
box-shadow: 0px 2px 16px -3px #000;
border-radius: 24px;
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-sel-blk {
border-bottom: 1px solid #000;
}
#onetrust-consent-sdk #onetrust-pc-sdk h3, #onetrust-consent-sdk #onetrust-pc-sdk h4, #onetrust-consent-sdk #onetrust-pc-sdk h5, #onetrust-consent-sdk #onetrust-pc-sdk h6, #onetrust-consent-sdk #onetrust-pc-sdk p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-ven-lst .ot-ven-opts p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title, #onetrust-consent-sdk #onetrust-pc-sdk .ot-li-title, #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span, #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info, #onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-modal #modal-header, #onetrust-consent-sdk #onetrust-pc-sdk .ot-checkbox label span, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-sel-blk p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-title span, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .back-btn-handler p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .ot-ven-name, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-ven-lst .consent-category, #onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn, #onetrust-consent-sdk #onetrust-pc-sdk .ot-label-status, #onetrust-consent-sdk #onetrust-pc-sdk .ot-chkbox label span, #onetrust-consent-sdk #onetrust-pc-sdk #clear-filters-handler, #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy #onetrust-policy-title, #onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy h3, #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout h4 ~ .ot-always-active,
#onetrust-consent-sdk #onetrust-policy-title, #onetrust-consent-sdk #onetrust-policy-text, #onetrust-consent-sdk .ot-b-addl-desc, #onetrust-consent-sdk .ot-dpd-desc, #onetrust-consent-sdk .ot-dpd-title, #onetrust-consent-sdk #onetrust-policy-text *:not(.onetrust-vendors-list-handler), #onetrust-consent-sdk .ot-dpd-desc *:not(.onetrust-vendors-list-handler), #onetrust-consent-sdk #onetrust-banner-sdk #banner-options *, #onetrust-banner-sdk .ot-cat-header, #onetrust-banner-sdk .ot-optout-signal,
#onetrust-consent-sdk #onetrust-pc-sdk .privacy-notice-link, #onetrust-consent-sdk #onetrust-pc-sdk .ot-pgph-link, #onetrust-consent-sdk #onetrust-pc-sdk .category-vendors-list-handler, #onetrust-consent-sdk #onetrust-pc-sdk .category-vendors-list-handler + a, #onetrust-consent-sdk #onetrust-pc-sdk .category-host-list-handler, #onetrust-consent-sdk #onetrust-pc-sdk .ot-ven-link, #onetrust-consent-sdk #onetrust-pc-sdk .ot-ven-legclaim-link, #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-name a, #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-acc-hdr .ot-host-expand, #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info a, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-content #ot-pc-desc .ot-link-btn, #onetrust-consent-sdk #onetrust-pc-sdk .ot-vnd-serv .ot-vnd-item .ot-vnd-info a, #onetrust-consent-sdk #onetrust-pc-sdk #ot-lst-cnt .ot-vnd-info a,
#onetrust-consent-sdk #onetrust-pc-sdk h3, #onetrust-consent-sdk #onetrust-pc-sdk h4, #onetrust-consent-sdk #onetrust-pc-sdk h5, #onetrust-consent-sdk #onetrust-pc-sdk h6, #onetrust-consent-sdk #onetrust-pc-sdk p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-ven-lst .ot-ven-opts p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-title, #onetrust-consent-sdk #onetrust-pc-sdk .ot-li-title, #onetrust-consent-sdk #onetrust-pc-sdk .ot-sel-all-hdr span, #onetrust-consent-sdk #onetrust-pc-sdk #ot-host-lst .ot-host-info, #onetrust-consent-sdk #onetrust-pc-sdk #ot-fltr-modal #modal-header, #onetrust-consent-sdk #onetrust-pc-sdk .ot-checkbox label span, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-sel-blk p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-title h3, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .back-btn-handler p, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst .ot-ven-name, #onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-ven-lst .consent-category, #onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn, #onetrust-consent-sdk #onetrust-pc-sdk .ot-label-status, #onetrust-consent-sdk #onetrust-pc-sdk .ot-chkbox label span, #onetrust-consent-sdk #onetrust-pc-sdk #clear-filters-handler, #onetrust-consent-sdk #onetrust-pc-sdk .ot-optout-signal,
#onetrust-consent-sdk #onetrust-pc-sdk #filter-btn-handler {
color: #fff;
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc, #onetrust-consent-sdk #onetrust-pc-sdk h4, #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout .ot-cat-header, #onetrust-pc-sdk button, #onetrust-consent-sdk #onetrust-pc-sdk #accept-recommended-btn-handler, #onetrust-consent-sdk #onetrust-pc-sdk .ot-accordion-layout .ot-acc-grpdesc,
#onetrust-consent-sdk #onetrust-banner-sdk #onetrust-policy-text, #onetrust-consent-sdk #onetrust-banner-sdk .ot-dpd-desc, #onetrust-consent-sdk #onetrust-banner-sdk .ot-b-addl-desc,
#onetrust-consent-sdk #onetrust-pc-sdk #filter-btn-handler {
font-family: var(--font-main);
font-weight: 200;
}
#onetrust-pc-sdk button + .ot-acc-hdr .ot-plus-minus:before {
filter: invert(1);
}
#onetrust-pc-sdk .ot-accordion-layout h4 ~ .ot-always-active {
color: #fff;
}
#accept-recommended-btn-handler {
filter: contrast(0.87);
height: 32px!important;
padding: 12px!important;
border: none!important;
}
#onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
filter: invert(0.9) brightness(1.2);
}
#onetrust-pc-sdk .ot-switch-nob,
#onetrust-consent-sdk #onetrust-pc-sdk #vendor-search-handler {
background: #222;
border: 1px solid #333;
}
#onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob {
background-color: #555;
border: 1px solid #666;
}
#onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-grpcntr.ot-acc-txt, #onetrust-consent-sdk #onetrust-pc-sdk .ot-acc-txt .ot-subgrp-tgl .ot-switch.ot-toggle {
background-color: var(--shd-bg-primary);
}
#onetrust-consent-sdk #onetrust-banner-sdk a[href], #onetrust-consent-sdk #onetrust-banner-sdk a[href] font, #onetrust-consent-sdk #onetrust-banner-sdk .ot-link-btn {
color: #3c8fe6;
}
#onetrust-consent-sdk #onetrust-pc-sdk .category-host-list-handler, #onetrust-pc-sdk #ot-pc-desc .privacy-notice-link,
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-desc .privacy-notice-link {
color: #3c8fe6;
font-weight: 300;
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-cnt .ot-chkbox > input:checked ~ label,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-tgl input:checked + .ot-switch .ot-switch-nob,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-leg-btn-container .ot-inactive-leg-btn {
background: var(--shd-accent-orange)
}
#onetrust-consent-sdk #onetrust-pc-sdk #ot-pc-lst #ot-lst-cnt .ot-chkbox > input:not(:checked) ~ label,
#onetrust-consent-sdk #onetrust-pc-sdk .ot-tgl input:not(:checked) + .ot-switch .ot-switch-nob {
filter: brightness(0.4) contrast(2) hue-rotate(-20deg) hue-rotate(-5deg) brightness(1) contrast(1.3) saturate(1.4) var(--fil);
}
/* logged out landing page */
.sc-type-large {
filter: drop-shadow(2px 2px 4px #0006);
}
.frontHero__title {
text-align: center;
}
.onSoundCloudTeaser__title.sc-font-light {
font-weight: 600;
font-size: 28px;
line-height: 1.1;
}
span.frontContent__uploadOwnButton {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
}
button.headerSearch__submit.submit.sc-ir, form.headerSearch {
font-weight: 400;
}
input.headerSearch__input.sc-input.g-all-transitions-300::placeholder {
font-weight: 200;
}
a.frontContent__uploadButton.sc-button.sc-button-cta.sc-button-primary.sc-button-large {
margin-top: 4px;
}
.trendingTracks ul.lazyLoadingList__list.sc-list-nostyle.sc-clearfix {
display: flex;
flex-flow: wrap;
justify-content: center;
}
.frontHero {
filter: hue-rotate(/*[[hue]]*/deg);
}
.frontHero > * {
filter: hue-rotate(calc(/*[[hue]]*/deg * -1));
}
.header__loginMenu {
display: flex;
float: none;
justify-content: center;
}
.story__track__artist {
color: #ccc;
}
.artistNavigationItem__button {
border-radius: 15px;
}
/*input[type=date]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=search]::placeholder, input[type=tel]::placeholder, input[type=text]::placeholder, input[type=url]::placeholder, select::placeholder, textarea::placeholder {
font-weight: 300;
}
.modal__modal {
background: #111;
filter: brightness(1) contrast(1.1);
}*/
.editTrackList__list .sortable-placeholder {
background: #060606;
border-top: 1px solid var(--shd-bg-lighter);
}
.editTrackItem.m-dragging {
background-color: #1c1c1c;
padding: 1px 5px;
}
.createPlaylistSuggestion__addContainer, .editTrackItem__additional, .editTrackItem.m-active .editTrackItem__additional, .editTrackItem.m-hover .editTrackItem__additional,
.sc-classic .createPlaylistSuggestion__addContainer, .sc-classic .editTrackItem__additional, .sc-classic .editTrackItem.m-active .editTrackItem__additional, .sc-classic .editTrackItem.m-hover .editTrackItem__additional {
background: var(--shd-bg-darker);
background: linear-gradient(90deg,#0d0d0d11,#0d0d0d 17px);
}
.editTrackItem.m-dragging .editTrackItem__additional {
background: #1c1c1c;
background: linear-gradient(90deg,#1c1c1c1c,#1c1c1c 17px);
}
.editTrackItem {
transition: padding 0.3s;
}
.linkMenu__groupTitle {
font-size: 12px;
font-weight: 600;
text-align: right;
color: #333;
margin: 0 12px;
padding: 4px;
border-top: 1px solid #222;
margin-top: -18px!important;
margin-bottom: -22px!important;
}
._1srmB4exym6W6iYDJh87lM {
background-color: #0e0e0e99;
}
/*._1srmB4exym6W6iYDJh87lM:nth-of-type(2) {
backdrop-filter: brightness(1.9) contrast(1.1);
}*/
.editSnippet__playButton {
margin-bottom: -16px;
}
.tabs__tabNew {
border-radius: 4px;
/* background-color: #f50; */
/* color: #fff; */
padding: 2px 3px;
font-size: 10px;
font-weight: 800;
background-color: var(--shd-bg-darker);
}
span.sc-artwork.sc-artwork-placeholder-0:not([style*="background-image:"]):not(.image__rounded) {
background-image: linear-gradient(135deg,hsl(calc(20deg + /*[[hue]]*/deg) 18% 44%) -20%,hsl(calc(210deg + /*[[blu]]*/deg) 16% 50%) 120%);
filter: brightness(1.1) saturate(1.3) invert(1) hue-rotate(180deg);
/*filter: brightness(1.1) invert(1) hue-rotate(225deg) hue-rotate([[hue]]deg);*/
}
.sc-border-light-left {
border-left: 1px solid #eee2;
}
div.g-z-index-modal-background {
height: calc(100vh - 90px);
box-shadow: 0px 90px 0px 90px rgb(0 0 0 / 90%);
}
.sc-classic .l-fluid-fixed .l-main {
margin: 20px 330px 0 0;
}
.playControls__soundBadge .playbackSoundBadge .image {
height: 100%!important;
width: 100%!important;
}
.callout__bubble.ui-flipped-bottom:before {
bottom: auto;
top: -12px;
transform: rotate(225deg);
}
.sc-button:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-active):not(.sc-button-selected):not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton):not(.tileGallery__sliderButton):not(.playbackSoundBadge__follow):not(.editSnippet__playButton .sc-button-xxlarge):disabled {
color: #999;
}
#app .l-container #content .soundBadge__additional .sc-button-small.sc-button-icon.sc-button-more:before {
filter: brightness(10);
}
#app .l-container #content .soundBadge__additional .sc-button-small.sc-button-icon.sc-button-more.sc-button-active:before {
filter: brightness(4)!important;
}
button.sc-button.moreActions__button.sc-button-medium {
height: 28px;
}
.sc-classic .moreActions__button:focus:not(:disabled), .sc-classic .moreActions__button:hover:not(:disabled), .sc-classic .moreActions__link:hover {
background-color: #090909;
}
.sc-button-small.sc-button-icon:not(.sc-button-stretch-icon):not(.sc-button-follow), .sc-button-small.sc-button-responsive:not(.sc-button-stretch-icon):not(.sc-button-follow) {
min-width: 25px;
}
.sc-button-small.sc-button-follow:not(.sc-button-stretch-icon) {
min-width: 81px;
}
.sc-classic .modal__modal, .sc-classic .modal__modal.transparentBackground {
padding: 25px;
background: var(--shd-bg-darker);
border: 1px solid #222;
border-radius: 16px;
}
@supports (selector(:has(*))) {
.sc-classic .modal__modal, .sc-classic .modal__modal.transparentBackground {
width: var(--shd-modal-width)!important;
left: calc(50% - calc(var(--shd-modal-width) / 2))!important;
}
.sc-classic .modal__modal:has(.imageContent, .imageSelect), .sc-classic .modal__modal.transparentBackground:has(.imageContent, .imageSelect) {
--shd-modal-width: 550px;
/*width: 550px!important;
left: 656px!important;*/
}
}
.sc-classic .dialog__arrow {
border: 1px solid #6666;
border-width: 1px 0 0 1px;
background-color: var(--shd-bg-translucent);
backdrop-filter: blur(18px);
}
/*.widgetCustomization__upsell .widgetCustomization__checkbox {
opacity: 1;
}
.sc-checkbox-disabled {
cursor: pointer;
}
.sc-checkbox-disabled input[disabled] {
color: #ccc;
}
.sc-checkbox-input:disabled+.sc-checkbox-check, .sc-checkbox:hover .sc-checkbox-input:disabled+.sc-checkbox-check {
background-color: inherit;
opacity: 1;
}*/
.sc-classic .embedPanel__tabLink, .sc-classic .embedPanel__upsellTabLink {
background-color: #090909;
border-radius: 8px;
}
.sc-social-logo-32 {
border-radius: 4px;
filter: drop-shadow(0px 2px 3px #0006);
transition: filter 0.5s;
}
.sc-social-logo-32:hover {
filter: drop-shadow(2px 6px 4px #0009);
}
.sc-button-small.sc-button-follow:not(.sc-button-stretch-icon) {
min-width: inherit;
}
.sc-classic .compactTrackListItem.clickToPlay.active, .sc-classic .compactTrackListItem.clickToPlay:focus, .sc-classic .compactTrackListItem.clickToPlay:hover,
.sc-classic .compactTrackList__moreLink:focus, .sc-classic .compactTrackList__moreLink:hover {
/*background: linear-gradient(178deg, #f53 -2000%, #0d0d0d 200%);*/
background: var(--shd-bg-darker);
/*filter: hue-rotate([[hue]]deg);*/
border-radius: 4px;
transition-duration: 0.2s;
}
.sc-classic .compactTrackListItem.clickToPlay.active .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:focus .compactTrackListItem__additional, .sc-classic .compactTrackListItem.clickToPlay:hover .compactTrackListItem__additional {
background: linear-gradient(90deg,#0d0d0d00,#0d0d0d 17px);
}
.sc-classic .compactTrackListItem.active, .sc-classic .compactTrackListItem.active .compactTrackListItem__content, .sc-classic .compactTrackListItem.active .compactTrackListItem__number, .sc-classic .compactTrackListItem.active .compactTrackListItem__plays, .sc-classic .compactTrackListItem.active .compactTrackListItem__trackTitle, .sc-classic .compactTrackListItem.active .compactTrackListItem__user {
color: var(--shd-accent-orange);
transition-duration: 0.2s;
}
.sc-classic .compactTrackListItem {
transition-duration: 0.2s;
}
.compactTrackListItem.active .compactTrackListItem__number {
opacity: 0.4;
}
.active .sc-ministats-small.sc-ministats-plays:before {
filter: sepia(1) hue-rotate(-35.5deg) saturate(10) hue-rotate(/*[[hue]]*/deg);
}
.widgetCustomization__player.miniLoaded.sc-background-light {
background-color: #1110;
}
/* fix notification bubbles */
.sc-classic .gritter-item {
display: flex;
padding: revert;
}
.sc-classic .gritter-item-wrapper {
background: #222;
color: #fff;
border: 1px solid #444;
box-shadow: 0 0 8px #000;
border-radius: 6px;
}
.sc-classic .gritter-image {
position: relative;
border-radius: 6px 0 0 6px;
padding: 1px;
width: auto;
height: 100%;
max-width: 52px;
/* max-height: 52px;
align-self: flex-start;
margin: 6px 0 6px 6px;
margin-right: 0;
border-radius: 6px; */
}
.sc-classic .gritter-with-image, .sc-classic .gritter-without-image {
padding: 6px;
}
.sc-classic .gritter-close {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAABO0lEQVR4AVWLTYoTURzEH72YpTAL9QqCSxeDtxivoXMAt15DD6AHENSlCDJMf+R99fRLTDS7BI0xQ9KdnkD6Z4Ei+H7vT1VRlPnzOLEX1cd8m5Nvy0/2ghMMQp8sPSq+FpRUCGlB9XnygAyjcvo4vymxBCK1LsiX5Jv5QzKzv1tNS7yKxBghrZVLRpfcMc2LQuGaHT+Z8EW3Zq/sKWiemxAsWqpExYQNyCdqLM6bqteWMU4l9KiUT2jPqDUVkYaks9wCnTShTGR0NO42UHMtfgEHYIUSNQHXm7T01GINfOfqr9bCkxZm+d4RiOxYUMrlrOQj2rL4YIanTesVLlUE4bmSl9K0wzPDWfc6Hh3+Pxzx2L7hzHDKefc2HSzuH5Z06N7xhFNDxj3Oebn6NuvjYInDrP8x55XK+2S/AYzwe7pN8liBAAAAAElFTkSuQmCC) 50% no-repeat;
top: calc(50% - 10px);
right: 8px;
width: 15px;
height: auto;
padding: 7.5px 0;
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: inset 0 0 2px #ddd;
filter: brightness(0.55) contrast(4.5);
}
.sc-classic .error .gritter-top, .sc-classic .gritter-item-wrapper.big-success .gritter-top {
filter: hue-rotate(calc(/*[[hue]]*/deg + 2));
position: relative;
padding: 1px;
margin-bottom: -2px;
min-width: 38px;
width: auto;
height: auto;
}
/* artists spotlight dark */
.userAudibleSearchResults,
.sc-classic .userAudibleSearchResults {
background-color: #181818;
border: 1px solid #333;
border-top: none;
border-bottom: 1px solid #333!important;
border-radius: 0 0 9px 9px;
}
.userAudibleSearchResultItem,
.sc-classic .userAudibleSearchResultItem{
color: #fff!important;
}
.userAudibleSearchResults__item.selected,
.sc-classic .userAudibleSearchResults__item.selected {
background-color: #222;
}
/* upload progress fix */
.uploadButton.active {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
flex: auto;
padding: 4px 12px;
background: linear-gradient(30deg, #401702 -500%, var(--shd-bg-primary) 150%)!important;
filter: hue-rotate(/*[[hue]]*/deg);
border-radius: 8px;
text-align: center;
line-height: 1.2;
height: 35px;
}
.uploadButton__status {
text-align: center;
margin-left: -.5em;
}
.sc-classic .permalinkTextfield__input:disabled {
color: #fff;
}
.permalinkTextfield__prefixText a {
color: #ccc!important;
}
.activeUpload__form .uploadAudibleAttributeIcons {
right: calc(50% - 404px);
top: 144px;
z-index: 1;
}
.m-active .editTrackItem__additional {
background: linear-gradient(90deg,#4e292911,#4d2829 17px)!important;
}
.sc-classic .modal__modal .audibleEditForm {
border: none;
margin-bottom: 0;
}
.sc-button-active:not(.hintButton), .sc-button-selected, .sc-classic .sc-button-active:not(.hintButton), .sc-classic .sc-button-selected {
color: var(--shd-accent-primary);
}
.sc-classic .frontContent__actions input[type=search], .sc-classic .frontContent__actions input[type=search]:focus {
padding: 0 16px;
height: 46px;
}
.frontContent__actions .headerSearch__submit {
background-size: 19px 19px;
background-position: 50%;
top: 0;
right: 0;
width: 48px;
height: 100%;
}
/* update datepicker */
.textfield.datefield .textfield__input {
background: url(https://a-v2.sndcdn.com/assets/images/calendar-96bbd47c.svg) no-repeat right 8px center, var(--shd-bg-primary);
}
.sc-classic .ui-datepicker {
background: var(--shd-bg-primary);
border: 1px solid #222;
border-top: none;
border-radius: 0 0 8px 8px;
width: calc(17em - 2px);
margin-top: -4px;
}
.sc-classic .ui-datepicker th {
color: #ccc;
font-weight: 700;
}
.sc-classic .ui-datepicker .ui-state-default.ui-state-highlight:not(.ui-state-active) {
color: #fff;
background-color: #666;
}
.sc-classic .ui-datepicker .ui-state-default, .sc-classic .ui-datepicker .ui-datepicker-next, .sc-classic .ui-datepicker .ui-datepicker-prev {
color: #999;
transition-duration: 0.2s;
}
.sc-classic .ui-datepicker .ui-state-default.ui-state-hover:not(.ui-state-highlight):not(.ui-state-active), .sc-classic .ui-datepicker .ui-datepicker-next:not(.ui-state-disabled):hover, .sc-classic .ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover {
background-color: #333;
color: #ccc;
transition-duration: 0.2s;
}
.sc-classic .ui-datepicker .ui-datepicker-next:not(.ui-state-disabled):hover svg, .sc-classic .ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled):hover svg {
filter: drop-shadow(0px 0px 1px #ccc);
}
.sc-classic .ui-datepicker .ui-datepicker-next, .sc-classic .ui-datepicker .ui-datepicker-prev {
z-index: 2;
}
.sc-classic .ui-datepicker .ui-state-default.ui-state-active {
filter: hue-rotate(/*[[blu]]*/deg);
}
/* datepicker open animation */
@keyframes calendar {
from {height: 0;padding-top:6px;padding-bottom:0px;}
to {height: 170px;padding:20px;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
.sc-classic .ui-datepicker {
animation-name: calendar;
animation-duration: 0.8s;
animation-fill-mode: both;
}
.sc-classic .ui-datepicker * {
animation-name: fadeIn;
animation-duration: 0.6s;
animation-fill-mode: both;
}
.sc-classic .ui-datepicker table thead {
animation-delay: 50ms;
}
.sc-classic .ui-datepicker table tbody tr:nth-of-type(1) {
animation-delay: 120ms;
}
.sc-classic .ui-datepicker table tbody tr:nth-of-type(2) {
animation-delay: 190ms;
}
.sc-classic .ui-datepicker table tbody tr:nth-of-type(3) {
animation-delay: 250ms;
}
.sc-classic .ui-datepicker table tbody tr:nth-of-type(4) {
animation-delay: 330ms;
}
.sc-classic .ui-datepicker table tbody tr:nth-of-type(5) {
animation-delay: 400ms;
}
.g-opacity-transition-500 {
transition: revert;
}
.sc-button-follow.sc-button-lightfg.m-boldIcon:not(.sc-button-selected):before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xMC41IDVjMy4yNSAwIDMuOTQ0IDMuMjM2IDIuNSA3IDMuNzE3IDEuNTM0IDQgNC44NSA0IDZINGMwLTEuMTUuMjgzLTQuNDY2IDQtNi0xLjQ0NS0zLjc3NS0uNzUtNyAyLjUtN3pNMTggNGExIDEgMCAwMTEgMXYxaDFhMSAxIDAgMDEwIDJoLTF2MWExIDEgMCAwMS0yIDBWNy45OTlMMTYgOGExIDEgMCAwMTAtMmwxLS4wMDFWNWExIDEgMCAwMTEtMXoiLz48L3N2Zz4K);
filter: none;
}
.sc-button-small.m-boldIcon.sc-button-follow:not(.sc-button-stretch-icon) {
min-width: 25px;
}
.sc-button-follow.sc-button-transparent.sc-button-selected, .sc-button-selected.sc-button-transparent.sc-button-like, .sc-button-selected.sc-button-transparent.playbackSoundBadge__follow, .sc-button-selected.sc-button-transparent.sc-button-repost, .sc-button-selected.sc-button-transparent.addToPlaylistButton, .sc-button-selected.sc-button-transparent.createPlaylistSuggestion__add {
border-color: none;
border: none;
background: inherit;
transition-duration: inherit;
}
div#searchMenuList {
margin: 0 0px;
border-radius: 8px;
box-shadow: 0 0 10px var(--shd-bg-darker)!important;
background-color: var(--shd-bg-dropdown);
backdrop-filter: blur(32px);
}
.sc-classic .searchMenu__searchFor {
border-radius: 8px 8px 0 0;
background-color: #0000;
border: 1px solid #333;
border-bottom: 1px solid #3335;
box-shadow: none;
}
.searchAutocomplete.g-dark-list {
border-radius: 0 0 8px 8px;
background-color: #0000;
border: 1px solid #333;
border-top: none;
}
.sc-classic .searchAutocomplete>.loading {
background-color: #0000;
background: transparent url(https://a-v2.sndcdn.com/assets/images/loader-db80c58f.gif) no-repeat 50%;
}
.autocompleteItem .sc-artwork:not(.image__rounded) {
border-radius: 4px;
}
.dropdownMenu .sc-list-nostyle .sc-button:hover,
.sc-classic .editTrackModalButton:not(:disabled):focus,
.sc-classic .editTrackModalButton:not(:disabled):hover{
background: #2226;
color: #fff;
/* transition-duration: 0.25s; */
}
.sc-classic .linkMenu__activeItem, .sc-classic .linkMenu__item:hover {
filter: hue-rotate(/*[[hue]]*/deg);
}
.sc-button-dropdown.sc-button-dropdown-plain:not(.sc-button-disabled):not(:disabled) {
border-color: #333;
color: #ccc;
background-color: var(--shd-bg-primary);
transition-duration: .25s;
}
.sc-button-dropdown.sc-button-dropdown-plain:hover:not(.sc-button-disabled):not(:disabled) {
border-color: #fff6;
background-color: #222;
color: #ddd;
}
.sc-classic .header__userNavButton, .sc-classic .header__userNavItem, .sc-classic .header__navMenu>li>a.header__moreButton {
transition-duration: 0.2s;
transition-property: background-color, box-shadow, filter;
}
.sc-classic .header__navMenu>li>a.header__moreButton:not(.selected):hover {
transition-property: filter;
}
.sc-classic .header__userNavButton.selected, .sc-classic .header__userNavItem.selected, .sc-classic .header__navMenu>li>a.header__moreButton.selected {
background-color: var(--shd-bg-translucent);
border-radius: 8px;
box-shadow: inset 0 6px 16px #0009;
transition-duration: 0.1s;
}
.header__userNavUsernameButton {
height: 44px;
}
.sc-classic .whoToFollowModule .sc-link-light:hover .sidebarHeader__more {
filter: contrast(0.8) brightness(2);
}
.soundTitle__titleHeroContainer {
margin-top: 4px;
}
.soundTitle__title {
padding-top: 4px;
}
.sc-classic .mobileAppsButtons.m-sidebar {
padding: 0px;
}
/* navigation fix */
.header__navMenu > li > a.header__moreButton.selected,
.header__userNavButton.selected,
.header__userNavItem.selected {
/*background: 0 0*/
background-color: transparent;
filter: brightness(.5);
transition-duration: 0.2s;
}
.header__navMenu > li > a.header__moreButton:hover,
.header__userNavButton:hover,
.header__userNavItem:hover {
transition-duration: 0.2s;
}
.header__navMenu > li > a.header__moreButton:not(.selected) {
transition: opacity 0.2s;
filter: brightness(1);
}
.header__navMenu > li > a.header__moreButton:not(.selected):hover {
filter: brightness(1.2);
}
/* new navmenu */
.header__navWrapper .header__navMenu li a {
border: 0;
color: #b3b3b3;
box-sizing: border-box;
background: 0 0;
height: 40px;
line-height: 40px;
margin: 10px;
/*padding: 0 34px;*/
padding: 0 48px;
text-align: left;
font-size: 16px;
font-weight: 400;
/*letter-spacing: 1px;*/
width: 100%;
filter: drop-shadow(0px 0px 0px #fff0);
border-radius: 4px;
border-left: 0px solid var(--shd-accent-primary);
transition: border-left .1s ease, background .1s ease;
}
.header__navWrapper .header__navMenu li a.selected {
border-left: 4px solid var(--shd-accent-primary);
/*background: linear-gradient(90deg, #401702 -400%, transparent);*/
background: linear-gradient(90deg, var(--shd-accent-primary) -400%, transparent);
}
.header__navWrapper .header__navMenu li a:not(.selected):hover {
color: #fff;
transition-duration: 0.25s;
filter: drop-shadow(0px 0px 6px #fff8);
}
.header__navWrapper .header__navMenu li a:before {
content: "";
display: block;
position: absolute;
background-repeat: no-repeat;
background-position: 0 50%;
width: 22px;
height: 22px;
top: 0;
bottom: 3px;
margin: auto 0;
padding: 0 0;
left: 18px;
opacity: 0.7;
transition-duration: 0.2s;
background-size: 22px 22px;
}
.header__navWrapper .header__navMenu li a[data-menu-name="home"]:before {
background-image: var(--ic/*[[home]]*/-home);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="home"]:before {
background-image: var(--ic/*[[home]]*/-home-active);
}
.header__navWrapper .header__navMenu li a[data-menu-name="stream"]:before {
background-image: var(--ic/*[[feed]]*/-stream);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="stream"]:before {
background-image: var(--ic/*[[feed]]*/-stream-active);
}
.header__navWrapper .header__navMenu li a[data-menu-name="library"]:before {
background-image: var(--ic/*[[libs]]*/-library);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="library"]:before {
background-image: var(--ic/*[[libs]]*/-library-active);
}
.header__navWrapper .header__navMenu li a.selected:before, .header__navWrapper .header__navMenu li a:hover:before, .header__navWrapper .header__navMenu>li>a:focus:before {
opacity: 1;
}
.profileHeader__edit {
left: 232px!important;
}
.sc-classic .soundList__item {
margin-bottom: 24px;
padding: 0;
}
/* Report Button Fix */
.sc-button-small.reportCopyright {
padding: 2px 9px 2px 24px;
color: #888!important;
border: 1px solid var(--shd-bg-lighter);
width: auto;
}
.sc-button-small.reportCopyright:before {
content: "";
display: block;
position: absolute;
background-repeat: no-repeat;
background-position: 50%;
width: 20px;
height: 20px;
top: 0;
bottom: 0;
margin: auto 0;
left: 4px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAAnElEQVR4AZXNUQqDMBCE4TlWKApbiGBEpVYphQb6knvkaDnalLWK60uhfjA+5CfBX1+SBAvJiPKmCc7HizwZaQJ73MvEucx4FRtsPy+BA8c84pHtDetUcmXDwC53uGf7BBKcXFhTg7a0uJWFR4B0ChoMnLgGEhGBqEwQuAayQOmoLaihQS89vnQ2+w1ePHbwhgaVVDjoGE4cLLifPnBzeJR4+XAqAAAAAElFTkSuQmCC);
background-size: 16px 16px;
filter: contrast(0) sepia(0) hue-rotate(-48deg) saturate(0) brightness(1) contrast(0)!important;
transition: filter 0.2s!important;
}
.sc-button-small.reportCopyright:hover {
color: #f34!important;
border-color: #f236!important;
background: #301!important;
}
.sc-button-small.reportCopyright:hover:before {
filter: contrast(0) sepia(1) hue-rotate(-49.95deg) saturate(12) brightness(1.71) contrast(1)!important;
}
.g-stats-icon {
width: 20px;
height: 18px;
}
/* stats modal fix - see line 3728 */
.sc-classic .modal__header ~ .modal__modal {
padding: 25px;
background: var(--shd-bg-darker);
border: 1px solid #222;
border-top: none;
border-radius: 0px 0px 16px 16px;
top: -36px;
}
.modal__header .g-modal-section {
border: 1px solid #222;
border-bottom: none;
border-radius: 16px 16px 0px 0px;
}
.stats__pager:before {
filter: invert(1);
}
.creatorsNavigation__onSoundCloudLink {
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjY2NjYSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiB2ZXJzaW9uPSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTExLDQgTDgsNCBMOCwzIEwxMywzIEwxMyw0IEwxMyw0IEwxMyw4IEwxMiw4IEwxMiw1IEw2LDEwIEw2LDEwIEwxMSw0IFoiPjwvcGF0aD4KICAgIDxwYXRoIGQ9Ik0zLDEyIEw5LDEyIEw5LDEzIEwzLDEzIEwzLDEyIFogTTMsMTIgTDMsNyBMNCw3IEw0LDEyIEwzLDEyIFogTTksMTMgTDksMTAgTDEwLDkgTDEwLDEzIEw5LDEzIFogTTMsNyBMMyw2IEw3LDYgTDYsNyBMMyw3IFoiPjwvcGF0aD4KPC9zdmc+) no-repeat 0 15px/16px 16px!important;
}
.imageCrop__previewContainer.sc-artwork.sc-artwork-placeholder-9 {
background-image: none;
}
.imageCrop__preview, .sc-classic .imageCrop__preview {
border-radius: 8px;
}
/*.sc-classic .g-range-input::-moz-range-thumb, .sc-classic .g-range-input::-ms-thumb, .sc-classic .g-range-input::-webkit-slider-thumb {
filter: hue-rotate(-20deg)!important;
}*/
/*.sc-classic .g-range-input::-moz-range-thumb, .sc-classic .g-range-input::-ms-thumb, .sc-classic .g-range-input::-webkit-slider-thumb {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE0SURBVFhH7ZZLCsIwEIZjwUu4deVevIF79S6FHkHoXdS9V3Dvyq2XEIrzNxFEkM4jliDzwVAT6PDZPGYmIaxCyVTpWSwuaMUFrbigFRe0Yqok3TpM6bFJsaSYUYA7xYXihKjO4YFJDWpBktvSo6WY9xPfuVHUJHmMQxliQRLDtthT1P0EH/yZhkS7OOSh2YMaOYB38K4I0RdMy3qIIzU7yXKzBdOBuFIM7bkhsCcX3IMjWWKcVKscQA7kYiEVzMVPBHHP5YKdSyL4uoRzwM6luWZGRSKI8pULdi6JIGprLti5JIIo/Llg55IK4pK1ghz5BdPNr6nBn6CzYbdfki8ISdRQdCVaWkkdBiLBREOhkezbrfiTz/81rO+kDgd1FVFWyz8Wmj04Ki5oxQWtuKAVF7QRwhOSKD52doAYMAAAAABJRU5ErkJggg==) 50%/20px 20px no-repeat!important;
}*/
/*.sc-classic .g-range-input::-moz-range-thumb, .sc-classic .g-range-input::-ms-thumb, .sc-classic .g-range-input::-webkit-slider-thumb {
background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxMCIgc3R5bGU9ImZpbGw6I2ZmNDYzNyIvPjwvc3ZnPg==) 50%/20px 20px no-repeat!important;
}*/
.imageCrop__bottom.g-flex-row-centered-right {
max-width: fit-content;
}
/* Compact Messages area */
.conversationBadge__image .image__lightOutline .image__full, .conversationBadge__image .image__lightOutline {
height: 15px!important;
width: 15px!important;
margin-right: -15px;
margin-top: 4px
}
.sc-classic .conversationBadge__image {
margin-right: 0px;
}
.conversationBadge__senderName {
margin-left: 19px;
}
/**/
.sc-classic .inboxItem {
border-left: 4px solid transparent;
border-radius: 4px;
}
.sc-classic .inboxItem.active {
background: linear-gradient(90deg, var(--shd-accent-primary) -400%, transparent);
}
.paymentMethod__appleContent, .paymentMethod__editableContent, .paymentMethod__googlePlayContent,
.currentPlan__planContainer, .currentPlan__planUpsell, .g-upsell-container,
.sc-classic .paymentMethod__appleContent, .sc-classic .paymentMethod__editableContent, .sc-classic .paymentMethod__googlePlayContent,
.sc-classic .currentPlan__planContainer, .sc-classic .currentPlan__planUpsell, .sc-classic .g-upsell-container {
background: none;
}
.consumerSubscription__upsell {
padding: 0;
}
.sc-classic .editStatus__info {
color: #eee;
}
/* modal flexbox test */
ul.g-tabs.g-tabs-large {
display: flex;
flex-flow: row nowrap;
place-content: normal;
align-items: center;
}
ul.g-tabs.g-tabs-large li {flex: none;}
.tokenInput__inputContainer:not(.autoTagger *), .tagInput__input {
width: 100%;
}
.baseFields__tagInput .tagInput {
display: flex;
flex-flow: row nowrap;
place-content: space-between;
align-items: baseline;
}
.tokenInput__wrapper.tagInput__wrapper.sc-input.sc-input-medium {
width: max-content;
flex: auto;
}
.sc-classic .tokenInput__label {
padding-right: 8px;
}
.sc-classic .tokenInput__input:not(.autoTagger *) {
padding: 0;
margin-right: -8px
}
.baseFields__data, .sc-classic .editBasicTab .textfield {
display: flex;
flex-flow: column nowrap;
place-content: space-between;
place-items: stretch;
place-self: center;
width: 100%;
}
.baseFields__data > *[class*="baseFields__"], .sc-classic .textfield > * {
flex: auto;
}
.sc-classic .baseFields__genreSelect {
-webkit-flex-basis: calc(50% - 5px);
flex-basis: calc(50% - 5px);
}
.sc-classic .baseFields__tagInput,
.sc-classic .baseFields__customGenre
{
margin: 0;
}
.baseFields__genreRow.g-flex-row-spread {
margin: 0 0 8px;
}
.sc-classic .activeUpload__shareContainer {
background-color: initial;
}
.sc-visuallyhidden, .actorUser > .actorUser__username {
user-select: none;
}
.downloadLandingIntro {
margin: 0 30px 160px;
}
.trackList__list { /* Playlist sorting */
display: flex;
flex-direction: /*[[sort-pl]]*/;
}
.dhG3yr_3xo0-P0NVkEUAf { /* edit preview */
background-color: hsla(0,0%,7%,.7);
}
/* image cropper title */
.sc-classic .g-modal-title-h1 { /* title */
margin-bottom: 0
}
.sc-classic .imageSelect__hint { /* hint */
color: #999;
}
/* web auth */
.webAuthContainerWrapper[style*="left: 255px"] { /* login */
margin-left: 230px;
}
.webAuthContainerWrapper iframe {
filter: drop-shadow(2px 6px 9px #0006);
}
/* captcha */
.captcha, .captcha > div {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.captcha > div > div[style] {
background: #111!important;
}
.captcha > div > div[style] > textarea {
border: 1px solid #666!important;
border-radius: 3px;
}
/* fix go+ icons on artwork hover in library */
.sc-classic .tierIndicator__smallGoPlus.tierIndicator__artwork {
z-index: 101;
}
/* fix profile footer */
.userMain__content {
margin-bottom: 90px;
}
.sc-classic .profileUploadFooter {
background-color: #0000;
border-top: 1px solid #6663 !important;
}
.sc-classic .profileUploadFooter:before {
content: "";
display: block;
width: 100%;
height: 14px;
position: absolute;
left: 0;
top: -9px;
background: 50% / 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 48 21.64'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M41.2 21.6c3.6.05 6.6-2.77 6.8-6.39a6.62 6.62 0 0 0-1.86-4.8 6.53 6.53 0 0 0-6.46-1.75A10.95 10.95 0 0 0 29.06 0c-3.17 0-4.68 1.05-4.68 1.05a1.5 1.5 0 0 0-.9 1.44v17.74c0 .75.6 1.36 1.36 1.37zm-19.76-.49c.85-6 .5-11.48 0-17.5a.54.54 0 0 0-.25-.5.53.53 0 0 0-.56 0c-.17.1-.27.3-.25.5-.45 5.97-.8 11.56 0 17.5a.53.53 0 0 0 1.06 0zm-3.31 0a.56.56 0 0 1-.55.48.55.55 0 0 1-.55-.47 67.3 67.3 0 0 1 0-15.44c.03-.29.27-.5.55-.5.29 0 .53.21.56.5a60.5 60.5 0 0 1-.01 15.44zm-3.32 0c.78-5.5.54-10.44 0-15.95a.54.54 0 0 0-.53-.49c-.28 0-.5.21-.54.49-.5 5.44-.76 10.52 0 15.94a.54.54 0 1 0 1.07 0zm-3.32.01a.55.55 0 0 1-.54.5.55.55 0 0 1-.54-.5 56.87 56.87 0 0 1 0-14.41c0-.3.25-.56.55-.56.3 0 .55.25.55.56.65 4.78.64 9.63-.02 14.41zm-3.35.04c.5-3.8.87-7.1.04-10.85a.55.55 0 0 0-1.09 0c-.79 3.72-.42 7.1.03 10.85.04.26.26.44.51.44a.5.5 0 0 0 .51-.44zM4.87 9.75c.76 3.83.51 7.07-.02 10.9-.07.58-1.03.58-1.08 0-.5-3.77-.72-7.11-.02-10.9.03-.3.27-.51.56-.51.28 0 .53.22.56.5zM1.49 18.8c.57-2.6.84-4.67.04-7.2a.56.56 0 0 0-.56-.51.56.56 0 0 0-.57.5c-.64 2.55-.44 4.66.05 7.2.03.28.25.48.52.48s.5-.2.52-.47z' clip-rule='evenodd'/%3E%3C/svg%3E"), radial-gradient(circle, var(--shd-bg-primary) 20px, #0000 20px);
}
/* insanely subtle track title ellipses color in playlists*/
.sc-classic .trackItem__content,
.sc-classic .trackItem:not(.m-disabled).active .trackItem__content, .sc-classic .trackItem:not(.m-disabled).active .trackItem__trackTitle {
color: #666;
}
/* add cast controls */
.playControls.m-googleCastActive .playControls__castControl {
cursor: default;
position: absolute;
margin: 0;
background-image: unset;
color: #b3b3b3;
transition: color 0.3s;
right: 70px;
}
.playControls.m-googleCastActive .playControls__castControl:hover {
color: #fff;
}
.sc-classic .playControls__castControl>#castbutton {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
--connected-color: var(--shd-accent-primary);
--disconnected-color: currentColor;
padding: 0px;
}
/* fix button alignment */
.sc-button-small.sc-button-icon:not(.sc-button-stretch-icon):before {
left: 0 !important;
width: 100%;
}
.sc-button-small.sc-button-icon:not(.sc-button-stretch-icon) {
padding: 0;
}
.sc-button-small.sc-button-pause:before {
top: 0;
}
.sc-classic .profileMenu .headerMenu__link:after {
background-position: 50%;
}
@supports (selector(:has(*))) {
#app:not(body[marginwidth="0"][marginheight="0"] #app):not(:has(.playControls)),
#app:not(:has(.playControls)) header:not(.g-flex-row-spread),
#app:not(:has(.playControls)) div.g-z-index-modal-background,
body:not(:has(.playControls)) div.g-z-index-modal-background {
height: 100vh;
}
}
/* new tracks */
.webiRedirectionHeader {
background: var(--shd-accent-blue) linear-gradient(0deg, #0005, #0004);
}
.webiRedirectionHeader__new {
background: #000;
border: 2px solid #000;
}
.sc-classic button.editTrackModalButton {
color: #b3b3b3;
cursor: default;
}
.l-main ~ .l-stats-footer {
margin-bottom: 60px;
}
.l-main:last-child {
margin-bottom: 60px;
}
.announcements.m-offset {
transform: translateY(-90px);
}
.crossfade-announcement {
background: var(--shd-accent-blue) linear-gradient(180deg, #0005, #0004);
}
/* 2023 comments update */
.commentItem {
padding-top: 12px;
}
.commentItem.m-isReply,
.sc-classic .commentsList__item .commentItem.m-isReply {
margin-left: 40px;
background-color: #131313;
border: 1px solid #222;
border-radius: 12px;
padding: 10px 10px 0 10px;
margin-top: -1px;
margin-bottom: 6px;
}
.commentItem.m-creatorComment,
.sc-classic .commentItem.m-creatorComment {
background-color: #161616;
border: 1px solid #333;
}
.commentItem__creator, .commentItem__creatorLink {
background-color: #f502;
border: 1px solid #f50;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.commentItem__verifiedBadge {
top: 3px;
margin-left: 3px;
}
.commentItem__timestampLink, .commentItem__timestampLink:hover, .commentItem__timestampLink:visited {
background-color: #0000;
font-size: inherit;
padding: 3px 0px;
font-weight: 400;
}
.commentItem__createdAt, .commentItem__separator, .commentItem__timestamp {
color: var(--font-secondary-color);
}
.commentItem__controls {
visibility: visible;
height: 4px;
opacity: 0;
transition: opacity 0.3s ease, height 0.2s ease-out;
gap: 6px;
}
.commentItem.m-dialogOpen .commentItem__controls, .commentItem:hover .commentItem__controls {
visibility: visible;
height: 32px;
opacity: 1;
}
.commentItem__replyButton, .commentItem__replyButton:hover, .commentItem__replyButton:visited {
height: 26px;
margin: 0;
padding: 2px 11px 2px 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
cursor: pointer;
line-height: 20px;
white-space: nowrap;
text-align: center;
vertical-align: initial;
box-sizing: border-box;
font-size: 12px;
min-width: 31px;
float: left;
margin-right: 0;
}
.commentItem__replyButton, .commentItem__replyButton:visited {
border-color: var(--shd-bg-lighter) ;
background: var(--shd-bg-primary) ;
color: #ccc !important;
filter: drop-shadow(0px 0px 0px #0000);
transition-duration: 0.25s;
}
.commentItem__delete {
width: 26px;
height: 26px;
margin: 0;
padding: 2px 11px 2px 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
cursor: pointer;
line-height: 20px;
white-space: nowrap;
text-align: center;
vertical-align: initial;
box-sizing: border-box;
font-size: 12px;
float: left;
margin-right: 0;
}
.commentItem__delete:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0 !important;
top: 0;
background-image: url(https://a-v2.sndcdn.com/assets/images/Trash-3b76d75e.svg);
background-size: 16px;
background-repeat: no-repeat;
background-position: 50% 50%;
filter: invert(1)
}
.commentItem__replyButton:hover {
border-color: #fff6;
background: #222;
color: #eee !important;
filter: drop-shadow(2px 2px 6px #000);
}
.commentItem.m-isReply .commentForm.visible .commentForm__wrapper, .commentItem.m-isReply .sc-classic .commentForm.visible.m-small .commentForm__wrapper {
border-radius: 12px !important;
margin-top: -8px
}
/* Was going to try using an icon with the reply button but decided against it. */
/* Un-comment The lines below to re-enable */
/* .commentItem__replyButton, .commentItem__replyButton:hover, .commentItem__replyButton:visited {
text-indent: 17px;
}
.commentItem__replyButton:before {
content: "";
display: block;
position: absolute;
background-repeat: no-repeat;
background-position: 50%;
width: 20px;
height: 20px;
top: -1px;
bottom: 0;
margin: auto 0;
left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23ddd' fill-rule='evenodd' d='M5 3a2 2 0 0 0-2 2v3c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm0 7v3l3-3H5Z'/%3E%3C/svg%3E");
background-size: 17px 17px;
} */
/* feed comment fixes */
.sc-classic .sound.streamContext .commentForm.m-small,
.sc-classic .sound.streamContext .commentForm.visible.m-small {
--comment-height: 0px;
--comment-height-on: 30px;
margin-top: 10px;
height: var(--comment-height);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: stretch;
}
/* !!! Uncomment below if you have issues with comment boxes not showing properly !!! */
/* .sc-classic .sound.streamContext .commentForm.visible.m-small {
--comment-height: 30px;
} */
@supports (selector(:has(*))) {
.sc-classic .sound.streamContext .commentForm.m-small,
.sc-classic .sound.streamContext .commentForm.visible.m-small {
opacity: 0;
--comment-height: 0px;
}
.sound__waveform:has(.commentPlaceholder.visible) ~ .commentForm.visible.m-small {
--comment-height: var(
--comment-height-on);
opacity: 1;
margin-top: 4px;
}
}
.sc-classic .sound.streamContext .commentForm.visible.m-small.m-active,
.sc-classic .sound.streamContext .commentForm.visible.m-small:active,
.sc-classic .sound.streamContext .commentForm.visible.m-small:focus,
.sc-classic .sound.streamContext .commentForm.visible.m-small:focus-within,
.sc-classic .sound.streamContext .commentForm.visible.m-small:hover {
--comment-height: var(--comment-height-on);
opacity: 1;
margin-top: 4px;
}
.sc-classic .visualSound.streamContext .commentForm.visible,
.sc-classic .visualSound.streamContext .commentForm.visible.m-small {
margin-top: 25px;
}
.sc-classic .g-input-validation.g-input-validation-hidden, .sc-classic .g-input-validation:empty {
display: none;
overflow: hidden;
}
.sc-classic .commentForm.m-small .commentForm__wrapper,
.sc-classic .commentForm.visible.m-small .commentForm__wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
height: var(--comment-height);
margin: 0 16px;
padding: 0;
}
.sc-classic .commentForm.m-small .commentForm__inputWrapper {
height: var(--comment-height-on);
margin-left: 0;
font-size: 14px;
}
.sc-classic .commentForm.m-small .commentForm__input {
height: var(--comment-height);
padding: 0 calc(var(--comment-height)*0.3);
}
.sc-classic .commentForm.m-small .commentForm__avatar {
border-radius: unset;
}
.sc-classic .commentForm.m-small .commentForm__avatar,
.sc-classic .commentForm.m-small .commentForm__avatar > .sc-artwork {
height: var(--comment-height)!important;
width: var(--comment-height)!important;
transition: height 0.3s;
}
.sc-classic .commentForm .commentForm__avatar,
.sc-classic .commentForm .commentForm__avatar > .sc-artwork {
border-radius: 8px;
}
/* comment popover fixes */
.sc-classic .commentPopover:not(:hover, .visible) .commentPopover__wrapper {
pointer-events: none;
}
.sc-classic .commentPopover.small .commentPopover__body, .sc-classic .commentPopover.small .commentPopover__username {
padding-top: 3px;
}
.sc-classic .commentPopover.small.visible .commentPopover__body, .sc-classic .commentPopover.small.visible .commentPopover__username {
padding-top: 6px;
}
.visualSound.playing:not(.focused) .visualSound__progress {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
/* comment like button */
.uiEvoButton--isLight.commentItem__likeButton {
border-color: var(--shd-bg-lighter);
background: var(--shd-bg-primary);
color: #ccc;
filter: none;
transition-duration: 0.25s;
transition-property: filter, border-color, background, color;
margin-bottom: 0;
}
.uiEvoButton:hover.uiEvoButton--isLight, .uiEvoButton:link.uiEvoButton--isLight, .uiEvoButton:visited.uiEvoButton--isLight {
border-color: #fff6;
background: #222;
color: #eee;
filter: drop-shadow(0px 0px 2px #fff6) hue-rotate(/*[[hue]]*/deg) var(--fil);
transition-duration: 0.25s;
}
.uiEvoButton--isLight.commentItem__likeButton.m-selected:hover {
border-color: #f506;
background: #310;
filter: drop-shadow(0px 0px 2px #310) hue-rotate(/*[[hue]]*/deg) var(--fil);
transition-duration: 0.25s;
}
.uiEvoButton--isLight.commentItem__likeButton.m-selected {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil)
}
.commentItem__likeWrapper {
margin-top: -16px;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.commentItem__like {
width: auto;
}
.uiEvoButton--isLight.commentItem__likeButton {
color: var(--font-secondary-color);
margin-left: 2px;
border: none !important;
background: none !important;
padding: 0px;
width: auto;
}
.uiEvoButton--isLight.commentItem__likeButton > svg {
transition: transform 0.3s ease;
height: 22px;
}
.uiEvoButton--isLight.commentItem__likeButton:hover > svg {
transition: transform 0.8s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
transform: scale(1.1);
}
.commentItem__creatorBadgeAndCount {
display: flex;
flex-direction: row;
gap: 6px;
}
.commentItem__creatorBadgePlaceholder {
margin-right: -6px;
}
.commentItem__likeCount {
font-weight: 400;
}
.creatorLikeIcon {
filter: hue-rotate(/*[[hue]]*/deg);
padding-right: 0;
}
.creatorLikeInline {
color: var(--font-secondary-color);
}
.creatorLikeInlineLikeIcon {
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.commentItem__likeWrapper {
visibility: visible;
filter: contrast(0.825) brightness(0.775);
transition-duration: 0.3s;
transition-property: opacity, filter, transform;
transform: scale(1);
transform-origin: right;
}
.commentItem.m-dialogOpen .commentItem__likeWrapper, .commentItem:hover .commentItem__likeWrapper {
visibility: visible;
filter: none;
opacity: 1;
transform: scale(1.1);
}
/* comment send button */
.sc-classic .commentForm__submitButton {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0808 4.08454c.0817-.26553.0099-.55446-.1865-.7509-.1964-.19644-.4854-.2682-.7509-.1865L1.75863 8.80399c-.2994.09213-.51001.36063-.52817.67336-.01816.31273.15995.60385.44668.72995l8.57186 3.7716 3.7716 8.5719c.1262.2867.4173.4648.73.4467.3127-.0182.5812-.2288.6734-.5282l5.6568-18.38476ZM10.6505 12.5168 4.12458 9.64541 19.2305 4.99743l-4.648 15.10597-2.8714-6.526 3.3496-3.3495L14 9.16725l-3.3495 3.34955Z' fill='%23fff' stroke='%23fff' stroke-width='0.5'/%3E%3C/svg%3E") !important;
background-position-x: 49% !important;
background-position-y: 50% !important;
background-repeat: no-repeat !important;
background-color: var(--shd-accent-primary) !important;
background-size: 50% !important;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil) !important;
border: 0px solid #0000;
border-bottom: 3px solid #0004;
border-radius: 8px;
margin-left: 6px;
padding: 12px;
width: 48px;
color: #ccc;
box-shadow: inset 0px -3px 0px -6px #000;
transition-duration: 0.1s;
transition-timing-function: ease-out;
}
.sc-classic .commentForm__submitButton:disabled {
cursor: default;
border: 0px solid #0000;
box-shadow: inset 0 0 0 1px var(--shd-bg-lighter);
background-color: var(--shd-bg-primary) !important;
}
.sc-classic .commentForm__submitButton:not(:disabled):hover {
border: 0px solid #0000;
box-shadow: inset 0px 1px 6px 0px #0008, 2px 2px 6px #000;
background-color: var(--shd-accent-secondary) !important;
}
/* comment names */
.commentItem__creatorLink, .commentItem__creatorLink:hover, .commentItem__creatorLink:visited, .commentItem__username, .commentItem__usernameLink, .commentItem__usernameLink:hover, .commentItem__usernameLink:visited {
color: #fff;
}
.image__rounded {
border-radius: max(/*[[avradius]]*/%, calc(/*[[avradius]]*/px * 0.75));
}
@supports (selector(:has(*))) { /* hide promoted tracks */
.sc-classic li.soundList__item:has(.soundContext .sc-promoted-icon) {
/*[[promoted]]*/
}
}
/**/
/* adblock */
.sc-classic .playControlsPanel.sc-font-body.sc-background-darkgrey.is-active,
.playlistConsumerSubUpsell__messageBox, .sc-classic .playlistConsumerSubUpsell__messageBox,
.sidebarModule.mobileApps {
/*[[adblk]]*/
}
/**/
/* Homepage insights ("Your Latest Upload") */
.sc-button-pinToProfile:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M3.40725 8.88557L0.460991 5.93931C0.265729 5.74405 0.265729 5.42746 0.460991 5.2322C1.28209 4.4111 2.41921 3.98692 3.57747 4.06965L3.95369 4.09652L6.82495 1.22526C7.54091 0.509303 8.70171 0.509303 9.41768 1.22526L11.7747 3.58229C12.4907 4.29825 12.4907 5.45905 11.7747 6.17501L8.90344 9.04627L8.93031 9.42249C9.01305 10.5807 8.58886 11.7179 7.76776 12.539C7.5725 12.7342 7.25592 12.7342 7.06065 12.539L4.11436 9.59268L1.75735 11.9497L1.05025 11.2426L3.40725 8.88557ZM7.53206 1.93237L4.49936 4.96507C4.39682 5.06761 4.25482 5.12058 4.11018 5.11025L3.50623 5.06711C2.80562 5.01707 2.11531 5.21424 1.55127 5.61537L7.38459 11.4487C7.78572 10.8847 7.9829 10.1943 7.93285 9.49374L7.88971 8.88978C7.87938 8.74514 7.93235 8.60314 8.03489 8.50061L11.0676 5.46791C11.393 5.14247 11.393 4.61483 11.0676 4.28939L8.71057 1.93237C8.38513 1.60693 7.8575 1.60693 7.53206 1.93237Z' fill='%23222' stroke='%23222' stroke-width='0.6'/%3E%3C/svg%3E%0A");
}
.latestUploadModule__moreActionsButton:before {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgMTQgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8dGl0bGU+bW9yZTwvdGl0bGU+CiAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9InJnYigzNCwgMzQsIDM0KSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSI3IiBjeT0iMiIgcj0iMiIvPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIyIiByPSIyIi8+CiAgPC9nPgo8L3N2Zz4K) no-repeat 50% 50% !important;
background-size: 14px 4px!important;
}
.latestUploadModule__moreActionsButton.sc-button-active:before, .latestUploadModule__moreActionsButton.sc-button-selected:before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iNHB4IiB2aWV3Qm94PSIwIDAgMTQgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8dGl0bGU+bW9yZTwvdGl0bGU+CiAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9InJnYigyNTUsIDg1LCAwKSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSI3IiBjeT0iMiIgcj0iMiIvPgogICAgPGNpcmNsZSBjeD0iMTIiIGN5PSIyIiByPSIyIi8+CiAgPC9nPgo8L3N2Zz4K) !important;
}
.latestUploadContainer__soundDetails__stats .soundStats__container {
font-weight: 400;
}
.latestUploadContainer__soundDetails__stats {
margin: 2px 0 10px;
}
.latestUploadContainer__soundWrapper {
height: 136px;
}
.latestUploadContainer__soundArtwork {
width: 128px;
}
.latestUploadContainer {
height: 160px;
}
.latestUploadContainer, .latestUploadContainer__gradient .backgroundGradient__buffer {
border-radius: 16px;
box-shadow: 2px 4px 16px -4px #0005;
}
/*[[hin]]*/
/* fix queue buttons */
.sc-classic .queueItemView__like.sc-button-small.sc-button-like:not(.sc-button-selected):before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ccc' fill-rule='evenodd' d='M10.8 3C8.78 3 8 5.34 8 5.34S7.21 3 5.2 3C3.5 3 1.75 4.1 2.03 6.51c.34 2.96 5.72 6.48 5.96 6.5.24 0 5.74-3.73 6-6.5C14.18 4.2 12.5 3 10.8 3Z'/%3E%3C/svg%3E");
}
.sc-button-medium.sc-button-like:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23222' fill-rule='evenodd' d='M10.8 3C8.78 3 8 5.34 8 5.34S7.21 3 5.2 3C3.5 3 1.75 4.1 2.03 6.51c.34 2.96 5.72 6.48 5.96 6.5.24 0 5.74-3.73 6-6.5C14.18 4.2 12.5 3 10.8 3Z'/%3E%3C/svg%3E");
}
/* better upload-in-progress button */
.header__soundInput > .uploadButton.selected.active .uploadButton__title {
font-size: 0;
color: #0000;
text-align: center;
max-width: 22px;
}
.header__soundInput > .uploadButton.selected.active .uploadButton__title::before {
--upload-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='0 0 256 256'%3E%3Cpath d='M228,152v56a20,20,0,0,1-20,20H48a20,20,0,0,1-20-20V152a12,12,0,0,1,24,0v52H204V152a12,12,0,0,1,24,0ZM96.49,88.49,116,69v83a12,12,0,0,0,24,0V69l19.51,19.52a12,12,0,0,0,17-17l-40-40a12,12,0,0,0-17,0l-40,40a12,12,0,0,0,17,17Z'%3E%3C/path%3E%3C/svg%3E"); /* phosphor - simple */
--upload-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ededed' viewBox='0 0 256 256'%3E%3Cpath d='M232,136v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H224A8,8,0,0,1,232,136Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16H80a8,8,0,0,1,0,16H32v64H224V136H176a8,8,0,0,1,0-16h48A16,16,0,0,1,240,136ZM85.66,77.66,120,43.31V128a8,8,0,0,0,16,0V43.31l34.34,34.35a8,8,0,0,0,11.32-11.32l-48-48a8,8,0,0,0-11.32,0l-48,48A8,8,0,0,0,85.66,77.66ZM200,168a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z'%3E%3C/path%3E%3C/svg%3E"); /* phosphor - duotone */
--upload-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23222' fill-rule='evenodd' d='M3 11v2h10v-2H3Zm10-3H3l5-6 5 6ZM6 8v2h4V8H6Z'/%3E%3C/svg%3E"); /* soundcloud */
content: "";
display: block;
position: relative;
width: 22px;
height: 22px;
top: 0;
margin: auto 0;
padding: 0 0;
opacity: 1;
transition-duration: 0.2s;
background-image: linear-gradient(0deg, #f75 0%, #f50 50%, #f75 100%);
background-repeat: repeat-y;
animation: gradient 3s linear infinite;
background-size: 22px 22px;
background-position: 50% 50%;
-webkit-mask-image: var(--upload-button);
mask-image: var(--upload-button);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 22px 22px;
mask-size: 22px 22px;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
@keyframes gradient {
0% {
background-position: 50% 22px;
}
100% {
background-position: 50% 0px;
}
}
.header__soundInput > .uploadButton.selected.active {
display: flex !important;
flex-direction: row;
justify-content: center !important;
align-items: center !important;
gap: 2%;
}
.sc-classic .uploadButton.selected.active .uploadButton__status {
margin-left: 0;
-webkit-text-stroke: thin;
text-stroke: thin;
}
/* 2fa settings */
iframe#two-factor-iframe {
filter: brightness(0.9335) invert(1) hue-rotate(180deg);
}
/* textfield clear button */
.sc-classic .textfield__clear {
background: #444;
}
.sc-classic .textfield__clear:hover {
background: #333;
}
.sc-classic .textfield__clear:after, .sc-classic .textfield__clear:before {
width: 8px;
margin-left: -4px;
}
/* filter dropdown */
.sc-classic .linkMenu__link {
padding: 0 12px;
}
.sc-classic .linkMenu__list {
padding: 6px 0;
}
/* 2024 "get heard" */
.getHeard__container {
background-color: var(--shd-bg-darker);
padding: 20px 15px;
margin-bottom: 20px;
}
.getHeard__title {
color: #fff;
}
.getHeard__subtitle, .getHeard__ctaContainer {
margin-top: 8px;
}
.getHeard__firstFansMoreInfoLinkArrow {
filter: invert(1);
}
/* homepage - artist connect */
.artistConnectContainerItem__userInfo>.profileHeaderBackground,
.artistConnectContainer .artistConnectContainerItem__userInfo>.profileHeaderBackground.artistConnectContainerItem__background.m-visualLoaded>.profileHeaderBackground__visual{
background-color: var(--shd-bg-primary);
}
.artistConnectContainer .artistConnectContainerItem__userInfo>.profileHeaderBackground.artistConnectContainerItem__background.m-visualLoaded>.profileHeaderBackground__visual:after {
content: "";
display: block;
width: 100%;
max-height: 100%;
position: absolute;
background-image: linear-gradient(0deg, #111 -10%, #1110);
aspect-ratio: 62/13;
}
.artistConnectContainerItem__location {
color: #ccc;
}
.artistConnectContainerItem__followButton {
margin-bottom: 46px;
}
.artistConnectItem {
width: 100%;
}
.artistConnect.artistConnectContext .soundTitle__title {
padding: 0;
margin-top: -3px;
background: none;
}
.artistConnect.artistConnectContext.visualSound .sound__header {
position: relative;
top: 0;
left: 0;
right: 0;
}
.artistConnect.artistConnectContext.visualSound .sound__header > .soundTitle {
width: 100%;
}
.artistConnect.artistConnectContext.visualSound .sound__header > .soundTitle .soundTitle__playButton .sc-button-xlarge {
width: 28px;
height: 28px;
margin: 1px 0 1px 1px;
line-height: 42px;
}
.artistConnect.artistConnectContext.visualSound .sound__header > .soundTitle .soundTitle__playButton .sc-button-xlarge:before {
background-size: auto;
}
.sound.artistConnectContext .soundTitle__usernameTitleContainer {
max-width: 100%;
}
.artistConnect.artistConnectContext.visualSound .soundTitle__username {
display: none;
}
.artistConnect.artistConnectContext.visualSound.playing:not(.focused) .sound__waveform,
.artistConnect.artistConnectContext.sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__info,
.artistConnect.artistConnectContext.sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__playButton,
.artistConnect.artistConnectContext.sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__title,
.artistConnect.artistConnectContext.sound:not(.focused) .soundTitle.m-visualSound.m-playing .soundTitle__username {
opacity: 1;
}
.artistConnectSoundBadge__commentAndTag .commentForm.commentForm__transition.m-small.visible .commentForm__wrapper {
height: var(--comment-height);
margin: 0;
}
.artistConnectSoundBadge__commentAndTag .commentForm.commentForm__transition.m-small.visible .commentForm__wrapper input {
padding: 0 16px;
}
.artistConnectSoundBadge__tag {
margin-top: 12px;
}
.sc-classic .artistConnectSoundBadge .loading.small {
height: 120px;
background: url(https://a-v2.sndcdn.com/assets/images/loader-dark-45940ae3d4.gif) no-repeat 50%;
background-size: 24px;
background: none;
filter: none;
border-radius: 8px;
box-shadow: inset 0px 0px 3px #fff3;
overflow: hidden;
}
.sc-classic .artistConnectSoundBadge .loading.small:before {
content: "";
display: block;
position: relative;
width: 100%;
height: 100%;
-webkit-transform: skew(-30deg) scaleX(1.5);
transform: skew(-30deg) scaleX(1.5);
background-size: 300% 300%;
background-repeat: repeat;
background-image: linear-gradient(90deg, #fff0 33%, #fff1 47.5%, #fff1 52.5%, #fff0 66%);
animation: loading-gradient 1.5s linear infinite;
}
@keyframes loading-gradient {
0% {
background-position: right;
}
100% {
background-position: left;
}
}
.userStats__item:before {
filter: contrast(0) brightness(1.2)
}
.userStats__item, .userStats__item:hover, .userStats__item:visited {
color: #ccc !important;
}
/* your first upload */
.firstUploadNudge__soundArtwork.audibleTile.playableTile {
max-width: 128px;
}
.firstUploadNudge {
background: linear-gradient(135deg, #1F3C39 0%, #405656 100%);
background: linear-gradient(135deg, #1F3C39 0%, #564c40 100%);
border-radius: 16px;
box-shadow: 2px 4px 16px -4px #0005;
}
.firstUploadNudge__soundDetails {
overflow: unset;
}
/* events near you */
.velvetCakeModuleWrapper {
/*[[evt]]*/
}
@supports (selector(:has(*))) {
.mixedModularHome__item:has(.velvetCakeModuleWrapper) {
/*[[evt]]*/
}
}
.velvetCakeModule__iframe {
border-radius: 16px;
}
.sc-classic .velvetCakeModule {
padding-bottom: 28px;
}
/* hide logo option */
/*[[logo]]*/
/* captcha/blocked */
div[style*="z-index:2147483647;background-color:#ffffff"] {
height: 360px !important;
width: 720px !important;
background-color: #111 !important;
border: 1px solid #6663;
border-radius: 24px;
backdrop-filter: blur(40px);
box-shadow: 2px 8px 18px #0006, 0 0 0 99999px #0006;
overflow: hidden;
position: fixed;
top: unset !important;
left: calc(50% - 720px / 2) !important;
transform: scale(0.9);
bottom: 100px;
z-index: 3000 !important;
}
/* fancy transitions arent worth it for this but they're here if you want em */
/* div[style*="z-index:2147483647;background-color:#ffffff"] {
opacity: 0.9;
bottom: -120px;
transform: scale(0.8);
transition-property: bottom, transform, box-shadow, opacity;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
div[style*="z-index:2147483647;background-color:#ffffff"]:hover {
opacity: 1;
bottom: 100px;
transform: scale(0.9);
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */
iframe[src^="https://geo.captcha-delivery.com/"] {
height: 100% !important;
width: 100% !important;
overflow: hidden;
}
/* new soundcloud ui redesign */
/* dark mode variables */
._1bqm8km0,._1iz3r9b0 {
--_4g70vm0: var(--shd-accent-primary);
--_4g70vm1: #00995c;
--_4g70vm2: #d61348;
--_4g70vm3: #fff;
--_4g70vm4: #000;
--_4g70vm5: linear-gradient(135deg,#9f34a9,#ff4600);
--_4g70vm6: #1877f2;
--_4g70vm7: #1da1f2;
--_4g70vm8: #e60023;
--_4g70vm9: #36465d;
--_4g70vma: transparent;
--_4g70vmb: #e6f7ee;
--_4g70vmc: #fff8e1;
--_4g70vmd: #ffebee;
--_4g70vme: var(--shd-bg-primary);
--_4g70vmf: #fff;
--_4g70vmg: #999;
--_4g70vmh: #303030;
--_4g70vmi: #699fff;
--_4g70vmj: hsla(0,0%,100%,.4);
--_4g70vmk: hsla(0,0%,100%,.15)
}
/* this is going to be hell to maintain */
.MuiFormGroup-root[role="radiogroup"] .MuiFormControlLabel-root:has(.MuiRadio-root):has(.Mui-checked), /* form group button selected */
.MuiSwitch-colorSuccess.Mui-checked + .MuiSwitch-track, /* switch button */
.MuiButton-containedSuccess /* generic green button (like continue button on upload page) */
{
background-color: var(--_4g70vm0);
filter: hue-rotate(/*[[hue]]*/deg);
}
.MuiFormGroup-root[role="radiogroup"] .MuiFormControlLabel-root:has(.MuiRadio-root):has(.Mui-checked):hover /* form group button selected hover */
{
background-color: var(--shd-accent-secondary);
}
.mui-n430uj, /* tracks view primary text */
.mui-fmfkj, /* selected track bulk edit + add to playlist button icons */
.mui-15yj62u, /* tracks more button icon */
.MuiIconButton-sizeSmall, .MuiIconButton-sizeMedium, /* generic button icons */
.MuiTypography-root, /* generic text selector */
.MuiButton-textPrimary, /* generic button text selector */
.MuiFormLabel-colorPrimary, /* form label */
.MuiAccordionSummary-content, /* accordion label */
.MuiAccordionSummary-expandIconWrapper, /* accordion expand arrow */
.MuiInputBase-colorPrimary, /* input text */
.MuiChip-labelMedium, /* tags */
.MuiButton-outlined /* generic outlined button */
{
color: var(--_4g70vmf);
}
.MuiInputAdornment-positionStart, /* input prefix */
.MuiCircularProgress-colorPrimary, /* loading spinner */
.MuiListSubheader-root, /* list subheader */
.Mui-checked, .MuiCheckbox-indeterminate, /* generic checkbox */
.MuiChip-filled .MuiChip-deleteIcon /* remove tag icon */
{
color: var(--_4g70vmg);
}
.MuiChip-filled .MuiChip-deleteIcon:hover /* remove tag icon hover */ {
color: #ccc;
}
.mui-28466c, /* all tracks checkbox */
.MuiCheckbox-colorPrimary, .Mui-checked, .MuiCheckbox-indeterminate, /* generic checkbox */
._2r4ec00, /* my tracks underline */
._11yjo627, .t0cm2o7, #main table[aria-label="My Tracks"] > thead th, /* track view table header underline */
._11yjo622 tr:last-child td, .t0cm2o2 tr:last-child td, #main table[aria-label="My Tracks"] > tbody tr:last-child td, /* track view last child underline */
.svq6pq0, /* track view paginator overline */
.MuiOutlinedInput-root, /* input box */
.MuiFormGroup-root[role="radiogroup"] .MuiFormControlLabel-root:has(.MuiRadio-root), /* form group button */
#panel-content.MuiBox-root > div > div:last-child, /* playlist pagination border */
.MuiButtonBase-root[variant="outlined"], .MuiButton-outlined, .MuiButton-outlined:hover /* generic outlined button */
{
border-color: #666;
}
li:focus-within > button.MuiIconButton-sizeMedium img /* user menu focus */
{
outline: none;
box-shadow: 0px 0px 4px 0.8px #fff;
}
.MuiOutlinedInput-root.Mui-focused /* focused input box */ {
border-color: #999;
}
.mui-15yj62u:hover, /* tracks more button hover */
.MuiIconButton-sizeSmall:hover, .MuiIconButton-sizeMedium:hover, /* generic button hover */
.mui-fmfkj:hover, /* selected track bulk edit + add to playlist buttons */
.MuiFormGroup-root[role="radiogroup"] .MuiFormControlLabel-root:has(.MuiRadio-root):hover, /* form group button hover */
.MuiButtonBase-root:not(.MuiButton-containedPrimary):hover, /* button hover */
.h2ki1a3, /* vertical rule */
#main table[aria-label="My Tracks"] > tbody > tr:hover td /* hovered tracks */
{
background-color: #fff2;
}
._11yjo622 ._11yjo626 td, .t0cm2o2 .t0cm2o6 td, /* selected tracks */
.MuiListSubheader-root, /* list subheader */
button[aria-label="Add artwork"], /* add artwork panel */
.MuiChip-filled, /* tag background */
.mupd0r6, /* upload footer background */
.byzetif /* review your track info */
{
background: var(--shd-bg-lighter);
}
._1jk87g70, ._1i6f4ag0, /* uploaded track hd indicator */
._47gh084 /* upload completed checkmark */
{
color: var(--shd-accent-blue);
}
.mui-14m35er:hover /* notifications, messages */
{
background-color: rgba(102, 102, 102, 0.04);
border-color: rgba(102, 102, 102, 0.15);
}
.tlirws0 /* bottom seekbar */
{
background-color: var(--_4g70vme);
color: var(--_4g70vmf);
filter: hue-rotate(/*[[hue]]*/deg) var(--fil)
}
.mui-ijebwn, .MuiPaper-root.MuiMenu-paper, /* dropdown menu */
.MuiTooltip-tooltip, /* hover tooltips */
button[aria-label="Add artwork"] /* add artwork panel */
{
border-radius: 12px;
border: 1px solid #4448;
background-color: var(--shd-bg-dropdown);
backdrop-filter: blur(32px);
color: #999;
}
:is(.MuiMenu-paper.MuiPaper-root .MuiMenu-list .MuiButtonBase-root, /* dropdown menuitem hover */
.mui-wakfts.MuiButtonBase-root
):is(:hover, .Mui-selected) {
background-color: #0d0d0d80;
box-shadow: 16px -4px 12px #1114 inset;
color: #ccc;
}
:is(.MuiMenu-paper.MuiPaper-root .MuiMenu-list .MuiButtonBase-root, /* dropdown menuitem */
.mui-wakfts.MuiButtonBase-root
) {
transition-duration: 0.25s;
}
.MuiMenuItem-root .MuiListItemIcon-root { /* menuitem icon */
color: inherit;
}
._1htqjyq0 /* hover tooltip contents */
{
background-color: #0000;
}
.MuiTooltip-tooltip .MuiTooltip-arrow /* hover tooltip arrow */
{
border: 1px solid #4448;
color: var(--shd-bg-lighter);
}
img[alt="broken hourglass"] /* broken hourglass icon (next pro unlimited uploads) */
{
filter: invert(1);
}
.MuiPaper-root.MuiPaper-elevation, /* generic elevated background selector */
.MuiModal-root > .MuiBox-root > .MuiBox-root[class*="mui-"] /* generic modal selector */
{
background-color: var(--_4g70vme) !important;
color: var(--_4g70vmf);
}
svg.h2ki1a1 > path /* 808 cut in half */
{
fill: #999;
}
svg > path[stroke="#000"] /* black outlined svg paths */
{
stroke: #999;
stroke-width: 2;
}
.SideNavFooterLink_Link__HA5me, .SideNavFooterLink_Link__HA5me:visited /* footer links */
{
outline: none;
border: none;
}
.SideNavFooterLink_Link__HA5me:hover, .SideNavFooterLink_Link__HA5me:visited:hover /* footer links hover */
{
color: inherit;
}
._47gh083 /* upload completed header */
{
background-color: hsl(calc(203deg + /*[[blu]]*/deg), 23%, 16%);
}
}
@-moz-document regexp("http(s)?:\\/\\/(www\\.)?soundcloud\\.com\\/.*\\/following\\/?") {
.badgeList ul { /* Follow list sorting */
display: flex;
flex-flow: row /*[[sort-fol]]*/;
}
}
@-moz-document regexp("http(s)?:\\/\\/(www\\.)?w\\.soundcloud\\.com\\/?((?!jobs|settings\\/connections)(.|[\\?\\&=\\-_\\/+])*)") { /* widget/iframe */
/*[[widget]]*/
.g-background-default {
background-color: var(--shd-bg-primary);
}
.g-text-shadow {
text-shadow: none;
}
a.sc-link-medium {
color: #999;
text-decoration: none;
transition-duration: 0.2s;
}
a.sc-link-dark, a:hover {
color: #ccc;
transition-duration: 0.2s;
}
a.sc-link-dark:hover, a.sc-link-medium:hover {
color: #fff;
}
.waveform__layer.waveform__scene canvas:first-of-type:not(.visualAudible__waveform canvas) {
/*filter: invert(1) hue-rotate(172deg) brightness(0.7) contrast(0.8) saturate(2.3);*//*[[widget]]*/
filter: contrast(0.8) brightness(1.3) brightness(0.9) saturate(2.2);
}
.waveform__layer.waveform__scene canvas:last-of-type:not(.visualAudible__waveform canvas) {
filter: brightness(1.5);
}
.artwork, .artwork__img, .artwork__link, .sc-artwork, .sc-artwork span {
border-radius: 6px;
}
.sc-button:not(.visualAudible .sc-button) {
border: 1px solid #333;
background-color: #222;
color: #ccc;
transition-duration: 0.2s;
}
.sc-button-focus:not(.visualAudible .sc-button), .sc-button:focus:not(.visualAudible .sc-button), .sc-button:hover:not(.visualAudible .sc-button) {
border-color: #444;
color: #eee;
}
.sc-button-small:not(.visualAudible .sc-button-small):before {
filter: invert(1) saturate(0) brightness(0.8);
transition-duration: 0.2s;
}
.sc-button-small.mouseover:not(.visualAudible .sc-button-small):before {
filter: invert(1) saturate(0) brightness(1);
}
.sc-ministats-small {
color: #888;
}
.sc-ministats-small.sc-ministats-plays:before {
filter: brightness(0.7);
}
.sc-background-light {
background-color: #333;
}
.widget {
border: 1px solid #333;
border-radius: 8px;
}
.g-shadow-inset {
box-shadow: inset 0 0 0 1px hsl(0deg 0% 0% / 50%);
}
.playButton:hover {
filter: brightness(0.9) saturate(0.8) contrast(1.2) hue-rotate(-2deg) drop-shadow(2px 4px 6px #0006);
transition: filter 0.2s;
}
.playButton {
filter: none;
transition: filter 0.5s;
}
.teaser {
background: var(--shd-bg-primary);
}
.teaser__trackLink, .teaser__trackLink:visited {
color: #fff;
}
body {
color: #ccc;
}
.sound__panel {
border-radius: 8px;
background: #191919;
}
.thinProgressbar__played {
background-color: var(--shd-accent-primary);
}
.sc-background-dark {
background-color: #ddd;
}
.commentPopover.darkText .commentPopover__body {
color: #ccc;
}
.commentPopover__wrapper {
max-width: 50rem;
}
.logo__path {
fill: #696969;
fill: url("#logo_hover_21")!important;
filter: saturate(0) contrast(0) brightness(1.6);
transition-duration: 0.3s;
}
.logo:hover .logo__path, .logo:focus .logo__path {
fill: url("#logo_hover_21");
filter: saturate(1) contrast(1) brightness(1);
}
.visualAudible .logo__path, .visualAudible .logo:hover .logo__path, .visualAudible .logo:focus .logo__path {
fill: url("#logo_hover_33")!important;
fill: url("#logo_hover_54")!important;
}
.g-border-bottom {
border-bottom: 1px solid #222;
}
.sc-background-white {
background-color: var(--shd-bg-primary);
}
.sc-border-dark-bottom {
border-bottom: 1px solid #222;
}
body {
font: 12px/1.4 var(--font-main);
}
.title__h1, .title__h2, .sc-font-light {
font-family: var(--font-main);
}
.soundsTotal, .sc-font-light, .teaser__button.hearmore .hearmore__container .hearmore__right {
font-weight: 400;
}
.title__h1, .title__h2 {
font-weight: 300;
}
@supports (font-variation-settings: normal) {
body, .title__h1, .title__h2, .sc-font-light {
font-family: var(--font-main);
}
.soundsTotal, .sc-font-light, .teaser__button.hearmore .hearmore__container .hearmore__right {
font-weight: 400;
}
.title__h1, .title__h2 {
font-weight: 300;
}
}
.playButton[style*="color: rgb(204, 68, 0);"], .sc-background-orange, .waveform__layer, .soundHeader__logo {
filter: hue-rotate(/*[[hue]]*/deg);
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?secure\\.soundcloud\\.com\\/?((?!jobs|settings\\/connections)(.|[\\?\\&=\\-_\\/+])*)") {
body[marginwidth="0"][marginheight="0"], body[marginwidth="0"][marginheight="0"].sc-classic {
background: #0000!important;
}
html:not([stylus-iframe="https://soundcloud.com"]):has(body:not([marginwidth="0"][marginheight="0"])),
html:not([stylus-iframe="https://soundcloud.com"]) body div#app,
html:not([stylus-iframe="https://soundcloud.com"]) body.sc-classic div#app {
background: var(--shd-bg-darker);
}
div#app:first-of-type {
background: #090909;
height: 100vh!important;
justify-content: center;
}
body[marginwidth="0"][marginheight="0"] div#app:not(a+div+div#app) {
background: #0000!important;
}
.provider-buttons > .form-row >
.sc-button:not(.sc-button-play):not(.sc-button-cta):not(.g-button-transparent-inverted):not(.sc-button-active):not(.sc-button-selected):not(.sc-button-nostyle):not(.playbackSoundBadge__like):not(.premiumContent__button):not(.premiumContent__hint):not(.sc-button-transparent):not(.hintButton):not(.tileGallery__sliderButton):not(.playbackSoundBadge__follow):not(.editSnippet__playButton .sc-button-xxlarge):not(.moreActions__button):not(.spotlightRemove):not(:hover) {
background: #161616;
border-color: #333;
}
fieldset, form {
background-color: #0000;
}
a+div+div#app {
height: 100%!important
}
a, a:visited {
color: #59e;
}
.app-attribution { /* connect */
color: #ccc;
}
.sign-in-up-form-tabs li a, .app-attribution, .app-header-black-title {
font-weight: 300;
}
ul.sign-in-up-form-tabs li a, ul.sign-in-up-form-tabs li span {
color: #ccc;
}
ul.sign-in-up-form-tabs li.current a, ul.sign-in-up-form-tabs li.current span { /* connect tabs */
background: var(--shd-bg-lighter);
border-color: #333 #333 #111;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
font-weight: 400;
color: #fff
}
ul.sign-in-up-form-tabs li a:hover, ul.sign-in-up-form-tabs li span:hover {
color: #eee;
}
.sign-in-up-form-tabs {
border-bottom: 1px solid #333;
}
/* "Tell me more" */
.connect-layout-popup .tell-me-more .tell-me-more-text {
background: var(--shd-bg-lighter);
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?soundcloud.com\\/you\\/library.*") {
/* Make Library section a hell of a lot nicer :) */
.collection__section {
width: 50%;
background: var(--shd-bg-lighter);
padding: 8px;
border: 1px solid #ccc6 !important;
border-radius: 8px;
transform: scale(0.98);
transform-origin: top center;
box-shadow: 0px 0px 18px #000c;
float: left;
}
.sc-classic .collection.m-overview .collection__section:not(:last-child) {
margin-bottom: 20px
}
.collection__likesSection, .collection__albumsSection, .collection__followingsSection {
width: 50%;
float: right;
}
.collection__likesSection {
padding-bottom: 0;
}
.collection__likesSection > .collectionSection {
margin-top: -8px;
}
.collection__section > div {
transform: scale(0.96);
}
.collectionSection__filters {
right: 0;
}
.collection .playableTile {
width: 100% !important;
padding-bottom: 64px;
}
.sc-classic .userBadgeListItem {
padding-bottom: 64px;
transition: padding-bottom 0.3s ease-out;
}
.sc-classic .readMoreTile__tile .userBadgeListItem:hover {
padding-bottom: 76px;
}
.sc-classic .userBadgeListItem__action {
transition: opacity 0.2s ease-out;
}
.userBadgeListItem__subtitle .sc-ministats-followers > span:not(.sc-visuallyhidden) {
margin-right: -48px;
clip-path: margin-box;
}
.sc-classic .collection .badgeList__item {
width: 16.666%;
}
a.readMoreTile__countWrapper, .sc-classic .readMoreTile__countWrapper {
height: 48px;
width: 120px;
bottom: -120%;
border-radius: 124px;
transform: scale(0.67);
left: 25px !important;
margin-right: -8px;
opacity: 1;
background: var(--shd-accent-primary);
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
transition: 0.3s;
box-shadow: 0px 0px 4px #0006;
}
a.readMoreTile__countWrapper:hover {
box-shadow: 0px 6px 12px #000f;
transition: 0.2s;
filter: hue-rotate(/*[[hue]]*/deg) var(--fil);
}
.readMoreTile__count {
top: 50%!important;
}
.sc-classic .l-footer.standard {
position: relative;
top: 120px;
padding-bottom: 120px;
text-align: right;
left: 49.5%;
width: 50%;
z-index: -100;
visibility: hidden;
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?soundcloud\\.com\\/you\\/(sets|albums|stations|following)\\/?") {
.badgeList__item {
width: 150px!important;
}
.collectionSection__filters {
right: 40px;
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?soundcloud\\.com\\/you\\/history\\/?") {
.collectionSection__filters {
right: 140px;
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?insights-ui\\.soundcloud\\.com\\/.*") {
:root { /* Messy new insights page update */
--font-inter: var(--font-main);
--soundcloudOrange: #ff4637;
--special-color: var(--shd-accent-orange);
--text-color-main: var(--white);
--text-color-secondary: var(--platinum);
--icon-color: var(--white);
--background-color: var(--shd-bg-primary);
--background-surface-color: var(--shd-bg-primary);
--background-highlight-color: #303030;
--primary-color: #fff;
--primary-rgb: 255,255,255;
--overlay-color: rgba(255,255,255,0.4);
--overlay-rgb: 255,255,255,0.4;
--font-secondary-color: #ccc;
--datalist-hover-background: #303030;
--font-primary-color: #fff;
--container-background-color: #222;
--surface-color: var(--shd-bg-lighter);
--surface-rgb: 26,26,26;
--highlight-color: #303030;
--highlight-rgb: 48,48,48;
--divider-color-outer: var(--shd-bg-primary);
--divider-color-inner: var(--shd-bg-primary);
--graph-legend-background: hsla(0,0%,0%,0.25);
--graph-marker: var(--text-color-secondary);
--button-secondary-background-color: var(--shd-bg-primary);
--button-secondary-font-color: #ccc;
--component-border-color: #333;
--component-border: 0.114rem solid var(--component-border-color);
}
html, body {
background-color: #111111;
}
.DetailsPageLayout_ContentCell__2o2X6 > .Card_Card__1zOh7 {
background-color: var(--background-surface-color);
}
.List_Blur__79BH4:before {
-webkit-backdrop-filter: blur(0);
backdrop-filter: blur(0);
}
.List_ListItem__2XtIP.List_Blur__79BH4 {
pointer-events: revert;
background: revert;
}
.DataList_PlaceholderFadeOutBackground__2Tc9T:not(.DetailsPageLayout_ContentCell__2o2X6 > .Card_Card__1zOh7 .DataList_PlaceholderFadeOutBackground__2Tc9T) {
fill: var(--surface-color);
}
.TotalCounts_TotalCounts__3AozJ {
background: none!important;
}
.Layout_MainSection__3PvQn {
background-color: var(--shd-bg-primary)!important;
}
.Graph_InfoMarkerText__1qCMH, .TotalCounts_CountContainer__1Vqqo, .index_CellWithBorder__3iz2K:not(:empty) {
border-radius: 16px!important;
box-shadow: 0px 4px 18px #0006;
transition: box-shadow 1s;
}
.Graph_InfoMarkerText__1qCMH:hover, .TotalCounts_CountContainer__1Vqqo:hover, .index_CellWithBorder__3iz2K:hover:not(:empty) {
box-shadow: 0px 2px 15px #000a;
transition: box-shadow 0.5s;
}
.WorldMap_Container__3K07t {
filter: hue-rotate(/*[[hue]]*/deg) brightness(0.95);
}
.g-oscp-section {
border-bottom: 1px solid #0a0a0a;
}
.GraphBar_GraphMargin__3LKW4 svg>g>rect[fill="#FFFFFF"], .GraphBar_GraphMargin__3LKW4 svg>g>rect[fill="#F5F7F8"] {
fill: var(--shd-bg-darker);
}
.GraphBar_GraphMargin__3LKW4 svg {
border-radius: 8px;
}
.Bar_FadedBar__2oq7v {
fill: var(--shd-bg-darker);
}
.Bar_FadedBar__2oq7v.Bar_ForegroundBar__WvgRY {
fill: #ff463780
}
.DataList_Blur__dVuaL:before {
backdrop-filter: none;
}
.ResolutionDropdown_Toggle__OhrMk, .Dropdown_DropdownToggleButton__goVmf[aria-owns="dropdown-button-timewindow-select"] {
border: var(--component-border);
}
.Pill_Pill__2lBjK.Pill_isActive__1nv81 > .MetricNavigation_Icon__1tj-o, button.Pill_Pill__2lBjK.Pill_isActive__1nv81:not(isDisabled):hover > .MetricNavigation_Icon__1tj-o {
color: var(--button-primary-font-color)!important;
}
svg[class*="Badges_Badge_"] > path[fill="black"] {
fill: white;
}
[class*="fans_FanBookTitle_"], [class*="fans_TopFansTotal_"] {
border-color: #fff3;
}
svg[class*="mui-"] > g:is(.MuiChartsAxis-bottom,.MuiChartsAxis-left) .MuiChartsAxis-tickLabel {
fill: var(--primary-color);
}
svg[class*="mui-"] .MuiBarElement-root {
fill: var(--soundcloudOrange);
}
.mui-1fltio3 {
background-color: var(--shd-bg-lighter);
}
.mui-dd877o {
color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.16);
}
.mui-dd877o:hover {
background-color: rgb(48, 48, 48);
}
/* fixing soundclouds mistakes */
[class*="List_Container_"] {
overflow: auto;
}
[class*="List_ListItemContentMain_"], [class*="TopWebsites_SelectableUrl_"] {
overflow-x: auto;
}
/* selected tab pill thing */
.Pill_Pill__dL_w3.Pill_isActive__MIs14 > .MetricNavigation_Icon__2_mGA {
color: var(--button-primary-font-color);
}
.Pill_Pill__dL_w3.Pill_isActive__MIs14, button.Pill_Pill__dL_w3.Pill_isActive__MIs14:not(isDisabled):hover {
font-weight: 700;
}
.mui-1rtvqhv rect[fill="rgba(255, 255, 255, 0.16)"] {
fill: rgba(0, 0, 0, 0.08);
}
/* world map */
/* svg[class*="WorldMap_WorldMap_"] > path[style*="fill: rgb(243, 243, 243)"] {
fill: rgb(48, 48, 48) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(121, 57, 42)"],[style*="fill: rgb(245, 220, 217)"]) {
fill: hsl(7, 48%, 32%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(138, 60, 41)"],[style*="fill: rgb(246, 212, 207)"]) {
fill: hsl(7, 54%, 37%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(139, 60, 40)"],[style*="fill: rgb(246, 211, 207)"]) {
fill: hsl(8, 55%, 38%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(146, 61, 39)"],[style*="fill: rgb(246, 207, 202)"]) {
fill: hsl(8, 58%, 39%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(168, 65, 36)"],[style*="fill: rgb(248, 193, 186)"]) {
fill: hsl(8, 55%, 42%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(176, 67, 35)"],[style*="fill: rgb(248, 187, 178)"]) {
fill: hsl(10, 67%, 43%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path:is([style*="fill: rgb(198, 72, 30)"],[style*="fill: rgb(250, 168, 155)"]) {
fill: hsl(11, 74%, 45%) !important;
}
svg[class*="WorldMap_WorldMap_"] > path[style*="fill: rgb(255, 85, 0)"] {
fill: var(--soundcloudOrange) !important;
} */
svg[class*="WorldMap_WorldMap_"][fill="rgb(48, 48, 48)"] {
filter: saturate(0) contrast(1.7) sepia(1) contrast(0.625) hue-rotate(-25deg) saturate(11) hue-rotate(/*[[hue]]*/deg) hue-rotate(2deg);
}
svg[class*="WorldMap_WorldMap_"][fill="rgb(243, 243, 243)"] {
filter: contrast(0.78) invert() hue-rotate(180deg) saturate(2.8) brightness(1.28) saturate(0) contrast(1.6) sepia(1) contrast(0.625) hue-rotate(-25deg) saturate(11) hue-rotate(/*[[hue]]*/deg) hue-rotate(2deg);
}
/* cards */
[class*="DetailsPageLayout_Grid_"] [class*="Card_DetailsPageCard_"] {
background-color: unset;
}
.Card_CardResponsive__WtKB1 .DataList_PlaceholderFadeOutBackground__hw2xw {
fill: var(--surface-color);
border-bottom: 2px solid var(--highlight-color);
margin-bottom: 2px;
}
/* dropdown menu */
.mui-1k5xlfx .MuiMenu-paper, .mui-1y2ffr5 .MuiMenu-paper {
border-radius: 12px;
border: 1px solid #4448;
background-color: var(--shd-bg-dropdown);
backdrop-filter: blur(32px);
color: #999;
}
.MuiMenu-paper .MuiMenu-list .MuiMenuItem-root, .MuiMenu-paper .MuiMenu-list :is(.mui-1wgfqo9,.mui-pxfwaq):not(:hover) {
background-color: #0000;
color: #999;
}
.mui-1y2ffr5 .MuiMenu-paper .MuiMenuItem-root.Mui-selected {
color: #fff;
}
/* calendar */
.mui-d9ba2b, .mui-9fykwh {
border-radius: 12px !important;
background-color: var(--shd-bg-dropdown) !important;
backdrop-filter: blur(32px);
color: rgb(255, 255, 255);
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
border: 1px solid rgba(255, 255, 255, 0.15);
background-image: unset !important;
}
.mui-1p6jwil {
color: rgba(255, 255, 255, 0.7);
}
.mui-rlsl4u, .mui-a11gmb {
color: rgb(255, 255, 255);
}
.mui-rlsl4u.Mui-disabled:not(.Mui-selected), .mui-a11gmb.Mui-disabled:not(.Mui-selected) {
color: rgba(255, 255, 255, 0.5);
}
/* date pills */
:is(.Mui-selected, *):is(.mui-6aagbz, .mui-17n8gub, .mui-1rjk8z, .mui-13umkdg, .mui-yi6m1z, .mui-uobnux, .mui-12fu2jv, .mui-iod049, .mui-ahsg8z, .mui-1lca0dv, .mui-1p8n8vs, .mui-1gt6v4z, .mui-1iopzwm, .mui-1qkyeur, .mui-azw6oe, .mui-1lly2kj) {
color: rgb(255, 255, 255);
background-color: var(--soundcloudOrange);
}
:is(.Mui-selected, *):is(.mui-6aagbz, .mui-17n8gub, .mui-1rjk8z, .mui-13umkdg, .mui-yi6m1z, .mui-uobnux, .mui-12fu2jv, .mui-iod049, .mui-ahsg8z, .mui-1lca0dv, .mui-1p8n8vs, .mui-1gt6v4z, .mui-1iopzwm, .mui-1qkyeur, .mui-azw6oe, .mui-1lly2kj):is(:focus,:hover) {
background-color: #ff463780;
}
:is(.mui-1p8n8vs, .mui-1qkyeur):is(:not(.Mui-selected), *) {
background-color: #fff2;
border: none;
box-shadow: inset 0 0 4px 2px #fff2, 0 0 8px #fff2;
}
:is(.mui-1p8n8vs, .mui-1qkyeur):is(:not(.Mui-selected), *):is(:focus,:hover) {
background-color: #fff3;
}
:is(.mui-1lca0dv, .mui-1iopzwm):is(:not(.Mui-selected), *) {
border: none;
box-shadow: inset -8px 0 8px -4px #fff4, 8px 0 8px -6px #fff4;
}
/* arrows/buttons */
.mui-1gyulev, .mui-1e03iha, .mui-zzbkxf, .mui-8s6vvw, .mui-104wej5 {
color: rgb(255, 255, 255);
}
:is(.mui-1gyulev, .mui-1e03iha, .mui-zzbkxf, .mui-8s6vvw):hover {
background-color: rgb(48, 48, 48);
}
.Mui-disabled:is(.mui-1gyulev, .mui-1e03iha, .mui-zzbkxf, .mui-8s6vvw) {
color: rgba(255, 255, 255, 0.3);
}
.mui-104wej5:hover {
background-color: rgba(255, 255, 255, 0.08);
}
/* month/year pills */
:is(.mui-126qsd2,.mui-zydket,.mui-4ydb6g):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.Mui-disabled:is(.mui-126qsd2,.mui-zydket,.mui-4ydb6g) {
color: rgba(255, 255, 255, 0.7);
}
.Mui-selected:is(.mui-126qsd2,.mui-zydket,.mui-4ydb6g) {
color: rgba(0, 0, 0, 0.87);
background-color: rgb(255, 255, 255);
}
.Mui-selected:is(.mui-126qsd2,.mui-zydket,.mui-4ydb6g):is(:focus,:hover) {
background-color: rgb(178, 178, 178);
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?soundcloud\\.com\\/connect\\?.*") {
/* Snippet from 'SoundCloud - Quite Dark' by pawelos076232: userstyles.org/styles/143738 */
#oauth,
#oauth2_authorization,
body #main-wrapper,
.sessions__formContainer {
background: var(--shd-bg-primary)
}
html,
body,
form,
fieldset,
#oauth #main-wrapper .authorize-text,
#oauth2_authorization #main-wrapper .authorize-text {
color: #ccc
}
.userbadge.context {
border-color: #222
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?artists\\.soundcloud\\.com\\/?.*") {
:root {
--color-surface: 0, 0, 0;
--color-primary: 255, 255, 255;
--color-secondary: 153, 153, 153;
--color-highlight: 48, 48, 48;
--color-overlay: hsla(0,0%,100%,.4);
--color-disabled: hsla(0,0%,100%,.15);
--color-link: 105, 159, 255;
--border-color-image: hsla(0,0%,100%,.25);
--color-warning: rgba(255,194,51,.3);
--icon-primary-invert-percentage: 100%;
}
:root, .dark {
scrollbar-color: dark;
--color-surface: 17, 17, 17;
--color-highlight: 24, 24, 24;
--color-special: 255, 70, 55;
}
.theme-dark, :root {
--surface-color: var(--shd-bg-primary);
--secondary-color: #999;
--imageBorder-color: hsla(0,0%,100%,.15);
}
html.dark, html, #should-cover-here {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-surface), var(--tw-bg-opacity));
}
html .tooltip-arrow-left:after,html .tooltip-arrow-right:after {
background-color: #303030
}
html .icon-primary {
filter: brightness(0) saturate(100%) invert(100%)
}
.dark [alt="Notification Image"][src="https://s3.amazonaws.com/repost-prod-public/notifications/PAYMENT_SUCCESSFUL.svg"] {
filter: invert(1);
}
html.dark .tooltip-arrow-left:after, html.dark .tooltip-arrow-right:after {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-highlight), var(--tw-bg-opacity));
}
.border-primary.border-b {
border-bottom-width: 2px;
}
.border-primary, .border-t-2, .border-t-thin {
--tw-border-opacity: 0.1;
}
.border-t-2, .border-t-thin {
border-color: rgba(var(--color-primary), var(--tw-border-opacity));
}
.dark\:border-0 {
border-width: 0
}
.dark\:border-primary {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary),var(--tw-border-opacity))
}
.dark\:bg-\[\#273C33\] {
--tw-bg-opacity: 1;
background-color: rgb(39 60 51/var(--tw-bg-opacity))
}
.dark\:bg-\[\#4d2e33\] {
--tw-bg-opacity: 1;
background-color: rgb(77 46 51/var(--tw-bg-opacity))
}
.dark\:bg-\[\#6461E0\] {
--tw-bg-opacity: 1;
background-color: rgb(100 97 224/var(--tw-bg-opacity))
}
.dark\:bg-\[\#DA3320\] {
--tw-bg-opacity: 1;
background-color: rgb(218 51 32/var(--tw-bg-opacity))
}
.dark\:bg-\[\#E0F2F1\] {
--tw-bg-opacity: 1;
background-color: rgb(224 242 241/var(--tw-bg-opacity))
}
.dark\:bg-\[\#EFEFF0\] {
--tw-bg-opacity: 1;
background-color: rgb(239 239 240/var(--tw-bg-opacity))
}
.dark\:bg-\[black\] {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0/var(--tw-bg-opacity))
}
.dark\:bg-primary {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-primary),var(--tw-bg-opacity))
}
.dark\:bg-surface {
--tw-bg-opacity: 1;
background-color: rgba(var(--color-surface),var(--tw-bg-opacity))
}
.dark\:text-\[black\] {
--tw-text-opacity: 1;
color: rgb(0 0 0/var(--tw-text-opacity))
}
.dark\:text-primary {
--tw-text-opacity: 1;
color: rgba(var(--color-primary),var(--tw-text-opacity))
}
.dark\:text-surface {
--tw-text-opacity: 1;
color: rgba(var(--color-surface),var(--tw-text-opacity))
}
.dark\:opacity-25 {
opacity: .25
}
.dark\:opacity-50 {
opacity: .5
}
.dark\:shadow-white {
--tw-shadow-color: #fff;
--tw-shadow: var(--tw-shadow-colored)
}
.dark\:brightness-200 {
--tw-brightness: brightness(2);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.dark\:invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.dark\:invert-0 {
--tw-invert: invert(0);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?soundcloud\\.velvetcake\\.live\\/?.*") {
/* events near you iframe */
.h-screen.bg-white > .bg-cover {
max-width: 100%;
}
.h-screen.bg-white {
background-color: #111;
}
}
@-moz-document regexp("https?:\\/\\/(www\\.)?geo\\.captcha\\-delivery\\.com\\/captcha\\/.*(?=referer=http%3A%2F%2Fapi-v2\\.soundcloud\\.com|Domain=\\.?soundcloud\\.com).*") {
/* captcha/blocked */
@import url('https://rsms.me/inter/inter.css');
*, *::before, *::after {
color: #fff;
font-family: /*[[font]]*/Variable, /*[[font]]*/ var, /*[[font]]*/, Inter, Roboto, Verdana, Arial;
}
html, body {
overflow: hidden;
}
html, .captcha__header, .captcha__human, .captcha__footer {
background-color: #0000 !important;
}
.captcha__header, .captcha__footer {
height: 0;
padding: 0;
}
.captcha {
background-color: #0000;
padding: 0 24px;
}
.captcha__human {
padding: 20px 0 12px;
}
.captcha__human__title {
font-size: 20px;
}
.captcha__robot {
background-color: #6662;
padding: 24px 32px;
border-radius: 18px;
height: 256px;
overflow: auto;
display: flex;
flex-wrap: wrap;
align-items: center safe;
align-content: center safe;
}
.captcha__contact__input {
background-color: #111;
border-radius: 8px;
}
.captcha__contact_support__submit {
color: hsl(calc(203deg + /*[[blu]]*/deg) 100% 65%);
font-weight: bold;
}
}