ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

SpotifyControls: make panel look more in line with visual refresh (#3312)

Browse source
This commit is contained in:
nin0dev 2025-04-01 22:30:10 -04:00 • committed by GitHub
parent cef806a243
commit f075fed236
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 86 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/plugins/spotifyControls/PlayerComponent.tsx
View file

@ -17,6 +17,7 @@
*/
import "./spotifyStyles.css";
import "./visualRefreshSpotifyStyles.css"; // TODO: merge with spotifyStyles.css and remove when old UI is discontinued
import { Settings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
@ -307,8 +308,8 @@ function Info({ track }: { track: Track; }) {
{track.name}
</Forms.FormText>
{track.artists.some(a => a.name) && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
by&nbsp;
<Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
<span className={cl("song-info-prefix")}>by&nbsp;</span>
{track.artists.map((a, i) => (
<React.Fragment key={a.name}>
<span
@ -325,8 +326,8 @@ function Info({ track }: { track: Track; }) {
</Forms.FormText>
)}
{track.album.name && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
on&nbsp;
<Forms.FormText variant="text-sm/normal" className={cl(["ellipoverflow", "secondary-song-info"])}>
<span className={cl("song-info-prefix")}>on&nbsp;</span>
<span
id={cl("album-title")}
className={cl("album")}

2
src/plugins/spotifyControls/index.tsx
View file

@ -32,7 +32,7 @@ function toggleHoverControls(value: boolean) {
export default definePlugin({
name: "SpotifyControls",
description: "Adds a Spotify player above the account panel",
authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000, Devs.nin0dev],
options: {
hoverControls: {
description: "Show controls on hover",

4
src/plugins/spotifyControls/spotifyStyles.css
View file

@ -2,7 +2,9 @@
padding: 0.375rem 0.5rem;
border-bottom: 1px solid var(--background-modifier-accent);
--vc-spotify-green: #1db954; /* so custom themes can easily change it */
--vc-spotify-green: var(--spotify, #1db954); /* so custom themes can easily change it */
--vc-spotify-green-90: color-mix(in hsl, var(--vc-spotify-green), transparent 90%);
--vc-spotify-green-80: color-mix(in hsl, var(--vc-spotify-green), transparent 80%);
}
.theme-light #vc-spotify-player {

77
src/plugins/spotifyControls/visualRefreshSpotifyStyles.css Normal file
View file

@ -0,0 +1,77 @@
/* TODO: merge with spotifyStyles.css and remove when old UI is discontinued */
.visual-refresh {
#vc-spotify-player {
padding: 12px;
background: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));
margin: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.vc-spotify-song-info-prefix {
display: none;
}
.vc-spotify-artist, .vc-spotify-album {
color: var(--header-primary);
}
.vc-spotify-secondary-song-info {
font-size: 12px;
}
#vc-spotify-progress-bar {
position: relative;
color: var(--text-normal);
width: 100%;
}
#vc-spotify-progress-bar > [class^="slider"] {
flex-grow: 1;
width: 100%;
padding: 0 !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="bar"] {
height: 3px !important;
top: calc(12px - 4px / 2 + var(--bar-offset));
}
#vc-spotify-progress-bar > [class^="slider"] [class^="barFill"] {
background-color: var(--interactive-active);
}
#vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
background-color: var(--vc-spotify-green);
}
#vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
background-color: var(--interactive-active);
width: 16px !important;
height: 16px !important;
margin-top: calc(17px/-2 + var(--bar-offset)/2);
margin-left: -0.5px;
}
.vc-spotify-progress-time {
margin-top: 8px;
font-family: var(--font-code);
}
.vc-spotify-button-row {
margin-top: 14px;
}
.vc-spotify-button {
margin: 0 2px;
border-radius: var(--radius-sm);
}
.vc-spotify-repeat-context, .vc-spotify-repeat-track, .vc-spotify-shuffle-on {
background-color: var(--vc-spotify-green-90);
}
.vc-spotify-repeat-context:hover, .vc-spotify-repeat-track:hover, .vc-spotify-shuffle-on:hover {
background-color: var(--vc-spotify-green-80);
}
}