[Feature] Sidebars transparency setting to fix unreadable text

[binvius]

It is very clear that you are one of, if not the, best dev for Spicetify. All of what you have created is truly phenomenal and extremely stylish, blowing everything else out of the water. So, thank you so much for such awesome work. (I have liked the repo on my various GitHub accounts as you are now one of my favourite devs!)

I did have a quick question/favour. I have spent 'literally' dozens of hours over the past weeks trying to make one very simple change to your excellent Galaxy theme but have run out of things to try so I am hoping you may be kind enough to provide some advice as, what has taken me dozens of hours, you could easily fix in a matter of seconds!

I use a snippet from the marketplace called 'Hover Panels' which floats the two side panels until the user holds their mouse near either edge of the screen, which makes each panel then appear. (I have become very accustomed to this 'auto-appear' behaviour having utilised it in Winamp, which I started using way back in the 1990s.)

The issue is that your beautiful Galaxy theme has transparent sidebars so when the 'Hover Panels' sidebars 'appear' from the screen edges, all of the sidebar text is unreadable as it's overlayed on top of the app's standard text underneath. (Hopefully, the attached screenshot example of the left sidebar, shows the unreadable text problem.)

To resolve this issue, I simply need to amend the transparency of the two sidebars. I have tried thousands of things, including lots of changes in the user.css from your repo but can't get anything to work. Also, I'm not sure if it is related at all but the instructions your readme kindly provides for 'Manual Installation,' request users to "add the file extension.js into the Extensions folder." I was unable to find that extension.js file and creating one myself resulted in a Powershell error of "Extension "galaxy.js" not found."

Anyways, back to the matter at hand. Brilliantly, you have provided a few toggle option settings for users such as 'Blur home bg' so it makes me wonder how easy it might be to add a slider or text input option such as: 'Set both sidebar transparency to: 0-100%' This not only would fix the issue for all 'Hover Panels' users but also excite all users who would like a little more contrast in colour/shade between their main centre window and the two sidebars.

Should that be too difficult, any advice at all as to how I can manually change the transparency of both sidebars would be massively appreciated. After so many hours pulling my hair out, you literally have no idea how much your help would mean to me so huge thanks in advance if you can spare a few seconds.

Cheers again and warmest regards

[Satanarious]

Add this snippet

.main-yourLibraryX-entryPoints {
  backdrop-filter: blur(10px) !important; /* Adjust the blur value to your liking*/
}

[harbassan]

Thank you for the kind words, I really appreciate it as it makes me know that my effort is worthwhile.

Also, I'm not sure if it is related at all but the instructions your readme kindly provides for 'Manual Installation,' request users to "add the file extension.js into the Extensions folder." I was unable to find that extension.js file and creating one myself resulted in a Powershell error of "Extension "galaxy.js" not found."

This is something i'll definitely change, I didn't realize I had left it there.

Brilliantly, you have provided a few toggle option settings for users such as 'Blur home bg' so it makes me wonder how easy it might be to add a slider or text input option such as: 'Set both sidebar transparency to: 0-100%'

Soon, hopefully in not too long, I will be remaking the settings menu with some more settings, and this is definitely one i'll add.
For now though, you can use this as a snippet, and can add blur if you want from Satanarious' snippet

.Root__nav-bar, .Root__right-sidebar {
    background: rgba(0,0,0,1) !important; /* adjust the 1 to 0.5 for half transparency etc */
}

[binvius]

@Satanarious
Awesome!

Thank you so much.

This worked excellently for the left sidebar but no luck with the right sidebar.

Turns out it wasn't Galaxy controlling the opacity but after much trial and error with the Hover Panels snippet from the marketplace, I finally managed to work it out thanks to you pointing me in the right direction so massive thanks for helping out!

Cheers!

[binvius]

@harbassan
Oh wow!

That was a very welcome fast response so I really appreciate that.

After much tinkering round and round, it turns out it wasn't Galaxy controlling the opacity after all but your kind help sent me down the correct path of exploration and after much trial and error, I finally managed to add in the correct CSS to the Hover Panel snippet from the marketplace.

All is resolved now so I just wanted to thank you once again for your excellent effort and subsequent support. It will be exciting to see what ideas you come up with once you release the next version.

All the best buddy.

Cheers!