// ==UserScript== // @name SoundCloud UI Fix // @namespace http://tampermonkey.net/ // @version 2.8 // @description fix soundcloud - performance improvements // @author nekohacker591 // @match https://soundcloud.com/* // @grant GM_addStyle // @run-at document-end // ==/UserScript== (function() { 'use strict'; const styles = ` /* Define and apply the custom font */ @font-face { font-family: 'HardlinkedOldFont'; src: url('https://github.com/nekohacker591/soundcloud_assets/raw/refs/heads/main/oldfont.otf') format('opentype'); font-weight: normal; font-style: normal; } /* Force the new font and a more 'normal' weight globally */ body, body *, input, button, textarea, select, .sc-font, .sc-type-light, .sc-type-regular, .sc-type-semibold, .sc-type-bold, .sc-text, .sc-link, .sc-ministats, .sc-truncate, .playbackSoundBadge__titleContextContainer > a, .soundTitle__title, .soundTitle__username, .playableTile__heading, .sidebarHeader__actualTitle, .mixedSelectionModule__titleText, .uploadTarget__title, .modal__titleText, .dialog__content, .headerMenu__link, .announcement p, .banner p, .confirmEmailBanner__text, .quotaMeter__percentage, .quotaMeter__lightLine, .quotaMeter__upsellText, .userBadge__username, .userBadge__stats, .trackList__item .trackItem__title, .commentItem__body, .commentItem__username, .sc-button-label, .l-main h1, .l-main h2, .l-main h3, .l-main h4, .l-main h5, .l-main h6, .l-main p, .l-main span, .l-main a, .l-sidebar-right h1, .l-sidebar-right h2, .l-sidebar-right h3, .l-sidebar-right h4, .l-sidebar-right h5, .l-sidebar-right h6, .l-sidebar-right p, .l-sidebar-right span, .l-sidebar-right a { font-family: 'HardlinkedOldFont', sans-serif !important; font-weight: 400 !important; } .sc-font-light, .sc-type-light { font-family: 'HardlinkedOldFont', sans-serif !important; font-weight: 400 !important; } .sc-font-regular, .sc-type-regular { font-family: 'HardlinkedOldFont', sans-serif !important; font-weight: 400 !important; } .sc-font-semibold, .sc-type-semibold { font-family: 'HardlinkedOldFont', sans-serif !important; font-weight: 400 !important; } .sc-font-bold, .sc-type-bold { font-family: 'HardlinkedOldFont', sans-serif !important; font-weight: 400 !important; } /* ---- Exact Old Header Style Restoration ---- */ header.header.fixed { background-color: #333333 !important; color: #f0f0f0 !important; height: 46px !important; padding: 0 !important; border-bottom: 1px solid #1a1a1a !important; box-sizing: border-box !important; } header.header .header__inner.l-container { max-width: none !important; width: 100% !important; margin: 0 auto !important; padding: 0 0 0 0 !important; /* Left edge aligned logo block */ height: 100% !important; align-items: center !important; display: flex !important; justify-content: space-between !important; } .header__left { display: flex !important; align-items: stretch !important; height: 100% !important; } .header__logo { display: flex !important; align-items: stretch !important; margin-right: 0 !important; } .header__logo .header__logoLink-wordmark { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #ff5500 !important; padding: 0 10px !important; height: 100% !important; box-sizing: border-box !important; min-width: 110px; } .header__logo .header__logoLink-wordmark div { /* Container for the SVG */ display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; /* Let SVG take its natural width based on height */ height: 19px !important; /* Control the height of the SVG */ } .header__logo .header__logoLink-wordmark div svg { /* The SVG itself */ display: block !important; width: auto !important; /* Maintain aspect ratio */ height: 100% !important; /* Fill the height of its container div */ fill: #ffffff !important; /* Ensure paths are white */ } .header__logo .header__logoLink-iconOnly { display: none !important; } .header__navWrapper { height: 100% !important; margin-left: 0px !important; } .header__navMenu { height: 100% !important; display: flex !important; align-items: stretch !important; } .header__navMenu > li { border-right: 1px solid #262626 !important; display: flex !important; align-items: stretch !important; } .header__navMenu > li:first-child { border-left: 1px solid #262626 !important; } .header__navMenu > li > a.header__navMenuItem { color: #ffffff !important; padding: 0 15px !important; font-weight: 400 !important; display: flex !important; align-items: center !important; text-decoration: none !important; border-bottom: 2px solid transparent !important; height: 100% !important; box-sizing: border-box !important; } header.header .header__navMenuItem.selected { color: #ff5500 !important; border-bottom-color: #ff5500 !important; font-weight: 400 !important; } header.header .header__navMenuItem:not(.selected):hover { color: #ffffff !important; border-bottom-color: #777777 !important; } .header__middle { flex: 1 1 auto !important; display: flex !important; align-items: center !important; padding: 0 15px !important; margin-left: 10px; min-width: 200px; max-width: 580px; } .header__search { width: 100% !important; } .headerSearch__input { background-color: #f0f0f0 !important; color: #555555 !important; font-weight: 400 !important; border: 1px solid #404040 !important; height: 30px !important; line-height: normal !important; padding: 6px 35px 6px 10px !important; box-sizing: border-box !important; } .headerSearch__input::placeholder { color: #888888 !important; font-weight: 400 !important; } .headerSearch__submit { height: 30px !important; width: 30px !important; top: 0 !important; transform: none !important; right: 0px !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .headerSearch__submit svg { fill: #333333 !important; width: 16px !important; height: 16px !important; } .header__right { display: flex !important; align-items: center !important; height: 100% !important; margin-left: auto; padding-right: 10px; } .header__right > *, .header__userNav > .header__userNavItem, .header__userNav > a.header__userNavButton, .header__moreButton { margin-left: 5px !important; height: 100% !important; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } .header__right > *:first-child { margin-left: 0 !important; } .header__creatorUpsell, .signupButton { background-color: #ff5500 !important; color: #ffffff !important; border: none !important; padding: 0 10px !important; font-weight: 400 !important; text-transform: none !important; } .header__creatorUpsell span, .signupButton span, .header__creatorUpsell .sc-button-label, .signupButton .sc-button-label { color: #ffffff !important; line-height: 30px !important; font-weight: 400 !important; } .loginButton { background-color: #444444 !important; border: 1px solid #2d2d2d !important; color: #ffffff !important; padding: 0 10px !important; line-height: 28px !important; font-weight: 400 !important; text-transform: none !important; } .loginButton:hover { background-color: #555555 !important; } .uploadButton, .header__forArtistsButton, .header__soundInput .uploadButton { color: #ffffff !important; padding: 0 6px !important; font-weight: 400 !important; text-decoration: none !important; background-color: transparent !important; border: none !important; line-height: 30px !important; } .uploadButton .uploadButton__title, .header__forArtistsButton { color: #ffffff !important; font-weight: 400 !important; } .uploadButton:hover .uploadButton__title, .header__forArtistsButton:hover { color: #dddddd !important; } .header__userNav { display: flex; align-items: center; height: 100%; } .header__userNav > a.header__userNavButton, .header__userNav > .header__userNavItem { padding: 0 6px !important; border-left: 1px solid #262626 !important; } header.header .header__right .header__userNavActivitiesButton svg, header.header .header__right .header__userNavActivitiesButton svg path, header.header .header__right .header__userNavMessagesButton svg, header.header .header__right .header__userNavMessagesButton svg path, header.header .header__right .header__userNavUsernameButtonIcon svg, header.header .header__right .header__userNavUsernameButtonIcon svg path { fill: #f0f0f0 !important; width: 20px !important; height: 20px !important; } .header__userNavAvatar { margin-top: 0 !important; width: 26px !important; height: 26px !important; margin-right: 2px !important; } .header__userNavAvatar > span.image__full { width: 26px !important; height: 26px !important; } .header__userNavUsernameButtonIcon { margin-left: 0 !important; } .header__userNavUsernameButton .header__userNavUsername { color: #f0f0f0 !important; font-weight: 400 !important;} .header__moreButton { padding: 0 8px !important; border-left: 1px solid #262626 !important; } header.header .header__right .header__moreButtonIcon svg, header.header .header__right .header__moreButtonIcon svg path { fill: #f0f0f0 !important; width: 20px !important; height: 20px !important; } /* ---- End Exact Old Header Style Restoration ---- */ /* 6. Tone Down Excessive Boldness SITE-WIDE */ .sc-text-h1, .sc-text-h2, .sc-text-h3, .sc-text-h4, .sc-text-h5, .sc-text-h6, h1, h2, h3, h4, h5, h6, .sc-ministats, .sc-ministats span, .userStats span, .userStats a, .sidebarModule__title, .sidebarHeader__actualTitle, .mixedSelectionModule__titleText, .mixedSelectionModule__subtitleText, .playableTile__heading, .playableTile__usernameHeading, .soundTitle__title, .soundTitle__username, .commentItem__username, .commentItem__body, .sc-button .sc-button-label, button, .uploadButton__title, .header__link, .header__forArtistsButton, .quotaMeter__percentage, .quotaMeter__lightLine, .quotaMeter__upsellText, .insightsSidebarModule__title, .insightsSidebarModule__plays, .insightsSidebarModule__timeframe, .webiEmbeddedModuleContainer p, .webiEmbeddedModuleContainer span, .artistShortcutTile__username span, .userBadgeListItem__heading, .userBadgeListItem__subtitle, .systemPlaylistTile .playableTile__usernameHeading, .releaseDateCompact, .soundBadge .soundTitle__secondary a { font-weight: 400 !important; } .playableTile__heading a, .playableTile__usernameHeading a, .soundTitle__title a, .soundTitle__username a { font-weight: 400 !important; } /* 2. Make the profile picture icon square (already covered by no-rounded-corners) */ /* 3. Reduce spacing for tiles/sections */ body[class*="discover"] .mixedSelectionGallery .sc-mb-6x, body[class*="stream"] .soundList__item { margin-bottom: 12px !important; } body[class*="discover"] .mixedSelectionModule__title.sc-pt-3x { padding-top: 8px !important; } /* 4. General Play/Pause Button Background Removal (Non-Player Bar) */ .sc-button-play:not(.playControls__control) svg, .playButton:not(.playControls__control) svg { fill: #000000 !important; } .sc-button-play.sc-button:not(.playControls__control), .playButton.sc-button:not(.playControls__control) { background-color: transparent !important; border: none !important; box-shadow: none !important; } .sc-button-play.sc-button:not(.playControls__control)::before, .sc-button-play.sc-button:not(.playControls__control)::after, .playButton.sc-button:not(.playControls__control)::before, .playButton.sc-button:not(.playControls__control)::after { display: none !important; } .playableTile__playButton > .sc-button-play, .audibleTile__playButton > .sc-button-play { background: none !important; } /* ---- CSS FOR MAIN PLAYER CONTROL BAR ---- */ .playControls__elements .playControl.playControls__play, .playControls__elements .skipControl.playControls__prev, .playControls__elements .skipControl.playControls__next { background-color: transparent !important; border: none !important; box-shadow: none !important; } .playControls__elements .playControl.playControls__play::before, .playControls__elements .playControl.playControls__play::after, .playControls__elements .skipControl.playControls__prev::before, .playControls__elements .skipControl.playControls__prev::after, .playControls__elements .skipControl.playControls__next::before, .playControls__elements .skipControl.playControls__next::after { display: none !important; } .playControls__elements .skipControl.playControls__prev svg, .playControls__elements .skipControl.playControls__next svg { width: 20px !important; height: 20px !important; } /* 5. Remove Corporate Rounded Corners */ .uploadTarget__frame, .modal__modal, .dialog, .headerMenu, .announcement, .banner, .confirmEmailBanner__inner, .scheduleBanner, .trackMonetizationBanner, .gritter-item-wrapper, .gritter-image, .queue, .volume.expanded .volume__sliderWrapper, .soundBadge, .playableTile__imageOverlay, .quotaMeterWrapper, .moreActions, .tooltip, .tierIndicator__largeGoPlus, .tierIndicator__listGoPlus, .tierIndicator__smallGoPlus, button, .sc-button, input, textarea, select, .image, .image__full, .image__rounded, .image__rounded > span.image__full, .sc-artwork, .playableTile .image, .playableTile__artwork .image, .audibleTile .image, .audibleTile__artwork .image, .userBadgeListItem__artwork .image, .tileGallery__sliderButton, .playControlsPanel, .soundList__item, .compactTrackListItem, .searchList__item, .commentItem, .header__userNavActivitiesButton, .header__userNavMessagesButton, .header__userNavUsernameButton, .sc-tag, .sc-tabs__item, .l-sidebar-right .sidebarModule, .playControls__castControl #castbutton, [class*="rounded"] { border-radius: 0px !important; } .dialog.roundedBottom, .queue__dragCover, .queue__scrollable, .headerMenu__list:first-child li:first-child .headerMenu__link, .headerMenu__list:last-child li:last-child .headerMenu__link { border-radius: 0px !important; } `; if (typeof GM_addStyle !== "undefined") { GM_addStyle(styles); } else { const styleNode = document.createElement('style'); styleNode.id = 'soundcloud-ui-enhancements-styles'; styleNode.type = 'text/css'; styleNode.appendChild(document.createTextNode(styles)); (document.head || document.documentElement).appendChild(styleNode); } // --- JavaScript for Direct SVG Path Modification --- let debounceTimerPlayer; const DEBOUNCE_DELAY = 50; // ms function scheduleModifyPlayerSVGs() { clearTimeout(debounceTimerPlayer); debounceTimerPlayer = setTimeout(modifyPlayerSVGs, DEBOUNCE_DELAY); } function modifyPlayerSVGs() { const playerControls = document.querySelector('.playControls__elements'); if (!playerControls) return; const buttonsToModify = [ playerControls.querySelector('.playControl.playControls__play'), playerControls.querySelector('.skipControl.playControls__prev'), playerControls.querySelector('.skipControl.playControls__next') ]; buttonsToModify.forEach(button => { if (button) { const svg = button.querySelector('svg'); if (svg) { svg.querySelectorAll('path').forEach(path => { if (path.getAttribute('fill') !== '#000000') { path.setAttribute('fill', '#000000'); } }); } } }); } function replaceLogoSVG() { const logoLinkDiv = document.querySelector('.header__logo .header__logoLink-wordmark div'); if (logoLinkDiv) { if (logoLinkDiv.querySelector('svg[data-custom-logo="true"]')) { return; // Already replaced } const newSVGString = ''; logoLinkDiv.innerHTML = newSVGString; } } let playerObserver = null; let logoObserver = null; let initAttempts = 0; const MAX_INIT_ATTEMPTS = 15; // Try for up to 15 seconds function initSVGModification() { modifyPlayerSVGs(); replaceLogoSVG(); const controlsObserverTarget = document.querySelector('.playControls__elements'); const headerObserverTarget = document.querySelector('header.header .header__logo'); if (controlsObserverTarget && !playerObserver) { playerObserver = new MutationObserver((mutationsList, obs) => { let triggerModification = false; for (const mutation of mutationsList) { if (mutation.type === 'childList') { // If any added/removed node is an SVG, or contains an SVG, or is a control button itself for (const node of Array.from(mutation.addedNodes).concat(Array.from(mutation.removedNodes))) { if (node.nodeType === 1 && (node.matches('svg, .playControl, .skipControl') || node.querySelector('svg'))) { triggerModification = true; break; } } } else if (mutation.type === 'attributes') { // If attributes change on SVGs/paths within controls, or on the controls themselves const target = mutation.target; if (target.nodeType === 1 && (target.matches('svg, svg *, .playControl, .skipControl') || target.closest('.playControl, .skipControl'))) { triggerModification = true; } } if (triggerModification) break; } if (triggerModification) { scheduleModifyPlayerSVGs(); } }); playerObserver.observe(controlsObserverTarget, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'd', 'fill', 'style'] }); } if (headerObserverTarget && !logoObserver) { logoObserver = new MutationObserver((mutationsList, obs) => { for (const mutation of mutationsList) { let relevantMutation = false; if (mutation.target.matches('.header__logoLink-wordmark div, .header__logoLink-wordmark div *')) { relevantMutation = true; } else if (mutation.type === 'childList') { for (const node of Array.from(mutation.addedNodes).concat(Array.from(mutation.removedNodes))) { if (node.nodeType === 1 && (node.matches('.header__logoLink-wordmark div') || node.closest('.header__logoLink-wordmark div') || node.querySelector('svg'))) { relevantMutation = true; break; } } } if (relevantMutation) { const logoDiv = document.querySelector('.header__logo .header__logoLink-wordmark div'); if (logoDiv && !logoDiv.querySelector('svg[data-custom-logo="true"]')) { replaceLogoSVG(); } break; } } }); logoObserver.observe(headerObserverTarget, { childList: true, subtree: true }); } initAttempts++; if ((!controlsObserverTarget || !headerObserverTarget || !playerObserver || !logoObserver) && initAttempts < MAX_INIT_ATTEMPTS) { setTimeout(initSVGModification, 1000); } } if (document.readyState === 'interactive' || document.readyState === 'complete') { initSVGModification(); } else { document.addEventListener('DOMContentLoaded', initSVGModification); } })();