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.

js&css/extension/www.youtube.com/appearance/header/header.css

@@ -142,14 +142,14 @@ html[it-header-transparent=true] ytd-masthead #logo-icon {
 /* Define initial opacity for the icons */
 html[it-header-transparent=true] ytd-masthead #end {
  opacity: 1;
- transition: opacity 3s ease; /* Add transition for opacity change */
+ transition: opacity 3s ease;
 }
 
 /* Change opacity when scrolling down */
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end {
  opacity: 0;
- pointer-events: none; /* Disable pointer events to prevent interaction */
- transition: opacity 3s; /* Add transition for opacity change */
+ pointer-events: none;
+ transition: opacity 3s;
 }
 
 /*--------------------------------------------------------------
@@ -166,7 +166,7 @@ html[it-header-transparent=true] #country-code {
 --------------------------------------------------------------*/
 
 /* Show the voice search button when scrolled to the top */
-html[it-header-transparent=true][data-scroll-direction='up'] #voice-search-button {
+html[it-header-transparent=false] #voice-search-button {
  display: block !important;
 }
 
@@ -189,13 +189,19 @@ html[it-header-transparent=true] ytd-masthead #search-input.ytd-searchbox-spt {
  border: none;
 }
 
-html[it-header-transparent=true] ytd-masthead {
- background-color: rgba(230, 230, 230, 0.1) !important;
+
+html[it-header-transparent=true] ytd-masthead #search-input.ytd-searchbox-spt-container {
+ background-color: transparent !important;
+}
+
+html[it-header-transparent=true] ytd-masthead #search-input input {
+ background-color: transparent !important;
+ border: none !important;
 }
 
 /* Make the entire search bar transparent with transparent border */
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #search-input.ytd-searchbox-spt-container {
- opacity: 0.7 !important; /* Set opacity to make it barely visible */
+ opacity: 0.7 !important;
 
 }
 
@@ -215,14 +221,13 @@ html[it-header-transparent=true] ytd-masthead #search-icon-legacy {
 
 /* Make other icons fully opaque */
 html[it-header-transparent=true] ytd-masthead #search-icon-legacy,
-html[it-header-transparent=true] ytd-masthead #voice-search-button,
 html[it-header-transparent=true] ytd-masthead #end {
- opacity: 1 !important; /* Set full opacity for other icons */
+ opacity: 1 !important;
 }
 
 /* Make other icons fully opaque */
 html[it-header-transparent=true] ytd-masthead #search-icon-legacy,
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end,
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #logo-icon {
- opacity: 0.7 !important; /* Set full opacity for other icons */
-}
+ opacity: 0.7 !important;
+}