Fix code-charity#2069: Transparent top bar stops working when scroll.

This commit resolves issue code-charity#2069, where the transparent top bar would lose its transparency effect upon scrolling. The issue was addressed by removing unnecessary icons and adjusting opacity settings to maintain the desired transparent appearance even during scrolling. It also have modifications that admin requested to. Added an alternative choice in apperance to this transparent header.
joaolscosta · May 11, 2024 · 8feabe1 · 8feabe1
1 parent c39d623
commit 8feabe1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/js&css/extension/www.youtube.com/appearance/header/header.css b/js&css/extension/www.youtube.com/appearance/header/header.css
@@ -14,34 +14,36 @@ html[it-header-transparent=true] {  --ytd-searchbox-background: rgba(var(--ytd-s
 
 /* Header-transparent alternative by @joaolscosta */
 /* Change opacity when scrolling down */
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;}
-html[it-header-transparent2=true] ytd-masthead #logo-icon,
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;}
+html[it-header-transparent-alternative=true] ytd-masthead #logo-icon,
 /* Hide country code when scrolling down */
-html[it-header-transparent2=true][data-scroll-direction=down] #country-code,
+html[it-header-transparent-alternative=true][data-scroll-direction=down] #country-code,
 /* Hide the filter chips*/
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;}
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;}
 /* Define opacity for the icons */
-html[it-header-transparent2=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;}	
+html[it-header-transparent-alternative=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;}	
 /* Show the voice search button when scrolled to the top */
-html[it-header-transparent2=true] #voice-search-button {display: block !important; background-color: black !important;}
+html[it-header-transparent-alternative=true] #voice-search-button {display: block !important; background-color: black !important;}
 /* TURN TOP BAR SEARCH BUTTONS BARELY VISIBLE */
 /* Make top header bar transparent */
-html[it-header-transparent2=true] ytd-masthead,
-html[it-header-transparent2=true] ytd-masthead #masthead,
-html[it-header-transparent2=true] ytd-masthead #background,
-html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt,
-html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt-container,
-html[it-header-transparent2=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;}
-html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;}
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #search-input input,
+html[it-header-transparent-alternative=true] ytd-masthead,
+html[it-header-transparent-alternative=true] ytd-masthead #masthead,
+html[it-header-transparent-alternative=true] ytd-masthead #background,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container,
+html[it-header-transparent-alternative=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;}
+html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;}
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input input,
 /* Make other icons barely visible */
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;}
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;}
 /* Make the entire search bar transparent with transparent border */
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;}
+html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;}
 /* Fill search button with black */
-html[it-header-transparent2=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;}
-/* Make other icons fully opaque */
-html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #logo-icon {opacity: 1 !important;}
+html[it-header-transparent-alternative=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;}
+/* Make chips filter bar barely visible */
+html[it-header-transparent-alternative=true] #chips-wrapper {opacity: 0.7 !important;}
+
+
 
 /*--------------------------------------------------------------
 # POSITION

diff --git a/menu/skeleton-parts/appearance.js b/menu/skeleton-parts/appearance.js
@@ -97,6 +97,10 @@ extension.skeleton.main.layers.section.appearance.on.click.header = {
 				component: "switch",
 				text: "transparentBackground"
 			},
+			header_transparent_alternative: {
+				component: "switch",
+				text: "Transparent background alternative"
+			},
 			header_hide_country_code: {
 				component: "switch",
 				text: "hideCountryCode",