dark_purple_soundcloud.md

what

this is a purple theme for soundcloud to go alongside pawelos076232's "quite dark" theme it's not perfect, but most orange things are now purple. some other things are cleaned up as well.
it must be hosted on github rather than userstyles as it imports a font.

how to install

if you're using chrome, install stylish for chrome.
if you're using firefox, install stylish for firefox.
if you're using something else, 😳.

first, install the quite dark theme. next, while on soundcloud:

• click on stylish, and click the options button in the top-right corner.
• choose 'create new style'
• on the left panel, under 'mozilla format', click 'import'
• when prompted, paste in the code in the file below and click 'overwrite style'
• on the left panel, click 'save'

the css should now be applied to soundcloud.
please note that the theme has not been tested on chrome, and that it may cause significantly slower loading times.

purple.css

@import url("https://fontlibrary.org/face/hk-grotesk");

/* fullscreen player */
.g-type-shrinkwrap-inline {
	background-color: #0000;
}

.soundTitle__usernameHeroContainer {
	margin-bottom: -5px;
}

.g-type-shrinkwrap-inline, .g-type-shrinkwrap-inline:hover, .g-type-shrinkwrap-inline:visited, .g-type-shrinkwrap-block, .g-type-shrinkwrap-block:hover, .g-type-shrinkwrap-block:visited .profileTabs .spotlightTitle .infoStats__value .infoStats_title {
	background-color: #0000;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    
}

.backgroundGradient__buffer {
	background: rgba(0.1, 0.1, 0.1, 1);
}

/* general */
body {
    font: "HKGroteskRegular" !important;
    font-family: 'HKGroteskRegular'; 
    font-weight: normal;
   	font-style: normal; 
	color: #333;
}

.g-type-shrinkwrap-inline, .g-type-shrinkwrap-inline:hover, .g-type-shrinkwrap-inline:visited, .g-type-shrinkwrap-block, .g-type-shrinkwrap-block:hover, .g-type-shrinkwrap-block:visited {
	font: "HKGroteskRegular" !important;
    font-family: 'HKGroteskRegular'; 
    font-weight: normal;
   	font-style: normal; 
}
    
@namespace url(http://www.w3.org/1999/xhtml);
.header__logo, .userInfoBar, .sc-orange, .sc-label, .sc-status-icon, .sc-button, .dashbox__icon, .heroPlayButton, .sceneLayer, .sc-button-play, .playbackTimeline, .trackItem__trackTitle, .compactTrackListItem__user, .compactTrackListItem__number, .compactTrackListItem__trackTitle, .compactTrackListItem__plays, .commentPopover__username {
    filter: hue-rotate(240deg);
}    

.waveformCommentsNode {
    filter: hue-rotate(0deg) !important;
}

.sc-font-light, .sc-font-tabular-light, .header__navMenuItem, .g-tabs-link, .header, .sc-link-dark, .soundTitle__usernameText, .sc-ministats, .sc-label, .sc-orange, .sc-status-icon, .sc-button, .compactTrackListItem__number, .compactTrackListItem__user, .compactTrackListItem__trackTitle, span, p, .sc-font, .sc-truncate, .profileHeaderInfo__additional {
    font: "HKGroteskRegular" !important;
    font-family: 'HKGroteskRegular'; 
    font-weight: normal;
   	font-style: normal; 
}

.backgroundGradient {
	filter: brightness(0.5) saturate(4);
}

p, .sc-font, .profileHeaderInfo__additional {
    color: #fff;
    margin-top: -2px;
}