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

joaolscosta · Mar 13, 2024 · 4a9ac6c · 4a9ac6c
1 parent a60e05b
commit 4a9ac6c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 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
@@ -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;
+}
diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js
@@ -630,4 +630,4 @@ window.addEventListener('scroll', function() {
  } else {
  voiceSearchButton.style.display = 'none';
  }
-});
+});