Skip to content

SoundCloud Ultra Dark [DRACULIZED] by f0lg

Write a review Install Get Stylus

Details

Authorf0lg

LicenseCC-BY-4.0

Categorysoundcloud.com

Created

Updated

Size54 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dracula based soundcloud.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         SoundCloud Ultra Dark
@namespace    USO Archive
@author       IgChi
@description  This is incredibly dark and beauty theme for SoundCloud.com 🎁     ______________________________________   THANK YOU FOR YOUR DONATION 🙏
@version      20220906.23.20
@license      CC-BY-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
.l-collection,
.listenNetwork {
	margin-left: 15px
}
.listenNetwork {
	margin-right: 15px
}
#app,
.sc-classic #app header {
	height: calc(100vh - 90px)
}
.g-z-index-header-menu[style] {
	border: 1px solid #fff!important;
	box-shadow: 0 0 10px #0d0d0d!important
}
@font-face {
	font-weight: 400;
	font-family: glue1-spoticon;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/spoticon_regular_2.woff2) format("woff2"), url(https://open.scdn.co/fonts/spoticon_regular_2.woff) format("woff"), url(https://open.scdn.co/fonts/spoticon_regular_2.ttf) format("truetype")
}
@font-face {
	font-weight: 200;
	font-family: spotify-circular;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIv3T-Light.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Light.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Light.ttf) format("truetype");
	font-display: swap
}
@font-face {
	font-weight: 400;
	font-family: spotify-circular;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIv3T-Book.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Book.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Book.ttf) format("truetype");
	font-display: swap
}
@font-face {
	font-weight: 600;
	font-family: spotify-circular;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIv3T-Bold.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Bold.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIv3T-Bold.ttf) format("truetype");
	font-display: swap
}
@font-face {
	font-weight: 200;
	font-family: spotify-circular-arabic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Light.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Light.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Light.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 400;
	font-family: spotify-circular-arabic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Book.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Book.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Book.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 600;
	font-family: spotify-circular-arabic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Bold.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Bold.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIAraOnly-Bold.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 200;
	font-family: spotify-circular-hebrew;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Light.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Light.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Light.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 400;
	font-family: spotify-circular-hebrew;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Book.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Book.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Book.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 600;
	font-family: spotify-circular-hebrew;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Bold.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Bold.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUIHbrOnly-Bold.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 200;
	font-family: spotify-circular-cyrillic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Light.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Light.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Light.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 400;
	font-family: spotify-circular-cyrillic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Book.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Book.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Book.otf) format("opentype");
	font-display: swap
}
@font-face {
	font-weight: 600;
	font-family: spotify-circular-cyrillic;
	font-style: normal;
	src: url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Bold.woff2) format("woff2"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Bold.woff) format("woff"), url(https://open.scdn.co/fonts/CircularSpUICyrOnly-Bold.otf) format("opentype");
	font-display: swap
}
html {
	min-height: 100vh
}
body {
	overflow: auto;
	background: #282A36
}
a,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
p {
	font-family: spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, Helvetica, Arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif!important
}
::-webkit-scrollbar,
div::-webkit-scrollbar {
	width: 8px
}
::-webkit-scrollbar-track {
	background: linear-gradient(360deg, #0a0a0a 91px, transparent 91px)
}
div::-webkit-scrollbar-track, ul::-webkit-scrollbar-track {
	background: transparent
}
::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
	background: #202020
}
::-webkit-scrollbar-thumb:hover,
div::-webkit-scrollbar-thumb:hover {
	background: #222
}
#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 {
	color: #fff;
	font-weight: 600;
	font-size: 28px
}
.playableTile {
	width: 120px;
	padding-bottom: 60px
}
.userBadge__usernameLink {
	font-size: 14px
}
.userBadge__usernameLink,
a.playableTile__heading {
	color: #fff!important;
	font-weight: 400;
	text-align: center
}
.userBadge__usernameLink:hover {
	color: #fff;
	font-size: 14px;
	text-align: center
}
a.playableTile__heading:hover {
	color: #fff;
	text-align: center
}
.badgeList__item {
	width: 150px
}
.l-collection {
	margin-right: 15px
}
.playableTile__usernameHeading,
a.playableTile__usernameHeading {
	width: 100%;
	color: #fff;
	font-weight: 200;
	text-align: center;
	opacity: .6
}
.sc-classic #app .l-container,
.sc-classic #app header,
.header__inner {
	box-sizing: border-box;
	width: 230px
}
a.playableTile__usernameHeading:hover {
	color: #fff;
	text-decoration: underline;
	opacity: 1
}
.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 15px 0 #000
}
.moreActions {
	padding: 5px 0;
	background: #0d0d0d;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem
}
.moreActions .moreActions__button.sc-button-medium {
	color: #b3b3b3;
	font-size: 14px;
	background: 0 0;
	border: 0;
	cursor: default
}
.sc-classic #app .l-container #content .soundBadge__additional .sc-button-small.sc-button-more:before,
.moreActions .moreActions__button.sc-button-medium:before {
	filter: brightness(3)
}
.moreActions .moreActions__button.sc-button-medium:hover {
	color: #fff;
	background: #333
}
.moreActions .moreActions__button.sc-button-medium:hover:before {
	filter: brightness(6)
}
.sc-classic #app {
	display: flex
}
.sc-classic #app header {
	background: 0
}
.header__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #282A36
}
.header__inner .header__logo {
	width: 100%;
	background: 0
}
.sc-classic .show.peace-logo .header__logo {
	background: 0
}
.header__inner .header__logo .header__logoLink {
	width: 100%;
	margin-left: 0;
	background: no-repeat center/73px url(https://web.archive.org/web/20110615060435im_/http://a1.sndcdn.com/images/soundcloud-logo-sc.png?taylor62)
}
.header__inner .header__right {
	position: absolute;
	left: 10px;
	height: 90px;
	background: linear-gradient(30deg, #401702 -200%, transparent);
	border-radius: 5px;
	box-shadow: 2px 2px 2px #0d0d0d
}
.header__inner .header__right div.header__userNav {
	position: absolute;
	bottom: 0;
	width: 100%
}
.creatorsNavigation {
	margin: 15px
}
.header__soundInput .left {
	position: absolute;
	top: 40px;
	left: 110px;
	z-index: 1
}
.header__inner .header__right div.header__userNav .header__userNavUsernameButton .header__userNavUsername {
	display: block
}
.header__inner .header__right ul.header__navMenu {
	position: absolute;
	right: 0;
	bottom: 0
}
.header__navWrapper {
	width: 90%
}
.header__navWrapper .header__navMenu {
	display: flex;
	flex-direction: column;
	width: 100%
}
.header__navMenu > li > a.header__moreButton.selected,
.header__userNavButton.selected,
.header__userNavItem.selected {
	background: 0 0
}
.header__navWrapper .header__navMenu li a {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 10px;
	padding: 0 34px;
	color: #b3b3b3;
	font-weight: 100;
	font-size: 16px;
	line-height: 40px;
	letter-spacing: 1px;
	text-align: left;
	background: 0 0;
	border: 0
}
.header__navWrapper .header__navMenu li a.selected {
	background: linear-gradient(90deg, #401702 -400%, transparent);
	border-left: 4px solid #f50
}
.header__navWrapper .header__navMenu li a:hover {
	color: #fff
}
.sc-classic #app .l-container {
	width: 100%;
	margin: 0;
	padding: 0
}
.sc-classic #app .l-container.l-content...

Reviews

No reviews yet.