Merge pull request #4 from mattchrlw/master

Add Dracula
This commit is contained in:
morpheusthewhite 2019-08-29 07:48:07 +02:00 committed by GitHub
commit 62dbeb6c55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 698 additions and 0 deletions

11
Dracula/README.md Normal file
View File

@ -0,0 +1,11 @@
# Dracula
## Screenshots
![Browse](https://i.imgur.com/MAjsCVm.png)
![Album](https://i.imgur.com/z7thIss.png)
![Playlist](https://i.imgur.com/OXm7N6y.png)
## More (note for Windows and Linux users)
The font "Helvetica Neue" is used by default, which isn't available on typical Windows and Linux machines. It will be replaced by Arial on Windows machines, and sans-serif on Linux machines. If you don't like this, replace "Helvetica Neue" with the font of your choice in the `user.css` file. After making any changes, run `spicetify apply`.

36
Dracula/color.ini Normal file
View File

@ -0,0 +1,36 @@
[Base]
; Pink on White background
;main_fg =FE6F61
;secondary_fg =3D3D3D
;main_bg =FAFAFA
;sidebar_and_player_bg =FAFAFA
;cover_overlay_and_shadow =000000
;indicator_fg_and_button_bg =FE6F61
;pressing_fg = FF5C86
;slider_bg =FAFAFA
;sidebar_indicator_and_hover_button_bg =FF6F61
;scrollbar_fg_and_selected_row_bg =EBEBEB
;pressing_button_fg =DEDEDE
;pressing_button_bg =383145
;selected_button =FE6F61
;miscellaneous_bg =3F3C45
;miscellaneous_hover_bg =383145
;preserve_1 =FFFFFF
; Light green on Dark Blue background
main_fg =e9e9f4
secondary_fg =DEDEDE
main_bg =282936
sidebar_and_player_bg =282936
cover_overlay_and_shadow =000000
indicator_fg_and_button_bg =4d4f68
pressing_fg = FF5C86
slider_bg =3a3c4e
sidebar_indicator_and_hover_button_bg =e9e9f4
scrollbar_fg_and_selected_row_bg =4d4f68
pressing_button_fg =e9e9f4
pressing_button_bg =3a3c4e
selected_button =00BF76
miscellaneous_bg =3a3c4e
miscellaneous_hover_bg =3a3c4e
preserve_1 =FFFFFF

651
Dracula/user.css Normal file
View File

@ -0,0 +1,651 @@
:root {
--bar-height: 60px;
}
* {
font-family: "Helvetica Neue", "Arial", sans-serif !important;
font-weight: 400;
}
/*Round corner cover image*/
.card-image,
.card-placeholder-wrapper,
.card-image-content-wrapper,
.Card:not(.Card--artist) .Card__image,
.Card:not(.Card--artist) .Card__image-wrapper {
border-radius: 0px !important;
overflow: hidden !important
}
/*Hide some annoying elements like profile name and pic, upgrade button and device connect bar at bottom, new playlist button*/
.upgrade-button,
.view-player .remote-playback-bar,
.NewPlaylistButton {
display: none !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*/
::-webkit-scrollbar {
height: 6px !important;
width: 6px !important;
background-color: transparent;
}
/*Round corner scrollbar*/
::-webkit-scrollbar-thumb {
border-radius: 0px !important;
}
/*Hide top and bottom buttons of scrollbar */
/*who uses those, lol*/
::-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,
.Card:not(.Card--artist) .Card__image-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.1);
}
.card-image-hit-area:not(.no-hover):hover .card-image-content-wrapper,
.Card:not(.Card--artist) .Card__image-hit-area-counter-scale:hover .Card__image-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,
.Card__image-hit-area .card-button-add,
.Card__image-hit-area .card-button-play,
.Card__image-hit-area .card-button-more,
.Card__image-hit-area .Card__play-button,
.Card__image-hit-area .Card__add-button,
.Card__image-hit-area .Card__more-button,
.Card__image-hit-area .Card__overlay {
transition-property: all !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,
.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__image-hit-area:hover .Card__play-button,
.Card__image-hit-area:hover .Card__add-button,
.Card__image-hit-area:hover .Card__more-button,
.Card__image-hit-area:hover .Card__overlay {
opacity: 1 !important;
}
.glue-page-header__content .glue-page-header__image-inner {
border-radius: 0px;
box-shadow: unset !important;
}
.glue-page-header__full-description-overlay {
box-shadow: unset !important;
}
.card-placeholder-wrapper {
background: transparent !important;
}
/*Spice up search input background*/
.SearchInput {
color: var(--modspotify_main_fg);
}
.SearchInput__input {
color: var(--modspotify_secondary_fg);
background-color: rgba(var(--modspotify_rgb_scrollbar_fg_and_selected_row_bg), 0.5) !important;
border-radius: 0px !important;
padding-left: 34px;
}
.sidebar:hover .sidebar-navbar.sidebar-scroll-element {
opacity: 1!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;
box-shadow:0 0 0 0 !important;
width:50px !important;
overflow: visible !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.2) !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 .controls .button-play:after {
box-shadow: unset !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;
}
/* Add round corner for Gerne and Mood cards */
.gc-image-container,
.gc-image {
border-radius: 0px !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 {
border-radius: 0px !important;
}
.card-puff__image-wrapper {
overflow: visible;
}
.card-puff__card-image {
box-shadow: 5px 0 30px rgba(0,0,0,0.7);
overflow: visible;
}
.card-puff__title-container {
background-color: transparent !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: var(--modspotify_main_bg) !important;
border-radius: 0px;
border: 2px solid var(--modspotify_main_fg);
}
/*
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: var(--modspotify_main_bg);
}
/* .glue-page-header__sticky {
padding-top: 60px !important;
} */
/*
Remove those title, cringy description and
meaningless followers number
*/
.carousel .card-info-subtitle-description,
.carousel .card-info-subtitle-metadata,
.carousel .card:not(.card-type-station).card-info-title,
.carousel .card.card-type-playlist.image-loaded .card-info-subtitle-description,
.carousel .card.card-type-playlist.image-loaded .card-info-subtitle-metadata {
display: none !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,
.GlueButton.GlueButton--style-green {
color: var(--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: var(--modspotify_secondary_fg);
}
.card-type-album .card-info-title,
.card-type-track .card-info-title,
.card-type-collection-album .card-info-title,
.card-type-episode .card-info-title {
font-size: 15px;
font-weight: 600 !important;
text-align: center !important;
width: 100% !important;
}
.card-type-album .card-info-subtitle-links,
.card-type-track .card-info-subtitle-links,
.card-type-collection-album .card-info-subtitle-links,
.card-type-episode .card-info-subtitle-links {
text-align: center !important;
width: 100% !important;
}
.tracklist-station-container::after {
background: transparent !important;
}
.GlueHeader__background-overlay {
background: var(--modspotify_main_bg) !important;
}
/* Move navigation buttons and search field to the right and down */
.browser-navigation-top-bar {
margin-left: 40px !important;
margin-top: 15px !important;
}
.SearchInput__input,
.SearchInput__searchIcon,
.SearchInput__clearButton {
margin-top: 15px !important;
}
.content-top-bar__profile-menu-button {
margin-top: 15px !important;
}
.body-container--windows:not(.with-buddy-list):not(.messagebar) .content-top-bar__profile {
margin-right: 110px !important;
margin-top: -5px;
}
/* Spice up Fullscreen mode */
#view-player .album-art .album-art__image {
border-radius: 0px !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,
#view-player .album-art .album-art__image .card-image-content-wrapper .card-image {
border-radius: 0px !important;
}
/* Daily mixes */
.carousel .card-info-wrapper.card-info-with-description.card-info-with-metadata {
height: 50px !important;
}
/* Remove section divider */
.section-divider {
border-bottom: 0 !important;
}
/* Adjust Position of border active tab in Nav bar at top
and add little glowing effect
*/
.nav.navbar-nav {
overflow: hidden !important;
}
.nav.navbar-nav a {
overflow: visible !important;
}
.nav.navbar-nav a::after {
bottom: 0px !important;
width: 100% !important;
}
.nav.navbar-nav .active a::after{
box-shadow: 0 0px 20px !important;
}
.nav.navbar-nav a:focus:not(.button):active::after{
background-color: var(--modspotify_pressing_fg) !important;
}
/* Notification bar */
#content-wrapper #view-message-bar {
position: absolute !important;
width: calc(100% - 160px) !important;
margin-left: 80px !important;
border-radius: 0 0 0px 0px !important;
}
/* Small cover Big cover mechanism */
.now-playing.cover-size-transition.active.image-expanded .cover-image {
width: 10px !important;
height: 10px !important;
}
.now-playing.cover-size-transition.active.image-expanded .caption {
padding-left: 0px !important;
}
#view-now-playing a.image {
overflow: visible !important;
}
#view-now-playing.expanded {
width: 200px;
height: 200px;
}
#now-playing-image-large .cover-image {
height: 200px !important;
}
/* Profile arrow in top left */
.content-top-bar__profile-menu-button .dropdown {
position: fixed !important;
top: 10px !important;
-webkit-app-region: no-drag !important;
}
body.body-container--windows .content-top-bar__profile-menu-button .dropdown {
right: 190px !important;
}
body:not(.body-container--windows) .content-top-bar__profile-menu-button .dropdown {
right: 20px !important;
}
/* Small tooltip */
#tooltip {
box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
border-radius: 0px !important;
border: 2px solid var(--modspotify_main_fg);
padding: 10px 10px;
}
.tooltip-arrow-top, .tooltip-arrow-bottom {
display: none !important;
}
.lyrics-lines-container,
.message-container {
color: #FFFFFF !important;
}
/* Home page */
.GlueCarousel__grid-wrapper::-webkit-scrollbar-thumb {
display: none;
}
.GlueCard__info-wrapper,
.Card__info-wrapper {
margin-bottom: 30px;
}
.card-horizontal-interior-wrapper .card-info-title {
text-align: start !important;
}
.tl-row.selected:hover .tl-cell {
background: var(--modspotify_scrollbar_fg_and_selected_row_bg) !important;
}
.GlueTableRow--is-selected {
background-color: var(--modspotify_scrollbar_fg_and_selected_row_bg) !important;
}
.tracklist-podcast .tl-progress .row-progress__bar {
background-color: var(--modspotify_main_fg);
}
.Header__background-color{
background-color: var(--modspotify_main_bg) !important;
}
.Button--style-green,
.button.button-green, .button.button-white {
border-radius: 25px;
color: var(--modspotify_main_bg) !important;
}
.glue-page-header:not(.glue-page-header--album):not(.glue-page-header--playlist):not(.glue-page-header--artist):not(.glue-page-header--dailymix):not(.glue-page-header--user):not(.glue-page-header--show)
.glue-page-header__content-inner .glue-page-header__title-text,
.HomeHeader .Header__content-inner .Header__title-text-inner,
.MadeForYouHeader .Header__content-inner .Header__title-text-inner,
.RecentlyPlayedPage__header .Header__content-inner .Header__title-text-inner {
background-color: var(--modspotify_main_bg);
padding: 5px 20px;
border: 5px solid var(--modspotify_main_fg) !important;
border-radius: 0px;
box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
text-transform: uppercase;
}
.glue-page-header.glue-page-header--album .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--artist .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--dailymix .glue-page-header__content-inner .glue-page-header__title,
.glue-page-header.glue-page-header--playlist .glue-page-header__content-inner .glue-page-header__title {
margin-top: 10px;
}
span.glue-page-header__title-text {
color: var(--modspotify_main_fg);
}
.glue-page-header .glue-page-header__content-inner .glue-page-header__button {
margin-top: 40px;
}
.glue-page-header__content-inner,
.glue-page-header__data,
.glue-page-header__title,
.Header__content-inner,
.Header__data,
.Header__title,
.Header__title-text,
.Header__title-text-inner {
overflow: visible !important;
}
/*Force player bar to has fixed height*/
.view-player {
height: var(--bar-height) !important;
border-top: 0;
}
.view-player .now-playing {
overflow: unset;
}
.view-player .now-playing .cover-image-link,
.view-player .now-playing .cover-image-link figure {
width: var(--bar-height);
height: var(--bar-height);
}
#now-playing-image-small .cover-image {
position: fixed !important;
width: var(--bar-height);
height: var(--bar-height);
left: 0;
bottom: 0;
}
.view-player .now-playing .cover-image-link-wrapper {
flex: 0 1 calc(var(--bar-height) + 10px);
}
.text-container {
z-index: 3;
}
.view-player .now-playing-container .button-add {
color: var(--modspotify_main_fg) !important;
}
.progress-container .progress-bar,
.progress-container .inner {
top: 0 !important;
margin-top: 0 !important;
height: 5px;
}
.progress-container .progress-bar-wrapper {
top: 0 !important;
height: 5px;
}
.progress-container {
position: fixed !important;
width: 100% !important;
bottom: var(--bar-height) !important;
margin : 0 !important;
}
.progress-container .inner {
border-radius: 0 0px 0px 0 !important;
background-color: var(--modspotify_main_fg) !important;
box-shadow: 0 0px 0px 0 var(--modspotify_main_fg);
}
.glue-page-header__p2s-details,
.glue-page-header__p2s-followers {
display: none;
}
.context-menu {
border: 2px solid var(--modspotify_main_fg);
box-shadow: 0 4px 12px 0 rgba(var(--modspotify_rgb_cover_overlay_and_shadow),.2);
border-radius: 0px !important;
overflow: hidden;
}
#menu-wrapper ::-webkit-scrollbar {
display: none;
}
#menu-wrapper {
border-right: 3px solid black;
border-image: linear-gradient(0deg, transparent , var(--modspotify_scrollbar_fg_and_selected_row_bg) 40%, var(--modspotify_scrollbar_fg_and_selected_row_bg) 60%, transparent 90%) 2 90%;
}
.main-view-wrapper {
overflow: unset;
}
.Button--style-icon-stroke:after,
.Button--style-icon-stroke:hover:after,
.Button--style-icon-stroke,
.glue-page-header__button .button-icon-with-stroke,
.glue-page-header__button .button-icon-with-stroke::after {
box-shadow: unset;
}
.glue-page-header.glue-page-header--artist .glue-page-header__label {
padding-top: 10px;
}
.glue-page-header.glue-page-header--artist.has-custom-image .glue-page-header__label {
padding-top: 8px;
}
.glue-page-header__content .glue-page-header__label {
margin-left: -2px;
z-index: 2;
}
.glue-page-header__label span,
.Header__label span {
background-color: var(--modspotify_main_fg);
color: var(--modspotify_main_bg);
padding: 2px 10px;
}
.glue-page-header__label .header-verified-check {
background-color: transparent;
}
body.remotebar .view-player .player-bar-wrapper {
height: 100%;
}
.SidebarListItem--is-active:after,
.RootlistItem--is-active:after,
/* For Linux */ #view-navigation-bar .item.active:after {
background-color: transparent;
background-image: linear-gradient(90deg, var(--modspotify_sidebar_indicator_and_hover_button_bg) , transparent);
opacity: 0.2;
bottom: unset;
top: 5%;
height: 90%;
width: 100%
}
.Header__image-inner {
box-shadow: unset;
}