Merge pull request #376 from okarin001/v2

Added support for spicetify_v2 (New Spotify UI)

Onepunch/.gitignore

@@ -0,0 +1 @@
+.DS_STORE

Onepunch/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 okarin001
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Onepunch/README.md

@@ -0,0 +1,26 @@
+# Onepunch
+## Screenshots
+![Home](./__Home.png)
+![Profile](./__Profile.png)
+![Playlist](./__Playlist.png)
+
+## More
+
+#### About
+A simple gruvified spotify theme. 
+
+#### First Aid Kit  ¯\\_(ツ)\_/¯
+
+- 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. ﾍ(･_|
+
+#### 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.
+
+
+#### Contact
+Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm. 

Onepunch/color.ini

@@ -0,0 +1,41 @@
+[dark]
+; gruvbox dark mode
+text               = d5c4a1
+subtext            = fabd2f
+extratext          = d3869b
+main               = 1d2021
+sidebar            = 1d2021
+player             = 1d2021
+sec-player         = 3c3836 
+card               = fb4934
+sec-card           = 665c54
+shadow             = 000000
+selected-row       = d3869b
+button             = 8ec07c
+button-active      = 8ec07c
+button-disabled    = 665c54
+tab-active         = b8bb26
+notification       = b8bb26
+notification-error = e22134
+misc               = 83a598
+
+[light]
+; gruvbox light mode
+text               = 504945 
+subtext            = b57614
+extratext          = 8f3f71
+main               = f9f5d7
+sidebar            = f9f5d7
+player             = f9f5d7
+sec-player         = ebdbb2 
+card               = 9d0006
+sec-card           = bdae93
+shadow             = d5c4a1
+selected-row       = 8f3f71
+button             = 427b58
+button-active      = 427b58
+button-disabled    = bdae93
+tab-active         = 79740e
+notification       = 79740e
+notification-error = e22134
+misc               = 076678

Onepunch/user.css

@@ -0,0 +1,338 @@
+/* sidebar edits */
+.main-navBar-navBarLinkActive,
+.main-navBar-navBarLinkActive:focus,
+.logo {
+  background-color: var(--spice-card) !important;
+  color: var(--spice-main) !important;
+}
+
+.main-likedSongsButton-likedSongsIcon,
+.main-createPlaylistButton-createPlaylistIcon,
+.main-yourEpisodesButton-yourEpisodesIcon {
+  background: var(--spice-text) !important;
+  border-radius: 0px !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton {
+  color: var(--spice-main) !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
+.main-createPlaylistButton-button {
+  color: var(--spice-text) !important;
+}
+
+.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected .main-collectionLinkButton-icon {
+  opacity: .7 !important;
+}
+
+
+.main-rootlist-rootlistDividerGradient {
+  background: linear-gradient(180deg, var(--spice-main), transparent);
+}
+
+.main-rootlist-rootlistDivider {
+  background-color: unset !important;
+}
+
+/* top queue */
+.queue-tabBar-active {
+  background-color: var(--spice-card) !important;
+}
+
+.queue-tabBar-headerItemLink {
+  color: var(--spice-text) !important;
+}
+
+/* header colored backgrounds */
+.main-home-homeHeader,
+.x-441-entityHeader-overlay,
+.main-actionBarBackground-background,
+.main-entityHeader-overlay,
+.main-entityHeader-backgroundColor,
+.x-914-entityHeader-overlay,
+.x-914-actionBarBackground-background {
+  background-color: unset !important;
+  background-image: unset !important;
+}
+
+/* play button in main page */
+.main-playButton-PlayButton.main-playButton-primary {
+  color: var(--spice-main);
+  background-color: var(--spice-button);
+}
+
+.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,
+.x-441-actionBarBackground-background {
+  background-color: var(--spice-main) !important;
+}
+
+.main-entityHeader-shadow {
+  box-shadow: 0 04px 20px #21212130;
+}
+
+.main-trackList-playingIcon {
+  filter: hue-rotate(270deg);
+}
+
+span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
+  fill: black;
+}
+
+
+/* details metadata */
+.main-entityTitle-subtitle.main-entityTitle-gray,
+.main-entityHeader-metaDataText {
+  color: var(--spice-text) !important;
+}
+
+.main-duration-container {
+  color: var(--spice-subtext);
+}
+
+.main-entityTitle-subtitle {
+  color: var(--spice-extratext);
+}
+
+/* artist page edits*/
+.main-entityHeader-background.main-entityHeader-gradient {
+  opacity: .4;
+}
+
+.main-entityHeader-background.main-entityHeader-overlay:after {
+  background-image: linear-gradient(transparent, transparent), linear-gradient(var(--spice-main), var(--spice-main));
+}
+
+.artist-artistPick-pickComment {
+  background: unset !important;
+  border-radius: 0px !important;
+  border-bottom: solid 2px var(--spice-text) !important;
+  color: var(--spice-text) !important;
+}
+
+.artist-artistSavedTracks-imageContainer .artist-artistSavedTracks-heartIcon {
+  color: var(--spice-card);
+}
+
+/* home screen edits */
+.view-homeShortcutsGrid-name {
+  color: var(--spice-button);
+}
+
+
+.main-shelf-title {
+  color: var(--spice-subtext)
+}
+
+.view-homeShortcutsGrid-shortcut,
+.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-imageWrapper,
+.main-cardImage-imageWrapper,
+.main-cardImage-imagePlaceholder,
+.main-cardImage-image {
+  border-radius: 10px !important;
+}
+
+.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
+  border-radius: 10px 0 0 10px !important;
+}
+
+.main-cardImage-circular,
+.main-entityHeader-circle {
+  border-radius: 50% !important;
+}
+
+.main-entityHeader-image {
+  border-radius: 10px;
+}
+
+
+/* inside a page edits */
+.main-addButton-button {
+  color: rgba(var(--spice-rgb-card), .7) !important;
+}
+
+.main-trackList-trackListRow.main-trackList-active .main-trackList-rowMarker,
+.main-trackList-trackListRow.main-trackList-active .main-trackList-rowTitle {
+  color: var(--spice-subtext) !important;
+}
+
+.main-trackList-rowTitle {
+  color: var(--spice-text) !important;
+}
+
+
+
+/* friend activity */
+.main-buddyFeed-activityMetadata .main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-playbackContext a,
+.main-buddyFeed-activityMetadata .main-buddyFeed-usernameAndTimestamp a {
+  color: var(--spice-text) !important;
+}
+
+.main-buddyFeed-activityMetadata .main-buddyFeed-username a {
+  color: var(--spice-subtext) !important;
+}
+
+.main-avatar-avatar.main-avatar-withBadge:after {
+  background: var(--spice-extratext);
+}
+
+/* setting menu */
+
+input:checked~.x-533-toggle-indicatorWrapper {
+  background-color: rgba(var(--spice-rgb-button), .4) !important;
+}
+
+input:checked~.x-533-toggle-indicatorWrapper .x-533-toggle-indicator {
+  background-color: var(--spice-button) !important;
+}
+
+.x-533-toggle-indicator {
+  background: var(--spice-button) !important;
+}
+
+
+/* search page edits */
+
+input {
+  background-color: unset !important;
+  border-bottom: solid 2px var(--spice-text) !important;
+  border-radius: 0 !important;
+  color: var(--spice-text) !important;
+}
+
+.x-833-searchInput-searchInputSearchIcon {
+  color: var(--spice-text) !important;
+}
+
+.x-833-heroCategoryCard-heroTitle,
+.x-833-categoryCard-title {
+  color: var(--spice-main) !important;
+}
+
+
+/* menu and dropdown menus including the user menu */
+.main-type-mesto,
+.x-533-dropDown-dropDown {
+  color: var(--spice-text) !important;
+}
+
+.main-userWidget-box {
+  background-color: unset !important;
+  border-radius: 0px !important;
+  border-bottom: solid 2px var(--spice-text) !important;
+  color: var(--spice-text) !important;
+}
+
+.main-userWidget-box:focus,
+.main-userWidget-box:hover,
+.main-userWidget-box[data-context-menu-open=true] {
+  background-color: rgba(var(--spice-rgb-button), .5) !important;
+  border-radius: 10px !important;
+}
+
+.main-avatar-image {
+  padding-bottom: 8% !important;
+}
+
+/* card edits */
+
+.main-card-card a,
+.main-card-card button {
+  color: var(--spice-extratext);
+}
+
+.main-card-card:hover,
+.main-card-card[data-context-menu-open=true] {
+  background-color: rgba(var(--spice-rgb-sec-card), .3) !important;
+}
+
+.main-contextMenu-menu,
+.main-card-card:focus-within,
+
+.main-deletePlaylistDialog-container {
+  background-color: var(--spice-sec-card) !important;
+}
+
+
+/* mini player edits */
+
+.progress-bar--is-active .progress-bar__fg,
+:not(.no-focus-outline) .progress-bar:focus-within .progress-bar__fg {
+  background-color: var(--fg-color);
+}
+
+.main-shuffleButton-button.main-shuffleButton-on,
+.main-repeatButton-button.main-repeatButton-on {
+  color: var(--spice-button) !important;
+}
+
+.cover-art--with-auto-height {
+  border: solid var(--spice-sec-player) 5px !important;
+}
+
+.cover-art,
+.cover-art .cover-art-image {
+  border-radius: 10px;
+  background-color: var(--spice-sec-player) !important;
+}
+
+.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 feel free to create a pull request on my repo.
+
+*/
+
+
+/* .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;
+} */