Dark theme based on the Soundcloud Ultra Dark by IgChi.
SoundCloud Colorful Dark by tinyminori
Details
Authortinyminori
LicenseCC-BY-4.0
Categorysoundcloud.com
Created
Updated
Size84 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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 Colorful Dark
@namespace Me
@author TinyMinori
@description `Dark theme based on the Soundcloud Ultra Dark by IgChi.`
@version 20221208.23.53
@license CC-BY-4.0
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
/* Variables */
:root {
--primary-color: #A188A6;
--primary-color-dark: #7F5A83;
--button-color: var(--primary-color-dark);
--loading-pill-color-1: var(--primary-color);
--loading-pill-color-2: var(--primary-color-dark);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--text-color: #fff;
--border-color: #eee;
}
}
@media (prefers-color-scheme: light) {
:root {
--primary-color: #f50;
--primary-color-dark: #da500b;
--background-color: #f2f2f2;
--text-color: #333;
--border-color: #222;
}
}
/* Reset */
/* Fonts */
@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
}
/* Animations */
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
-ms-transform: translate(-10px);
-moz-transform: translate(-10px);
-webkit-transform: translate(-10px);
-o-transform: translate(-10px);
transform: translate(-10px);
}
100% {
-ms-transform: translate(10px);
-moz-transform: translate(10px);
-webkit-transform: translate(10px);
-o-transform: translate(10px);
transform: translate(10px);
}
}
@keyframes loading-pill-shown {
from {
z-index: 100;
}
to {
z-index: 101;
}
}
.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 var(--border-color) !important;
box-shadow: 0 0 10px #0d0d0d!important
}
/* General */
html {
min-height: 100vh
}
body {
overflow: auto;
background: var(--background-color);
}
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
}
/* Other */
#dropdown-button-53 ul:last-child {
border-bottom: 0
}
.sc-classic .lazyLoadingList {
display: flex;
justify-content: center;
flex-direction: column;
}
.sc-classic .loading {
background-image: none;
position: relative;
}
.sc-classic .loading::after {
content: "";
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
background: var(--loading-pill-color-1);
animation: 0.5s linear infinite alternate loading,
0.5s linear 0.75s infinite alternate loading-pill-shown;
}
.sc-classic .loading::before {
content: "";
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
background: var(--loading-pill-color-2);
animation: 0.5s linear infinite alternate-reverse loading,
0.5s linear 0.25s infinite alternate loading-pill-shown;
}
h2.selectionModule__titleText {
color: var(--text-color);
font-weight: 600;
font-size: 28px
}
.playableTile {
width: 120px;
padding-bottom: 60px
}
.userBadge__usernameLink {
font-size: 14px
}...