/* ==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 20240918.0.6.4
@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;
--systemGrey: #4a4a4a;
--keyColorBG: var(--keyColor);
--navSidebarSelectedState: var(--keyColor);
--playerPlatterButtonBGFill: var(--keyColor);
--playerPlatterButtonIconFill: var(--pageBG);
--systemToolbarTitlebarMaterialSover: var(--pageBG);
/*
--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;
}
/* Scrollbar styling */
/* width */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: var(--tpBG);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--systemGrey);
border-radius: 20px/25px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--keyColor);
}
/* Remove top margin from scrollable container to allow for frosted glass player effect */
.scrollable-page {
margin-top: 0 !important;
padding-top: 54px;
}
.banner-container {
border-top: solid 1px var(--keyColor);
background: var(--tpBG) !important;
backdrop-filter: blur(20px) saturate(100%);
}
/* 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;
}
/* Search result items */
/* Search hint looking glass SVG icon */
.search-hint:focus-visible .search-suggestion-svg path,
.search-hint:focus-within .search-suggestion-svg path,
.search-hint:hover .search-suggestion-svg path {
fill: var(--pageBG);
}
/* Autocomplete suggestion */
.search-hint:focus-visible .suggestion span,
.search-hint:focus-within .suggestion span,
.search-hint:hover .suggestion span {
color: var(--tpBG);
}
/* Autocomplete suggestion (typed) */
.search-hint:focus-visible .suggestion .highlighted,
.search-hint:focus-within .suggestion .highlighted,
.search-hint:hover .suggestion .highlighted {
color: var(--pageBG);
}
/* Item suggestion - Main title */
.search-hint:focus-visible .top-search-list-lockup__content .top-search-list-lockup__description li span,
.search-hint:focus-within .top-search-list-lockup__content .top-search-list-lockup__description li span,
.search-hint:hover .top-search-list-lockup__content .top-search-list-lockup__description li span {
color: var(--pageBG);
}
/* Item suggestion - Secondary info */
.search-hint:focus-visible .top-search-list-lockup__content .top-search-list-lockup__description li.top-search-list-lockup__secondary span,
.search-hint:focus-within .top-search-list-lockup__content .top-search-list-lockup__description li.top-search-list-lockup__secondary span,
.search-hint:hover .top-search-list-lockup__content .top-search-list-lockup__description li.top-search-list-lockup__secondary span {
color: var(--tpBG);
}
/* Item suggestion - Icons (eg: explicit icon) */
.search-hint:focus-visible .top-search-list-lockup__content .top-search-list-lockup__icon svg path,
.search-hint:focus-within .top-search-list-lockup__content .top-search-list-lockup__icon svg path,
.search-hint:hover .top-search-list-lockup__content .top-search-list-lockup__icon svg path {
fill: var(--tpBG);
}
/* Player UI */
amp-lcd.lcd.lcd__music.lcd__initial,
amp-lcd.lcd.lcd__music,
amp-lcd.lcd.lcd__music__buffering,
.player-bar {
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;
}
/* Favourite button (Star) */
.lcd-action-right .favorite-button {
--favoriteIconStarFill: var(--keyColor) !important;
}
.signin svg path {
fill: var(--pageBG) !important;
}
.signin span.button-text {
color: var(--pageBG) !important;
}
/* Lyrics view */
amp-chrome-volume.chrome-volume:hover {
--chromeVolumeElapsed: var(--keyColor) !important;
}
/* Side panel */
.side-panel {
background-color: var(--tpBG) !important;
backdrop-filter: blur(50px) saturate(100%) !important;
}
.side-panel .side-panel-header-wrapper {
background-color: var(--tpBG) !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...
