Gruvified the old Onepunch theme.

I need to study for my semester, for real though. Why am I even here. (╥_╥)

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

@@ -1,27 +1,26 @@
 # Onepunch
-
 ## Screenshots
-
-![1](./1.png)
-![2](./2.png)
+![Home](./__Home.png)
+![Profile](./__Profile.png)
+![Playlist](./__Playlist.png)
 
 ## More
 
-#### Details
+#### About
+A simple gruvified spotify theme. 
 
-A project intended to redesign the Spotify app.As you know Saitama is only a "hero for fun", this is going to take a while even though he can finish an enemy with just one punch. I hope you'll like it! Suggestions will always help me to make it look better. So, feel free to drop your feedback.
+#### First Aid Kit  ¯\\_(ツ)\_/¯
 
-#### Changelogs
+- Tested on macOS only and pretty much everything worked. 
+- Just in case, if the icons/fonts doesn't change or broke(mostly for other untested platforms), then try to replace the `spoticon_xxx` font file in your `glue-resources` folder with this [spoticon_xxx](./assets/glue-resources/fonts/spoticon_cb67241fb50eae02396ee4647eb9a2e6.ttf) font file. 
+- In macOS it is `/Applications/Spotify.app/Contents/Resources/Apps/glue-resources/` I'm sure you can find your's ﾍ(･_|
 
-**I am not going to work on this anymore. If anyone wants to continue it or remake it, feel free to do it. Thank you.**
-
-Wondering what is changed, then check this [file](./changelog.md).
+#### On my list
+- [x] Gruvified that old Onepunch theme.
+- [x] Changed almost not a few icons.
+- [ ] Fix a few minor layout mismatch.
+- [ ] Modify a lot of icons.
+- [ ] Watch anime. 〜〜(／￣▽)／　〜ф
 
 #### Contact
-
-Click **[here](https://twitter.com/_okarin_001)** for _feedback_, _sharing new ideas_ and _reporting bugs_ only.  
-Format for bug reporting:  
-
-     Operating System(!important):
-
-     Description of issue:
+Go **[here](https://github.com/okarin001/Onepunch/issues)** and _check/create_ an issue in case you face any probelm. 

Onepunch/changelog.md

@@ -1,29 +0,0 @@
-**Theme Discontinued...**
-## Versions
-
-**v 0.9 beta**
-
--   [x] half baked release!!
--   [x] don't mind the "few" icon mismatches :D.
-
-**v 0.5 beta**
-
--   [x] Changed all possible icons.
--   [x] Fixed the color mismatch.
--   [x] A few optimizations.
-
-**v 0.2 beta**
-
--   [x] Fixed the two bars shown in now playing  
--   [x] An attempt to fix the logo not showing issue for platforms other than macos.  
--   [x] A few optimizations.
-
-**v 0.1 beta**
-
--   [x] Added the Spotify logo.  
--   [x] Fixed the friend activity bar.  
--   [x] Fixed text colors inside album and playlist.  
--   [x] Fixed overlapping of sidebar items.  
--   [x] A few optimizations.
-
-* * *

Onepunch/color.ini

@@ -1,19 +1,23 @@
 [Base]
-main_fg                               = 1DB954
-secondary_fg                          = DEDEDE
-main_bg                               = 111111
-main_bg_second                        = 282828
-sidebar_and_player_bg                 = 111111
-cover_overlay_and_shadow              = 212121
-indicator_fg_and_button_bg            = 1DB954
-pressing_fg                           = FF5C86
-slider_bg                             = 3F3C45
-sidebar_indicator_and_hover_button_bg = 1DC954
-scrollbar_fg_and_selected_row_bg      = 3B3B3B
-pressing_button_fg                    = DEDEDE
-pressing_button_bg                    = 383145
-selected_button                       = 1DB954
-miscellaneous_bg                      = 3F3C45
-miscellaneous_hover_bg                = 3B3B3B
-primary_text                          = FAFAFA
-preserve_1                            = FAFAFA
+main_fg                               = b8bb26
+main_bg                               = 1d2021
+secondary_fg                          = d5c4a1
+secondary_bg                          = b8bb26
+selected_button                       = 8ec07c
+pressing_fg                           = d3869b
+pressing_button_fg                    = d5c4a1
+pressing_button_bg                    = fabd2f
+sidebar_and_player_bg                 = 1d2021
+sidebar_indicator_and_hover_button_bg = 665c54
+cover_overlay_and_shadow              = 1d2021
+slider_bg                             = a89984
+scrollbar_fg_and_selected_row_bg      = 665c54
+active_control_fg                     = fbf2c7
+indicator_fg_and_button_bg            = 665c54
+miscellaneous_bg                      = fabd2f
+miscellaneous_hover_bg                = a89984
+preserve_1                            = fb4934
+main_bg_second                        = 1d2021
+primary_text                          = d5c4a1
+secondary_text                        = fabd2f
+extra_labels                          = d3869b

Onepunch/user.css

@@ -1,4 +1,3 @@
-:root {}
 /*
 *
 * RESIZING THE ICONS
@@ -10,16 +9,19 @@
 .view-player .player-controls-container .controls .button-play.button-play.playing:not(:hover):before {
   font-size: 38px !important;
 }
+
 /* pause button hover */
 .card.playing .view-player .player-controls-container .controls .button-play.button-play:hover:before,
 .tl-row.playing .view-player .player-controls-container .controls .button-play.button-play:hover:before,
 .view-player .player-controls-container .controls .button-play.button-play.playing:hover:before {
   font-size: 33px !important;
 }
+
 /* play button */
 .view-player .player-controls-container .controls .button-play.button-play:before {
   font-size: 33px !important;
 }
+
 /*
 *
 * OTHER UI CHANGES
@@ -38,24 +40,19 @@
   padding-top: 12px;
 }
 
-.RootlistItem--is-active,
 .SidebarListItem--is-active {
-  background   : #3b3b3b;
+  background: var(--modspotify_preserve_1);
   border-radius: 10px;
-  width        : 70%;
-  position     : relative;
-  right        : -30px;
+  width: 70%;
+  position: relative;
 }
 
 .SidebarListItem {
-  padding-left : 15px;
+  padding-left: 15px;
   padding-right: 40px;
-  right        : -30px;
-}
-
-.SidebarListItem {
+  margin-left: 30px;
   font-weight: var(--glue-font-weight-normal);
-  font-size  : 13px;
+  font-size: 13px;
 }
 
 .SidebarListItem--is-active:after {
@@ -66,51 +63,47 @@
 .SidebarListItemLink--is-highlighted:link,
 .SidebarListItemLink--is-highlighted:visited {
   font-weight: var(--glue-font-weight-bold);
+  color: var(--modspotify_main_bg);
 }
 
 html .SidebarList__title {
-  font-size     : 13px;
-  line-height   : 40px;
-  font-weight   : var(--glue-font-weight-black);
+  font-size: 13px;
+  line-height: 40px;
+  color: var(--modspotify_miscellaneous_bg);
+  font-weight: var(--glue-font-weight-black);
   text-transform: uppercase;
   letter-spacing: 0.16em;
 }
-/* the spotify logo and layout fix */
-.sidebar .sidebar-navbar {
-  background-image     : url("https://i.imgur.com/pFLYMRv.png");
-  background-repeat    : no-repeat;
-  background-size      : 150px;
-  background-position-x: 25px;
-}
-
-#view-buddy-list {
-  padding-top: 50px;
-}
-
-.LeftSidebar {
-  margin-top: 45px;
-}
 
 .LeftSidebar__section {
   margin-bottom: 20px;
 }
 
-/* .resizer {
-  display: none !important;
-} */
 /* playlist items */
 .RootlistItem {
-  padding-left : 30px;
-  padding-right: 30px;
+  padding-left: 35px;
+}
+
+.RootlistItem--is-active {
+  background: var(--modspotify_secondary_bg);
+  border-radius: 10px;
+  width: 70%;
 }
 
 .RootlistItem--is-active:before {
   display: none;
 }
+
+.RootlistItemFolder__name,
+.RootlistItemFolder__arrow {
+  color: var(--modspotify_preserve_1);
+}
+
 /*for now I have hidden the new playlist button but I've an idea for it and will add in future*/
 .LeftSidebarNewPlaylistButton__button {
   display: none !important;
 }
+
 /* HOME PAGE EDITS */
 /*Round corner cover image*/
 .Card:not(.Card--artist) .Card__image,
@@ -119,64 +112,71 @@ html .SidebarList__title {
 .card-image-content-wrapper,
 .card-placeholder-wrapper {
   border-radius: 10px !important;
-  overflow     : hidden !important;
+  overflow: hidden !important;
 }
 
-.Card__info-title a,
 .GlueSectionDivider__title {
-  line-height   : 30px;
-  letter-spacing: 0;
-  color         : var(--modspotify_primary_text);
+  color: var(--modspotify_secondary_text);
 }
+
+.Card__info-title a {
+  line-height: 30px;
+  color: var(--modspotify_extra_labels);
+}
+
 /* CARD INFO DETAILS EDIT */
 /*.Card__info-subtitle-description, .Card__info-subtitle-metadata{
 		display:none !important;
 	}*/
 .Button--style-icon:not(.Button--is-drop-target-active) {
   height: 30px !important;
-  width : 30px !important;
+  width: 30px !important;
 }
+
 /*scroll bar edits*/
 /*Thinner scrollbar*/
 ::-webkit-scrollbar {
-  height          : 6px !important;
-  width           : 6px !important;
+  height: 6px !important;
+  width: 6px !important;
   background-color: transparent;
 }
+
 /*Hide top and bottom buttons of scrollbar */
 ::-webkit-scrollbar-button {
   display: none !important;
 }
+
 /* PLAY AREA EDITS */
 /*main frame*/
 #view-player {
-  padding-left  : 10px;
-  padding-right : 10px;
+  padding-left: 10px;
+  padding-right: 10px;
   padding-bottom: 10px;
 }
 
 .view-player,
 body.remotebar .view-player .player-bar-wrapper {
-  height       : 85px !important;
+  height: 85px !important;
   border-radius: 20px !important;
-  background   : var(--modspotify_main_bg_second) !important;
-  position     : relative;
-  padding-left : 2px !important;
+  background: var(--modspotify_main_bg_second) !important;
+  position: relative;
+  padding-left: 2px !important;
   padding-right: 2px !important;
 }
+
 /*buttons and play progress*/
 .view-player .player-controls-container .controls .button-play {
-  height       : 35px !important;
-  width        : 35px !important;
+  height: 35px !important;
+  width: 35px !important;
   border-radius: 40px !important;
-  box-shadow   : 0 0 0 0 !important;
-  transition   : none 0.3s cubic-bezier(.3, 0, .7, 1);
-  overflow     : visible !important;
+  box-shadow: 0 0 0 0 !important;
+  transition: none 0.3s cubic-bezier(.3, 0, .7, 1);
+  overflow: visible !important;
 }
 
 .view-player .player-controls-container .controls .button-play:before {
   padding-left: 0 !important;
-  padding-top : 1px !important;
+  padding-top: 1px !important;
 }
 
 .view-player .player-controls-container .controls {
@@ -196,9 +196,10 @@ body.remotebar .view-player .player-bar-wrapper {
 }
 
 .view-player .text-container .text-item-container .text-item .scroll-text-container:after {
-  background: #282828 !important;
-  right     : 0;
+  background: var(--modspotify_main_bg_second) !important;
+  right: 0;
 }
+
 /* BROWSE TAB EDITS */
 /* Add round corner for Gerne and Mood cards */
 .gc-image,
@@ -209,10 +210,11 @@ body.remotebar .view-player .player-bar-wrapper {
 .gc-label-text {
   color: var(--modspotify_primary_text);
 }
+
 /* FULL SCREEN MODE EDITS */
 #view-player .album-art .album-art__image {
   border-radius: 30px !important;
-  box-shadow   : 0 10px 70px rgba(var(--modspotify_rgb_cover_overlay_and_shadow), .5) !important;
+  box-shadow: 0 10px 70px rgba(var(--modspotify_rgb_cover_overlay_and_shadow), .5) !important;
 }
 
 #view-player .album-art .album-art__image .card-image-content-wrapper,
@@ -222,7 +224,7 @@ body.remotebar .view-player .player-bar-wrapper {
 
 #video-player .album-art__foreground {
   flex-direction: row;
-  text-align    : left;
+  text-align: left;
 }
 
 #video-player .album-art__background {
@@ -231,44 +233,46 @@ body.remotebar .view-player .player-bar-wrapper {
 
 #video-player .album-art__track-details {
   padding-left: 40px;
-  line-height : initial;
+  line-height: initial;
 }
 
 #video-player .album-art__track-title {
-  font-size  : 80px;
-  margin-top : 0;
+  font-size: 80px;
+  margin-top: 0;
   line-height: initial;
 }
 
 #video-player .album-art__artist-name {
-  font-size  : 50px;
-  margin-top : 0;
+  font-size: 50px;
+  margin-top: 0;
   line-height: initial;
 }
+
 /* PROGRESS BAR EDITS */
 .progress-container .inner {
-  border-radius   : 50px !important;
+  border-radius: 50px !important;
   background-color: var(--modspotify_main_fg) !important;
 }
 
 .progress-bar,
 .progress-bar .inner {
-  background   : #3b3b3b;
+  background: #3b3b3b;
   border-radius: 100px;
 }
 
 .progress-container .inner,
 .progress-container .progress-bar {
   border-radius: 100px !important;
-  height       : 4.5px;
+  height: 4.5px;
 }
 
 .progress-container {
   border-radius: 100px !important;
-  position     : absolute !important;
-  right        : 25%;
-  width        : 50% !important;
+  position: absolute !important;
+  right: 25%;
+  width: 50% !important;
 }
+
 /* INSIDE THE ALBUM AND PLAYLIST EDITS */
 /*album edits*/
 .Button__alt-text,
@@ -283,6 +287,7 @@ body.remotebar .view-player .player-bar-wrapper {
 .TableCell--is-emphasized {
   color: var(--modspotify_primary_text) !important;
 }
+
 /*playlist edits*/
 .b-add-text,
 .b-added-text,
@@ -295,20 +300,43 @@ body.remotebar .view-player .player-bar-wrapper {
 .tl-highlight {
   color: var(--modspotify_primary_text) !important;
 }
+
+
+/* isidde profile page */
+.section-divider>*,
+.section-divider .section-auxiliary a {
+  color: var(--modspotify_preserve_1);
+}
+
+.card-info-title a {
+  color: var(--modspotify_secondary_text);
+}
+
+.nav>li.active>a {
+  color: var(--modspotify_main_bg);
+  background: var(--modspotify_main_fg);
+  border-radius: 4px;
+  line-height: 33px;
+}
+
+
+
+
+
+
 /*
 *
 * EXPERIMENTS
 *
-* MIGHT CHANGE IN FUTURE RELEASE
 */
 /*search bar edits*/
 .SearchInput__input {
-  color           : var(--modspotify_secondary_fg) !important;
+  color: var(--modspotify_secondary_fg) !important;
   background-color: var(--modspotify_main_bg) !important;
-  border-style    : solid !important;
-  border-width    : 1px !important;
-  border-radius   : 0 !important;
-  border-color    : var(--modspotify_sidebar_and_player_bg) !important;
+  border-style: solid !important;
+  border-width: 1px !important;
+  border-radius: 0 !important;
+  border-color: var(--modspotify_sidebar_and_player_bg) !important;
 }
 
 .SearchInput__searchIcon {
@@ -317,31 +345,34 @@ body.remotebar .view-player .player-bar-wrapper {
 
 .content-top-bar__search-input {
   max-width: unset !important;
-  height   : auto !important;
+  height: auto !important;
 }
+
 /*change header colors*/
 .GlueHeader__background-color {
-  border-color    : var(--modspotify_sidebar_and_player_bg) !important;
+  border-color: var(--modspotify_sidebar_and_player_bg) !important;
   background-color: var(--modspotify_sidebar_and_player_bg) !important;
   background-image: unset !important;
 }
 
 .Header__background-color {
-  border-color    : var(--modspotify_sidebar_and_player_bg) !important;
+  border-color: var(--modspotify_sidebar_and_player_bg) !important;
   background-color: var(--modspotify_sidebar_and_player_bg) !important;
   background-image: unset !important;
 }
+
 /*scrubbing bar ball thingy*/
 .handle {
   background: var(--modspotify_indicator_fg_and_button_bg) !important;
-  border    : 3px solid var(--modspotify_indicator_fg_and_button_bg) !important;
+  border: 3px solid var(--modspotify_indicator_fg_and_button_bg) !important;
 }
 
 .progress-bar-wrapper.progress-bar-wrapper--ltr.handle {
   background: unset !important;
-  border    : unset !important;
+  border: unset !important;
 }
+
 /*hide a few elements*/
 .view-player .remote-playback-bar {
   display: none !important;
-}
+}