fix(text): user settings, consistency

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)
 
@@ -84,7 +100,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 +121,49 @@ 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;
-
-    --display-images: none; /* none | block */
-
-    --border-radius: 0px;
-    --border-width: 1px;
-    --border-style: solid; /* dotted | dashed | solid | double | groove | ridge | inset | outset */
+    --font-size: 14px !important;
+    --font-weight: 400 !important; /* 200 : 900 */
+    --line-height: 1.2 !important;
+
+    --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;
+    --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)
 

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 */
@@ -93,6 +108,20 @@ img:not(.main-trackList-playingIcon) {
 .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 */
@@ -220,7 +249,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 +399,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);
 }