feat(Flow): add Flow theme (#753)

* created the folder for the new branch * add default color.ini * new theme add color * vertical playber * button * change hover color * button change * update new version fix * like button * gradient background for playbar * hovering of playlist * some modifications * change background * playlist color * playlist color * playlist color * playlist color * small errors * playbar shaddow error fixed * adjust playbar width * set some variables names * Added navbar edits * remove remaining time fr window * remove remaining time fr window * add an variable name * solve shadow * shadow color * add color scheme and other details * add three more color schemes * add ocean and add did some clean ups * delete new theme * change the theme name to Flow * add screenshots * add readme * add license * Delete LICENSE * Create LICENSE * update main readme * add license * Update LICENSE * modefied license and deleted .idea Co-authored-by: Yu Sung Lee <ysldevelop@gmail.com> Co-authored-by: Ian Liao <Ian@10-16-6-138.dynapool.wireless.nyu.edu> Co-authored-by: alexcasieri <ajc880@nyu.edu> Co-authored-by: Ian Liao <Ian@10-16-153-42.dynapool.wireless.nyu.edu> Co-authored-by: Ian Liao <55819364+ian-Liaozy@users.noreply.github.com>
2024-11-23 03:12:53 +01:00 · 2022-05-05 16:35:16 -04:00 · 2022-05-05 16:35:16 -04:00 · e2d7b4dd4b
commit e2d7b4dd4b
parent 95fd6ed8e9
10 changed files with 454 additions and 1 deletions
--- a/Flow/LICENSE
+++ b/Flow/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 @Ruixi-Zhang, @yslDevelop, @ian-Liaozy, @alexcasieri30
+
+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.
--- a/Flow/README.md
+++ b/Flow/README.md
@ -0,0 +1,25 @@
+# Flow
+
+## Screenshots
+
+### Ocean
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/ocean.png" alt="img"> 
+
+
+### Pink
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/pink.png" alt="img"> 
+
+
+### Silver
+<img src="https://github.com/ossd-sp22/spicetify-themes/blob/newTheme/Flow/screenshots/silver.png" alt="img"> 
+
+
+### Violet
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/violet.png" alt="img"> 
+
+## Author
+Made by:
+* https://github.com/Ruixi-Zhang
+* https://github.com/yslDevelop
+* https://github.com/ian-Liaozy
+* https://github.com/alexcasieri30
--- a/Flow/color.ini
+++ b/Flow/color.ini
@ -0,0 +1,80 @@
+[Pink]
+text               = 8f7878
+gradientTop        = ebaf98
+gradientBottom     = f5d4b7
+main               = ffe8d9
+subtext            = a9a9a9
+button-active      = 8f7878
+button             = ebaf98
+sidebar            = f5d4b7
+player             = ebaf98
+card-background    = e6cfd7
+shadow             = d9a28d
+notification       = f5d4b7
+notification-error = f5d4b7
+card-hover         = ffece4
+
+[Green]
+text               = 516847
+gradientTop        = 9bb78e
+gradientBottom     = b7cfac
+main               = e8f2e4
+subtext            = 797a78
+button-active      = 516847
+button             = 7d9971
+sidebar            = b7cfac
+player             = 9bb78e
+card-background    = e8ede6
+shadow             = 7d9971
+notification       = b7cfac
+notification-error = b7cfac
+card-hover         = ecf8e8
+
+[Silver]
+text               = 4c4d4f
+gradientTop        = b7bbbd
+gradientBottom     = d3d8db
+main               = d3d8db
+subtext            = 8d9092
+button-active      = a8acad
+button             = 8d9092
+sidebar            = ffffff
+player             = b7bbbd
+card-background    = e8ede6
+shadow             = b7bbbd
+notification       = ffffff
+notification-error = ffffff
+card-hover         = e0e4e4
+
+
+[Violet]
+text               = 78658b
+gradientTop        = b9adc4
+gradientBottom     = d4cade
+main               = e5dfeb
+subtext            = 8e7c9a
+button-active      = a090b0
+button             = 516847
+sidebar            = e8ede6
+player             = b9adc4
+card-background    = e8ede6
+shadow             = 847096
+notification       = b9adc4
+notification-error = b9adc4
+card-hover         = f0e4ec
+
+[Ocean]
+text               = 62828a
+gradientTop        = 9cb9ba
+gradientBottom     = c1d5d6
+main               = cadbdb
+subtext            = 7aa1a2
+button-active      = 9cb9ba
+button             = c1d5d6
+sidebar            = c1d5d6
+player             = 9cb9ba
+card-background    = e1ebeb
+shadow             = 6f9599
+notification       = cadbdb
+notification-error = c1d5d6
+card-hover         = d8e4e4
--- a/Flow/screenshots/ocean.png
+++ b/Flow/screenshots/ocean.png
--- a/Flow/screenshots/pink.png
+++ b/Flow/screenshots/pink.png
--- a/Flow/screenshots/silver.png
+++ b/Flow/screenshots/silver.png
--- a/Flow/screenshots/violet.png
+++ b/Flow/screenshots/violet.png
--- a/Flow/user.css
+++ b/Flow/user.css
@ -0,0 +1,309 @@
+:root {
+    --gradient-colors: var(--spice-gradienttop),var(--spice-gradientbottom);
+}
+
+.Re403AJffPPuZmX7LRJj {
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.VNztd{
+	color: rgb(100,100,100);
+}
+.main-rootlist-rootlistItem:hover{
+	background-color: var(--spice-card-background);
+}
+.main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:focus,
+.main-navBar-navBarLinkActive:hover, .logo{
+	background-color: var(--spice-card-background);
+}
+
+.main-navBar-navBar{
+    background-image: linear-gradient(var(--gradient-colors));
+}
+
+.vUzb9hvfXJN11OcnaszM .Re403AJffPPuZmX7LRJj {
+    font-size: 30px;
+    font-weight: 700;
+    letter-spacing: -.04em;
+    line-height: 40px;
+}
+
+/* category sidebar */
+
+.EKdvOmPl7kNCDg_yuma8, .AEfhRyqGa3vzQrgfdwWE .Re403AJffPPuZmX7LRJj {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: -.04em;
+    line-height: 40px;
+    /*color: var(--lyrics-color-background);*/
+}
+/* buttons */
+.main-navBar-navBarLink {
+    border-radius: var(--border-radius-2);
+    color: var(--spice-text);
+}
+.main-addButton-active, .main-addButton-active:focus, .main-addButton-active:hover {
+    color: var(--spice-player);
+}
+/* menus */
+
+.Z35BWOA10YGn5uc9YgAp {
+    background-image: linear-gradient(var(--gradient-colors));
+    border-radius: 10px;
+}
+
+.main-card-card {
+    background-image: linear-gradient(var(--gradient-colors));
+    border-radius: 10px;
+}
+
+.main-card-card:hover {
+    background-color: var(--spice-card-hover);
+    border-radius: 10px;
+}
+
+.main-contextMenu-menuItemButton, .main-userWidget-dropDownMenuItemButton {
+    /*border-radius: var(--border-radius-2);*/
+    color: var(--spice-text);
+    height: 32px;
+    padding-left: 8px;
+}
+.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+    background: transparent;
+    -webkit-box-shadow: 0 -1px 0 0 var(--spice-player);
+    box-shadow: 0 -1px 0 0 var(--spice-player);
+}
+.main-trackList-trackListHeaderStuck .main-trackList-trackListHeaderRow {
+    border-bottom: 1px solid transparent;
+    background: var(--spice-main);
+}
+.G1W6k59msDX3wNFCJ1mb.X1PI4ZcmJchyHhBzbrVI {
+    background: var(--spice-button);
+}
+.Fz5_rAxpenrV3rKWvEE0 {
+    background: -webkit-gradient(linear,left top,left bottom,from(var(--spice-player)),to(var(--spice-main)));
+    background: linear-gradient(var(--spice-button),var(--spice-main));
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 32px;
+}
+.Root__now-playing-bar {
+    background-color: var(--spice-player);
+    grid-area: now-playing-bar;
+    width: 200px;
+    z-index: 4;
+}
+.M_Sdhr1fQomXfFpJhlAV.y1_VPBbLK5eyOtpider1 {
+    background-color: var(--spice-gradientTop);
+    border-bottom: 1px solid rgba(255,255,255,.1);
+}
+#spicetify-home-config button:disabled, #spicetify-sidebar-config button:disabled {
+    /*background-color: var(--spice-button-disabled) !important;*/
+    color: var(--spice-text) !important;
+}
+
+/* remove gradients */
+.main-home-homeHeader, .main-actionBarBackground-background {
+    background-image: none;
+}
+.main-actionBarBackground-background, .main-home-homeHeader, .main-topBar-background, .main-topBar-overlay, .x-entityHeader-overlay, .x-actionBarBackground-background, ._UFTK833WfTNGb4agRTd, .Ic3iDUCnC09k55peZBfC {
+    background-color: var(--spice-main) !important;
+}
+.x-actionBarBackground-background, .x-entityHeader-overlay, .Ic3iDUCnC09k55peZBfC, ._UFTK833WfTNGb4agRTd {
+    background-image: none !important;
+}
+.main-entityHeader-backgroundColor {
+    background: var(--spice-main);
+}
+.player-controls__buttons--new-icons {
+    gap: 16px;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.ythYrlFSBm1P_ltHc8e1, .aUdGtzUFX8HhUq5AdHcE, .main-buddyFeed-buddyFeedRoot {
+    display: none;
+}
+
+.Root__top-container {
+    display: grid;
+    grid-template-areas: "nav-bar         main-view       now-playing-bar";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+    min-height: 100%;
+    position: relative;
+    width: 100%;
+}
+
+
+player-controls__left {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    flex-direction: column;
+}
+
+.main-nowPlayingBar-container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    background-color: var(--spice-player);
+    border-top: 1px solid var(--spice-card);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.player-controls__left,
+.player-controls__right {
+
+    flex-direction: column;
+}
+
+.playback-bar {
+    flex-direction: column;
+}
+
+.playback-bar__progress-time-elapsed {
+    min-width: 0px;
+}
+
+
+.main-playbackBarRemainingTime-container {
+    min-width: 0px;
+}
+
+.main-nowPlayingBar-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mvRQWscG4lmAxOs4neBL,
+.main-nowPlayingBar-nowPlayingBar {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    align-items: center;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    height: 100%;
+    background-image: linear-gradient(var(--gradient-colors));
+}
+
+.main-nowPlayingBar-right,
+.main-pageErrorTemplate-errorBody {
+    -webkit-box-direction: normal;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    margin-bottom: 10px;
+    padding: 10px;
+}
+
+/*button*/
+.encore-dark-theme .encore-bright-accent-set {
+    --background-base: var(--spice-button-active);
+    --background-highlight: var(--spice-player);
+    --background-press: var(--spice-player);
+    --decorative-subdued: var(--spice-player);
+}
+
+/*tracklist*/
+.main-trackList-trackListRow {
+    border-radius: var(--border-radius-2);
+}
+.main-trackList-trackListRow:hover {
+    background-color: var(--spice-card-background);
+
+}
+.prog-tooltip{
+    display:none;
+}
+
+.main-rootlist-rootlistDividerContainer {
+    position: relative;
+    /*color: var(--spice-gradientTop)*/
+    display: none;
+}
+
+.progress-bar {
+    width: 150px;
+}
+
+.playback-progressbar {
+    width: 150px;
+}
+
+.main-nowPlayingBar-right{
+    transform:  translate(0px, -80px) rotate(90deg);
+}
+
+.volume-bar{
+    width: 0px;
+    height: 0px;
+}
+
+.ExtraControls > div {
+    transform: rotate(-90deg);
+}
+
+.ExtraControls > button {
+    transform: rotate(-90deg);
+}
+
+
+.volume-bar > .playback-progressbar {
+    width: 75px;
+    transform: translate(-40px, 0px);
+}
+
+.volume-bar > button {
+    transform: translate(-40px, 0px);
+}
+
+.main-nowPlayingBar-left {
+    transform: translate(0px, 150%)rotate(90deg);
+}
+.main-nowPlayingWidget-nowPlaying > div{
+    transform: rotate(-90deg);
+}
+.main-nowPlayingWidget-nowPlaying > button{
+    transform: rotate(-90deg);
+}
+
+.main-trackInfo-container {
+    margin: -10px -10px -10px -10px;
+}
+
+.main-nowPlayingWidget-nowPlaying > button{
+    color: var(--spice-text)
+}
+
+.main-nowPlayingBar-center{
+    transform: translate(0px, -10px);
+}
--- a/2
+++ b/2
@ -18,4 +18,4 @@ 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.
+SOFTWARE.
--- a/THEMES.md
+++ b/THEMES.md
@ -160,3 +160,21 @@ Here you can find a preview of all the themes. Some of them may have different c
 | ![Playlists](Ziro/screenshots/rose-pine-moon.jpg) | ![Playlists](Ziro/screenshots/rose-pine-dawn.jpg) |
 | :-----------------------------------------------: | :-----------------------------------------------: |
 |                       Moon                        |                       Dawn                        |
+
+
+## Flow
+
+#### Ocean
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/ocean.png" alt="img"> 
+
+
+#### Pink
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/pink.png" alt="img"> 
+
+
+#### Silver
+<img src="https://github.com/ossd-sp22/spicetify-themes/blob/newTheme/Flow/screenshots/silver.png" alt="img"> 
+
+
+#### Violet
+<img src="https://raw.githubusercontent.com/ossd-sp22/spicetify-themes/newTheme/Flow/screenshots/violet.png" alt="img">