Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-22 10:52:48 +01:00
Code Issues Projects Releases Activity

feat(Fluent): add Liked Songs and My Episodes icons to sidebar

Browse Source
This commit is contained in:
williamckha 2021-10-03 10:32:55 -07:00
parent 0b9879b927
commit e876c88db9
7 changed files with 70 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Fluent/README.md
View File

@ -63,5 +63,8 @@ Two color schemes are available: `light` or `dark`. Change scheme with commands:
spicetify config color_scheme <scheme_name>
spicetify apply
```
You can change the accent color in the theme folder's color.ini file.
If you are using Windows, you can hide the window controls by adding the flag `--transparent-window-controls` after Spotify.exe in your Spotify shortcut.
### More Options
- You can change the accent color in the theme folder's color.ini file.
- If you are using Windows, you can hide the window controls by adding the flag `--transparent-window-controls` after Spotify.exe in your Spotify shortcut.
- Use "Sidebar config" in the Spotify profile menu to hide/unhide and stick/unstick the Liked Songs and My Episodes icons in the sidebar.

3
Fluent/assets/fluentui-system-icons/ic_fluent_folder_24_filled.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.821 6.5H19.75C20.8867 6.5 21.8266 7.34297 21.9785 8.43788L21.9948 8.59595L22 8.75V17.75C22 18.9409 21.0748 19.9156 19.904 19.9948L19.75 20H4.25C3.05914 20 2.08436 19.0748 2.00519 17.904L2 17.75V10.499L8.20693 10.5L8.40335 10.4914C8.79396 10.4572 9.16896 10.3214 9.49094 10.0977L9.64734 9.9785L13.821 6.5ZM8.20693 4C8.66749 4 9.1153 4.14129 9.49094 4.40235L9.64734 4.5215L11.75 6.273L8.68706 8.82617L8.60221 8.88738C8.51363 8.94232 8.41452 8.9782 8.31129 8.9927L8.20693 9L2 8.999V6.25C2 5.05914 2.92516 4.08436 4.09595 4.00519L4.25 4H8.20693Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 676 B

3
Fluent/assets/fluentui-system-icons/ic_fluent_heart_24_filled.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8199 5.57912L11.9992 6.40163L11.1759 5.57838C9.07688 3.47931 5.67361 3.47931 3.57455 5.57838C1.47548 7.67744 1.47548 11.0807 3.57455 13.1798L11.4699 21.0751C11.7628 21.368 12.2377 21.368 12.5306 21.0751L20.432 13.1783C22.5264 11.0723 22.53 7.67857 20.4306 5.57912C18.3277 3.47623 14.9228 3.47623 12.8199 5.57912Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 447 B

3
Fluent/assets/fluentui-system-icons/ic_fluent_mic_on_24_filled.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.25 11C18.6297 11 18.9435 11.2822 18.9932 11.6482L19 11.75V12.25C19 15.8094 16.245 18.7254 12.751 18.9817L12.75 21.25C12.75 21.6642 12.4142 22 12 22C11.6203 22 11.3065 21.7178 11.2568 21.3518L11.25 21.25L11.25 18.9818C7.83323 18.7316 5.12283 15.938 5.00406 12.4863L5 12.25V11.75C5 11.3358 5.33579 11 5.75 11C6.1297 11 6.44349 11.2822 6.49315 11.6482L6.5 11.75V12.25C6.5 15.077 8.73445 17.3821 11.5336 17.4956L11.75 17.5H12.25C15.077 17.5 17.3821 15.2656 17.4956 12.4664L17.5 12.25V11.75C17.5 11.3358 17.8358 11 18.25 11ZM12 2C14.2091 2 16 3.79086 16 6V12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12V6C8 3.79086 9.79086 2 12 2Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

3
Fluent/assets/fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2.75001C20 2.51293 19.8879 2.28981 19.6977 2.14829C19.5075 2.00677 19.2616 1.96351 19.0345 2.03164L9.03449 5.03164C8.71725 5.12681 8.5 5.4188 8.5 5.75001V15.6273C7.93308 15.2319 7.24362 15 6.5 15C4.567 15 3 16.567 3 18.5C3 20.433 4.567 22 6.5 22C8.433 22 10 20.433 10 18.5C10 18.4426 9.99862 18.3856 9.99589 18.3289C9.99861 18.303 10 18.2766 10 18.25V10.308L18.5 7.75803V13.6273C17.9331 13.2319 17.2436 13 16.5 13C14.567 13 13 14.567 13 16.5C13 18.433 14.567 20 16.5 20C18.433 20 20 18.433 20 16.5C20 16.4427 19.9986 16.3856 19.9959 16.329C19.9986 16.303 20 16.2767 20 16.25V2.75001Z" fill="#212121"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 718 B

4
Fluent/fluent.js
View File

@ -21,7 +21,7 @@
if (link.search("playlist") !== -1) {
uri = Spicetify.URI.playlistV2URI(link.split("/").pop());
} else if (link.search("folder") !== -1) {
item.style.content = "url(https://api.iconify.design/fluent/folder-24-regular.svg?color=%23bbb)"
item.style.content = "url('./fluentui-system-icons/ic_fluent_folder_24_filled.svg')"
continue;
}
@ -34,7 +34,7 @@
).then(res => {
const meta = res.metadata;
if (meta.picture === "") {
item.style.content = "url(https://api.iconify.design/fluent/music-note-2-24-regular.svg?color=%23bbb)"
item.style.content = "url('./fluentui-system-icons/ic_fluent_music_note_2_24_filled.svg')"
} else {
item.style.backgroundImage = "url(" + meta.picture + ")";
item.style.content = "";

53
Fluent/user.css
View File

@ -368,12 +368,41 @@ h3,
display: none !important;
}
.GlueDropTarget--tracks.personal-library[data-id="/collection/tracks"],
.GlueDropTarget--episodes.personal-library[data-id="/collection/episodes"],
.main-collectionLinkButton-collectionLinkButton {
width: 49px;
min-height: 48px;
margin: auto;
margin-bottom: 14px;
justify-content: center;
}
.main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] {
background: linear-gradient(135deg,#450af5,#c4efd9) !important;
}
.main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] {
background-color: #006450 !important;
}
.main-collectionLinkButton-collectionLinkButton[href="/collection/tracks"] .main-collectionLinkButton-icon {
-webkit-mask-image: url('./fluentui-system-icons/ic_fluent_heart_24_filled.svg');
background-color: white !important;
margin-right: 0px;
}
.main-collectionLinkButton-collectionLinkButton[href="/collection/episodes"] .main-collectionLinkButton-icon {
-webkit-mask-image: url('./fluentui-system-icons/ic_fluent_mic_on_24_filled.svg');
background-color: #00DA6B !important;
margin-right: 0px;
}
.main-likedSongsButton-likedSongsIcon,
.main-yourEpisodesButton-yourEpisodesIcon,
.main-collectionLinkButton-collectionLinkText {
display: none !important;
}
.main-type-balladBold {
font-family: 'Segoe UI', sans-serif !important;
font-weight: 500;
@ -570,12 +599,20 @@ button.switch {
/* playlist sidebar */
.main-rootlist-rootlist .os-content {
padding: 0px 0px !important;
}
.main-rootlist-rootlist {
--left-sidebar-item-height: 48px;
--left-sidebar-padding-left: 18px;
--left-sidebar-padding-right: 18px;
}
.main-rootlist-rootlistItemLink {
padding: 8px;
}
.main-rootlist-rootlistItemLink:link,
.main-rootlist-rootlistItemLink:visited,
.main-rootlist-rootlistPlaylistHeader {
@ -1505,3 +1542,15 @@ option {
background-color: var(--spice-text) !important;
-webkit-mask-image: url('./fluentui-system-icons/ic_fluent_play_24_filled.svg');
}
/* spicetify */
#spicetify-sidebar-config {
flex-direction: column;
top: -60px !important;
}
#spicetify-show-list >* {
padding: 0px;
}