mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-26 04:42:46 +01:00
morpheusthewhite
GitHub
commit
0f38af2025
8
Kaapi/README.md
Normal file
8
Kaapi/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Kaapi
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
## Info
|
||||
Just a theme with brown/green shades.
|
||||
19
Kaapi/color.ini
Normal file
19
Kaapi/color.ini
Normal file
@ -0,0 +1,19 @@
|
||||
[Base]
|
||||
main_fg = bf8d16
|
||||
secondary_fg = 8a774a
|
||||
main_bg = 212121
|
||||
sidebar_and_player_bg = 292929
|
||||
cover_overlay_and_shadow = 000000
|
||||
indicator_fg_and_button_bg = 879260
|
||||
pressing_fg = 1757B1
|
||||
slider_bg = 524d40
|
||||
sidebar_indicator_and_hover_button_bg = 97B238
|
||||
scrollbar_fg_and_selected_row_bg = 292929
|
||||
pressing_button_fg = 62d196
|
||||
pressing_button_bg = 879260
|
||||
selected_button = 62d196
|
||||
miscellaneous_bg = 292929
|
||||
miscellaneous_hover_bg = 292929
|
||||
preserve_1 = 4052b3
|
||||
|
||||
|
||||
BIN
Kaapi/home.png
Normal file
BIN
Kaapi/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
BIN
Kaapi/play.png
Normal file
BIN
Kaapi/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
285
Kaapi/user.css
Normal file
285
Kaapi/user.css
Normal file
@ -0,0 +1,285 @@
|
||||
:root {
|
||||
|
||||
}
|
||||
|
||||
/*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: 10px !important;
|
||||
overflow: hidden !important
|
||||
}
|
||||
|
||||
|
||||
/*Thinner scrollbar*/
|
||||
::-webkit-scrollbar {
|
||||
height: 6px !important;
|
||||
width: 6px !important;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
/*Round corner scrollbar*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
/*Hide top and bottom buttons of scrollbar */
|
||||
/*who uses those, lol*/
|
||||
::-webkit-scrollbar-button {
|
||||
display: none !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: 4px !important;
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-navbar.sidebar-scroll-element {
|
||||
opacity: 1!important;
|
||||
}
|
||||
|
||||
|
||||
/* Add round corner for Gerne and Mood cards */
|
||||
.gc-image-container,
|
||||
.gc-image {
|
||||
border-radius: 10px !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: 10px !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: 4px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Change text color in playlist - use secondary_fg instead of main_fg
|
||||
*/
|
||||
.tl-explicit .label,
|
||||
.tl-premium .label,
|
||||
.tl-cell:not(.tl-number),
|
||||
.tl-cell a:link,
|
||||
.tl-highlight {
|
||||
color: var(--modspotify_secondary_fg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [WINDOWS] Change Profile menu horizontal position */
|
||||
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: 6px !important;
|
||||
border: 1px solid var(--modspotify_main_fg);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.tooltip-arrow-top, .tooltip-arrow-bottom {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
Button with text Play
|
||||
*/
|
||||
|
||||
.Button--style-green,
|
||||
.button.button-green, .button.button-white {
|
||||
border-radius: 6px;
|
||||
color: var(--modspotify_main_bg) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Add box around Titles */
|
||||
|
||||
.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: 6px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Context Menu round corners and color*/
|
||||
|
||||
.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: 6px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* Sidebar gradient on selected item */
|
||||
.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;
|
||||
}
|
||||
|
||||
.scrollbar-style-visible-mac::-webkit-scrollbar-thumb, .scrollbar-style-visible-mac ::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows::-webkit-scrollbar-thumb, .scrollbar-style-visible-windows ::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux::-webkit-scrollbar-thumb, .scrollbar-style-visible-linux ::-webkit-scrollbar-thumb {
|
||||
background-color: #4e4633;
|
||||
}
|
||||
|
||||
.SidebarList__title{
|
||||
color: var(--modspotify_sidebar_indicator_and_hover_button_bg) !important;
|
||||
}
|
||||
|
||||
.tl-header th {
|
||||
color:var(--modspotify_indicator_fg_and_button_bg) !important
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user