mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-25 04:12:29 +01:00
fix(Text): user settings, consistency (#973)
* chore(text): update README * fix(text): flexible image in user settings, style local files icon * fix(text): full screen
This commit is contained in:
darkthemer
GitHub
parent
559505d488
commit
dec4b88039
@ -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;
|
||||
```
|
||||
|
||||
|
||||
|
||||
##### 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;
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
--font-size: 14px !important;
|
||||
--font-weight: 400 !important; /* 200 : 900 */
|
||||
--line-height: 1.2 !important;
|
||||
|
||||
--display-images: none; /* 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;
|
||||
--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)
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user