feat(snippets): added Midnight Celestial Slider snippet

[Edward7s]

• Adds a new CSS snippet for a custom star-themed playback bar.
• Features a midnight-to-celestial blue gradient trail.
• Replaces the default slider with a glowing star icon.
• Optimized for "Starry Night" and dark themes.

Summary by CodeRabbit

• New Features
  • Added two "Midnight Celestial Slider - xoxo" snippets that provide alternative slider-style playback bar customizations, each including a description, code sample, and preview.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Two new snippet objects titled "Midnight Celestial Slider - xoxo" were added to resources/snippets.json, each including title, description, code, and preview fields; no existing entries were modified or removed.

Changes

Cohort / File(s)	Summary
Snippet Additions resources/snippets.json	Two new snippet objects appended (consecutive entries) with fields: title, description, code, and preview — both define celestial-themed playback slider customizations.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• Delusoire
• kyrie25

Poem

🐰🌙
I hopped through midnight code and found,
Two sliders tucked in starlit rows,
I nudged a knob and pixels chimed,
Soft playback traces left in glow,
Hooray — the sliders gently flow.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: adding a new Midnight Celestial Slider snippet to the snippets collection.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

🤖 Fix all issues with AI agents

In `@resources/snippets.json`:
- Around line 542-547: The JSON object uses unquoted property names (title,
description, code, preview) and inconsistent indentation; wrap each key in
double quotes (e.g., "title", "description", "code", "preview"), keep the string
values as JSON strings (escaping any internal quotes if present), normalize
indentation to 4 spaces for the object lines, and ensure the object is correctly
comma-separated within its containing array/object so the overall
resources/snippets.json remains valid JSON.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f9b752 and 5a5b63c.

⛔ Files ignored due to path filters (1)

• resources/assets/snippets/celestial-star-xoxo.png is excluded by !**/*.png

📒 Files selected for processing (1)

• resources/snippets.json

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-06T15:28:17.086Z

Learnt from: rxri
Repo: spicetify/marketplace PR: 1064
File: resources/snippets.json:539-539
Timestamp: 2025-12-06T15:28:17.086Z
Learning: In resources/snippets.json, CSS code must be minified and placed in the "code" variable as a single-line string. This is a project requirement, not a code quality issue.

Applied to files:

• resources/snippets.json

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[theRealPadster]

Maybe I'm on an older version of Spotify, but the bar is still white, with green on hover for me?

Edit: I just updated my Spotify + Spicetify and it's still white/green.

[Edward7s]

White is totally fine, it's mostly for StarryNight anyway. It seems to be working okay for me; I've attached a quick clip of me pasting it in so you can see it in action.
https://www.youtube.com/watch?v=nHOfdn7c86g

[theRealPadster]

Okay sounds good. My only other comment would be to maybe tweak the description if it doesn't seem to always show the blue? Maybe it's a macOS vs Windows thing?

[theRealPadster]

I took a look in the devtools and it looks like it doesn't like the backticks/quotes on the colours. It changes to blue if I remove them.

[theRealPadster]

Is there a way to use the spicetify colour variables to make it have a gradient from the highlight colour, so the effect is similar for users who aren't on the starry night theme, just the trail is white (or whatever matches their theme)?

[Edward7s]

This should do the trick I ditched the gradient so the theme should change the colors, and I fixed the description.

[theRealPadster]

@Edward7s
You've still got the blue in there. What about using this for the background? That keeps a bit of a gradient. Does it still look blue in your theme?

.playback-bar .x-progressBar-fillColor {
  background: linear-gradient(to right,rgba(0,0,0,0),var(--fg-color));
}

Regular:

Hover: