dark, clean soundcloud theme.
still work in progress, however mostly usable already.
darkcloud [beta] by stashymane
Mirrored from https://github.com/stashymane/darkcloud/releases/latest/download/style.user.css
Details
Authorstashymane
LicenseApache-2.0
Categorysoundcloud
Created
Updated
Size51 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 darkcloud
@namespace github.com/stashymane/darkcloud
@version 1.0.0-BETA
@description soundcloud, but good
@author stashymane
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&display=swap");
body,
h1, h2, h3, h4, h5,
.sc-type-h1, .sc-type-h2, .sc-type-h3, .sc-type-h4, .sc-type-h5,
.sc-classic .header,
.sc-font-body, .sc-font-light,
.sc-tag,
.sc-button,
.sc-classic .headerMenu,
.sc-classic .g-tabs {
font-family: "Inter", sans-serif !important;
}
:root {
--sidebar-width: 18rem;
--sidebar-collapsed-width: 4rem;
--player-height: 4rem;
--anim: cubic-bezier(0,.3,.2,1);
}
@keyframes slide-down {
0% {
opacity: 0;
transform: translateY(0);
}
1% {
opacity: 0;
transform: translateY(-1rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
:root {
--bg: #111;
--bg-transparent: rgba(17, 17, 17, 0.8);
--container: #292929;
--container-secondary: #414141;
--container-transparent: rgba(41, 41, 41, 0.8);
--container-secondary-transparent: rgba(65, 65, 65, 0.8);
--on-bg: #e7e7e7;
--on-container: #eaeaea;
--on-container-secondary: #ececec;
--overlay: rgba(136, 136, 136, 0.2);
--overlay-secondary: rgba(136, 136, 136, 0.3);
--text: rgba(242, 242, 242, 0.9);
--text-hover: #f2f2f2;
--accent: #f50;
}
.sc-classic {
color: var(--text);
}
.sc-classic .g-tabs-link, .sc-classic .g-tabs-link:visited, .sc-classic .sc-link-light, .sc-classic .sc-link-light:visited, .sc-classic a.sc-ministats, .sc-classic a.sc-ministats:visited {
color: var(--text);
}
.sc-classic .g-tabs-link:hover, .sc-classic .sc-link-light:hover, .sc-classic a.sc-ministats:hover {
color: var(--text-hover);
}
/* main layout */
* {
box-sizing: border-box;
}
.sc-classic .l-container.l-content { /* content container */
margin: 0;
padding-top: 0;
width: 100%;
}
body.sc-classic {
background: var(--bg);
}
:root {
--home-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTI2MS41NiAxMDEuMjhhOCA4IDAgMDAtMTEuMDYgMEw2Ni40IDI3Ny4xNWE4IDggMCAwMC0yLjQ3IDUuNzlMNjMuOSA0NDhhMzIgMzIgMCAwMDMyIDMySDE5MmExNiAxNiAwIDAwMTYtMTZWMzI4YTggOCAwIDAxOC04aDgwYTggOCAwIDAxOCA4djEzNmExNiAxNiAwIDAwMTYgMTZoOTYuMDZhMzIgMzIgMCAwMDMyLTMyVjI4Mi45NGE4IDggMCAwMC0yLjQ3LTUuNzl6Jy8+PHBhdGggZD0nTTQ5MC45MSAyNDQuMTVsLTc0LjgtNzEuNTZWNjRhMTYgMTYgMCAwMC0xNi0xNmgtNDhhMTYgMTYgMCAwMC0xNiAxNnYzMmwtNTcuOTItNTUuMzhDMjcyLjc3IDM1LjE0IDI2NC43MSAzMiAyNTYgMzJjLTguNjggMC0xNi43MiAzLjE0LTIyLjE0IDguNjNsLTIxMi43IDIwMy41Yy02LjIyIDYtNyAxNS44Ny0xLjM0IDIyLjM3QTE2IDE2IDAgMDA0MyAyNjcuNTZMMjUwLjUgNjkuMjhhOCA4IDAgMDExMS4wNiAwbDIwNy41MiAxOTguMjhhMTYgMTYgMCAwMDIyLjU5LS40NGM2LjE0LTYuMzYgNS42My0xNi44Ni0uNzYtMjIuOTd6Jy8+PC9zdmc+);
--feed-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTE5NC44MiA0OTZhMTguMzYgMTguMzYgMCAwMS0xOC4xLTIxLjUzdi0uMTFMMjA0LjgzIDMyMEg5NmExNiAxNiAwIDAxLTEyLjQ0LTI2LjA2TDMwMi43MyAyM2ExOC40NSAxOC40NSAwIDAxMzIuOCAxMy43MWMwIC4zLS4wOC41OS0uMTMuODlMMzA3LjE5IDE5Mkg0MTZhMTYgMTYgMCAwMTEyLjQ0IDI2LjA2TDIwOS4yNCA0ODlhMTguNDUgMTguNDUgMCAwMS0xNC40MiA3eicvPjwvc3ZnPg==);
--library-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTY0IDQ4MEg0OGEzMiAzMiAwIDAxLTMyLTMyVjExMmEzMiAzMiAwIDAxMzItMzJoMTZhMzIgMzIgMCAwMTMyIDMydjMzNmEzMiAzMiAwIDAxLTMyIDMyek0yNDAgMTc2YTMyIDMyIDAgMDAtMzItMzJoLTY0YTMyIDMyIDAgMDAtMzIgMzJ2MjhhNCA0IDAgMDA0IDRoMTIwYTQgNCAwIDAwNC00ek0xMTIgNDQ4YTMyIDMyIDAgMDAzMiAzMmg2NGEzMiAzMiAwIDAwMzItMzJ2LTMwYTIgMiAwIDAwLTItMkgxMTRhMiAyIDAgMDAtMiAyeicvPjxyZWN0IHg9JzExMicgeT0nMjQwJyB3aWR0aD0nMTI4JyBoZWlnaHQ9JzE0NCcgcng9JzInIHJ5PScyJy8+PHBhdGggZD0nTTMyMCA0ODBoLTMyYTMyIDMyIDAgMDEtMzItMzJWNjRhMzIgMzIgMCAwMTMyLTMyaDMyYTMyIDMyIDAgMDEzMiAzMnYzODRhMzIgMzIgMCAwMS0zMiAzMnpNNDk1Ljg5IDQ0NS40NWwtMzIuMjMtMzQwYy0xLjQ4LTE1LjY1LTE2Ljk0LTI3LTM0LjUzLTI1LjMxbC0zMS44NSAzYy0xNy41OSAxLjY3LTMwLjY1IDE1LjcxLTI5LjE3IDMxLjM2bDMyLjIzIDM0MGMxLjQ4IDE1LjY1IDE2Ljk0IDI3IDM0LjUzIDI1LjMxbDMxLjg1LTNjMTcuNTktMS42NyAzMC42NS0xNS43MSAyOS4xNy0zMS4zNnonLz48L3N2Zz4=);
--play-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTEzMyA0NDBhMzUuMzcgMzUuMzcgMCAwMS0xNy41LTQuNjdjLTEyLTYuOC0xOS40Ni0yMC0xOS40Ni0zNC4zM1YxMTFjMC0xNC4zNyA3LjQ2LTI3LjUzIDE5LjQ2LTM0LjMzYTM1LjEzIDM1LjEzIDAgMDEzNS43Ny40NWwyNDcuODUgMTQ4LjM2YTM2IDM2IDAgMDEwIDYxbC0yNDcuODkgMTQ4LjRBMzUuNSAzNS41IDAgMDExMzMgNDQweicvPjwvc3ZnPg==);
--pause-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTIwOCA0MzJoLTQ4YTE2IDE2IDAgMDEtMTYtMTZWOTZhMTYgMTYgMCAwMTE2LTE2aDQ4YTE2IDE2IDAgMDExNiAxNnYzMjBhMTYgMTYgMCAwMS0xNiAxNnpNMzUyIDQzMmgtNDhhMTYgMTYgMCAwMS0xNi0xNlY5NmExNiAxNiAwIDAxMTYtMTZoNDhhMTYgMTYgMCAwMTE2IDE2djMyMGExNiAxNiAwIDAxLTE2IDE2eicvPjwvc3ZnPg==);
--forward-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTQ4MS4yOSAyMjkuNDdsLTE4OC44Ny0xMTNhMzAuNTQgMzAuNTQgMCAwMC0zMS4wOS0uMzkgMzMuNzQgMzMuNzQgMCAwMC0xNi43NiAyOS40N3Y3OS4wNUw2My44NSAxMTYuNDRhMzAuNTQgMzAuNTQgMCAwMC0zMS4wOS0uMzlBMzMuNzQgMzMuNzQgMCAwMDE2IDE0NS41MnYyMjFBMzMuNzQgMzMuNzQgMCAwMDMyLjc2IDM5NmEzMC41NCAzMC41NCAwIDAwMzEuMDktLjM5TDI0NC41NyAyODcuNHY3OS4wOEEzMy43NCAzMy43NCAwIDAwMjYxLjMzIDM5NmEzMC41NCAzMC41NCAwIDAwMzEuMDktLjM5bDE4OC44Ny0xMTNhMzEuMjcgMzEuMjcgMCAwMDAtNTN6Jy8+PC9zdmc+);
--backward-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTMwLjcxIDIyOS40N2wxODguODctMTEzYTMwLjU0IDMwLjU0IDAgMDEzMS4wOS0uMzkgMzMuNzQgMzMuNzQgMCAwMTE2Ljc2IDI5LjQ3djc5LjA1bDE4MC43Mi0xMDguMTZhMzAuNTQgMzAuNTQgMCAwMTMxLjA5LS4zOUEzMy43NCAzMy43NCAwIDAxNDk2IDE0NS41MnYyMjFBMzMuNzMgMzMuNzMgMCAwMTQ3OS4yNCAzOTZhMzAuNTQgMzAuNTQgMCAwMS0zMS4wOS0uMzlMMjY3LjQzIDI4Ny40djc5LjA4QTMzLjczIDMzLjczIDAgMDEyNTAuNjcgMzk2YTMwLjU0IDMwLjU0IDAgMDEtMzEuMDktLjM5bC0xODguODctMTEzYTMxLjI3IDMxLjI3IDAgMDEwLTUzeicvPjwvc3ZnPg==);
--skip-forward-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTQwMCA2NGExNiAxNiAwIDAwLTE2IDE2djEzNi40M0wxNTEuMjMgNzcuMTFhMzUuMTMgMzUuMTMgMCAwMC0zNS43Ny0uNDRDMTAzLjQ2IDgzLjQ3IDk2IDk2LjYzIDk2IDExMXYyOTBjMCAxNC4zNyA3LjQ2IDI3LjUzIDE5LjQ2IDM0LjMzYTM1LjE0IDM1LjE0IDAgMDAzNS43Ny0uNDVMMzg0IDI5NS41N1Y0MzJhMTYgMTYgMCAwMDMyIDBWODBhMTYgMTYgMCAwMC0xNi0xNnonLz48L3N2Zz4=);
--skip-backward-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTExMiA2NGExNiAxNiAwIDAxMTYgMTZ2MTM2LjQzTDM2MC43NyA3Ny4xMWEzNS4xMyAzNS4xMyAwIDAxMzUuNzctLjQ0YzEyIDYuOCAxOS40NiAyMCAxOS40NiAzNC4zM3YyOTBjMCAxNC4zNy03LjQ2IDI3LjUzLTE5LjQ2IDM0LjMzYTM1LjE0IDM1LjE0IDAgMDEtMzUuNzctLjQ1TDEyOCAyOTUuNTdWNDMyYTE2IDE2IDAgMDEtMzIgMFY4MGExNiAxNiAwIDAxMTYtMTZ6Jy8+PC9zdmc+);
--repeat-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPSdjdXJyZW50Q29sb3InIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczMicgZD0nTTMyMCAxMjBsNDggNDgtNDggNDgnLz48cGF0aCBkPSdNMzUyIDE2OEgxNDRhODAuMjQgODAuMjQgMCAwMC04MCA4MHYxNk0xOTIgMzkybC00OC00OCA0OC00OCcgZmlsbD0nbm9uZScgc3Ryb2tlPSdjdXJyZW50Q29sb3InIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczMicvPjxwYXRoIGQ9J00xNjAgMzQ0aDIwOGE4MC4yNCA4MC4yNCAwIDAwODAtODB2LTE2JyBmaWxsPSdub25lJyBzdHJva2U9J2N1cnJlbnRDb2xvcicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzMyJy8+PC9zdmc+);
--shuffle-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPSdjdXJyZW50Q29sb3InIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSczMicgZD0nTTQwMCAzMDRsNDggNDgtNDggNDhNNDAwIDExMmw0OCA0OC00OCA0OE02NCAzNTJoODUuMTlhODAgODAgMCAwMDY2LjU2LTM1LjYyTDI1NiAyNTYnLz48cGF0aCBkPSdNNjQgMTYwaDg1LjE5YTgwIDgwIDAgMDE2Ni41NiAzNS42Mmw4MC41IDEyMC43NkE4MCA4MCAwIDAwMzYyLjgxIDM1Mkg0MTZNNDE2IDE2MGgtNTMuMTlhODAgODAgMCAwMC02Ni41NiAzNS42MkwyODggMjA4JyBmaWxsPSdub25lJyBzdHJva2U9J2N1cnJlbnRDb2xvcicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzMyJy8+PC9zdmc+);
--bell-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTQyNy42OCAzNTEuNDNDNDAyIDMyMCAzODMuODcgMzA0IDM4My44NyAyMTcuMzUgMzgzLjg3IDEzOCAzNDMuMzUgMTA5LjczIDMxMCA5NmMtNC40My0xLjgyLTguNi02LTkuOTUtMTAuNTVDMjk0LjIgNjUuNTQgMjc3LjggNDggMjU2IDQ4cy0zOC4yMSAxNy41NS00NCAzNy40N2MtMS4zNSA0LjYtNS41MiA4LjcxLTkuOTUgMTAuNTMtMzMuMzkgMTMuNzUtNzMuODcgNDEuOTItNzMuODcgMTIxLjM1QzEyOC4xMyAzMDQgMTEwIDMyMCA4NC4zMiAzNTEuNDMgNzMuNjggMzY0LjQ1IDgzIDM4NCAxMDEuNjEgMzg0aDMwOC44OGMxOC41MSAwIDI3Ljc3LTE5LjYxIDE3LjE5LTMyLjU3ek0zMjAgMzg0djE2YTY0IDY0IDAgMDEtMTI4IDB2LTE2JyBmaWxsPSdub25lJyBzdHJva2U9J2N1cnJlbnRDb2xvcicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzMyJy8+PC9zdmc+);
--bell-filled-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGNsYXNzPSdpb25pY29uJyB2aWV3Qm94PScwIDAgNTEyIDUxMic+PHBhdGggZD0nTTQ0MC...