mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-22 02:42:54 +01:00
Merge branch 'v2' of https://github.com/morpheusthewhite/spicetify-themes into v2
This commit is contained in:
khanhas
commit
8bbc28c97d
9
BurntSienna/README.md
Normal file
9
BurntSienna/README.md
Normal file
@ -0,0 +1,9 @@
|
||||
# BurntSienna
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
## More
|
||||
Montserrat Font is necessary, it is available on Google Fonts:
|
||||
https://fonts.google.com/specimen/Montserrat<br>
|
||||
Author: https://github.com/pjaspinski
|
||||
6
BurntSienna/color.ini
Normal file
6
BurntSienna/color.ini
Normal file
@ -0,0 +1,6 @@
|
||||
[Base]
|
||||
button = ef8450
|
||||
sidebar = 242629
|
||||
player = 242629
|
||||
main = 303336
|
||||
button-active = ef8450
|
||||
BIN
BurntSienna/screenshot.png
Normal file
BIN
BurntSienna/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
191
BurntSienna/user.css
Normal file
191
BurntSienna/user.css
Normal file
@ -0,0 +1,191 @@
|
||||
* {
|
||||
font-family: Montserrat;
|
||||
}
|
||||
|
||||
/* Page titles */
|
||||
h1 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* Song name in player */
|
||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-name {
|
||||
overflow: unset;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
/* Artist name in player */
|
||||
.main-nowPlayingWidget-nowPlaying .main-trackInfo-artists {
|
||||
overflow: unset;
|
||||
padding-top: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.main-type-finale {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.Svg-ulyrgf-0,
|
||||
.main-trackList-rowPlayPauseIcon {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
.x-downloadButton-button svg {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
/* Progress and remaining time */
|
||||
.main-playbackBarRemainingTime-container,
|
||||
.playback-bar__progress-time {
|
||||
font-size: 15px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Player play button */
|
||||
.main-playPauseButton-button {
|
||||
background-color: unset;
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.main-playPauseButton-button svg {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
--fg-color: var(--spice-button);
|
||||
}
|
||||
|
||||
.progress-bar__bg,
|
||||
.progress-bar__fg,
|
||||
.progress-bar__fg_wrapper {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.progress-bar-wrapper {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Extra controls */
|
||||
.control-button::before {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ExtraControls svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* Removing gradients */
|
||||
.main-entityHeader-backgroundColor,
|
||||
.main-actionBarBackground-background {
|
||||
background-color: unset !important;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* Cover shadow */
|
||||
.main-entityHeader-shadow {
|
||||
-webkit-box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
||||
box-shadow: 0 4px 20px rgba(var(--spice-rgb-shadow), 0.5);
|
||||
}
|
||||
|
||||
/* Top bar */
|
||||
.main-topBar-background {
|
||||
background-color: #3a3d42 !important;
|
||||
}
|
||||
|
||||
/* Playing icon */
|
||||
.main-trackList-playingIcon {
|
||||
filter: saturate(0%);
|
||||
}
|
||||
|
||||
/* Playlist like button */
|
||||
.main-actionBar-ActionBarRow .main-addButton-button .Svg-ulyrgf-0 {
|
||||
height: unset;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
/* Order button */
|
||||
.x-sortBox-sortDropdown {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Sidebar playlists menu */
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.main-rootlist-rootlistDivider {
|
||||
background-color: var(--spice-button);
|
||||
}
|
||||
|
||||
/* Search box */
|
||||
.x-searchInput-searchInputInput {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Aritsts names */
|
||||
.main-type-mesto {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* Songs names */
|
||||
.main-type-ballad {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Cards descriptions */
|
||||
.main-cardSubHeader-root {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Ad title */
|
||||
.desktoproutes-homepage-takeover-ad-hptoNativeOriginal-header {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* Friends names */
|
||||
.main-buddyFeed-username a {
|
||||
color: var(--spice-text) !important;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Friends songs and artists */
|
||||
.main-buddyFeed-artistAndTrackName a,
|
||||
.main-buddyFeed-playbackContextLink span {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Cover height */
|
||||
.main-coverSlotExpanded-container {
|
||||
height: var(--nav-bar-width) + 8px;
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
.os-scrollbar-handle {
|
||||
background: var(--spice-button) !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Making index column wider so that lighter background that
|
||||
highlights selected song contains multi-digit song numbers */
|
||||
/* It looks good up to 4 digits, I figured that no one has playlists with more music than that ;) */
|
||||
.main-trackList-trackList.main-trackList-indexable .main-trackList-trackListRowGrid {
|
||||
grid-template-columns: [index] 48px [first] 6fr [var1] 4fr [var2] 3fr [last] minmax(120px, 1fr) !important;
|
||||
}
|
||||
|
||||
/* Text boxes in settings */
|
||||
.main-dropDown-dropDown {
|
||||
background-color: var(--spice-button-disabled);
|
||||
}
|
||||
|
||||
/* Facebook button */
|
||||
.x-settings-facebookButton {
|
||||
background-color: unset !important;
|
||||
}
|
||||
@ -1,26 +1,46 @@
|
||||
# Onepunch
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
#### Dark
|
||||
|
||||
|  |  |  |
|
||||
| :-------------------------------------------: | :---------------------------------------------: | :-----------------------------------------------: |
|
||||
| home | album | playlist |
|
||||
|  |  |
|
||||
| podcat | profile |
|
||||
|
||||
#### Light
|
||||
|
||||
|  |  |  |
|
||||
| :---------------------------------------------: | :-----------------------------------------------: | :-------------------------------------------------: |
|
||||
| home | album | playlist |
|
||||
|  |  |
|
||||
| podcat | profile |
|
||||
|
||||
## More
|
||||
|
||||
#### About
|
||||
A simple gruvified spotify theme.
|
||||
### About
|
||||
|
||||
#### First Aid Kit ¯\\_(ツ)\_/¯
|
||||
A simple gruvified spotify theme. Move to [Extra Preview](#extra-preview) for more screenshots.
|
||||
|
||||
- To change color schemes **`spicetify config color_scheme color_scheme_name`** (change the **`color_scheme_name`** to dark/light)
|
||||
- Tested on macOS only and pretty much everything worked. ﾍ(･_|
|
||||
### Information
|
||||
|
||||
#### On my list
|
||||
- [x] Gruvified and updated to the new UI.
|
||||
- [x] Added **dark/light** mode.
|
||||
- [x] Almost everything looks fine
|
||||
- [x] Yeeted the idea of changing icons. 〜〜(／￣▽)／ 〜ф
|
||||
- [ ] Yet to fix some minor color mismatch.
|
||||
* To apply this theme:
|
||||
|
||||
```shell
|
||||
# for dark theme
|
||||
spicetify config current_theme Onepunch color_scheme dark
|
||||
spicetify apply
|
||||
|
||||
#### Contact
|
||||
Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm.
|
||||
#for light theme
|
||||
spicetify config current_theme Onepunch color_scheme light
|
||||
spicetify apply
|
||||
|
||||
```
|
||||
|
||||
* Tested on macOS only and pretty much everything worked. ﾍ(･\_|
|
||||
|
||||
### Contact
|
||||
|
||||
Go **[here](https://github.com/okarin001/Onepunch/issues)** and *check/create* an issue in case you face any probelm.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 364 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 431 KiB |
@ -1,43 +1,46 @@
|
||||
[dark]
|
||||
; gruvbox dark mode
|
||||
text = d5c4a1
|
||||
subtext = fabd2f
|
||||
extratext = d3869b
|
||||
subtext = b8bb26
|
||||
extratext = fabd2f
|
||||
main = 1d2021
|
||||
sidebar = 1d2021
|
||||
player = 1d2021
|
||||
sec-player = 32302f
|
||||
card = fb4934
|
||||
sec-card = 32302f
|
||||
shadow = 000000
|
||||
card = 1d2021
|
||||
sec-card = fb4934
|
||||
shadow = 1d2021
|
||||
selected-row = d3869b
|
||||
button = 8ec07c
|
||||
button-active = 8ec07c
|
||||
button-disabled = 665c54
|
||||
button-knob = fe8019
|
||||
tab-active = b8bb26
|
||||
notification = b8bb26
|
||||
tab-active = fb4934
|
||||
notification = fb4934
|
||||
notification-error = e22134
|
||||
misc = 83a598
|
||||
|
||||
[light]
|
||||
; gruvbox light mode
|
||||
text = 504945
|
||||
subtext = b57614
|
||||
extratext = 8f3f71
|
||||
subtext = 79740e
|
||||
extratext = b57614
|
||||
main = f9f5d7
|
||||
sidebar = f9f5d7
|
||||
player = f9f5d7
|
||||
sec-player = f2e5bc
|
||||
card = 9d0006
|
||||
sec-card = f2e5bc
|
||||
shadow = d5c4a1
|
||||
selected-row = 8f3f71
|
||||
card = f9f5d7
|
||||
sec-card = 9d0006
|
||||
shadow = f9f5d7
|
||||
selected-row = 427b58
|
||||
button = 427b58
|
||||
button-active = 427b58
|
||||
button-disabled = bdae93
|
||||
button-knob = af3a03
|
||||
tab-active = 79740e
|
||||
notification = 79740e
|
||||
button-disabled = 076678
|
||||
button-knob = 9d0006
|
||||
tab-active = 076678
|
||||
notification = 076678
|
||||
notification-error = e22134
|
||||
misc = 076678
|
||||
misc = b57614
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
Onepunch/screenshots/dark_album.png
Normal file
BIN
Onepunch/screenshots/dark_album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
BIN
Onepunch/screenshots/dark_home.png
Normal file
BIN
Onepunch/screenshots/dark_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
Onepunch/screenshots/dark_playlist.png
Normal file
BIN
Onepunch/screenshots/dark_playlist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
BIN
Onepunch/screenshots/dark_podcast.png
Normal file
BIN
Onepunch/screenshots/dark_podcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 KiB |
BIN
Onepunch/screenshots/dark_profile.png
Normal file
BIN
Onepunch/screenshots/dark_profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
BIN
Onepunch/screenshots/display.gif
Normal file
BIN
Onepunch/screenshots/display.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 MiB |
BIN
Onepunch/screenshots/light_album.png
Normal file
BIN
Onepunch/screenshots/light_album.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
BIN
Onepunch/screenshots/light_home.png
Normal file
BIN
Onepunch/screenshots/light_home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
BIN
Onepunch/screenshots/light_playlist.png
Normal file
BIN
Onepunch/screenshots/light_playlist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
BIN
Onepunch/screenshots/light_podcast.png
Normal file
BIN
Onepunch/screenshots/light_podcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
BIN
Onepunch/screenshots/light_profile.png
Normal file
BIN
Onepunch/screenshots/light_profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 503 KiB |
@ -2,7 +2,7 @@
|
||||
.main-navBar-navBarLinkActive,
|
||||
.main-navBar-navBarLinkActive:focus,
|
||||
.logo {
|
||||
background-color: var(--spice-card) !important;
|
||||
background-color: var(--spice-sec-card) !important;
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
@ -17,16 +17,19 @@
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button {
|
||||
.main-collectionLinkButton-collectionLinkButton
|
||||
.main-collectionLinkButton-collectionLinkText,
|
||||
.main-createPlaylistButton-button,
|
||||
.main-rootlist-rootlistItemLink:link,
|
||||
.main-rootlist-rootlistItemLink:visited {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected .main-collectionLinkButton-icon {
|
||||
opacity: .7 !important;
|
||||
.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected
|
||||
.main-collectionLinkButton-icon {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
|
||||
.main-rootlist-rootlistDividerGradient {
|
||||
background: linear-gradient(180deg, var(--spice-main), transparent);
|
||||
}
|
||||
@ -51,7 +54,9 @@
|
||||
.main-entityHeader-overlay,
|
||||
.main-entityHeader-backgroundColor,
|
||||
.x-914-entityHeader-overlay,
|
||||
.x-914-actionBarBackground-background {
|
||||
.x-entityHeader-overlay,
|
||||
.x-914-actionBarBackground-background,
|
||||
.x-actionBarBackground-background {
|
||||
background-color: unset !important;
|
||||
background-image: unset !important;
|
||||
}
|
||||
@ -68,11 +73,12 @@
|
||||
}
|
||||
|
||||
/* Topbar visibility bug */
|
||||
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* {
|
||||
.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn) > * {
|
||||
opacity: unset !important;
|
||||
}
|
||||
|
||||
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* {
|
||||
.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)
|
||||
> * {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
@ -98,7 +104,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
|
||||
/* details metadata */
|
||||
.main-entityTitle-subtitle.main-entityTitle-gray,
|
||||
.main-entityHeader-metaDataText {
|
||||
@ -115,11 +120,12 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
|
||||
/* artist page edits*/
|
||||
.main-entityHeader-background.main-entityHeader-gradient {
|
||||
opacity: .4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.main-entityHeader-background.main-entityHeader-overlay:after {
|
||||
background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
|
||||
background-image: linear-gradient(transparent, transparent),
|
||||
linear-gradient(var(--spice-main), var(--spice-main));
|
||||
}
|
||||
|
||||
.artist-artistPick-pickComment {
|
||||
@ -135,12 +141,11 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
|
||||
/* home screen edits */
|
||||
.view-homeShortcutsGrid-name {
|
||||
color: var(--spice-button);
|
||||
color: var(--spice-text);
|
||||
}
|
||||
|
||||
|
||||
.main-shelf-title {
|
||||
color: var(--spice-subtext)
|
||||
color: var(--spice-subtext);
|
||||
}
|
||||
|
||||
.view-homeShortcutsGrid-shortcut,
|
||||
@ -164,10 +169,9 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* inside a page edits */
|
||||
.main-addButton-button {
|
||||
color: rgba(var(--spice-rgb-card), .7) !important;
|
||||
color: rgba(var(--spice-rgb-card), 0.7) !important;
|
||||
}
|
||||
|
||||
.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
|
||||
@ -179,8 +183,6 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* friend activity */
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
|
||||
.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
|
||||
@ -207,7 +209,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
color: var(--spice-tab-active) !important;
|
||||
}
|
||||
|
||||
input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
|
||||
input:checked ~ .x-toggle-indicatorWrapper .x-toggle-indicator {
|
||||
background-color: var(--spice-button-knob) !important;
|
||||
}
|
||||
|
||||
@ -215,11 +217,10 @@ input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
|
||||
background: var(--spice-button-knob) !important;
|
||||
}
|
||||
|
||||
input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
|
||||
background-color: rgba(var(--spice-rgb-button), .5) !important;
|
||||
input:hover:not([disabled]):not(:active) ~ .x-toggle-indicatorWrapper {
|
||||
background-color: rgba(var(--spice-rgb-button), 0.5) !important;
|
||||
}
|
||||
|
||||
|
||||
/* search page edits */
|
||||
|
||||
input {
|
||||
@ -238,7 +239,6 @@ input {
|
||||
color: var(--spice-main) !important;
|
||||
}
|
||||
|
||||
|
||||
/* menu and dropdown menus including the user menu */
|
||||
.main-type-mesto,
|
||||
.x-533-dropDown-dropDown {
|
||||
@ -254,7 +254,7 @@ input {
|
||||
|
||||
.main-userWidget-box:focus,
|
||||
.main-userWidget-box:hover,
|
||||
.main-userWidget-box[data-context-menu-open=true] {
|
||||
.main-userWidget-box[data-context-menu-open="true"] {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
@ -270,29 +270,37 @@ input {
|
||||
}
|
||||
|
||||
.main-card-card:hover,
|
||||
.main-card-card[data-context-menu-open=true] {
|
||||
background-color: rgba(var(--spice-rgb-sec-card), .3) !important;
|
||||
.main-card-card[data-context-menu-open="true"] {
|
||||
background-color: rgba(var(--spice-rgb-sec-card), 0.3) !important;
|
||||
}
|
||||
|
||||
.main-contextMenu-menu,
|
||||
.main-card-card:focus-within,
|
||||
|
||||
.main-deletePlaylistDialog-container {
|
||||
background-color: var(--spice-card) !important;
|
||||
}
|
||||
|
||||
.main-deletePlaylistDialog-secondaryButton {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-button-primary {
|
||||
background-color: var(--spice-sec-card) !important;
|
||||
color: var(--spice-card) !important;
|
||||
}
|
||||
|
||||
.main-deletePlaylistDialog-title {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
|
||||
.main-keyboardShortcutsHelpModal-container,
|
||||
.main-trackCreditsModal-container {
|
||||
background-color: var(--spice-main) !important;
|
||||
background-color: var(--spice-card) !important;
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-keyboardShortcutsHelpModal-header,
|
||||
.main-trackCreditsModal-header {
|
||||
color: var(--spice-notification) !important;
|
||||
}
|
||||
|
||||
.main-trackCreditsModal-sectionTitle {
|
||||
color: var(--spice-subtext) !important;
|
||||
}
|
||||
|
||||
@ -302,7 +310,7 @@ input {
|
||||
|
||||
/* profile page edits */
|
||||
.main-cardImage-imageWrapper {
|
||||
background-color: var(--spice-sec-card) !important;
|
||||
background-color: var(--spice-card) !important;
|
||||
}
|
||||
|
||||
/* mini player edits */
|
||||
@ -330,40 +338,4 @@ input {
|
||||
.main-nowPlayingBar-container {
|
||||
background-color: var(--spice-sec-player) !important;
|
||||
border-top: unset !important;
|
||||
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
i am unable to remove the small album cover when we expand the
|
||||
album art. So for now i am disabling these edits. If anyone wants
|
||||
to contribute to this feel free to add.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* .main-nowPlayingBar-container {
|
||||
border-radius: 15px !important;
|
||||
} */
|
||||
/* .Root__now-playing-bar {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
left: 14%;
|
||||
width: 70%;
|
||||
background: none !important;
|
||||
} */
|
||||
|
||||
/* .main-coverSlotExpanded-container {
|
||||
height: auto;
|
||||
position: fixed;
|
||||
bottom: 70px;
|
||||
left: 14.5%;
|
||||
width: 17.85%;
|
||||
} */
|
||||
|
||||
/* .main-connectBar-connectBar {
|
||||
display: none;
|
||||
} */
|
||||
@ -17,7 +17,11 @@ cd spicetify-themes
|
||||
cp -r * ~/.config/spicetify/Themes
|
||||
```
|
||||
|
||||
**NOTE: to install Dribbblish and DribbblishDynamic follow the instructions in its README**.
|
||||
**NOTE: to install the themes below, you need to follow the instructions in its README**.
|
||||
|
||||
* Dribbblish
|
||||
* DribbblishDynamic
|
||||
* Turntable
|
||||
|
||||
After that you can choose which theme to apply just by running `spicetify config current_theme THEME_NAME`.
|
||||
Some themes have 2 or more different color schemes. You can switch between them, once selected the theme, with `spicetify config color_scheme SCHEME_NAME`.
|
||||
@ -36,7 +40,7 @@ If you are unsure about which channel to use, go for Spectrum.
|
||||
|
||||
NOTE: Spotify ad-blocked version is not supported.
|
||||
|
||||
## FAQ
|
||||
## FAQ
|
||||
|
||||
### How can I remove free version UI elements (e.g. "Upgrade" button)?
|
||||
|
||||
|
||||
@ -8,13 +8,14 @@
|
||||
### Deep
|
||||
|
||||
|
||||
### Deeper
|
||||
|
||||
|
||||
### Psycho
|
||||
|
||||
|
||||
### Deeper
|
||||
|
||||
## More
|
||||
## Info
|
||||
|
||||
A simple and sleek theme that builds on the basic Spotify UI.
|
||||
A simple and sleek theme that builds on the basic Spotify UI. Created by [@harbassan](https://github.com/harbassan)
|
||||
|
||||
BIB color scheme based on original [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green)
|
||||
BIB color scheme based on original theme: [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green)
|
||||
|
||||
BIN
Sleek/bib.png
BIN
Sleek/bib.png
Binary file not shown.
|
Before Width: | Height: | Size: 267 KiB After Width: | Height: | Size: 280 KiB |
@ -13,6 +13,7 @@ sub-button = a20606
|
||||
button = e00000
|
||||
button-active = e00000
|
||||
button-disabled = 404040
|
||||
sidebar-button = ff4700
|
||||
tab-active = 171717
|
||||
notification = 5e0000
|
||||
notification-error = 5e0000
|
||||
@ -28,12 +29,13 @@ main = 040614
|
||||
sidebar = 0F111A
|
||||
player = 0F111A
|
||||
card = 0C1C19
|
||||
shadow = 0C1C19
|
||||
shadow = 000000
|
||||
selected-row = 040614
|
||||
sub-button = 4f9a87
|
||||
button = 4f9a87
|
||||
button-active = 4a99e9
|
||||
button-disabled = 0C1C19
|
||||
button-disabled = 0C1C19
|
||||
sidebar-button = 040614
|
||||
tab-active = 0a1527
|
||||
notification = 051024
|
||||
notification-error = 051024
|
||||
@ -54,7 +56,8 @@ selected-row = 09162e
|
||||
sub-button = ffffff
|
||||
button = 1464b5
|
||||
button-active = 4a99e9
|
||||
button-disabled = 353535
|
||||
button-disabled = 21282f
|
||||
sidebar-button = 37b778
|
||||
tab-active = 0a1527
|
||||
notification = 051024
|
||||
notification-error = 051024
|
||||
@ -76,6 +79,7 @@ sub-button = 6a913d
|
||||
button = 8bc34a
|
||||
button-active = 98da4b
|
||||
button-disabled = 353535
|
||||
sidebar-button = 8bc34a
|
||||
tab-active = 303030
|
||||
notification = 242424
|
||||
notification-error = 242424
|
||||
@ -97,6 +101,7 @@ misc = FFFFFF
|
||||
; button = playlist buttons bg in sidebar, drop-down menus, now playing song, like button
|
||||
; button-active = hover on song selected
|
||||
; button-disabled = seekbar bg, volume bar bg, scrollbar
|
||||
; sidebar-button = sidebar buttons bg
|
||||
; tab-active = button bg in main field (playlists, podcasts, artists, albums)
|
||||
; notification = notification ('Added to liked songs' etc.)
|
||||
; notification-error = error
|
||||
|
||||
BIN
Sleek/deep.png
BIN
Sleek/deep.png
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 283 KiB |
BIN
Sleek/deeper.png
BIN
Sleek/deeper.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 331 KiB |
BIN
Sleek/psycho.png
BIN
Sleek/psycho.png
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB After Width: | Height: | Size: 310 KiB |
@ -56,7 +56,10 @@ input {
|
||||
}
|
||||
|
||||
.main-trackList-playingIcon {
|
||||
filter: brightness(0) saturate(100%) invert(11%) sepia(81%) saturate(4689%) hue-rotate(359deg) brightness(78%) contrast(115%);
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
|
||||
background: var(--spice-text);
|
||||
content-visibility: hidden;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
@ -213,6 +216,18 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
color: var(--spice-text) !important;
|
||||
}
|
||||
|
||||
.main-yourEpisodesButton-yourEpisodesIcon {
|
||||
background: var(--spice-text);
|
||||
}
|
||||
|
||||
.main-yourEpisodesButton-yourEpisodesIcon path {
|
||||
fill: var(--spice-sidebar);
|
||||
}
|
||||
|
||||
.main-navBar-entryPoints > div:first-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Main Play Button Change */
|
||||
.main-playButton-PlayButton.main-playButton-primary {
|
||||
color: var(--spice-main);
|
||||
@ -244,7 +259,7 @@ span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
|
||||
}
|
||||
|
||||
.main-navBar-navBarLinkActive {
|
||||
background-color: var(--spice-playback-bar);
|
||||
background-color: var(--spice-sidebar-button);
|
||||
}
|
||||
|
||||
.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .logo {
|
||||
|
||||
41
THEMES.md
41
THEMES.md
@ -2,6 +2,10 @@
|
||||
|
||||
Here you can find a preview of all the themes. Some of them may have different colour schemes (in that case you'll find different entries in the same theme, each one named after the colour scheme).
|
||||
|
||||
## BurntSienna
|
||||
|
||||
|
||||
|
||||
## Default
|
||||
|
||||
|
||||
@ -9,25 +13,46 @@ Here you can find a preview of all the themes. Some of them may have different c
|
||||
## Dribbblish
|
||||
|
||||
#### Base
|
||||
|
||||
|
||||
|
||||
#### White
|
||||
|
||||
|
||||
|
||||
#### Dark
|
||||
|
||||
|
||||
|
||||
#### Nord-Light
|
||||
|
||||
|
||||
|
||||
#### Nord-Dark
|
||||
|
||||
|
||||
|
||||
#### Beach-Sunset
|
||||
|
||||
|
||||
|
||||
#### Purple
|
||||
|
||||
|
||||
|
||||
#### Samourai
|
||||
|
||||
|
||||
|
||||
## Onepunch
|
||||
|
||||
|
||||
#### Dark
|
||||
|
||||
|
||||
|
||||
#### Light
|
||||
|
||||
|
||||
|
||||
## Sleek
|
||||
|
||||
@ -39,14 +64,14 @@ Here you can find a preview of all the themes. Some of them may have different c
|
||||
|
||||
|
||||
|
||||
#### Psycho
|
||||
|
||||
|
||||
|
||||
#### Deeper
|
||||
|
||||
|
||||
|
||||
#### Psycho
|
||||
|
||||
|
||||
|
||||
## Turntable
|
||||
|
||||
https://user-images.githubusercontent.com/19476925/119483404-84223100-bd87-11eb-8dfa-5af9f7a2e925.mov
|
||||
@ -54,7 +79,9 @@ https://user-images.githubusercontent.com/19476925/119483404-84223100-bd87-11eb-
|
||||
## Ziro
|
||||
|
||||
#### Blue Dark
|
||||
|
||||
|
||||
|
||||
|
||||
#### Blue Light
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,6 +4,8 @@ Based on Spotify original theme.
|
||||
|
||||
**Note:** Require Spicetify **v2.2.0** or higher! Otherwise, performance problems will happen when the turntable rotate!
|
||||
|
||||
View the **CHANGELOG** [here](https://github.com/grasonchan/spotify-spice/blob/master/CHANGELOG.md).
|
||||
|
||||
## Screenshots
|
||||
|
||||
<div align="center">
|
||||
@ -16,7 +18,6 @@ Based on Spotify original theme.
|
||||
<img src="screenshots/full_app_display_vertical_mode.png" alt="full app display - vertical mode">
|
||||
</div>
|
||||
|
||||
|
||||
## More
|
||||
|
||||
### About Turntable
|
||||
|
||||
@ -1,30 +1,158 @@
|
||||
window.addEventListener("load", () => {
|
||||
(function rotateTurntable() {
|
||||
if (!Spicetify.Player.origin || !document.querySelector("#fad-art-image")) {
|
||||
setTimeout(rotateTurntable, 250);
|
||||
return;
|
||||
window.addEventListener("load", rotateTurntable = () => {
|
||||
const fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']");
|
||||
|
||||
if (!Spicetify.Player.origin || !fadBtn) {
|
||||
setTimeout(rotateTurntable, 250);
|
||||
return;
|
||||
}
|
||||
|
||||
const adModalStyle = document.createElement("style");
|
||||
const STYLE_FOR_AD_MODAL =
|
||||
`
|
||||
.ReactModalPortal {
|
||||
display: none
|
||||
}
|
||||
`;
|
||||
adModalStyle.innerHTML = STYLE_FOR_AD_MODAL;
|
||||
|
||||
let playState, clickedFadBtn;
|
||||
|
||||
function handleRotate(fromEvent) {
|
||||
const fadArt = document.querySelector("#fad-art-image");
|
||||
|
||||
if (!fromEvent && Spicetify.Player.isPlaying() || fromEvent && !playState) {
|
||||
if (fadArt) fadArt.style.animationPlayState = "running";
|
||||
playState = true;
|
||||
} else {
|
||||
if (fadArt) fadArt.style.animationPlayState = "paused";
|
||||
playState = false;
|
||||
}
|
||||
}
|
||||
|
||||
const fullAppDisplay = document.querySelector("#full-app-display");
|
||||
function handleFadControl(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function handleRotate() {
|
||||
const fadArt = document.querySelector("#fad-art-image");
|
||||
function handleFadDblclick() {
|
||||
const fadControlsBtns = document.querySelectorAll("#fad-controls button");
|
||||
|
||||
Spicetify.Player.isPlaying()
|
||||
? fadArt.style.animationPlayState = "running"
|
||||
: fadArt.style.animationPlayState = "paused";
|
||||
for (const fadControl of fadControlsBtns) {
|
||||
fadControl.addEventListener("dblclick", handleFadControl);
|
||||
}
|
||||
}
|
||||
|
||||
function handleConfigSwitch() {
|
||||
const genericModal = document.querySelector("generic-modal");
|
||||
|
||||
document.querySelectorAll("#popup-config-container > div")[0].remove();
|
||||
|
||||
handleInitalStatus(genericModal);
|
||||
}
|
||||
|
||||
function handleInitalStatus(genericModal) {
|
||||
genericModal.remove();
|
||||
|
||||
handleRotate();
|
||||
handleFadDblclick();
|
||||
}
|
||||
|
||||
Spicetify.Player.addEventListener("onplaypause", () => setTimeout(handleRotate));
|
||||
function handleBackdrop() {
|
||||
const fadClassList = document.querySelector("#full-app-display").classList;
|
||||
|
||||
fullAppDisplay.addEventListener("contextmenu", () => {
|
||||
const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
|
||||
if (!+localStorage.getItem("enableBlurFad")) {
|
||||
fadClassList.add("blur-fad");
|
||||
|
||||
for (const configSwitch of configSwitchBtns) {
|
||||
configSwitch.addEventListener("click", handleRotate);
|
||||
}
|
||||
});
|
||||
})();
|
||||
localStorage.setItem("enableBlurFad", "1");
|
||||
} else {
|
||||
fadClassList.remove("blur-fad");
|
||||
|
||||
localStorage.setItem("enableBlurFad", "0");
|
||||
}
|
||||
}
|
||||
|
||||
function handleContextMenu() {
|
||||
const configPopupCloseBtn = document.querySelector(".main-trackCreditsModal-closeBtn");
|
||||
const configContainer = document.querySelector("#popup-config-container");
|
||||
const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0];
|
||||
|
||||
const settingRowContainer = document.createElement("div");
|
||||
const settingRow =
|
||||
`
|
||||
<div class="setting-row">
|
||||
<label class="col description">Enable blur backdrop</label>
|
||||
<div class="col action">
|
||||
<button class="${+localStorage.getItem("enableBlurFad") ? "switch" : "switch disabled"}">
|
||||
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
settingRowContainer.innerHTML = settingRow;
|
||||
configContainer.insertBefore(settingRowContainer, settingRowReferenceNode);
|
||||
|
||||
const setBlurBackdropNode = document.querySelectorAll("#popup-config-container > div")[0];
|
||||
const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
|
||||
|
||||
configPopupCloseBtn.addEventListener("click", () => setBlurBackdropNode.remove());
|
||||
|
||||
for (const configSwitch of configSwitchBtns) {
|
||||
configSwitch.addEventListener("click", handleConfigSwitch);
|
||||
}
|
||||
|
||||
setBlurBackdropNode.querySelector("button").addEventListener("click", handleBackdrop);
|
||||
}
|
||||
|
||||
function handleMainInterface() {
|
||||
const mainInterface = document.querySelector("#main");
|
||||
const mainPlayBtn = document.querySelector(".main-playButton-PlayButton");
|
||||
const mainTopbarTitle = document.querySelector(".main-entityHeader-topbarTitle");
|
||||
const billboard = document.querySelector("#view-billboard-ad");
|
||||
|
||||
mainInterface.style.display = "block";
|
||||
if (billboard) billboard.closest(".ReactModalPortal").remove();
|
||||
adModalStyle.remove();
|
||||
|
||||
setTimeout(() => {
|
||||
mainPlayBtn.style.removeProperty("opacity");
|
||||
if (mainTopbarTitle) mainTopbarTitle.style.removeProperty("opacity");
|
||||
}, 250);
|
||||
}
|
||||
|
||||
handleRotate();
|
||||
|
||||
Spicetify.Player.addEventListener("onplaypause", () => handleRotate(true));
|
||||
|
||||
fadBtn.addEventListener("click", () => {
|
||||
const mainInterface = document.querySelector("#main");
|
||||
const mainPlayBtn = document.querySelector(".main-playButton-PlayButton");
|
||||
const mainTopbarTitle = document.querySelector(".main-entityHeader-topbarTitle");
|
||||
const topbarContentFadeIn = document.querySelector(".main-entityHeader-topbarContentFadeIn");
|
||||
const fullAppDisplay = document.querySelector("#full-app-display");
|
||||
const fadArt = document.querySelector("#fad-art-image");
|
||||
const fadClassList = document.querySelector("#full-app-display").classList;
|
||||
|
||||
if (!clickedFadBtn && +localStorage.getItem("enableBlurFad")) fadClassList.add("blur-fad");
|
||||
if (!clickedFadBtn) clickedFadBtn = true;
|
||||
|
||||
playState
|
||||
? fadArt.style.animationPlayState = "running"
|
||||
: fadArt.style.animationPlayState = "paused";
|
||||
|
||||
handleFadDblclick();
|
||||
|
||||
if (!topbarContentFadeIn) {
|
||||
mainPlayBtn.style.setProperty("opacity", "0", "important");
|
||||
if (mainTopbarTitle) mainTopbarTitle.style.setProperty("opacity", "0", "important");
|
||||
}
|
||||
|
||||
mainInterface.style.display = "none";
|
||||
document.body.append(adModalStyle);
|
||||
|
||||
fullAppDisplay.addEventListener("contextmenu", handleContextMenu);
|
||||
|
||||
fullAppDisplay.addEventListener("dblclick", handleMainInterface);
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.4 MiB |
@ -61,7 +61,7 @@
|
||||
background-color: #181818 !important
|
||||
}
|
||||
|
||||
.main-virtualScrollList-wrapper [role="row"]:nth-child(odd) {
|
||||
.main-rootlist-wrapper [role="row"]:nth-child(odd) {
|
||||
background: linear-gradient(to right, #121212, #191919, #121212)
|
||||
}
|
||||
|
||||
@ -174,16 +174,9 @@
|
||||
}
|
||||
|
||||
|
||||
/* modal backdrop */
|
||||
.GenericModal__overlay {
|
||||
backdrop-filter: var(--main-blur-backdrop);
|
||||
background-color: rgba(9, 9, 9, .2)
|
||||
}
|
||||
|
||||
|
||||
/* full app display */
|
||||
#full-app-display {
|
||||
background-color: #222
|
||||
background: radial-gradient(#242424, #1f1f1f)
|
||||
}
|
||||
|
||||
#fad-background {
|
||||
@ -228,7 +221,7 @@
|
||||
}
|
||||
|
||||
#fad-art::after {
|
||||
background-color: #252525;
|
||||
background-color: rgba(60, 60, 60, .1);
|
||||
transform: scale(1.65);
|
||||
z-index: -1
|
||||
}
|
||||
@ -238,7 +231,7 @@
|
||||
}
|
||||
|
||||
#fad-details #fad-title {
|
||||
font-size: 38px
|
||||
font-size: 32px
|
||||
}
|
||||
|
||||
#fad-details #fad-artist {
|
||||
@ -282,6 +275,44 @@
|
||||
fill: #fff
|
||||
}
|
||||
|
||||
#fad-progress-container {
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
#fad-elapsed,
|
||||
#fad-duration {
|
||||
min-width: 32px !important
|
||||
}
|
||||
|
||||
#fad-progress {
|
||||
height: 2px !important;
|
||||
background-color: rgba(100, 100, 100, .5) !important
|
||||
}
|
||||
|
||||
#fad-progress-inner {
|
||||
background-color: var(--spotify-main-color) !important;
|
||||
box-shadow: unset !important
|
||||
}
|
||||
|
||||
|
||||
/* fad blur backdrop */
|
||||
.blur-fad #fad-background {
|
||||
display: unset
|
||||
}
|
||||
|
||||
.blur-fad #fad-art::before {
|
||||
background: radial-gradient(#242424, #000)
|
||||
}
|
||||
|
||||
.blur-fad #fad-art::after {
|
||||
background-color: rgba(40, 40, 40, .1);
|
||||
box-shadow: 0 0 1px rgba(100, 100, 100, .4)
|
||||
}
|
||||
|
||||
.blur-fad #fad-progress {
|
||||
background-color: rgba(200, 200, 200, .3) !important
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1460px) and (min-height: 960px) {
|
||||
#fad-foreground {
|
||||
@ -292,7 +323,7 @@
|
||||
|
||||
/* rotate turntable */
|
||||
#fad-art-image {
|
||||
animation: rotate-cover_img 20s linear infinite paused
|
||||
animation: rotate-cover_img 24s linear infinite paused
|
||||
}
|
||||
|
||||
@keyframes rotate-cover_img {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Ziro
|
||||
## Screenshots
|
||||
### Blue Dark
|
||||
|
||||
|
||||
|
||||
|
||||
### Blue Light
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## More
|
||||
Inspired by the [Zorin Blue Dark](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Dark)/[Light](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Light) GTK theme and [spot](https://github.com/xou816/spot)
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
.now-playing-bar-container, ._6e96ad0ba78d75ffb2a0156aa1834a21-scss {
|
||||
border-top: none;
|
||||
}
|
||||
.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider {
|
||||
.main-rootlist-rootlistDivider, .main-contextMenu-dividerBefore::before, .main-contextMenu-dividerAfter::after, .show-episodeList-divider, .main-rootlist-rootlistDividerContainer {
|
||||
display: none;
|
||||
}
|
||||
/* cards */
|
||||
@ -57,10 +57,6 @@
|
||||
.link-subtle {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
/* player */
|
||||
.progress-bar {
|
||||
--fg-color: var(--spice-button-active);
|
||||
}
|
||||
/* headers */
|
||||
.main-entityHeader-withBackgroundImage {
|
||||
padding: 0 64px 24px;
|
||||
@ -133,16 +129,16 @@ button.switch {
|
||||
color: var(--spice-shadow);
|
||||
}
|
||||
/* playlist sidebar */
|
||||
.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss {
|
||||
.main-createPlaylistButton-button, ._6b5bc370e9834a4932f57284a96a0748-scss, ._928aa704d6ac22c1e288a4ddbed11a40-scss, .main-collectionLinkButton-icon, .main-collectionLinkButton-collectionLinkText {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss {
|
||||
._6b5bc370e9834a4932f57284a96a0748-scss, .main-createPlaylistButton-button, .main-createPlaylistButton-svg, .ac0df040748287f39652cc42e3b762ba-scss, .main-collectionLinkButton-collectionLinkButton {
|
||||
border-radius: var(--border-radius-2) !important;
|
||||
}
|
||||
.main-rootlist-rootlistItemLink:link, .main-rootlist-rootlistItemLink:visited, .main-rootlist-rootlistPlaylistHeader {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button {
|
||||
.ac0df040748287f39652cc42e3b762ba-scss, .main-createPlaylistButton-button, .main-collectionLinkButton-collectionLinkButton {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
.main-rootlist-rootlistPlaylistsScrollNode, .main-createPlaylistButton-button {
|
||||
@ -152,37 +148,48 @@ button.switch {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.main-rootlist-rootlistItem {
|
||||
padding: 0 8px;
|
||||
display: block;
|
||||
padding-left: calc(8px + var(--indentation)*16px);
|
||||
padding-right: 8px;
|
||||
}
|
||||
.main-rootlist-rootlistItem {
|
||||
height: 32px;
|
||||
}
|
||||
.main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:focus, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow:hover, .main-rootlist-rootlistItemLinkActive ~ .main-rootlist-expandArrow {
|
||||
color: var(--spice-shadow);
|
||||
}
|
||||
.main-rootlist-expandArrow {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
.main-rootlist-rootlistItemLink {
|
||||
height: 32px;
|
||||
border-radius: var(--border-radius-2);
|
||||
padding: 0 12px;
|
||||
}
|
||||
.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover {
|
||||
.main-rootlist-expandArrow {
|
||||
margin-inline-start: -32px;
|
||||
padding: 8px;
|
||||
}
|
||||
.main-rootlist-statusIcons {
|
||||
margin-inline-start: -24px;
|
||||
position: relative;
|
||||
right: 8px;
|
||||
}
|
||||
.main-rootlist-rootlistItemLink:hover, .main-createPlaylistButton-button:hover, .ac0df040748287f39652cc42e3b762ba-scss:hover, .main-collectionLinkButton-collectionLinkButton:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row),.05);
|
||||
}
|
||||
.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active {
|
||||
.main-rootlist-rootlistItemLink:active, .main-createPlaylistButton-button:active, .ac0df040748287f39652cc42e3b762ba-scss:active, .main-collectionLinkButton-collectionLinkButton:active {
|
||||
background-color: rgba(var(--spice-rgb-selected-row),.1);
|
||||
}
|
||||
.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover {
|
||||
background-color: var(--spice-selected-row);
|
||||
}
|
||||
.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss {
|
||||
.ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected {
|
||||
background: var(--spice-selected-row) !important;
|
||||
color: var(--spice-shadow);
|
||||
}
|
||||
.main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper, .main-rootlist-rootlistItemLinkActive .main-rootlist-textWrapper:hover, .ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss {
|
||||
color: var(--spice-shadow);
|
||||
}
|
||||
.main-rootlist-statusIcons {
|
||||
position: relative;
|
||||
top: -24px;
|
||||
right: 10px;
|
||||
justify-content: flex-end;
|
||||
pointer-events: none;
|
||||
}
|
||||
.main-rootlist-statusIcons > button {
|
||||
color: var(--spice-text);
|
||||
}
|
||||
@ -193,7 +200,7 @@ button.switch {
|
||||
display: none;
|
||||
}
|
||||
/* tracklist */
|
||||
.main-trackList-indexable .main-virtualScrollList-wrapper {
|
||||
.main-trackList-indexable .main-virtualScrollList-wrapper, .main-trackList-indexable .main-rootlist-wrapper {
|
||||
background-color: var(--spice-card);
|
||||
border-radius: var(--border-radius-1) var(--border-radius-1) 0 0;
|
||||
padding: 8px;
|
||||
@ -230,7 +237,7 @@ button.switch {
|
||||
._110dbc41d89af63f97cdd8b7cd7fea47-scss {
|
||||
border: 1px solid var(--spice-text);
|
||||
}
|
||||
.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss {
|
||||
.main-trackList-trackListRow.main-trackList-selected ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:hover ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:active ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected:focus ._110dbc41d89af63f97cdd8b7cd7fea47-scss, .main-trackList-trackListRow.main-trackList-selected .main-button-outlined {
|
||||
border: 1px solid var(--spice-shadow);
|
||||
}
|
||||
.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
|
||||
@ -263,9 +270,6 @@ button.switch {
|
||||
.main-actionBar-ActionBarRow > button:not(:first-child), .x-actionBar-ActionButtonsRow > div > button {
|
||||
color: var(--spice-button);
|
||||
}
|
||||
.main-entityHeader-image[src=https://i.scdn.co/image/ab6775700000ee85a16a411c728cd698af7a5157] {
|
||||
src: url(https://en.gravatar.com/userimage/179347741/9a6aa97e24bcec0b57f6a1cff0f768a3.png);
|
||||
}
|
||||
/* artist page */
|
||||
.artist-artistPick-pinnedImage, .artist-artistOffers-item {
|
||||
border-radius: var(--border-radius-2) !important;
|
||||
@ -364,15 +368,15 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
|
||||
color: var(--spice-text);
|
||||
}
|
||||
/* dialogs */
|
||||
.main-deletePlaylistDialog-container {
|
||||
.main-deletePlaylistDialog-container, .main-deleteFolderDialog-container {
|
||||
background-color: var(--spice-card);
|
||||
color: var(--spice-text);
|
||||
border-radius: var(--border-radius-1);
|
||||
}
|
||||
.main-deletePlaylistDialog-secondaryButton {
|
||||
.main-deletePlaylistDialog-secondaryButton, .main-deleteFolderDialog-secondaryButton {
|
||||
color: var(--spice-button);
|
||||
}
|
||||
.main-deletePlaylistDialog-buttonContainer>:last-child {
|
||||
.main-deletePlaylistDialog-buttonContainer>:last-child, .main-deleteFolderDialog-buttonContainer>:last-child {
|
||||
background-color: var(--spice-notification-error);
|
||||
}
|
||||
/* friend activity */
|
||||
@ -398,7 +402,7 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
|
||||
max-width: 190px;
|
||||
}
|
||||
/* settings */
|
||||
.main-dropDown-dropDown , option {
|
||||
.main-dropDown-dropDown, option {
|
||||
background-color: var(--spice-card) !important;
|
||||
}
|
||||
.main-dropDown-dropDown {
|
||||
@ -424,7 +428,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
|
||||
border-color: var(--spice-button-active);
|
||||
}
|
||||
/* device menu */
|
||||
._9eb5acf729a98d62135ca21777fef244-scss {
|
||||
._9eb5acf729a98d62135ca21777fef244-scss, .connect-device-button {
|
||||
color: var(--spice-shadow);
|
||||
}
|
||||
.connect-device-list-container {
|
||||
@ -442,11 +446,19 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
|
||||
.connect-device-list-item:focus, .connect-device-list-item:hover {
|
||||
background-color: rgba(var(--spice-rgb-selected-row),0.05);
|
||||
}
|
||||
.connect-header {
|
||||
background-color: var(--spice-shadow);
|
||||
margin: 8px;
|
||||
border-radius: var(--border-radius-1);
|
||||
}
|
||||
/* player */
|
||||
.progress-bar {
|
||||
--fg-color: var(--spice-button-active);
|
||||
}
|
||||
.now-playing-bar .cover-art-image {
|
||||
border-radius: var(--border-radius-2);
|
||||
}
|
||||
.playback-bar__progress-time {
|
||||
.playback-bar__progress-time, .main-playbackBarRemainingTime-container {
|
||||
position: absolute;
|
||||
bottom: -48px;
|
||||
right: 250px;
|
||||
@ -475,7 +487,7 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
|
||||
.volume-bar {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.main-playPauseButton-button, .player-controls__buttons > button:not(.main-playPauseButton-button) {
|
||||
.main-playPauseButton-button, .player-controls__buttons button:not(.main-playPauseButton-button) {
|
||||
--button-size: 48px !important;
|
||||
}
|
||||
.main-shuffleButton-button.main-shuffleButton-on:after, .main-repeatButton-button.main-repeatButton-on:after {
|
||||
@ -499,6 +511,9 @@ input:hover:not([disabled]):not(:active)~.x-toggle-indicatorWrapper {
|
||||
bottom: 83px;
|
||||
position: absolute;
|
||||
}
|
||||
.now-playing-bar-container>div:first-child:nth-last-child(2) .playback-bar, .main-nowPlayingBar-container>div:first-child:nth-last-child(2) .playback-bar {
|
||||
bottom: 107px;
|
||||
}
|
||||
.playback-bar .progress-bar__bg, .playback-bar .progress-bar__fg_wrapper, .playback-bar .progress-bar__fg {
|
||||
border-radius: 0;
|
||||
height: 6px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user