fix(Sharkblue): update the windows controls colours

[MrBiscuit921]

Summary by CodeRabbit

• Style
  • Refined visual layers and positioning for window control elements to improve interface clarity and visual hierarchy.

[coderabbitai]

Walkthrough

The CSS styling for Spotify's window control layer is refactored, replacing a single fixed #main::after overlay with two absolute-positioned pseudo-elements under .spotify__container--is-desktop:not(.fullscreen) body. The ::after element is repositioned and restyled, while a new ::before layer is introduced for visual effects.

Changes

Cohort / File(s)	Summary
CSS styling updates SharkBlue/user.css	Replaced #main::after fixed overlay with two stacked absolute-positioned pseudo-elements (::before and ::after) under .spotify__container--is-desktop:not(.fullscreen) body. The ::after height increased from 40px to 64px with simplified backdrop-filter. New ::before layer added (135px × 16px, z-index 1000, brightness 0.47). Removed -webkit-backdrop-filter in favor of standard backdrop-filter.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Two layers now dance where one did stay,
From fixed to absolute, they've found their way,
With backdrop brightness and a subtle glow,
Window controls now put on quite a show! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "fix(Sharkblue): update the windows controls colours" directly and clearly summarizes the main change in the changeset. The raw summary confirms that the CSS modifications target window controls styling, updating their visual appearance through backdrop filters and layering adjustments. The title is concise, specific, and uses proper semantic versioning conventions without vague language or noise. A teammate reviewing history would immediately understand this is a styling fix for window controls in the Sharkblue theme.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11a040c and 04c11b6.

📒 Files selected for processing (1)

• SharkBlue/user.css (1 hunks)

🔇 Additional comments (1)

SharkBlue/user.css (1)

16-26: Verify positioning: ::after element may need top: 0; alignment.

The ::after element is positioned absolutely with only right: 0; specified. For window controls in the top-right corner, ensure this should have top: 0; to align correctly, matching the ::before element's alignment.

 .spotify__container--is-desktop:not(.fullscreen) body::after {
   content: ""; /* Empty content */
   position: absolute;
+  top: 0;
   right: 0;

[coderabbitai]

⚠️ 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.