Updated for Sidebar 3.0 + Fixed Image Radius + Fixed Header Clipping

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+Notes.md

plugins/obsidian-theme-luna/src/dark-theme.css

@@ -6,6 +6,15 @@
 }
 */
 
+/* Rounded corners for various elements */
+[class*="_thumbnail_"],
+[class*="_imageWrapper_"],
+[class*="_coverImage_"],
+[class*="_overlayIconWrapperAlbum_"],
+[class*="_playButton_"] {
+	border-radius: 10px !important;
+}
+
 ::-webkit-scrollbar {
 	display: none;
 }
@@ -256,8 +265,9 @@ button[data-test="close-now-playing"]:hover {
 }
 
 [class^="__NEPTUNE_PAGE"],
-[data-test="main"] {
-	margin-top: 35px;
+[data-test="main"],
+.mainContent {
+	margin-top: 5vh !important;
 }
 
 [data-test="button-desktop-release-notes"],

plugins/obsidian-theme-luna/src/light-theme.css

@@ -6,6 +6,15 @@
 }
 */
 
+/* Rounded corners for various elements */
+[class*="_thumbnail_"],
+[class*="_imageWrapper_"],
+[class*="_coverImage_"],
+[class*="_overlayIconWrapperAlbum_"],
+[class*="_playButton_"] {
+	border-radius: 10px !important;
+}
+
 ::-webkit-scrollbar {
 	display: none;
 }
@@ -356,8 +365,9 @@ button[data-test="close-now-playing"]:hover {
 }
 
 [class^="__NEPTUNE_PAGE"],
-[data-test="main"] {
-	margin-top: 35px;
+[data-test="main"],
+.mainContent {
+	margin-top: 5vh !important;
 }
 
 [data-test="button-desktop-release-notes"],

plugins/obsidian-theme-luna/src/oled-friendly.css

@@ -6,6 +6,15 @@
 }
 */
 
+/* Rounded corners for various elements */
+[class*="_thumbnail_"],
+[class*="_imageWrapper_"],
+[class*="_coverImage_"],
+[class*="_overlayIconWrapperAlbum_"],
+[class*="_playButton_"] {
+	border-radius: 10px !important;
+}
+
 ::-webkit-scrollbar {
 	display: none;
 }
@@ -182,8 +191,9 @@
 }
 
 [class^="__NEPTUNE_PAGE"],
-[data-test="main"] {
-	margin-top: 35px;
+[data-test="main"],
+.mainContent {
+	margin-top: 5vh !important;
 }
 
 #playQueueSidebar {

plugins/radiant-lyrics-luna/src/index.ts

@@ -33,6 +33,9 @@ if (settings.lyricsGlowEnabled) {
 	lyricsGlowStyleTag.css = lyricsGlow;
 }
 
+// Apply base styles always (contains global fixes and conditional UI hiding styles)
+baseStyleTag.css = baseStyles;
+
 // Update CSS variables for lyrics text glow based on settings
 const updateRadiantLyricsTextGlow = function (): void {
 	const root = document.documentElement;
@@ -43,8 +46,7 @@ const updateRadiantLyricsTextGlow = function (): void {
 // Function to update styles when settings change
 const updateRadiantLyricsStyles = function (): void {
 	if (isHidden) {
-		// Apply only base styles (button hiding) and optional player bar hiding
-		baseStyleTag.css = baseStyles;
+		// Apply optional player bar hiding
 		if (!settings.playerBarVisible) {
 			playerBarStyleTag.css = playerBarHidden;
 		} else {
@@ -195,7 +197,6 @@ const toggleRadiantLyrics = function (): void {
 		setTimeout(() => {
 			if (!isHidden) {
 				lyricsStyleTag.remove();
-				baseStyleTag.remove();
 				playerBarStyleTag.remove();
 			}
 		}, 500);

plugins/radiant-lyrics-luna/src/styles.css

@@ -1,272 +1,33 @@
+/* Sidebar with dynamic hash */
+[class*="_sidebar_"] {
+	background-color: transparent !important;
+}
+
+/* Section header with dynamic hash */
+[class*="_sectionHeader_"] {
+	background-color: transparent !important;
+}
+
+/* Rounded corners for various elements */
+[class*="_thumbnail_"],
+[class*="_imageWrapper_"],
+[class*="_coverImage_"],
+[class*="_overlayIconWrapperAlbum_"],
+[class*="_playButton_"] {
+	border-radius: 10px !important;
+}
+
+/* Rounded corners for various elements */
+[class*="_thumbnail_"],
+[class*="_imageWrapper_"],
+[class*="_coverImage_"],
+[class*="_overlayIconWrapperAlbum_"],
+[class*="_playButton_"] {
+	border-radius: 10px !important;
+}
+
 /* Only apply styles when UI is hidden */
 .radiant-lyrics-ui-hidden [class*="tabItems"] {
 	opacity: 0 !important;
 	transition: opacity 0.4s ease-in-out;
 }
-
-/* Default state - visible */
-[class*="tabItems"] {
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Tab items stay hidden - no hover functionality (if the song changes and it doesnt have lyrics.. and ya want them back.. you can unhide the UI <3) */
-
-.radiant-lyrics-ui-hidden
-[data-test="header-container"]:not(.rl-header-has-hide-btn) {
-	opacity: 0 !important;
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Keep header visible if it contains the Hide UI button, but hide its other children */
-.radiant-lyrics-ui-hidden [data-test="header-container"].rl-header-has-hide-btn
-	> *:not(.hide-ui-button) {
-	opacity: 0 !important;
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Default state for header */
-[data-test="header-container"] {
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Only prevent specific text elements in player bar from being affected by margin adjustments */
-[data-test="footer-player"] [class*="_trackTitle"],
-[data-test="footer-player"] [class*="_artistName"],
-[data-test="footer-player"] [class*="_trackInfo"],
-[data-test="footer-player"] [class*="_trackContainer"] {
-	margin-top: 0 !important;
-	transform: none !important;
-}
-
-/* Immediate hide class for unhide button with smooth transition (had issues with the fade out.. so I removed it) */
-.hide-immediately {
-	opacity: 0 !important;
-	visibility: hidden !important;
-	pointer-events: none !important;
-}
-
-[class^="_bar"] {
-	background-color: transparent;
-}
-
-.radiant-lyrics-ui-hidden [class^="_bar"] > *:not(.hide-ui-button) {
-	opacity: 0 !important;
-	pointer-events: none !important;
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Default state for bar elements */
-[class^="_bar"] > * {
-	transition: opacity 0.4s ease-in-out;
-}
-
-/* Hide search box and make it non-interactive */
-.radiant-lyrics-ui-hidden [data-test="search-input"],
-.radiant-lyrics-ui-hidden [class*="_searchInput"],
-.radiant-lyrics-ui-hidden [class*="searchInput"],
-.radiant-lyrics-ui-hidden [class*="_search"],
-.radiant-lyrics-ui-hidden [class*="search"],
-.radiant-lyrics-ui-hidden input[type="search"],
-.radiant-lyrics-ui-hidden input[type="text"],
-.radiant-lyrics-ui-hidden input[placeholder*="Search"],
-.radiant-lyrics-ui-hidden input[placeholder*="search"],
-.radiant-lyrics-ui-hidden [placeholder*="Search"],
-.radiant-lyrics-ui-hidden [data-test="main-layout-header"] input,
-.radiant-lyrics-ui-hidden [data-test="main-layout-header"] [class*="input"],
-.radiant-lyrics-ui-hidden header input,
-.radiant-lyrics-ui-hidden nav input {
-	pointer-events: none !important;
-	cursor: default !important;
-	user-select: none !important;
-}
-
-/* Hide bottom left controls completely - no hover functionality */
-/* Exclude heart button in player bar and make sure hidden buttons can't be clicked */
-.radiant-lyrics-ui-hidden
-[data-test="add-to-playlist"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="remove-from-playlist"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="like-toggle"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="dislike-toggle"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="favorite-toggle"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="heart-button"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	[data-test="playlist-add"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden [class*="_trackActions"],
-.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"],
-.radiant-lyrics-ui-hidden [class*="_actionButtons"],
-.radiant-lyrics-ui-hidden
-	[class*="_favoriteButton"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden [class*="_addToPlaylist"],
-.radiant-lyrics-ui-hidden [class*="_lowerLeft"],
-.radiant-lyrics-ui-hidden [class*="_bottomActions"],
-.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child,
-.radiant-lyrics-ui-hidden
-	button[title*="Add to"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[title*="Remove from"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[title*="Like"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[title*="Favorite"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[title*="Heart"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[aria-label*="Add to"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[aria-label*="Remove from"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[aria-label*="Like"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[aria-label*="Favorite"]:not([data-test="footer-player"] *),
-.radiant-lyrics-ui-hidden
-	button[aria-label*="Heart"]:not([data-test="footer-player"] *),
-/* Target buttons in bottom left area specifically - (idk if this is needed.. but it's here) */
-	.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]
-	button[class*="_button"]:not(.unhide-ui-button),
-.radiant-lyrics-ui-hidden
-	[class*="_nowPlayingContainer"]
-	[class*="_iconButton"]:not(.unhide-ui-button),
-/* Additional catch-all for bottom left area buttons - (idk if this is needed.. but it's here) */
-	.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]
-	> div
-	> div:first-child
-	button:not(.unhide-ui-button),
-.radiant-lyrics-ui-hidden
-	[class*="_nowPlayingContainer"]
-	> div:first-child
-	button:not(.unhide-ui-button) {
-	opacity: 0 !important;
-	pointer-events: none !important;
-	transition: opacity 0.5s ease-in-out !important;
-}
-
-/* No hover functionality in Hide UI Mode - buttons stay hidden.. yea thats right, you heard me */
-
-/* Default state for control buttons */
-[data-test="add-to-playlist"],
-[data-test="remove-from-playlist"],
-[data-test="like-toggle"],
-[data-test="dislike-toggle"],
-[data-test="favorite-toggle"],
-[data-test="heart-button"],
-[data-test="playlist-add"],
-[class*="_trackActions"],
-[class*="_bottomLeftControls"],
-[class*="_actionButtons"],
-[class*="_favoriteButton"],
-[class*="_addToPlaylist"],
-[class*="_lowerLeft"],
-[class*="_bottomActions"],
-[class*="_mediaControls"] > div:first-child,
-button[title*="Add to"],
-button[title*="Remove from"],
-button[title*="Like"],
-button[title*="Favorite"],
-button[title*="Heart"],
-button[aria-label*="Add to"],
-button[aria-label*="Remove from"],
-button[aria-label*="Like"],
-button[aria-label*="Favorite"],
-button[aria-label*="Heart"],
-[class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
-[class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
-[class*="_nowPlayingContainer"]
-	> div
-	> div:first-child
-	button:not(.unhide-ui-button),
-[class*="_nowPlayingContainer"]
-	> div:first-child
-	button:not(.unhide-ui-button) {
-	transition: opacity 0.5s ease-in-out;
-}
-
-/* Smooth cover art movement when UI is hidden */
-[class*="_albumImage"],
-[class*="_coverArt"],
-figure[class*="_albumImage"] {
-	transition: transform 0.6s ease-in-out;
-}
-
-.radiant-lyrics-ui-hidden [class*="_albumImage"],
-.radiant-lyrics-ui-hidden [class*="_coverArt"],
-.radiant-lyrics-ui-hidden figure[class*="_albumImage"] {
-	transform: translateX(80px) !important;
-}
-
-/* Smooth track info wrapper movement when UI is hidden (Arists & Track Title) */
-[class*="_infoWrapper"],
-[class*="_textContainer"] {
-	transition: transform 0.6s ease-in-out;
-}
-
-.radiant-lyrics-ui-hidden [class*="_infoWrapper"],
-.radiant-lyrics-ui-hidden [class*="_textContainer"] {
-	transform: translateX(40px) !important;
-}
-
-/* Move parent containers instead of lyrics container directly to preserve gradient fade */
-[data-test="stream-metadata"],
-[class*="_rightColumn"],
-[class*="_rightSide"],
-[class*="_contentRight"],
-[class*="_sidePanel"],
-[class*="_lyricsSection"],
-[class*="_lyricsWrapper"] {
-	transition: transform 0.6s ease-in-out;
-}
-
-.radiant-lyrics-ui-hidden [data-test="stream-metadata"],
-.radiant-lyrics-ui-hidden [class*="_rightColumn"],
-.radiant-lyrics-ui-hidden [class*="_rightSide"],
-.radiant-lyrics-ui-hidden [class*="_contentRight"],
-.radiant-lyrics-ui-hidden [class*="_sidePanel"],
-.radiant-lyrics-ui-hidden [class*="_lyricsSection"],
-.radiant-lyrics-ui-hidden [class*="_lyricsWrapper"] {
-	transform: translateX(60px) translateY(-70px) !important;
-}
-
-/* Hide UI button base styling - just the transition */
-.hide-ui-button {
-	transition:
-		opacity 0.5s ease-in-out,
-		visibility 0.5s ease-in-out,
-		background-color 0.2s ease-in-out,
-		transform 0.2s ease-in-out !important;
-}
-
-/* Auto-fade styling for unhide button - (Keeps Text Visible, just not full opacity) | Cheers @Zyhn for the idea*/
-.unhide-ui-button.auto-faded {
-	background-color: transparent !important;
-	border-color: transparent !important;
-	box-shadow: none !important;
-	backdrop-filter: none !important;
-	-webkit-backdrop-filter: none !important;
-	color: rgba(255, 255, 255, 0.8) !important;
-	transition:
-		background-color 0.8s ease-in-out,
-		border-color 0.8s ease-in-out,
-		box-shadow 0.8s ease-in-out,
-		backdrop-filter 0.8s ease-in-out,
-		color 0.8s ease-in-out;
-}
-
-/* Restore button styling on hover */
-.unhide-ui-button.auto-faded:hover {
-	background-color: rgba(255, 255, 255, 0.2) !important;
-	border-color: rgba(255, 255, 255, 0.3) !important;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-	backdrop-filter: blur(10px) !important;
-	-webkit-backdrop-filter: blur(10px) !important;
-	color: white !important;
-	transition:
-		background-color 0.3s ease-in-out,
-		border-color 0.3s ease-in-out,
-		box-shadow 0.3s ease-in-out,
-		backdrop-filter 0.3s ease-in-out,
-		color 0.3s ease-in-out;
-}