This repository has been archived by the owner on May 4, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
361 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| [Variables] | ||
| Main_FG =00FF9C | ||
| Secondary_FG =DEDEDE | ||
| Main_BG =2E2837 | ||
| Sidebar_And_Player_BG =2E2837 | ||
| Cover_Overlay_And_Shadow =000000 | ||
| Indicator_FG_And_Button_BG =00FF9C | ||
| Pressing_FG = FF5C86 | ||
| Slider_BG =3F3C45 | ||
| Sidebar_Indicator_And_Hover_Button_BG =00BF76 | ||
| Scrollbar_FG_And_Selected_Row_BG =615670 | ||
| Pressing_Button_FG =DEDEDE | ||
| Pressing_Button_BG =383145 | ||
| Selected_Button =00BF76 | ||
| Miscellaneous_BG =3F3C45 | ||
| Miscellaneous_Hover_BG =383145 | ||
| Preserve_1 =FFFFFF |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,344 @@ | ||
| /*Round corner cover image*/ | ||
| .card-image, .card-placeholder-wrapper, .card-image-content-wrapper { | ||
| border-radius: 10px !important; | ||
| overflow: hidden !important | ||
| } | ||
|
|
||
| /*Hide some annoying elements like profile name and pic, upgrade button and device connect bar at bottom, new playlist button*/ | ||
| .profile-menu-wrapper .profile, | ||
| .upgrade-button, | ||
| .view-player .remote-playback-bar, | ||
| .NewPlaylistButton { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /*Make top bar a draggable zone to change window position*/ | ||
| .zlink-app-header { | ||
| height: 70px !important; | ||
| padding-top: 20px !important; | ||
| -webkit-app-region: drag !important; | ||
| padding-left: 40px !important; | ||
| padding-right: 40px !important; | ||
| right: 0 !important; | ||
| } | ||
|
|
||
| /*Force player bar to has fixed height*/ | ||
| body.remotebar .view-player .player-bar-wrapper { | ||
| height: 87px !important; | ||
| } | ||
|
|
||
| /*Exclude these elements from draggable property because it stops them from clickable*/ | ||
| .profile-items-container, | ||
| .profile | ||
| { | ||
| -webkit-app-region: no-drag !important; | ||
| } | ||
|
|
||
| /*Thinner scrollbar*/ | ||
| .scrollbar-style-visible-windows ::-webkit-scrollbar { | ||
| height: 6px !important; | ||
| width: 6px !important; | ||
| } | ||
|
|
||
| /*Round corner scrollbar*/ | ||
| .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb { | ||
| border-radius: 3px !important; | ||
| } | ||
|
|
||
| /*Hide top and bottom buttons of scrollbar */ | ||
| /*who uses those, lol*/ | ||
| .scrollbar-style-visible-windows ::-webkit-scrollbar-button { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /*Hide cover image overlay*/ | ||
| .card-overlay { | ||
| visibility: hidden !important; | ||
| } | ||
|
|
||
| /*Lift up cover when hovering on it*/ | ||
| .card-image-content-wrapper { | ||
| transition-property: transform box-shadow !important; | ||
| transition-duration: 1s !important; | ||
| transition-timing-function: cubic-bezier(.3,0,0,1) !important; | ||
| box-shadow: 0 5px 20px rgba(0,0,0,0.3); | ||
| } | ||
|
|
||
| .card-image-hit-area:not(.no-hover):hover .card-image-content-wrapper { | ||
| transform: translateY(-10px); | ||
| box-shadow: 0 15px 30px rgba(0,0,0,0.3); | ||
| } | ||
|
|
||
| .card-image-hit-area .card-button-add, | ||
| .card-image-hit-area .card-button-play, | ||
| .card-image-hit-area .card-button-more { | ||
| transition-property: transform, opacity !important; | ||
| transition-duration: 1s !important; | ||
| transition-timing-function: cubic-bezier(.3,0,0,1) !important; | ||
| opacity: 0 !important; | ||
| } | ||
| .card-image-hit-area:not(.no-hover):hover .card-button-add, | ||
| .card-image-hit-area:not(.no-hover):hover .card-button-play, | ||
| .card-image-hit-area:not(.no-hover):hover .card-button-more { | ||
| opacity: 1 !important; | ||
| transform: translateY(-10px); | ||
| } | ||
|
|
||
| .card-placeholder-wrapper { | ||
| background: transparent !important; | ||
| } | ||
|
|
||
| /*Spice up search input background*/ | ||
| .SearchInput__input { | ||
| background-color: rgba(modspotify_rgb_scrollbar_fg_and_selected_row_bg, 0.5) !important; | ||
| } | ||
|
|
||
| /*Fixed player bar height and add cool shadow under*/ | ||
| .view-player { | ||
| height: 87px !important; | ||
| box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important; | ||
| } | ||
|
|
||
| /* | ||
| Make cover image in player bar bigger and change position it abit | ||
| Also padding tilte and artist to correct position | ||
| */ | ||
| .view-player .now-playing, | ||
| .view-player .now-playing-container, | ||
| .view-player .now-playing .cover-image-container { | ||
| height: 100% !important; | ||
| overflow: visible !important; | ||
| } | ||
|
|
||
| .view-player .now-playing .cover-image-container { | ||
| position: absolute !important; | ||
| overflow: visible !important; | ||
| bottom: 55px !important; | ||
| left: -70px !important; | ||
| } | ||
| .view-player .now-playing .cover-image-container .cover-image { | ||
| width: 120px !important; | ||
| height: 120px !important; | ||
| position: absolute !important; | ||
| box-shadow: 0 5px 10px rgba(0,0,0,0.5) !important; | ||
| } | ||
|
|
||
| .view-player .now-playing-container .caption { | ||
| width: 400px !important; | ||
| height: 100% !important; | ||
| align-content: center !important; | ||
| padding-left: 70px !important; | ||
| } | ||
|
|
||
| .view-player .now-playing-container { | ||
| z-index: 9999 !important; | ||
| } | ||
|
|
||
| /* | ||
| Minimize left sidebar | ||
| Expand when hovering on windows's left edge | ||
| */ | ||
| .sidebar { | ||
| /*Widen the hover zone here*/ | ||
| min-width: 5px !important; | ||
| width: 5px !important; | ||
| transition-property: width !important; | ||
| transition-duration: .5s !important; | ||
| transition-timing-function: cubic-bezier(.3,0,0,1) !important; | ||
| } | ||
|
|
||
| /*Expanded sidebar width*/ | ||
| .sidebar:hover { | ||
| width: 200px !important; | ||
| } | ||
|
|
||
| .sidebar .sidebar-navbar.sidebar-scroll-element { | ||
| padding-top: 30px !important; | ||
| padding-bottom: 100px !important; | ||
| } | ||
|
|
||
| .sidebar:hover .sidebar-navbar.sidebar-scroll-element { | ||
| opacity: 1!important; | ||
| } | ||
|
|
||
| .sidebar-navbar.sidebar-scroll-element { | ||
| opacity: 0 !important; | ||
| transition-property: opacity !important; | ||
| transition-duration: .5s !important; | ||
| transition-timing-function: cubic-bezier(.3,0,0,1) !important; | ||
| } | ||
|
|
||
| .sidebar .sidebar-navbar.sidebar-scroll-element { | ||
| background-color: #modspotify_sidebar_and_player_bg !important; | ||
| } | ||
|
|
||
| .view-player .player-controls-container, | ||
| .view-player .player-controls-container .controls { | ||
| overflow: visible !important; | ||
| } | ||
|
|
||
| .view-player .player-controls-container .controls .button-play{ | ||
| height:50px !important; | ||
| border-radius:50px !important; | ||
| background: transparent !important; | ||
| color:#modspotify_hover_selection !important; | ||
| box-shadow:0 0 0 0 !important; | ||
| width:50px !important; | ||
| overflow: visible !important; | ||
| box-shadow: 0 5px 15px rgba(0,0,0,0.7) !important; | ||
| transition:none 0.3s cubic-bezier(.3,0,.7,1); | ||
| } | ||
|
|
||
| .view-player .player-controls-container .controls .button-play:before{ | ||
| font-size:18px !important; | ||
| padding-left: 16px !important; | ||
| padding-top: 9px !important; | ||
| } | ||
|
|
||
|
|
||
| .view-player .player-controls-container { | ||
| position: absolute !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .view-player .player-controls-container .controls { | ||
| width: 100% !important; | ||
| height: 100% !important; | ||
| align-items: center !important; | ||
| margin-top : 0px !important; | ||
| } | ||
|
|
||
| /* | ||
| Hide the song duration and elapsed text. I dont know where to put those so I just hide them | ||
| */ | ||
| .view-player .player-controls-container .progress-container .elapsed, | ||
| .view-player .player-controls-container .progress-container .remaining { | ||
| display: none !important; | ||
| } | ||
|
|
||
| /* | ||
| Move progress bar to bottom of window | ||
| */ | ||
| .view-player .player-controls-container .progress-container { | ||
| position: absolute !important; | ||
| width: 100% !important; | ||
| height: 100% !important; | ||
| bottom: (-87/2px) !important; | ||
| margin : 0 0 0 0 !important; | ||
| } | ||
|
|
||
| .view-player .player-controls-container .progress-container .progress-bar { | ||
| margin-top: -6px !important; | ||
| top: 100% !important; | ||
| } | ||
|
|
||
| .view-player .player-controls-container .progress-container .progress-bar .inner { | ||
| top: 100% !important; | ||
| margin-top: -4px !important; | ||
| border-radius: 0 2px 2px 0 !important; | ||
| } | ||
|
|
||
|
|
||
| /* | ||
| Collage of 3 album covers is usually seen in Browse and Chart. | ||
| */ | ||
| .card-puff__image-wrapper, | ||
| .card-puff__info-container, | ||
| .card-puff__card-image, | ||
| .gc-image-container, | ||
| .gc-image { | ||
| border-radius: 10px !important; | ||
| } | ||
|
|
||
| .card-puff__image-wrapper { | ||
| overflow: visible; | ||
| } | ||
|
|
||
| .card-puff__card-image { | ||
| box-shadow: 5px 0 30px rgba(0,0,0,0.7); | ||
| } | ||
|
|
||
| .card-puff__title-container { | ||
| background-color: rgba(0,0,0,0) !important; | ||
| } | ||
|
|
||
| .card-puff.pressed .card-puff__image-wrapper, | ||
| .card-puff.pressed .card-puff__info-container { | ||
| opacity: 0.7 !important; | ||
| } | ||
|
|
||
| .card-puff__title { | ||
| padding: 5px 10px 5px 10px !important; | ||
| background-color: rgba(modspotify_rgb_cover_overlay_and_shadow,0.8) !important; | ||
| border-radius: 5px; | ||
| } | ||
| /* | ||
| We use round corner on cover so they look weird in original | ||
| form, so I move last cover to the right 20px and first one to the left 20px | ||
| */ | ||
| .card-puff__card-image:nth-child(1) { | ||
| right: 20px; | ||
| box-shadow: 0 0 0 0 !important; | ||
| } | ||
|
|
||
| .card-puff__card-image:nth-child(3) { | ||
| left: 20px; | ||
| } | ||
|
|
||
| .grid-overlay-label { | ||
| top: 140px !important; | ||
| } | ||
|
|
||
| /**/ | ||
| .glue-page-header__background-color { | ||
| background-image: none !important; | ||
| background: #modspotify_main_bg; | ||
| } | ||
|
|
||
| .glue-page-header__background-overlay { | ||
| background-color: transparent !important; | ||
| } | ||
|
|
||
| .glue-page-header__sticky { | ||
| padding-top: 60px !important; | ||
| } | ||
|
|
||
| /* | ||
| Remove those cringy description and | ||
| meaningless followers number | ||
| */ | ||
| .card-info-subtitle-description, | ||
| .card-info-subtitle-metadata { | ||
| display: none !important; | ||
| } | ||
|
|
||
| .carousel .card-info-wrapper { | ||
| height: 30px !important; | ||
| } | ||
|
|
||
| /* | ||
| In top of Browse usually has bunch of Playlist or Album cards, | ||
| and they has .carousel as a wrapper and it hides anything that | ||
| overflows from its zone, aka our shadow and lifting animation. | ||
| */ | ||
| .carousel { | ||
| overflow: visible !important; | ||
| } | ||
|
|
||
| /* | ||
| Button with text Play | ||
| */ | ||
| .button.button-green { | ||
| color: #modspotify_main_bg !important; | ||
| } | ||
|
|
||
| /* | ||
| Change text color in playlist | ||
| */ | ||
| .tl-explicit .label, | ||
| .tl-premium .label, | ||
| .tl-cell:not(.tl-number), | ||
| .tl-cell a:link, | ||
| .tl-highlight { | ||
| color: #modspotify_secondary_fg; | ||
| } |