Merge pull request #51 from warrayquipsome/vencord-spotify-controls

Style vencord spotify plugin
warrayquipsome · Jul 12, 2024 · 8dbecf6 · 8dbecf6
2 parents 1f5172a + b15554c
commit 8dbecf6
Show file tree

Hide file tree

Showing 2 changed files with 186 additions and 2 deletions.
diff --git a/dark.mode.css b/dark.mode.css
@@ -1975,7 +1975,7 @@ svg {
 /* End of the if*/
 
 
-/*Custom SpotifyControl in user panel*/
+/*Custom SpotifyControl in user panel for BetterDiscord*/
 .container_6sXIoE.withTimeline_824fT_ {
     height: var(--playerHeight);
     border: none !important;
@@ -2090,6 +2090,98 @@ svg {
     z-index: -1;
 }
 
+/* Custom Spotify controls for Vencord */
+#vc-spotify-player {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    margin: 8px;
+    padding: 8px;
+    border-bottom-color: transparent;
+    --vc-spotify-green: var(--accentcolorV2);
+}
+
+.theme-dark #vc-spotify-player {
+    background-color: #181a1d !important;
+}
+
+#vc-spotify-player::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--vc-spotify-track-image);
+    background-size: cover;
+    background-position: center;
+    filter: blur(8px);
+    opacity: .6;
+    z-index: 0;
+}
+
+#vc-spotify-player > * {
+    position: relative;
+    z-index: 1;
+}
+
+#vc-spotify-album-image {
+    display: none;
+}
+
+#vc-spotify-info-wrapper {
+    height: auto;
+}
+
+#vc-spotify-titles {
+    padding: 0;
+}
+
+#vc-spotify-song-title,
+.vc-spotify-artist,
+.vc-spotify-album {
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#vc-spotify-song-title {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.vc-spotify-artist,
+.vc-spotify-album {
+    font-size: 14px;
+}
+
+.vc-spotify-button {
+    --interactive-normal: #FFFFFF;
+    --interactive-hover: #FFFFFF;
+    filter: drop-shadow( 0px 1px 4px rgba(0, 0, 0, 0.6));
+}
+
+.vc-spotify-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vc-spotify-progress-time {
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#vc-spotify-progress-bar>[class^=slider] [class^=grabber] {
+    width: 25px !important;
+    height: 25px !important;
+    background-color: transparent;
+    background-image: url("https://static.wikia.nocookie.net/minecraft_gamepedia/images/0/0c/Glow_Squid_BE1.gif");
+    background-size: cover;
+    border: none;
+    transform: rotate(90deg);
+    margin-left: -16px;
+    inset: 3px 0 0 0px;
+    box-shadow: none;
+}
+
 /*custom user setting profile position*/
 .layer_d4b6c5 .accountProfileCard_b69b77 .settingsBanner_c3e427 {
     margin: 8px;

diff --git a/light.mode.css b/light.mode.css
@@ -1916,7 +1916,7 @@ svg {
 /* End of the if*/
 
 
-/*Custom SpotifyControl in user panel*/
+/*Custom SpotifyControl in user panel for BetterDiscord*/
 .container_6sXIoE.withTimeline_824fT_ {
     height: var(--playerHeight);
     border: none !important;
@@ -2045,6 +2045,98 @@ svg {
     z-index: -1;
 }
 
+/* Custom Spotify controls for Vencord */
+#vc-spotify-player {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    margin: 8px;
+    padding: 8px;
+    border-bottom-color: transparent;
+    --vc-spotify-green: var(--accentcolorV2);
+}
+
+.theme-light #vc-spotify-player {
+    background-color: #e4e4e4 !important;
+}
+
+#vc-spotify-player::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--vc-spotify-track-image);
+    background-size: cover;
+    background-position: center;
+    filter: blur(8px);
+    opacity: .6;
+    z-index: 0;
+}
+
+#vc-spotify-player > * {
+    position: relative;
+    z-index: 1;
+}
+
+#vc-spotify-album-image {
+    display: none;
+}
+
+#vc-spotify-info-wrapper {
+    height: auto;
+}
+
+#vc-spotify-titles {
+    padding: 0;
+}
+
+#vc-spotify-song-title,
+.vc-spotify-artist,
+.vc-spotify-album {
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#vc-spotify-song-title {
+    font-size: 18px;
+    margin-bottom: 4px;
+}
+
+.vc-spotify-artist,
+.vc-spotify-album {
+    font-size: 14px;
+}
+
+.vc-spotify-button {
+    --interactive-normal: #FFFFFF;
+    --interactive-hover: #FFFFFF;
+    filter: drop-shadow( 0px 1px 4px rgba(0, 0, 0, 0.6));
+}
+
+.vc-spotify-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.vc-spotify-progress-time {
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#vc-spotify-progress-bar>[class^=slider] [class^=grabber] {
+    width: 25px !important;
+    height: 25px !important;
+    background-color: transparent;
+    background-image: url("https://static.wikia.nocookie.net/minecraft_gamepedia/images/0/0c/Glow_Squid_BE1.gif");
+    background-size: cover;
+    border: none;
+    transform: rotate(90deg);
+    margin-left: -16px;
+    inset: 3px 0 0 0px;
+    box-shadow: none;
+}
+
 /*custom user setting profile position*/
 .layer_d4b6c5 .accountProfileCard_b69b77 .settingsBanner_c3e427 {
     margin: 8px;