Update InstantScreenshare

This commit is contained in:
thororen1234 2025-04-07 09:38:24 -04:00
parent c0b928f166
commit 2893466ba9
No known key found for this signature in database
5 changed files with 60 additions and 22 deletions

View file

@ -191,6 +191,7 @@ function SeekBar() {
{msToHuman(position)}
</Forms.FormText>
<Menu.MenuSliderControl
key={position}
minValue={0}
maxValue={duration}
value={position}

View file

@ -99,8 +99,8 @@ export default definePlugin({
<ErrorBoundary
fallback={() => (
<div className="vc-spotify-fallback">
<p>Failed to render Spotify Modal</p>
<p>Check the console for errors</p>
<p>Failed to render Spotify Modal :(</p>
<p >Check the console for errors</p>
</div>
)}
>

View file

@ -1,9 +1,10 @@
#vc-spotify-player {
padding: 0.375rem 0.5rem;
border-bottom: 1px solid var(--background-modifier-accent);
--vc-spotify-green: var(--spotify, #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%);
}
@ -150,17 +151,17 @@
margin-bottom: 5px;
}
#vc-spotify-progress-bar > [class^="slider"] {
#vc-spotify-progress-bar>[class^="slider"] {
flex-grow: 1;
width: 100%;
padding: 0 !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="bar-"] {
#vc-spotify-progress-bar>[class^="slider"] [class^="bar-"] {
height: 4px !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
#vc-spotify-progress-bar>[class^="slider"] [class^="grabber"] {
/* these importants are necessary, it applies a width and height through inline styles */
height: 10px !important;
width: 10px !important;
@ -172,7 +173,7 @@
transition: opacity 0.1s;
}
#vc-spotify-progress-bar:hover > [class^="slider"] [class^="grabber"] {
#vc-spotify-progress-bar:hover>[class^="slider"] [class^="grabber"] {
opacity: 1;
}

View file

@ -12,7 +12,8 @@
display: none;
}
.vc-spotify-artist, .vc-spotify-album {
.vc-spotify-artist,
.vc-spotify-album {
color: var(--header-primary);
}
@ -26,26 +27,26 @@
width: 100%;
}
#vc-spotify-progress-bar > [class^="slider"] {
#vc-spotify-progress-bar>[class^="slider"] {
flex-grow: 1;
width: 100%;
padding: 0 !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="bar"] {
#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"] {
#vc-spotify-progress-bar>[class^="slider"] [class^="barFill"] {
background-color: var(--interactive-active);
}
#vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
#vc-spotify-progress-bar>[class^="slider"]:hover [class^="barFill"] {
background-color: var(--vc-spotify-green);
}
#vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
#vc-spotify-progress-bar>[class^="slider"] [class^="grabber"] {
background-color: var(--interactive-active);
width: 16px !important;
height: 16px !important;
@ -67,11 +68,15 @@
border-radius: var(--radius-sm);
}
.vc-spotify-repeat-context, .vc-spotify-repeat-track, .vc-spotify-shuffle-on {
.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 {
.vc-spotify-repeat-context:hover,
.vc-spotify-repeat-track:hover,
.vc-spotify-shuffle-on:hover {
background-color: var(--vc-spotify-green-80);
}
}