From 6b55dee9fbba1a54cbe2ba1f2067e2d14190ab93 Mon Sep 17 00:00:00 2001 From: megumin Date: Fri, 25 Nov 2022 22:38:55 +0000 Subject: feat(settings): new settings design (#261) --- src/plugins/spotifyControls/SpotifyStore.ts | 2 +- src/plugins/spotifyControls/spotifyStyles.css | 181 ++++++++++++++++++++++++++ src/plugins/spotifyControls/styles.css | 181 -------------------------- 3 files changed, 182 insertions(+), 182 deletions(-) create mode 100644 src/plugins/spotifyControls/spotifyStyles.css delete mode 100644 src/plugins/spotifyControls/styles.css (limited to 'src/plugins/spotifyControls') diff --git a/src/plugins/spotifyControls/SpotifyStore.ts b/src/plugins/spotifyControls/SpotifyStore.ts index 0dad503..14f2331 100644 --- a/src/plugins/spotifyControls/SpotifyStore.ts +++ b/src/plugins/spotifyControls/SpotifyStore.ts @@ -16,7 +16,7 @@ * along with this program. If not, see . */ -import cssText from "~fileContent/styles.css"; +import cssText from "~fileContent/spotifyStyles.css"; import IpcEvents from "../../utils/IpcEvents"; import { lazyWebpack } from "../../utils/misc"; diff --git a/src/plugins/spotifyControls/spotifyStyles.css b/src/plugins/spotifyControls/spotifyStyles.css new file mode 100644 index 0000000..9c7b1c0 --- /dev/null +++ b/src/plugins/spotifyControls/spotifyStyles.css @@ -0,0 +1,181 @@ +#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 { + background: none; + color: var(--interactive-normal); + padding: 0; + width: 32px; + height: 32px; + + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.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 { + overflow: hidden; + white-space: nowrap; + padding-right: 0.2em; + max-width: 100%; +} +.vc-spotify-repeat-1 { + font-size: 70%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.vc-spotify-button-row { + justify-content: center; +} + +#vc-spotify-info-wrapper { + display: flex; + flex-direction: row; + align-items: center; + height: 3em; + gap: 0.5em; +} + +#vc-spotify-info-wrapper img { + height: 90%; + object-fit: contain; +} + +#vc-spotify-album-expanded-wrapper img { + width: 100%; + object-fit: contain; +} + +#vc-spotify-titles { + display: flex; + flex-direction: column; + padding: 0.2rem; + justify-content: center; + align-items: flex-start; + align-content: flex-start; + overflow: hidden; +} + +.vc-spotify-tooltip-text { + margin: unset; +} + +#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-album { + font-size: 12px; + text-decoration: none; + color: var(--header-secondary); +} + +.vc-spotify-comma { + color: var(--header-secondary); +} + +.vc-spotify-artist:hover, +#vc-spotify-album-title:hover, +#vc-spotify-song-title[role="link"]:hover { + text-decoration: underline; + cursor: pointer; +} + +#vc-spotify-album-image { + border-radius: 3px; +} + +#vc-spotify-album-image:hover { + filter: brightness(1.2); + cursor: pointer; +} + +#vc-spotify-progress-bar { + position: relative; + + 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; +} + +.vc-spotify-progress-time { + font-size: 12px; + + top: 10px; + position: absolute; +} + +.vc-spotify-time-left { + left: 0; +} +.vc-spotify-time-right { + right: 0; +} diff --git a/src/plugins/spotifyControls/styles.css b/src/plugins/spotifyControls/styles.css deleted file mode 100644 index 9c7b1c0..0000000 --- a/src/plugins/spotifyControls/styles.css +++ /dev/null @@ -1,181 +0,0 @@ -#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 { - background: none; - color: var(--interactive-normal); - padding: 0; - width: 32px; - height: 32px; - - border-radius: 100%; - display: flex; - justify-content: center; - align-items: center; -} -.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 { - overflow: hidden; - white-space: nowrap; - padding-right: 0.2em; - max-width: 100%; -} -.vc-spotify-repeat-1 { - font-size: 70%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.vc-spotify-button-row { - justify-content: center; -} - -#vc-spotify-info-wrapper { - display: flex; - flex-direction: row; - align-items: center; - height: 3em; - gap: 0.5em; -} - -#vc-spotify-info-wrapper img { - height: 90%; - object-fit: contain; -} - -#vc-spotify-album-expanded-wrapper img { - width: 100%; - object-fit: contain; -} - -#vc-spotify-titles { - display: flex; - flex-direction: column; - padding: 0.2rem; - justify-content: center; - align-items: flex-start; - align-content: flex-start; - overflow: hidden; -} - -.vc-spotify-tooltip-text { - margin: unset; -} - -#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-album { - font-size: 12px; - text-decoration: none; - color: var(--header-secondary); -} - -.vc-spotify-comma { - color: var(--header-secondary); -} - -.vc-spotify-artist:hover, -#vc-spotify-album-title:hover, -#vc-spotify-song-title[role="link"]:hover { - text-decoration: underline; - cursor: pointer; -} - -#vc-spotify-album-image { - border-radius: 3px; -} - -#vc-spotify-album-image:hover { - filter: brightness(1.2); - cursor: pointer; -} - -#vc-spotify-progress-bar { - position: relative; - - 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; -} - -.vc-spotify-progress-time { - font-size: 12px; - - top: 10px; - position: absolute; -} - -.vc-spotify-time-left { - left: 0; -} -.vc-spotify-time-right { - right: 0; -} -- cgit