Soundfy is a theme that aims to make the Soundcloud UI closer to Spotify's UI.
V3 is a complete re-work of the code with a cleaner design.
SoundFy V3 by bliwi
Details
Authorbliwi
LicenseGNU
Categorysoundcloud
Created
Updated
Size65 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Join our discord community for updates and to contribute to the project!
Pair it with this Tampermonkey script for Shortcuts on the sidebar! : Playlists on the Side
Go to the playlists page on your library
📌 Pins all the playlists to the sidebar.
🗑️ Removes all the playlists from the sidebar.
➕ Adds a single playlist to the sidebar.
Double click a playlist to rename it.
Rename it to del to remove it from the sidebar.
Features:
Stylus Setting menu support
New animations
Compact mode
Custom Themes
Disable The Logo
Disable The upload button
Playlists on the sidebar
Custom animations
Auto retract the sidebar
todos:
New and easier to use playlists buttons (In progress).
Fix the layout on less used pages(about us, legal, etc...).
Option to mimic the new spotify look with floating panels.
Button to zoom in on the artwork.
Mini description panel.
Soundfy is not a carbon copy of spotify, may it be because of limitations of CSS or creative decisions made by me.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
// If you are here, please get in contact, I need your help.
//
// Join our discord community:
// https://discord.gg/temjFyU4
//
// I have stoped the development of this theme for now, if you are interested in helping me continue the development, please join our discord.
// My next milestone was to move it to github, but I'm not sure I will be able to acomplish that on my own.
//
// My will and inspiration to develop have also died down again :(.
// Having someone else to help will be a great experiece, even if you don't know much about coding.
// https://youtu.be/tQsbUnDW8Vs?t=64
@name soundfy V3
@version 3.4.4
@supportURL https://youtu.be/N05-x8Kl8qQ?t=109
@homepageURL https://userstyles.world/style/5470/soundfy-v3
@namespace userstyles.world/user/bliwi
@description Soundfy is a theme that aims to make the soundcloud UI closer to Spotify's UI.
V3 is a complete re-work of the code, adding a bunch of new stuff.
A big thanks to Mikey for converting the code to Stylus for me! :)
@author bliwi
@license No License
@preprocessor stylus
@var checkbox welcome "Welcome message" 1
@var select theme "Theme" {
'Default-Custom*': "Default",
'Floating App': "floating-app",
'Accent color(WIP)': "floating-app-accent",
'Floating App Custom': "floating-app-custom",
'The other fy':"the-other-fy",
'Nomanssky': "Nomanssky",
'oled': "oled",
'florest': "Florest",
'Abstractwaves': "Abstractwaves",
'sc-classic': "sc-classic",
}
@var select sidebar "Sidebar" {
'Auto*': "auto",
'Static': "static",
'Compact ': "compact",
}
@var text auto-trigger "Auto Trigger" 1200px
@var text blur-radius "Blur radius (Blur ammount)" 20px
@var text bg-image "Background Image (wrap in quotes)" ""Example""
@var checkbox logo "Show logo" 1
@var checkbox animations "Subtle animations" 1
@var checkbox bottom-bar "Bottom bar (Full/Compact)" 1
@var checkbox blur "Blur effect" 1
@var checkbox upload "Upload text" 0
@var checkbox shadows "Shadows everywhere" 0
@var checkbox invert-icon "Invert Icons" 1
@var color bg-color "Background color" #121212
@var color sidebar-color "Sidebar Color" #000
@var color sidebar-text "Sidebar Text Color" #fff
@var color bottom-bar-color "Bottom Bar Color" #181818
@var color link-color "Link text color" #fff
@var color link-light "secondary link text color" #999
@var color header-color "Headers text color" #f0f0f0
@var color sub-text "Sub text" #999
@var color menus-bg "Menus / Flyouts background color" #121212
@var color accent-color "Accent color" #f50
@var color button-color "Button colors" #222
@var color shadow-color "Shadows color" #000
@var range icon-hue "Icons hue" [0,0,360,1,"deg"]
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
/*A big thanks to Mikey for converting the code to Stylus for me :)
Soundfy
/*default sidebar #333 / default bottom bar #f2f2f2 */
.sc-classic .l-fluid-fixed{
margin-left: 20px;
}
/*Promotion banners - Thanks to Junki for allowing me to reference his code for this and other snipets(search for Junki for credits where due)*/
.l-product-banners{
display: none;
}
/*Cookies - Junki*/
#onetrust-consent-sdk {display: none;}
.sc-classic .header{
background: var(--sidebar-color);
box-shadow: 0 0 10px var(--shadow-color);
}
.pinbutton:hover{
background: var(--accent-color);
cursor: pointer;
}
.sc-classic .playControls__bg{
background: none;
}
.sc-classic .playControls__inner{
background: var(--bottom-bar-color);
}
.playControls.m-visible .playControls__inner{
box-shadow: 0 0 5px var(--shadow-color);
}
.sc-classic .playbackTimeline__timePassed{
color: var(--accent-color);
}
.container{
overflow-y:auto;
overflow-x: clip;
height: calc(100vh - var(--bottom-width) - 290px);
}
/*Margins and spacings*/
.l-container {
width: auto !important;
margin-left: var(--sidebar-width);
margin-right: 0px;
display: grid;
animation: more-actions 3s 0;
}
#content{
overflow: hidden;
}
.sc-classic .l-container.l-content {
padding: 0px;
}
/* .modular-home-mixed-selection{
padding-left: 20px;
} Margin left backup*/
.l-three-column .listen-about{
padding-left: 20px;
}
.l-fluid-fixed .l-sidebar-right .l-footer, .sc-classic .l-fluid-fixed .l-sidebar-right .l-footer{
padding-bottom: calc(var(--bottom-width) + 20px);
}
.sc-classic .l-footer.standard{
padding: 20px 20px;
}
/*loading*/
.sc-classic .loading{
background: transparent url(https://icon-library.com/images/loading-icon-transparent-background/loading-icon-transparent-background-11.jpg) no-repeat 50% 50%;
min-height: 40px;
background-size: 30px;
filter: invert(var(--invert-icon));
animation: header-in linear 0.3s , rotation 2s infinite linear;
}
/* Buttons */
.sc-button-next.sc-button-focus, .sc-button-next:focus, .sc-button-next:hover, .sc-button-pause.sc-button-focus, .sc-button-pause:focus, .sc-button-pause:hover, .sc-button-play.sc-button-focus, .sc-button-play:focus, .sc-button-play:hover, .sc-button-prev.sc-button-focus, .sc-button-prev:focus, .sc-button-prev:hover,.uiEvoButton--isSelected, .uiEvoButton.uiEvoButton--isSelected:hover{
background: var(--accent-color);
}
.sc-classic .sound__soundActions{
background: none;
}
.sc-button{
border-radius: 30px;
background: var(--button-color);
border: none;
}
.sc-button-icon{
background: none;
}
.sc-button-small:not(.sc-button-cta){
color: var(--link-light-color) !important;
}
.sc-button:not(.sc-button-selected):not(.sc-button-lightfg).sc-button-share::before,
.sc-button:not(.sc-button-selected):not(.sc-button-lightfg).sc-button-repost:before,
.sc-button:not(.sc-button-selected):not(.sc-button-lightfg).sc-button-copylink::before,
.sc-classic .sc-button-follow:not(.sc-button-selected):not(.playableTile__actionButton).m-boldIcon::before,
.sc-button-queue:before,
.sc-classic .playbackSoundBadge:not(.m-queueVisible) .playbackSoundBadge__queueIcon,
.sc-classic .moreActions__button:not(.sc-button-selected).sc-button-medium::before,
.sc-button-medium.sc-button-edit::before,
.sc-button-medium.sc-button-delete::before,
.sc-button-medium.sc-button-camera::before,
.sc-classic:not(.sc-button-active) .queueItemView__more.sc-button-small.sc-button-more:before,
.sc-button-more:not(.sc-button-selected):not(.sc-button-active).sc-button-small.sc-button-icon:not(.sc-button-lightfg):not(.sc-button-stretch-icon):not(.playableTile__actionButton)::before,
.sc-button-medium:not(.sc-button-selected).sc-button-like::before,
.sc-button-medium:not(.playableTile__actionButton):not(.sc-button-selected):not(.sc-button-active).sc-button-more::before,
.sc-button-secondary.sc-button.sc-button-medium.sc-button-icon.sc-button-responsive.sc-button-message, .sc-button-small:not(.sc-button-selected):not(.playableTile__actionButton):not(.sc-button-cta).sc-button-follow::before,.sc-button-small:not(.sc-button-selected):not(.sc-button-lightfg):not(.sc-button-active).sc-button-more::before,.sc-button-small:not(.sc-button-selected):not(.sc-button-lightfg).sc-button-like::before, .sc-button-medium.sc-button-startstation::before,.sc-classic .m-light .profileMenu__distribute::after,.sc-classic .m-light .profileMenu__trackManager::after,.sc-classic .m-light .profileMenu__premium::after,.sc-classic .m-light .profileMenu__friends::after,.sc-classic .m-light .profileMenu__following::after,.sc-classic .m-light .profileMenu__stations::after,.sc-classic .m-light .profileMenu__sets::after,.sc-classic .m-light .profileMenu__likes::after,.sc-classic .m-light .profileMenu__profile::after {
filter: invert(var(--invert-icon));
}
.sc-classic .systemPlaylistBannerItem:not(.m-disabled):hover{
border-radius: 10px;
border: none;
}
.sc-button-selected:not(.sc-button-dropdown), .waveform__layer.waveform__scene, .playbackSoundBadge.m-queueVisible .playbackSoundBadge__queueIcon, .sc-status-icon-activity,.sc-button-active{
filter:hue-rotate(var(--icons-hue));
}
.sc-label.sc-label-private{
background: var(--accent-color);
}
.sc-button.sc-button-translucent:not(.sc-button-cta){
background: var(--button-color);
}
.sc-classic .artistShortcutTile__badge{
border-color: black;
}
.sc-button:hover.sc-button-translucent:not(.sc-button-cta){
background: var(--accent-color);
}
.sc-button-medium{
color: var(--link-light-color) !important;
}
.sc-classic .tileGallery__sliderButton::after {
border-color: var(--link-light-color);
}
.sc-classic .listenEngagement{
border: none;
box-shadow: none;
}
.sc-buylink{
color: var(--link-color);
border: none !important;
}
.sc-buylink:hover{
color: var(--accent-color);
}
.sc-classic .moreActions__button:hover:not(:disabled){
background: var(--accent-color);
}
.sc-toggle::before{
background: var(--accent-color);
}
.sc-classic .playButton.m-stretch::before{
background-color: var(--accent-color);
border-radius: 50%;
box-shadow: 0 0 5px var(--shadow-color);
}
.sc-classic .tileGallery__sliderButton:active, .sc-classic .tileGallery__sliderButton:active::after, .sc-classic .tileGallery__sliderButton:focus, .sc-classic .tileGallery__sliderButton:focus::after, .sc-classic .tileGallery__sliderPeek:hover .tileGallery__sliderButton, .sc-classic .tileGallery__sliderPeek:hover .tileGallery__sliderButton::after{
border-color: var(--accent-color);
}
.artistShortcutsGallery .tileGallery__sliderButton.tileGallery__slideForwardButton.sc-button.sc-button-small.sc-button-icon{
height: 100%;
top: 0;
right: -3px;
border-radius: 0px;
border-radius: 0px 10px 10px 0px;
background: linear-gradient( -90deg,var(--shadow-color) ,transparent);
}
.tileGallery__sliderButton.tileGallery__slideForwardButton.sc-button.sc-button-small.sc-button-icon{
height: 95%;
top: 40px;
right:0px;
border-radius: 0px;
border-radius: 0px 10px 10px 0px;
background: linear-gradient( -90deg, var(--shadow-color...