/* ==UserStyle==
@name PitchBlack - Apple Music Edition
@namespace USO Archive
@author sprince0031
@description `Inspired by the legendary PitchBlack Substratum theme for Android, this is a PitchBlack theme for Apple Music. In true PitchBlack fashion, you get to pick the accent color of your choice! A list of all PitchBlack accents and background variants are available below along with their hexcodes. Do note that you can pick any color you want from the color picker but these are the official colors. Enjoy!If you liked this theme, checkout my PitchBlack theme for YouTube here:https://userstyles.org/styles/165645/youtube-pitchblack-dark-black-theme`
@version 20240420.0.6.2
@license NO-REDISTRIBUTION
@preprocessor uso
@advanced color accent "Accent" #23cf5f
@advanced color bg "Background" #000000
@advanced color tpac "Transparency Effects (Accent)" #23cf5f66
@advanced color tpbg "Transparency Effects (Background)" #00000099
==/UserStyle== */
@-moz-document regexp("https?://(music|tv).apple.com.*") {
:root {
--pageBG: /*[[bg]]*/;
--keyColor: /*[[accent]]*/;
--tpBG: /*[[tpbg]]*/;
--tpAC: /*[[tpac]]*/;
--keyColor-pressed: var(--tpAC);
--bannerDarkGray: #121212;
--keyColorBG: var(--keyColor);
--navSidebarSelectedState: var(--keyColor);
--playerPlatterButtonBGFill: var(--keyColor);
--playerPlatterButtonIconFill: var(--pageBG);
--chromeVolumeElapsed: var(--keyColor) !important;
/*
--playerScrubberTrack: rgba(55,55,55,0.95) !important;
--playerScrubberFill: var(--keyColor) !important;
--playerLCDBGFill: rgba(45,45,45,0.95) !important;
*/
--iconFillArrow: var(--pageBG) !important;
--selectionColor: var(--keyColor) !important;
--mobileNavigationBG: var(--pageBG);
--dropdownBackground: var(--pageBG);
--dropdownLightGray: var(--keyColor);
--dropdownLightGrayIcon: var(--keyColor);
--opaqueShelfBG: var(--pageBG);
--footerBg: var(--pageBG);
/* Apple TV settings */
--appPrimaryBackgroundColor: /*[[bg]]*/;
--appModalBackgroundColor: var(--tpBG);
--modalContentOverlayColorEnd: var(--tpAC);
--systemStandardThickMaterialSover: var(--tpBG);
}
.wrapper amp-chrome-player:before {
background-color: var(--tpBG) !important;
}
.banner-container {
border-top: solid 1px var(--keyColor);
}
/* Button text */
.select-button,
button.click-action,
.button.socialProfileButton button {
color: var(--pageBG) !important;
}
/* Search bar*/
.search-input__text-field {
caret-color: var(--keyColor);
}
input.search-input__text-field:focus {
box-shadow: 0 0 0 4px var(--tpAC) !important;
}
/* Search Scope Bar */
.search-scope-bar {
backdrop-filter: saturate(50%) blur(20px) !important;
background-color: var(--tpBG);
}
.app-container.is-not-focused .search-scope-bar {
background-color: var(--pageBG) !important;
}
/* Player UI */
amp-lcd.lcd.lcd__music.lcd__initial,
amp-lcd.lcd.lcd__music,
amp-lcd.lcd.lcd__music__buffering {
background: none !important;
}
.lcd__track-info-empty {
color: var(--keyColor) !important;
}
:host(.lcd-progress) {
--progress-thumb-color: var(--tpBG) !important;
--progress-thumb-color-outline: var(--pageBG) !important;
--progress-thumb-color-active: var(--pageBG) !important;
--progress-track-color: var(--tpBG) !important;
--progress-track-color-elapsed: var(--tpAC) !important;
--progress-track-color-elapsed-active: var(--keyColor) !important;
}
.lcd__badge-platter.lcd__badge-platter--preview {
color: var(--pageBG) !important;
}
.navigation-item[aria-selected=true] a svg {
fill: var(--pageBG) !important;
}
.navigation-item[aria-selected=true] a span {
color: var(--pageBG) !important;
}
.signin svg path {
fill: var(--pageBG) !important;
}
.signin span.button-text {
color: var(--pageBG) !important;
}
/* Side panel */
.side-panel {
background-color: var(--tpBG) !important;
backdrop-filter: blur(50px) saturate(100%) !important;
}
/* Up next pane */
.up-next-item-remove {
background-image: none ;
/* Need to find a way to replace the image with a css icon.
background-color: var(--keyColor); */
}
.up-next-item:focus {
--selectedTextColor: var(--pageBG) !important;
--contextMenuEllipsisFillOverride: var(--pageBG) !important;
}
/* Context Menus */
.contextual-menu__items::before {
background-color: var(--tpBG) !important;
}
/* Playlist Thumbnails */
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:focus .play-button.is-large,
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:focus-within .play-button.is-large,
.powerswoosh--radioStation .powerswoosh__play-button-wrapper:hover .play-button.is-large {
--iconCircleFillBGOverride: #28282850 !important;
backdrop-filter: blur(5px) saturate(80%) !important;
}
.play-button--platter.is-hovered,
.play-button--platter:hover,
.play-button--platter:focus {
--iconFillArrow: var(--pageBG) !important;
}
amp-contextual-menu-button:focus-within .more-button--material,
amp-contextual-menu-button:hover .more-button--material {
--iconEllipsisFill: var(--pageBG) !important;
}
/* Artist profile page */
.artist-header__name-container .play-button--platter {
--iconFillArrow: var(--pageBG) !important;
}
.artist-header__name-container .play-button--platter.is-hovered,
.artist-header__name-container .play-button--platter:focus,
.artist-header__name-container .play-button--platter:hover {
--iconFillArrow: var(--keyColor) !important;
--iconCircleFillBG: var(--pageBG) !important;
border: solid 1px var(--keyColor);
}
.artist-header__favorite-button {
--favoriteButtonStarColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedBGColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedHoverBGColorOverride: var(--keyColor) !important;
--favoriteButtonFavoritedHoverStarColorOverride: var(--pageBG) !important;
--favoriteButtonHoverStarColorOverride: var(--pageBG) !important;
}
.artist-header__name-container amp-contextual-menu-button:focus-within .more-button--material,
.artist-header__name-container amp-contextual-menu-button:hover .more-button--material {
--iconEllipsisFill: var(--keyColor) !important;
}
/* Modal elements */
.content-modal-container {
background-color: var(--tpBG) !important;
backdrop-filter: blur(20px) saturate(100%);
}
.close-button:hover {
fill: var(--keyColor);
}
.subtitle {
color: var(--keyColor);
}
/* Explicit badge*/
.explicit {
fill: var(--explicitFillOverride,var(--keyColor)) !important;
}
/* playlist/album page */
.songs-list-row--selected:not(.songs-list-row--disabled) {
--linkColor: var(--pageBG) !important;
--explicitFillOverride: var(--pageBG) !important;
--contextMenuEllipsisFillOverride: var(--pageBG) !important;
--addToLibraryFillOverride: var(--pageBG) !important;
--rowBackgroundColor: var(--selectionColor) !important;
}
.songs-list__col .songs-list-row__controls .songs-list-row__preview-button button.click-action {
color: var(--keyColor) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list-row__controls .songs-list-row__preview-button button.click-action {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled).songs-list-row--no-artwork .songs-list-row__play-button-wrapper {
--playButtonIconHoverColor: var(--pageBG) !important;
--playButtonIconColor: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list__song-link-wrapper a,
.songs-list-row--selected .songs-list__col .songs-list__song-link-wrapper a:hover {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list__col .songs-list-row__song-wrapper {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__video-glyph {
fill: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__column-data {
color: var(--pageBG) !important;
}
.songs-list-row--selected:not(.songs-list-row--disabled) .songs-list-row__by-line {
color: var(--pageBG) !important;
}
/* Artists library page */
.virtual-row .is-selected {
color: var(--pageBG) !important;
}
/* Songs library page */
.library-track.selected {
color: var(--pageBG) !important;
}
.library-track.selected .action-menu .more-button--non-platter {
--iconEllipsisFill: var(--pageBG) !important;
}
/* Common library page rules*/
.virtual-row {
border-radius: 10px;
}
/* Profile Page */
.button.socialProfileButto...
