Skip to content

fix(Sharkblue): update the windows controls colours #1229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 19 commits into
base: master
Choose a base branch
from
Draft

fix(Sharkblue): update the windows controls colours #1229

Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b8cf638
feat(SharkBlue): add SharkBlue theme
MrBiscuit921 Aug 30, 2024
a78ceaa
feat(SharkBlue): Change rounded now playing bar, Change home gradient…
MrBiscuit921 Aug 31, 2024
2a4765d
fix(SharkBlue): formatted code
MrBiscuit921 Aug 31, 2024
b07b887
fix(SharkBlue): player bar dimensions, play button color
MrBiscuit921 Aug 31, 2024
a08b33c
feat(SharkBlue): change window controls background transparency, form…
MrBiscuit921 Sep 7, 2024
ef0bbd8
Merge branch 'spicetify:master' into master
MrBiscuit921 Sep 7, 2024
8c9c733
Merge branch 'master' of https://github.com/MrBiscuit921/spicetify-th…
MrBiscuit921 Sep 7, 2024
a56a815
feat(SharkBlue): updated screenshot
MrBiscuit921 Sep 7, 2024
2d1c6d2
Merge branch 'spicetify:master' into master
MrBiscuit921 Sep 28, 2024
e455c36
fix(SharkBlue) fix card color for harbassan/spicetify-apps selected tab
MrBiscuit921 Feb 20, 2025
010c899
Merge branch 'master' of https://github.com/MrBiscuit921/spicetify-th…
MrBiscuit921 Feb 20, 2025
ccc1fd1
Merge branch 'spicetify:master' into master
MrBiscuit921 Feb 20, 2025
8c7139c
fix(SharkBlue): height was wrong
MrBiscuit921 May 30, 2025
b315648
Merge branch 'master' of https://github.com/MrBiscuit921/spicetify-th…
MrBiscuit921 May 30, 2025
a45834b
Merge branch 'spicetify:master' into master
MrBiscuit921 May 30, 2025
ad83110
fixed window controlls for new versions
MrBiscuit921 Jun 21, 2025
1a735f4
Merge branch 'master' of https://github.com/MrBiscuit921/spicetify-th…
MrBiscuit921 Jun 21, 2025
04c11b6
fix colour of windows controls
MrBiscuit921 Oct 20, 2025
e9820f3
Merge branch 'master' into master
MrBiscuit921 Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions SharkBlue/user.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,29 @@
.Root__now-playing-bar footer {
border-radius: var(--border-radius-1) !important;
}
#main::after {

/* transparent window controls */
.spotify__container--is-desktop:not(.fullscreen) body::after {
content: ""; /* Empty content */
position: fixed; /* Fix element to viewport */
top: 0;
position: absolute;
right: 0;
z-index: 999; /* Position above all other content */
-webkit-backdrop-filter: brightness(
2.12
); /* Apply brightness filter to background */
backdrop-filter: brightness(2.12); /* Cross-browser brightness filter */
z-index: 999;
backdrop-filter: brightness(2.12);
/* Page zoom control */
/* Adjust width and height based on zoom level */
width: 135px;
height: 40px;
height: 64px;
}

.spotify__container--is-desktop:not(.fullscreen) body::before {
content: none;
Comment on lines 28 to 29
Copy link

@coderabbitai coderabbitai bot Oct 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix content: none; to enable the ::before pseudo-element and apply backdrop-filter.

Using content: none; removes the pseudo-element from the document tree entirely, preventing the backdrop-filter from rendering. The intended visual effect won't work. Change to content: ""; (empty string) to create a renderable element while maintaining invisible content.

 .spotify__container--is-desktop:not(.fullscreen) body::before {
-  content: none;
+  content: "";
   position: absolute;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.spotify__container--is-desktop:not(.fullscreen) body::before {
content: none;
.spotify__container--is-desktop:not(.fullscreen) body::before {
content: "";
position: absolute;
🤖 Prompt for AI Agents 
In SharkBlue/user.css around lines 28 to 29, the rule
.spotify__container--is-desktop:not(.fullscreen) body::before uses content:
none; which removes the pseudo-element so backdrop-filter cannot render; change
content: none; to content: ""; so the ::before pseudo-element is created
(invisible) and the backdrop-filter and other styling can apply as intended.

position: absolute;
top: 0;
right: 0;
width: 135px;
height: 16px; /* only cover the top*/
z-index: 1000; /* higher than ::after */
backdrop-filter: brightness(0.47);
}

/* Page titles */
Expand Down