From d407c12580b7e68ce527d144e9159883ccde0927 Mon Sep 17 00:00:00 2001 From: darkthemer Date: Fri, 14 Jul 2023 12:18:33 +0800 Subject: [PATCH 1/3] chore(text): update README --- text/README.md | 64 ++++++++++++++++++++++++++++---------------------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/text/README.md b/text/README.md index 7a68c27e..e465cae1 100644 --- a/text/README.md +++ b/text/README.md @@ -84,7 +84,15 @@ created by [darkthemer](https://github.com/darkthemer/) ### Notes -- Feel free to edit `color.ini` to swap the accent color (it's green for most of them) into your preferred color based from the color pallete. +- **IMPORTANT:** Add the following to your `config-xpui.ini` file. Details as to why are explained [here](https://github.com/JulienMaille/spicetify-dynamic-theme#important). + +```ini +[Patch] +xpui.js_find_8008 = ,(\w+=)56, +xpui.js_repl_8008 = ,${1}32, +``` + +- **SUGGESTION:** Feel free to edit `color.ini` to swap the accent color (it's green for most of them) into your preferred color based from the color pallete. - https://github.com/catppuccin/catppuccin - https://github.com/dracula/dracula-theme @@ -97,45 +105,45 @@ created by [darkthemer](https://github.com/darkthemer/) - https://github.com/altercation/solarized - https://github.com/enkia/tokyo-night-vscode-theme -- Check the very top of `user.css` for user settings +- **SUGGESTION:** Check the very top of `user.css` for user settings - - If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the variables found in `user.css` (also below). Edit these as you wish. + - If you use the Marketplace, go to `Marketplace > Snippets > + Add CSS` and then paste the variables found in `user.css` (also below). Edit these as you wish. If you're following this method, don't forget to add `!important` at the end of each property. ```css /* user settings */ :root { - --font-family: "DM Mono", monospace; + --font-family: "DM Mono", monospace !important; /* - --font-family: 'Anonymous Pro', monospace; - --font-family: 'Courier Prime', monospace; - --font-family: 'Cousine', monospace; - --font-family: 'Cutive Mono', monospace; - --font-family: 'DM Mono', monospace; - --font-family: 'Fira Mono', monospace; - --font-family: 'IBM Plex Mono', monospace; - --font-family: 'Inconsolata', monospace; - --font-family: 'Nanum Gothic Coding', monospace; - --font-family: 'PT Mono', monospace; - --font-family: 'Roboto Mono', monospace; - --font-family: 'Share Tech Mono', monospace; - --font-family: 'Source Code Pro', monospace; - --font-family: 'Space Mono', monospace; - --font-family: 'Ubuntu Mono', monospace; - --font-family: 'VT323', monospace; + --font-family: 'Anonymous Pro', monospace !important; + --font-family: 'Courier Prime', monospace !important; + --font-family: 'Cousine', monospace !important; + --font-family: 'Cutive Mono', monospace !important; + --font-family: 'DM Mono', monospace !important; + --font-family: 'Fira Mono', monospace !important; + --font-family: 'IBM Plex Mono', monospace !important; + --font-family: 'Inconsolata', monospac !important; + --font-family: 'Nanum Gothic Coding', monospace !important; + --font-family: 'PT Mono', monospace !important; + --font-family: 'Roboto Mono', monospace !important; + --font-family: 'Share Tech Mono', monospace !important; + --font-family: 'Source Code Pro', monospace !important; + --font-family: 'Space Mono', monospace !important; + --font-family: 'Ubuntu Mono', monospace !important; + --font-family: 'VT323', monospace !important; */ - --font-size: 14px; - --font-weight: 400; /* 200 : 900 */ - --line-height: 1.2; + --font-size: 14px !important; + --font-weight: 400 !important; /* 200 : 900 */ + --line-height: 1.2 !important; - --display-images: none; /* none | block */ + --display-images: none !important; /* none | block */ - --border-radius: 0px; - --border-width: 1px; - --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */ + --border-radius: 0px !important; + --border-width: 1px !important; + --border-style: solid !important; /* dotted | dashed | solid | double | groove | ridge | inset | outset */ } ``` -- For Windows users, here's how to make the window controls' background match with the topbar background +- **SUGGESTION:** For Windows users, here's how to make the window controls' background match with the topbar background - Put this snippet into your `user.css` (or through the Marketplace's `+ Add CSS` feature) From 91165925f2dd31e85043218a43d8ac5d0302aff0 Mon Sep 17 00:00:00 2001 From: darkthemer Date: Sat, 15 Jul 2023 12:44:58 +0800 Subject: [PATCH 2/3] fix(text): flexible image in user settings, style local files icon --- text/README.md | 26 +++++++++++++++++++++++--- text/user.css | 36 +++++++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/text/README.md b/text/README.md index e465cae1..5e09e9d4 100644 --- a/text/README.md +++ b/text/README.md @@ -4,11 +4,27 @@ #### Display Images -##### with images `--display-images: block;` +##### with images + +```css +--display-card-image: block; +--display-coverart-image: block; +--display-header-image: block; +--display-library-image: block; +--display-tracklist-image: block; +``` ![withimg](screenshots/withimg.png) -##### without images `--display-images: none;` +##### without images + +```css +--display-card-image: none; +--display-coverart-image: none; +--display-header-image: none; +--display-library-image: none; +--display-tracklist-image: none; +``` ![withoutimg](screenshots/withoutimg.png) @@ -135,7 +151,11 @@ xpui.js_repl_8008 = ,${1}32, --font-weight: 400 !important; /* 200 : 900 */ --line-height: 1.2 !important; - --display-images: none !important; /* none | block */ + --display-card-image: block !important; /* none | block */ + --display-coverart-image: none !important; /* none | block */ + --display-header-image: none !important; /* none | block */ + --display-library-image: block !important; /* none | block */ + --display-tracklist-image: none !important; /* none | block */ --border-radius: 0px !important; --border-width: 1px !important; diff --git a/text/user.css b/text/user.css index 16fcfc9e..2553496c 100644 --- a/text/user.css +++ b/text/user.css @@ -31,7 +31,11 @@ --font-weight: 400; /* 200 : 900 */ --line-height: 1.2; - --display-images: none; /* none | block */ + --display-card-image: block; /* none | block */ + --display-coverart-image: none; /* none | block */ + --display-header-image: none; /* none | block */ + --display-library-image: block; /* none | block */ + --display-tracklist-image: none; /* none | block */ --border-radius: 0px; --border-width: 1px; @@ -47,16 +51,27 @@ } /* images */ -img:not(.main-trackList-playingIcon) { - display: var(--display-images) !important; +.main-cardImage-imageWrapper img { + display: var(--display-card-image); } -.main-coverSlotCollapsed-container, +.main-coverSlotCollapsed-container { + display: var(--display-coverart-image); +} +.main-entityHeader-imageContainer, .under-main-view, -.playlist-playlist-playlistImageContainer, .main-entityHeader-creatorWrapper .main-avatar-avatar, .main-entityHeader-imageContainer, +.playlist-playlist-playlistImageContainer, .profile-userOverview-imageContainer { - display: var(--display-images); + display: var(--display-header-image); +} +.x-entityImage-imageContainer img, +.main-yourLibraryX-rowCover img, +.main-avatar-image { + display: var(--display-library-image); +} +.main-trackList-rowImage { + display: var(--display-tracklist-image); } /* fix */ @@ -220,7 +235,8 @@ img:not(.main-trackList-playingIcon) { background-color: var(--spice-highlight); } .x-entityImage-imageContainer, -.x-entityImage-imageContainer div { +.x-entityImage-imageContainer div, +.fRZRXRIV2YBCFLYgwDAr { background-color: var(--spice-border-inactive); } .main-userWidget-boxCondensed, @@ -369,13 +385,15 @@ img:not(.main-trackList-playingIcon) { padding: 4px 18px; } .x-entityImage-imageContainer, -.x-entityImage-imageContainer div { +.x-entityImage-imageContainer div, +.main-yourLibraryX-rowCover { height: 24px !important; width: 24px !important; -webkit-box-shadow: none; box-shadow: none; } -.x-entityImage-imagePlaceholder { +.x-entityImage-imagePlaceholder, +.main-yourLibraryX-rowCover .Svg-img-textBrightAccent-24-icon { transform: scale(0.5); } From aadff131294e8b1b6273bb5c06b6d2ecb2f83e62 Mon Sep 17 00:00:00 2001 From: darkthemer Date: Sat, 15 Jul 2023 13:05:15 +0800 Subject: [PATCH 3/3] fix(text): full screen --- text/user.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/text/user.css b/text/user.css index 2553496c..21516f29 100644 --- a/text/user.css +++ b/text/user.css @@ -108,6 +108,20 @@ .LayoutResizer__resize-bar { cursor: w-resize; } +.spotifyinternal-artistnpv .npv-what-is-playing .npv-cover-art, +.spotifyinternal-artistnpv .npv-what-is-playing .npv-track { + bottom: 26em; +} +.tr1hDrJgoPSbMXlXU_sl { + flex-direction: column-reverse; +} +.npv-main-container .playback-bar { + position: unset; + width: auto; +} +.mbUrqWP55sK6zhspiR72 { + height: auto; +} /* 1.2.11 backwards compatibility - for linux */ /* pane borders */