diff --git a/Dreary/README.md b/Dreary/README.md new file mode 100644 index 0000000..0786ba4 --- /dev/null +++ b/Dreary/README.md @@ -0,0 +1,33 @@ +# Drery + +## Screenshots + +### BIB +![BIB Screenshot](bib.png) + +### Psycho +![Psycho Screenshot](psycho.png) + +### Deeper +![Deeper Screenshot](deeper.png) + +### Mono +![Mono Screenshot](mono.png) + +### Golden +![Golden Screenshot](golden.png) + +## Important +Certain aspects of the theme, such as the borders around playlist names, requires Sidebar Config to be enabled. It is not required but recommended. + +##### To enable: `spicetify config sidebar_config 1` + +## More + + + +A chill theme that keeps things bordered in and organized + +BIB color scheme based on original [BIB-Green](https://github.com/morpheusthewhite/spicetify-themes/tree/master/BIB-Green) + +Theme based on Sleek theme: https://github.com/morpheusthewhite/spicetify-themes/tree/v2/Sleek \ No newline at end of file diff --git a/Dreary/bib.png b/Dreary/bib.png new file mode 100644 index 0000000..80b3ac6 Binary files /dev/null and b/Dreary/bib.png differ diff --git a/Dreary/color.ini b/Dreary/color.ini new file mode 100644 index 0000000..43d3a39 --- /dev/null +++ b/Dreary/color.ini @@ -0,0 +1,134 @@ +[Psycho] +; Red on dark grey background +text = e00000 +subtext = ffffff +button-text = ffffff +main = 101010 +sidebar = 171717 +player = 171717 +subbutton-text = 101010 +card = 171717 +shadow = 6d1414 +selected-row = 330d0d +sub-button = a20606 +button = e00000 +button-active = e00000 +button-disabled = 404040 +tab-active = 171717 +notification = 5e0000 +notification-error = 5e0000 +playback-bar = ff4700 +misc = adadad + +[Deeper] +; Light blue on Dark Background +text = 4f9a87 +subtext = 406560 +button-text = 4f9a87 +main = 040614 +sidebar = 0F111A +player = 0F111A +subbutton-text = 040614 +card = 0f1118 +shadow = 406560 +selected-row = 040614 +sub-button = 4f9a87 +button = 0d3a2e +test = 175 +button-active = 106165 +button-disabled = 0C1C19 +tab-active = 0a1527 +notification = 051024 +notification-error = 051024 +playback-bar = 4f9a87 +rgb-selected-row = 64,101,96 +misc = 406560 + +[BIB] +; Green on dark grey background +text = 8bc34a +subtext = b4b4b4 +button-text = 202020 +main = 202020 +sidebar = 202020 +player = 242424 +subbutton-text = 202020 +card = 242424 +shadow = 000000 +selected-row = 2a3c17 +sub-button = 6a913d +button = 537b25 +button-active = 98da4b +button-disabled = 353535 +tab-active = 303030 +notification = 242424 +notification-error = 242424 +playback-bar = 8bc34a +misc = 8bc34a + +[Mono] +;Grays, Blacks, Whites, You get the gist. +text = FFFFFF +subtext = d3d3d3 +button-text = FFFFFF +main = 000000 +sidebar = 5d5e60 +subbutton-text = d3d3d3 +player = 181818 +card = 5d5e60 +selected-row = 2D2A32 +shadow = FFFFFF +sub-button = d3d3d3 +button = d3d3d3 +button-active = d3d3d3 +button-disabled = 181818 +tab-active = d3d3d3 +notification = 181818 +notification-error = b5cbb7 +playback-bar = d3d3d3 +misc = d3d3d3 + +[Golden] +;Gold +text = FFE002 +subtext = B28228 +button-text = FFE002 +main = 1C1C1C +sidebar = 3B3B3B +subbutton-text = 3B3B3B +player = 1C1C1C +card = 3B3B3B +selected-row = 1c1c1c +shadow = FFE002 +sub-button = B28228 +button = B28228 +button-active = B28228 +button-disabled = FFB606 +tab-active = B28228 +notification = FFB606 +notification-error = b5cbb7 +playback-bar = B28228 +misc = B28228 + + +; Description + +; text = main text, playlist names in main field, name of playlist selected in sidebar, headings +; subtext = text in main buttons in sidebar, playlist names in sidebar, artist names, and mini infos +; button-text = text in main buttons in sidebar when active +; main = main field or main bg +; sidebar = sidebar bg +; subbutton-text = text of buttons that use the text color or subtext color as a background +; player = player bg +; card = card bg +; shadow = bg of buttons like account, pop-up lyrics, full app display in main field +; selected-row = color of the song selected +; sub-button = caption and details of playlist, download and options button +; 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 +; tab-active = button bg in main field (playlists, podcasts, artists, albums) +; notification = notification ('Added to liked songs' etc.) +; notification-error = error +; playback-bar = seekbar fg, main play/pause button bg +; misc = miscellaneous \ No newline at end of file diff --git a/Dreary/deeper.png b/Dreary/deeper.png new file mode 100644 index 0000000..1f7fda7 Binary files /dev/null and b/Dreary/deeper.png differ diff --git a/Dreary/golden.png b/Dreary/golden.png new file mode 100644 index 0000000..763c98c Binary files /dev/null and b/Dreary/golden.png differ diff --git a/Dreary/mono.png b/Dreary/mono.png new file mode 100644 index 0000000..3fcf697 Binary files /dev/null and b/Dreary/mono.png differ diff --git a/Dreary/psycho.png b/Dreary/psycho.png new file mode 100644 index 0000000..a645f5d Binary files /dev/null and b/Dreary/psycho.png differ diff --git a/Dreary/user.css b/Dreary/user.css new file mode 100644 index 0000000..bb8a9a9 --- /dev/null +++ b/Dreary/user.css @@ -0,0 +1,528 @@ +/* Dreary Theme*/ + +.main-rootlist-rootlistDividerGradient { + display: none; + visibility: hidden !important; +} + +.main-rootlist-rootlistDivider { + background-color: var(--spice-text) !important; +} + +input { + background-color: unset !important; + border-bottom: solid 1px var(--spice-text) !important; + border-radius: 0 !important; + padding: 6px 10px 6px 48px; + color: var(--spice-text) !important; +} + +.x-833-searchInput-searchInputSearchIcon { + color: var(--spice-text) !important; +} + +.main-home-homeHeader, .x-441-entityHeader-overlay, .main-actionBarBackground-background, .main-entityHeader-overlay, .main-entityHeader-backgroundColor { + background-color: unset !important; + background-image: unset !important; +} + +.main-playlistEditDetailsModal-textElement:focus { + border: 0; +} + +.connect-title, .connect-header { + display: none; +} + +/* Topbar visibility bug */ + +.main-topBar-topbarContent:not(.main-topBar-topbarContentFadeIn)>* { + opacity: unset !important; +} + +.main-entityHeader-topbarContent:not(.main-entityHeader-topbarContentFadeIn)>* { + opacity: 0 !important; +} + +/* Remove Topbar background colour */ + +.main-topBar-background { + background-color: unset !important; +} + +.main-topBar-overlay { + background-color: var(--spice-main); +} + +.main-entityHeader-shadow { + box-shadow: 0 04px 20px #21212130; +} + +.main-trackList-playingIcon { + -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; +} + +span.artist-artistVerifiedBadge-badge svg:nth-child(1) { + fill: black; +} + +/* Hide Banner Ads */ + +.main-leaderboardComponent-container { + display: none; +} + +.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer, .desktoproutes-homepage-takeover-ad-hptoComponent-container { + display: none !important; +} + +/* Hide Upgrade Button */ + +.main-topBar-UpgradeButton { + display: none; +} + +[aria-label="Playing"] { + color: var(--spice-text); +} + +/* Fix design fault */ + +@media (min-width: 1024px) { + .main-trackList-trackListHeader { + border-bottom: solid 1px; + margin: 10px; + } +} + +.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader { + background: var(--spice-main); + border: 0; +} + +.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8); +} + +/* Changing Playback Bar Location */ + +.progress-bar__bg, .progress-bar__fg_wrapper { + border-radius: 0; + z-index: 1; +} + +.playback-bar__progress-time { + display: none; +} + +.playback-bar { + width: 100%; + bottom: 83px; + position: absolute; + left: -1px; + z-index: 1; +} + +.main-playbackBarRemainingTime-container { + position: absolute; + left: 49.68%; + top: 60%; + border: solid 1px; + border-radius: 20px; + z-index: 5; + color: var(--spice-subtext) !important; +} + +.player-controls__buttons { + transform: translateY(6px); +} + +.main-playPauseButton-button { + background-color: var(--spice-main); + box-shadow: var(--spice-shadow) 0 5px 9px 0px; + --button-size: 50px !important; + color: var(--spice-text); + background-color: var(--spice-player) !important; + cursor: pointer; +} + +.player-controls__buttons { + align-items: center; + position: relative; + left: 2.3%; +} + +.main-entityTitle-subtitle.main-entityTitle-small.main-entityTitle-uppercase.main-entityTitle-bold { + border: 2px var(--spice-text) solid; + border-radius: 4px; + width: fit-content; + display: inline; + text-align: center; + padding: 0 5px; +} + +.os-theme-spotify.os-host-transition>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle { + border-radius: 4px; + background-color: var(--spice-text); +} + +/* Hide Profile Options in Nav Bar */ + +.main-userWidget-notificationIndicator { + display: none; +} + +.main-avatar-userIcon { + color: white; +} + +.main-userWidget-box { + background-color: var(--spice-sidebar); + text-decoration-line: underline; +} + +/* Improve Sidebar Buttons */ + +.main-likedSongsButton-likedSongsIcon { + background: var(--spice-text); +} + +.main-likedSongsButton-likedSongsIcon { + color: var(--spice-sidebar); +} + +.main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8) +} + +.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow { + border-bottom: 1px solid rgba(var(--spice-rgb-button-disabled), .8); +} + +.main-trackList-trackListRow.main-trackList-selected, .main-trackList-trackListRow.main-trackList-selected:hover { + background-color: rgba(var(--spice-rgb-selected-row), .8) !important; +} + +.main-trackList-trackListRow:focus-within, .main-trackList-trackListRow:hover { + background-color: rgba(var(--spice-rgb-selected-row), .4); +} + +.main-duplicateTracksDialog-container { + background-color: var(--spice-card); + color: var(--spice-subtext); +} + +.main-duplicateTracksDialog-secondaryButton { + color: var(--spice-text); +} + +._9eb5acf729a98d62135ca21777fef244-scss { + color: var(--spice-card); +} + +.x-sortBox-sortDropdown, .x-filterBox-expandButton { + color: var(--spice-text) !important; +} + +/* Main Play Button Change */ + +.main-playButton-PlayButton.main-playButton-primary { + color: var(--spice-main); + background-color: var(--spice-playback-bar); + cursor: pointer !important; +} + +.main-entityHeader-metaDataText.main-type-mesto:nth-child(2) { + display: none; +} + +.main-entityHeader-image { + border-radius: 10%; +} + +.x-downloadButton-button { + background: var(--spice-player); + border-radius: 50%; +} + +/* Link playback-bar color */ + +.playback-bar .progress-bar__fg { + background-color: var(--spice-playback-bar); +} + +:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg { + background-color: var(--spice-playback-bar); +} + +.main-navBar-navBarLinkActive { + background-color: var(--spice-main); +} + +.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus, .main-navBar-navBarLinkActive:hover, .logo { + color: var(--spice-text) !important; + background-color: var(--spice-selected-row); +} + +.progress-bar__slider { + opacity: 1 !important; + background-color: var(--spice-sidebar)!important; + height: 16px!important; + border: solid 2px var(--spice-subtext)!important; + width: 16px!important; +} + +a.x-categoryCard-CategoryCard, a.x-heroCategoryCard-HeroCategoryCard { + color: var(--spice-subtext); +} + +.main-heroCard-card a, .collection-collectionEntityHeroCard-descriptionContainer { + color: var(--spice-subtext) !important; +} + +.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a, .main-buddyFeed-activityMetadata .main-buddyFeed-username a, .main-buddyFeed-activityMetadata .main-buddyFeed-playbackContextLink, p.main-buddyFeed-timestamp.main-type-finale, .main-buddyFeed-findFriendsButton .main-buddyFeed-findFriendsIcon { + color: var(--spice-subtext); +} + +/* Recolor sub-buttons */ + +.main-moreButton-button { + color: var(--spice-sub-button); +} + +.x-downloadButton-button { + color: var(--spice-sub-button) !important; +} + +.x-downloadButton-button:hover { + color: var(--spice-text) !important; +} + +.main-addButton-button { + color: var(--spice-sub-button); +} + +.main-entityHeader-metaDataText { + color: var(--spice-sub-button); +} + +.main-duration-container { + color: var(--spice-sub-button); +} + +.main-tag-container { + background-color: var(--spice-sub-button); +} + +.x-sortBox-sortDropdown { + background-color: var(--spice-selected-row) !important; +} + +.x-filterBox-searchIconContainer { + color: var(--spice-sub-button) !important; +} + +.x-filterBox-expandButton:focus, .x-filterBox-expandButton:hover { + background-color: var(--spice-selected-row) !important; +} + +.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus, .main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover { + background-color: var(--spice-selected-row) !important; +} + +.view-homeShortcutsGrid-shortcut { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important; +} + +.view-homeShortcutsGrid-shortcut:focus-within, .view-homeShortcutsGrid-shortcut:hover, .view-homeShortcutsGrid-shortcut[data-context-menu-open=true] { + background-color: var(--spice-selected-row) !important; +} + +.main-rootlist-textWrapper.main-type-viola { + cursor: pointer !important; +} + +.main-navBar-navBar { + border-right: 2px solid var(--spice-misc); +} + +.cMigZB * { + color: var(--spice-misc) !important; +} + +.main-trackInfo-name a { + color: var(--spice-misc) !important; +} + +.main-trackInfo-artists a:link { + color: var(--spice-misc) !important; +} + +[class*=" spoticon-"]:before { + color: var(--spice-misc) !important; +} + +.main-connectToFacebook-headerTitle { + color: var(--spice-misc) !important; +} + +.main-cardSubHeader-root, .main-cardHeader-text { + color: var(--spice-shadow) !important; +} + + +.main-repeatButton-button, .main-skipForwardButton-button, .main-skipBackButton-button, .main-shuffleButton-button { + cursor: pointer !important; +} + +#spicetify-playlist-list { + display: inline; + height: 10%; + align-items: center; + box-sizing: border-box; + position: relative; + left: -40px; + top: 50px; + overflow: hidden; + overflow-y: scroll; +} + +#spicetify-playlist-list>li { + margin: 4px 3.2vw; + width: 90%; + flex-shrink: 0; + padding-top: 10%; + padding-bottom: 10%; + box-sizing: border-box; + position: relative; + margin-bottom: 8px; + border-radius: 10px; + border: 2px solid var(--spice-text); + display: flex; + text-align: center; + flex-direction: column; + transition: all 500ms; +} + +#spicetify-playlist-list>li:hover { + border-color: var(--spice-button); +} + +.main-rootlist-textWrapper { + overflow: auto !important; + text-overflow: unset !important; + white-space: pre !important; +} + +.main-connectToFacebook-text, .main-connectToFacebook-disclaimer { + color: unset !important; +} + +.main-type-mesto { + color: var(--spice-button); +} + +svg[Attributes Style] { + fill: var(--spice-subtext); +} + +.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink { + transition: 500ms; +} + +.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLink:focus { + color: var(--spice-text); +} + +.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected { + color: var(--spice-subbutton-text) !important; +} + + +.view-homeShortcutsGrid-shortcut { + background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important; + border: solid 3px var(--spice-text); + border-radius: 10px; + padding-bottom: 80.7px; + transition: 500ms; +} + +.main-card-card .main-card-cardLink { + border: solid 3px; + transition: 500ms; + border-radius: 27px; +} + +.main-card-card { + border-radius: 27px!important; +} + +.view-homeShortcutsGrid-shortcut:hover, .main-card-card .main-card-cardLink:hover { + border-color: var(--spice-button); +} + +.main-createPlaylistButton-button { + padding: 0 16px !important; +} + +.main-trackCreditsModal-closeBtn { + color: var(--spice-button-disabled) !important; +} + +.main-contextMenu-menu { + max-height: 400px; + opacity: .9676; +} + .main-trackList-trackList { + border-radius: 30px; + background-color: var(--spice-player); + border: 1px solid; + } + .main-buddyFeed-friendsFeedContainer { + border-left: solid 2px var(--spice-text); + } + .main-yourEpisodesButton-yourEpisodesIcon { + background: var(--spice-text); + } + .main-yourEpisodesButton-yourEpisodesIcon path { + fill: var(--spice-player); + opacity: 0.7; + } + .main-navBar-entryPoints>div:first-of-type { + margin-top: 20px; + } + .main-nowPlayingBar-left {} + .cMigZB { + cursor: pointer; + } + .control-button { + color: var(--spice-misc); + } + .main-buddyFeed-buddyFeed { + -webkit-box-shadow: none; + box-shadow: none; + } + .main-buddyFeed-friendActivity { + border-bottom: solid 1px; + } + .collection-collectionEntityHeroCard-likedSongs { + background: linear-gradient(149.46deg, var(--spice-sidebar), var(--spice-main) 99.16%) !important; + } + + .main-repeatButton-button[disabled] { + color: var(--spice-button); + } + .main-shuffleButton-button[disabled] { + color: var(--spice-button); + } + .progress-bar_bg { + z-index: 20; + } + .main-deletePlaylistDialog-secondaryButton{ + color:var(--spice-subbutton-text); + } + .main-connectToFacebook-facebookButton { + color: var(--spice-subbutton-text); +} \ No newline at end of file diff --git a/THEMES.md b/THEMES.md index 3302952..d53a5b4 100644 --- a/THEMES.md +++ b/THEMES.md @@ -10,6 +10,23 @@ Here you can find a preview of all the themes. Some of them may have different c ![Ocean Screenshot](Default/ocean.png) +## Dreary + +#### BIB +![BIB Screenshot](Dreary/bib.png) + +#### Psycho +![Psycho Screenshot](Dreary/psycho.png) + +#### Deeper +![Deeper Screenshot](Dreary/deeper.png) + +#### Mono +![Mono Screenshot](Dreary/mono.png) + +#### Golden +![Golden Screenshot](Dreary/golden.png) + ## Dribbblish #### Base