dorkbutt/vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat(SpotifyControls): prettier design (#194)

Browse source 
Co-authored-by: afn <hey@afn.lol>
Co-authored-by: KraXen72 <DPELECH1@GMAil.com>
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
afn 2022-11-08 11:31:36 -05:00 • committed by GitHub
parent f7d9be9140
commit 4e57ae66f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 160 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/plugins/spotifyControls/styles.css
View file

@ -1,28 +1,49 @@
#vc-spotify-player {
padding: 0.375rem 0.5rem;
border-bottom: 1px solid var(--background-modifier-accent);
--vc-spotify-green: #1db954; /* so cusotm themes can easily change it */
}
.vc-spotify-button {
height: 100%;
background: none;
color: var(--interactive-normal);
}
padding: 0;
width: 32px;
height: 32px;
.vc-spotify-button:hover {
filter: brightness(1.3);
}
.vc-spotify-shuffle-on,
.vc-spotify-repeat-context,
.vc-spotify-repeat-track {
color: #1db954;
}
/* Hack to stack icon and bullet */
.vc-spotify-repeat-track {
display: grid;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.vc-spotify-repeat-track * {
grid-column: 1;
grid-row: 1;
.vc-spotify-button:hover {
color: var(--interactive-hover);
background-color: var(--background-modifier-selected);
}
.vc-spotify-button svg {
height: 24px;
width: 24px;
}
[class*="vc-spotify-shuffle"] > svg,
[class*="vc-spotify-repeat"] > svg {
width: 22px;
height: 22px;
}
.vc-spotify-button svg path {
width: 100%;
height: 100%;
}
/* .vc-spotify-button:hover {
filter: brightness(1.3);
} */
.vc-spotify-shuffle-on,
.vc-spotify-repeat-context,
.vc-spotify-repeat-track,
.vc-spotify-shuffle-on:hover,
.vc-spotify-repeat-context:hover,
.vc-spotify-repeat-track:hover {
color: var(--vc-spotify-green);
}
.vc-spotify-tooltip-text {
@ -31,6 +52,13 @@
padding-right: 0.2em;
max-width: 100%;
}
.vc-spotify-repeat-1 {
font-size: 70%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.vc-spotify-button-row {
justify-content: center;
@ -39,13 +67,13 @@
#vc-spotify-info-wrapper {
display: flex;
flex-direction: row;
align-items: center;
height: 3em;
flex-direction: row;
gap: 0.2em;
gap: 0.5em;
}
#vc-spotify-info-wrapper img {
height: 100%;
height: 90%;
object-fit: contain;
}
@ -57,7 +85,7 @@
#vc-spotify-titles {
display: flex;
flex-direction: column;
padding: 0.2em;
padding: 0.2rem;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
@ -70,9 +98,19 @@
#vc-spotify-song-title {
color: var(--header-primary);
font-size: 14px;
font-weight: 600;
}
.vc-spotify-ellipoverflow {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
.vc-spotify-artist {
.vc-spotify-artist,
.vc-spotify-album {
font-size: 12px;
text-decoration: none;
color: var(--header-secondary);
}
@ -82,34 +120,62 @@
}
.vc-spotify-artist:hover,
#vc-spotify-album-title:hover,
#vc-spotify-song-title:hover {
text-decoration: underline;
color: var(--interactive-active);
cursor: pointer;
}
#vc-spotify-album-image {
border-radius: 3px;
}
#vc-spotify-album-image:hover {
filter: brightness(1.2);
cursor: pointer;
}
#vc-spotify-progress-bar {
display: flex;
flex-direction: row;
color: var(--text-normal);
position: relative;
width: calc(100% - 1em);
margin: 0.5em;
margin-bottom: 0;
color: var(--text-normal);
width: 100%;
margin: 0.5em 0;
margin-bottom: 5px;
}
#vc-spotify-progress-bar > [class^="slider"] {
flex-grow: 1;
width: 100%;
padding: 0 !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="bar-"] {
height: 4px !important;
}
#vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
/* these importants are neccessary, it applies a width and height through inline styles */
height: 10px !important;
width: 10px !important;
background-color: var(--interactive-normal);
border-color: var(--interactive-normal);
color: var(--interactive-normal);
}
#vc-spotify-progress-text {
margin: 0;
font-size: 80%;
/* need to fix or it will constantly grow/shrink due to character width differences */
width: 20%;
}
.vc-spotify-progress-time {
font-size: 12px;
top: 10px;
position: absolute;
}
.vc-spotify-time-left {
left: 0;
}
.vc-spotify-time-right {
right: 0;
}