Last active
March 27, 2024 19:01
-
-
Save ricafolio/00db2a963553e28862cf1b171933ab1f to your computer and use it in GitHub Desktop.
Youtube Music Lyrics for PC - Blurred Album Cover Background - CSS Style Mod
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Lyrics */ | |
| yt-formatted-string.non-expandable.description.style-scope.ytmusic-description-shelf-renderer { | |
| font-size: 3rem; | |
| font-weight: 500; | |
| /* Optional, remove if you don't want text shadow in lyrics */ | |
| text-shadow: 1px 1px #00000030; | |
| } | |
| /* Hide (Song/Video) button */ | |
| .ytmusic-av-toggle { | |
| display: none; | |
| } | |
| /* Wider lyrics container */ | |
| ytmusic-player-page #side-panel { | |
| width: 100%; | |
| max-width: 100%; | |
| margin: 0; | |
| position: relative; | |
| } | |
| /* Album cover as blurred background */ | |
| ytmusic-player-page ytmusic-player { | |
| position: absolute; | |
| background: transparent; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| width: 100vw; | |
| max-width: 100%; | |
| height: 100vh; | |
| filter: blur(80px) saturate(250%); | |
| opacity: 0.7; | |
| } | |
| /* Up Next Tab text color enhancements */ | |
| ytmusic-player-page .byline, | |
| ytmusic-player-page .duration { | |
| color: #ffffff60; | |
| } | |
| /* Transparent nav & sidebar */ | |
| .ytmusic-app-layout { | |
| background: transparent; | |
| } | |
| /* Fix bottom player width */ | |
| ytmusic-app-layout>[slot=player-bar] { | |
| width: calc(100vw - var(--ytmusic-scrollbar-width) + 12px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Extension used to inject the CSS:
Steps to apply: