Files
dotfiles/.config/spicetify/Themes/Blackout/user.css
T
2025-12-10 16:22:25 -06:00

467 lines
10 KiB
CSS

:root {
--scroll: 0 !important;
}
.main-rootlist-rootlistDividerGradient {
background: unset;
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
color: var(--spice-text) !important;
}
.main-home-homeHeader,
.x-entityHeader-overlay,
.x-actionBarBackground-background,
.main-actionBarBackground-background,
.main-entityHeader-overlay,
.main-entityHeader-backgroundColor {
background-color: unset !important;
background-image: unset !important;
}
.main-playButton-PlayButton.main-playButton-primary {
color: white;
}
.connect-device-list {
margin: 0px -5px;
}
/* Remove Topbar background colour */
.main-topBar-background {
background-color: black !important;
}
.main-topBar-overlay {
background-color: var(--spice-main);
}
.main-entityHeader-shadow,
.main-contextMenu-menu,
.connect-device-list-container {
box-shadow: 0 4px 20px #21212130;
}
.main-trackList-playingIcon {
filter: grayscale(1);
}
span.artist-artistVerifiedBadge-badge svg:nth-child(1) {
fill: black;
}
/** Hightlight selected playlist */
.main-rootlist-rootlistItemLink.main-rootlist-rootlistItemLinkActive {
background: var(--spice-button) !important;
border-radius: 4px;
padding: 0 10px;
margin: 0 5px 0 -10px;
}
.main-navBar-navBarLinkActive {
background: var(--spice-button);
}
.main-contextMenu-menu {
background-color: var(--spice-button);
}
.main-contextMenu-menuHeading,
.main-contextMenu-menuItemButton,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):focus,
.main-contextMenu-menuItemButton:not(.main-contextMenu-disabled):hover {
color: var(--spice-text);
}
.main-playPauseButton-button {
background-color: var(--spice-button);
color: black;
}
/** Queue page header */
.queue-queue-title,
.queue-playHistory-title {
color: var(--spice-text) !important;
}
/** Cards */
.main-cardImage-imageWrapper {
background-color: transparent;
}
.main-rootlist-rootlistDivider {
background-color: unset;
}
.main-nowPlayingBar-nowPlayingBar {
height: var(--player-bar-height);
}
input {
background-color: var(--spice-misc);
color: var(--spice-text) !important;
}
/* left menu active item background */
.main-navBar-navBarLinkActive {
color: white;
}
/* profile icon */
.main-entityHeader-imagePlaceholder {
color: unset;
}
/* left menu create playlist, liked songs and episodes button background */
a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selected.active,
.main-createPlaylistButton-button:hover {
background-color: var(--spice-button) !important;
}
/* Context Menu */
.main-contextMenu-menu {
background-color: var(--spice-misc) !important;
}
/* Experimental features background */
.main-trackCreditsModal-container {
background-color: var(--spice-misc) !important;
}
/* device showing menu */
.main-connectBar-connectBar.mVVxN9ZfIRjiQfDuzPCZ {
background-color: var(--spice-button) !important;
color: var(--text-base);
}
/* New lyrics style */
:root {
--lyrics-text-direction: left;
}
.main-lyricsCinema-controls {
top: 80px !important;
}
#lyrics-backdrop {
position: absolute;
width: 100%;
height: 100%;
background-color: black !important;
}
#lyrics-backdrop-container {
position: absolute;
width: 100%;
height: 100%;
background-color: black !important;
}
.lyrics-lyrics-background {
visibility: hidden !important;
}
/* lyrics not available message */
.C3pBU1DsOUJJOAv89ZFT {
color: var(--lyrics-color-passed) !important;
opacity: 0;
animation: reveal 800ms ease forwards;
}
@keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
visibility: visible;
}
}
.lyrics-lyricsContent-lyric:hover {
color: var(--lyrics-color-active) !important;
}
.lyrics-lyricsContent-active {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
max-width: var(--lyrics-active-max-width);
}
@media (min-width: 1920px) {
.lyrics-lyricsContent-lyric {
transition: text-shadow 400ms ease, color 50ms ease;
}
.lyrics-lyricsContent-text {
transform: scale(1);
transition: transform 400ms ease;
}
.lyrics-lyricsContent-active .lyrics-lyricsContent-text {
transform: scale(1.1);
}
.lyrics-lyricsContent-isInteractive .lyrics-lyricsContent-text:active {
transform: scale(0.9);
}
}
.main-nowPlayingView-section .lyrics-lyricsContent-lyric {
opacity: 1;
visibility: visible;
}
.main-nowPlayingView-section .lyrics-lyricsContent-text {
transform: unset;
}
/* New Lyrics Plus style */
.lyrics-lyricsContainer-LyricsBackground {
display: none !important;
}
/* lyrics pages fix */
.main-lyricsCinema-nonDisplayedArea .main-topBar-topbarContent {
display: none;
}
.lyrics-lyrics-container {
margin-top: 0;
}
.lyrics-lyricsContainer-LyricsBackground {
margin-bottom: -110px;
margin-top: -10px;
}
.lyrics-lyricsContainer-Provider {
padding-bottom: 40px;
}
#lyrics-fullscreen-container
> .lyrics-lyricsContainer-LyricsContainer:has(
.lyrics-lyricsContainer-UnsyncedLyricsPage
)
.lyrics-lyricsContainer-Provider {
padding-bottom: 35px;
}
.lyrics-lyricsContainer-LyricsUnsyncedPadding {
height: 20vh;
}
.lyrics-config-button-container {
bottom: 15px;
}
#lyrics-fullscreen-container .lyrics-config-button-container {
bottom: 10px;
}
#fad-lyrics-plus-container .lyrics-config-button-container {
bottom: 32px;
}
body:has(#lyrics-fullscreen-container)
> #main
> .Root
> .Root__top-container
> *:not(.Root__main-view),
body:has(#lyrics-fullscreen-container)
> #main
> .Root
> .Root__top-container
> .Root__main-view
> *:not(.main-view-container),
body:has(#lyrics-fullscreen-container)
> #main
> .Root
> .Root__top-container
> .Root__main-view
> .main-view-container
> *:not(.under-main-view),
body:has(#lyrics-fullscreen-container)
> #main
> .Root
> .Root__top-container
> .Root__main-view::before {
display: none !important;
}
body:has(#lyrics-fullscreen-container) > #main > .Root {
--panel-gap: 0 !important;
}
.hKccLC {
background-color: var(--spice-accent);
color: var(--spice-alt-text);
border-radius: var(--border-radius-3);
}
.ksogXh:hover {
color: var(--spice-rgb-subtext);
}
.main-view-container__scroll-node-child,
.main-yourLibraryX-libraryItemContainer,
.main-buddyFeed-content,
.nw2W4ZMdICuBo08Tzxg9
{
padding-bottom: 6rem;
}
.view-homeShortcutsGrid-imageContainer {
padding: 6px;
}
.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
border-radius: var(--border-radius-3);
}
.main-trackList-playsHeader {
width: 12.8ch;
}
.main-trackList-durationHeader {
margin-left: 30px;
}
.main-trackList-rowSectionEnd {
margin: auto;
}
.main-trackList-column {
padding-left: 10px;
}
.main-trackList-rowSectionVariable[aria-colindex="3"] .cPwEdQ,
.main-trackList-rowSectionVariable[aria-colindex="3"] .main-trackList-text {
padding-left: 8.5px;
}
.main-trackList-rowSectionVariable[aria-colindex="4"] .eDbSCl {
padding-left: 14.5px;
}
.main-trackList-rowSectionVariable[aria-colindex="3"]
.main-trackList-rowPlayCount {
padding-left: 0px;
}
.SxHlW6byhoJSUJNugaE1 .k6Nq7pavAmiyJlxj52QA {
color: var(--spice-alt-text);
}
.npv-background-image__overlay {
background-color: rgba(var(--spice-rgb-layer-shadow), 0.7) !important;
}
.main-rootlist-rootlistItemOverlay {
display: none;
}
/* FullScreen Styles */
.npv-background-image__overlay {
backdrop-filter: saturate(1.3) brightness(0.5);
}
.npv-main-container,
.npv-background-color,
.npv-lyrics__gradient-background {
background-color: rgba(var(--spice-rgb-main), 0.75) !important;
background-image: none !important;
background: none !important;
}
.npv-track-metadata,
.npv-up-next {
min-width: 6rem;
border: 2px solid
rgba(var(--spice-rgb-main), var(--bg-color-opacity-homeHeader));
padding: 0.5rem;
border-radius: var(--card-border-radius);
background-color: rgba(var(--spice-rgb-card), 0.75);
color: rgba(var(--spice-rgb-subtext), 0.6);
}
.npv-up-next__info {
color: var(--spice-text);
}
.pO2rsGFqUdaNhpLrif21 a {
color: var(--spice-text) !important;
}
.ellipsis-one-line {
color: var(--spice-subtext) !important;
}
.npv-lyrics__text--credits,
.npv-track-metadata__creator-name,
.npv-lyrics__text-wrapper--previous,
.npv-lyrics__text--credits {
color: rgba(var(--spice-rgb-text), 0.5) !important;
}
::backdrop {
backdrop-filter: blur(3rem) saturate(1.3) invert(0.0125) brightness(0.5);
background-color: rgba(var(--spice-rgb-main), 0.75);
}
.yhlH4Dsjqw56Z58EOwvQ {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(var(--spice-rgb-shadow), .6))), var(--background-noise);
}
.encore-dark-theme .encore-bright-accent-set{
--background-highlight: #b7b6b6;
--background-press: #797979;
}
/* scrollbar hide */
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle, .os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track{
width: 0 !important;
}
/* black gradient */
.XVz4BMGP5zAEE5p90mYK{
--background-base: black !important;
--background-base-min-contrast: black !important;
}
.Bdcf5g__Rug3TGqSdbiy{
--background-base-70: black !important;
}
/* white text instead of accented color */
.encore-internal-color-text-subdued {
color: white;
}
/* fullscreen artist page*/
.wozXSN04ZBOkhrsuY5i2, .XUwMufC5NCgIyRMyGXLD{
height: 90vh;
clip-path: inset(0 0 17vh 0);
}
.main-entityHeader-container.main-entityHeader-withBackgroundImage {
height: 73vh;
}
.dhq75ObRGjfBoBlz6clW:after{
height: 90vh;
background-color: transparent;
}