A functional, modern redesign of the outdated Soundcloud UX.
Versão de:
/* ==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.32
@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;
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 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 "Insights on homepage (\"Your Latest Upload\")" {
stats-on "Show" <<<EOT
display:block; EOT;
stats-off "Hide" <<<EOT
display:none; EOT;
}
@advanced dropdown gdpr "Cookie Notice" {
gdpr-on "Show" <<<EOT
display:inherit; EOT;
gdpr-off "Hide" <<<EOT
display:none; 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 color bg1 "Background color" #111
@advanced dropdown promoted "EXPERIMENTAL: Hide promoted tracks (Requires Chromium 105+. See: https://caniuse.com/css-has)" {
promo-off "Hide" <<<EOT
display:none; EOT;
promo-on "Show" <<<EOT
display:revert; EOT;
}
@advanced dropdown lowmotion "Reduce motion" {
embeds-off "No" <<<EOT
/* EOT;
embeds-on "Yes" <<<EOT
/**\/ 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');
@import url('https://cdn.jsdelivr.net/gh/phosphor-icons/phosphor-icons/src/css/icons.css');
@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-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-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-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-stream-old: 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-stream-active-old: 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-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-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>');
}
:root {
--ph-font: Phosphor;
--ph-play: "\fd5a";
--ph-pause: "\fd38";
--ph-next: "\fdb7";
--ph-prev: "\fdb5";
--ph-repeat: "\f96b";
--ph-repeat-1: "\f96c";
--ph-shuffle: "\f994";
--ph-volume-0: "\fdd2";
--ph-volume-1: "\fdcf";
--ph-volume-2: "\fdce";
--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);
--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-special-color: #f50;
--font-link-color: #3370dd;
--font-error-color: #d61348;
--font-light-color: #fff;
--font-dark-color: #111;
--button-primary-background-color: #fff;
--button-primary-font-color: #000;
--button-secondary-background-color: #303030;
--button-secondary-font-color: #fff;
--button-disabled-background-color: #303030;
--button-disabled-font-color: #999;
--button-special-background-color: #f50;
--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;
--overlay-default-color: hsla(0, 0%, 100%, 0.4);
--input-default-background-color: #f3f3f3;
--input-default-border-color: transparent;
--input-focused-background-color: #f3f3f3;
--input-focused-border-color: #666;
--input-invalid-background-color: #f3f3f3;
--input-invalid-border-color: #d61348;
--checkbox-default-background-color: transparent;
--checkbox-default-border-color: #666;
--checkbox-checked-background-color: #f50;
--checkbox-checked-border-color: #f50;
--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;
}
@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(*))) {
--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://33kk.github.io/uso-archive/?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
}
.moreActions .moreActions__button.sc-button-medium:before {
filter: brightness(3)
}
.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: brightness(6)
}
#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);
/*-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-duration: 3s
}
.header__inner .header__right:hover {
box-shadow: 2px 2px 12px #0009;
transition-duration: 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: brightness(10)
}
#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
}
#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 {
left: 36px;
background-position: center;
background-size: 16px 12px;
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;
}
#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);
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,
.playControls__inner .playControls__wrapper .playControls__elements .sc-ir.playControls__play:hover {
transform: scale(1.08)
}
.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),
.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) {
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),
.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) {
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 {
border-bottom-color: #181818
}
.collection.m-overview .collection__section:not(:last-child) {
margin-bottom: 10px
}
.collection__oneRowSection {
min-height: unset
}
.mixedSelectionModule, .sc-classic .mixedSelectionModule {
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,
.sc-tag:visited {
color: #ccc!important;
background: #2d2d2d;
box-shadow: inset 0 0 2px #000;
border: none
}
.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
}
.sc-tag:hover {
background: #222
}
.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 {
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-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)
}
.sc-button-small.sc-button-active.sc-button-more:before,
.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(.sc-button-selected):not(.playbackSoundBadge__follow):hover {
border-color: #fff;
border: 0;
border-radius: 120px;
background: var(--shd-accent-secondary) !important;
color: #fff !important;
transition-duration: 0.25s;
}
.sc-button-follow:not(.sc-button-nostyle):not(.sc-button-transparent):not(.sc-button-selected):not(.playbackSoundBadge__follow) {
border-color: var(--shd-bg-lighter);
border: 0;
border-radius: 120px;
background: var(--shd-accent-primary) !important;
color: #fff !important;
transition-duration: 1s;
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.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: none;
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);
}
.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%, #111 80%);
left: auto!important;
}
.tileGallery__sliderPeekBackward {
right: auto!important;
background: linear-gradient(to left, #0000 10%, #1119 60%, #111 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;
}
.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;
}
.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;
}*/
.proUnlimitedBadge, .creatorBadge {
display: none;
}
.sc-button-selected.playbackSoundBadge__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__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));
}
/* 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 {
font-weight: 300;
}
.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, .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 {
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 {
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 .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) */
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) {
.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;
}
}
.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 {
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 {
background-color: var(--shd-bg-primary);
box-shadow: 0px 2px 16px -3px #000;
border-radius: 24px;
}
#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 {
color: #fff;
}
#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;
font-weight: 100!important;
}
#onetrust-pc-sdk #close-pc-btn-handler.ot-close-icon {
filter: invert(0.9) brightness(1.2);
}
#onetrust-pc-sdk .ot-switch-nob {
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-pc-sdk .category-host-list-handler, #onetrust-pc-sdk #ot-pc-desc .privacy-notice-link {
color: #3c8fe6;
font-weight: 300;
}
/* 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), .sc-classic .modal__modal.transparentBackground:has(.imageContent) {
--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;
}
.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__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%;
transition-duration: 0.25s;
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);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="home"]:before {
background-image: var(--ic-home-active);
}
.header__navWrapper .header__navMenu li a[data-menu-name="stream"]:before {
background-image: var(--ic-stream);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="stream"]:before {
background-image: var(--ic-stream-active);
}
.header__navWrapper .header__navMenu li a[data-menu-name="library"]:before {
background-image: var(--ic-library);
}
.header__navWrapper .header__navMenu li a.selected[data-menu-name="library"]:before {
background-image: var(--ic-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);
}
.webAuthContainerWrapper[style*="left: 255px"] { /* login */
margin-left: 230px;
}
.webAuthContainerWrapper iframe {
filter: drop-shadow(2px 6px 9px #0006);
}
.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;
}
/* 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;
}
.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__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;
}
.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);
}
/* commend 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;
}
.image__rounded {
border-radius: max(/*[[avradius]]*/%, calc(/*[[avradius]]*/px * 0.75));
}
.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.7'/%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;
}
.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;
}
.l-content > div > div:first-child:not(.modular-home-mixed-selection) > .mixedModularHome__item:has(.latestUploadContainer) {
/*[[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");
}
}
@-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("http(s)?://(|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);
box-shadow: 0px 0px 18px #000c;
float: left;
}
.collection__likesSection, .collection__albumsSection, .collection__followingsSection {
width: 50%;
float: right;
}
.collection__section > div {
transform: scale(0.96);
}
.collectionSection__filters {
right: 0;
}
.collection .playableTile {
width: 100% !important;
}
.sc-classic .collection .badgeList__item {
width: 16.666%;
}
a.readMoreTile__countWrapper, .sc-classic .readMoreTile__countWrapper {
height: 48px;
width: 120px;
top: 110%;
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 18px #000c;
}
a.readMoreTile__countWrapper:hover {
background: var(--shd-accent-primary);
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("http(s)?://(|www.)?soundcloud.com/you/(sets|albums|stations|following)/?") {
.badgeList__item {
width: 150px!important;
}
.collectionSection__filters {
right: 40px;
}
}
@-moz-document regexp("http(s)?://(|www.)?soundcloud.com/you/history/?") {
.collectionSection__filters {
right: 140px;
}
}
@-moz-document regexp("http(s)?://(|www.)?insights-ui.soundcloud.com/.*") {
:root { /* Messy new insights page update */
--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;
}
}
@-moz-document regexp("http(s)?://(|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
}
}