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.
joaolscosta · Mar 18, 2024 · 39e5880 · 39e5880
1 parent 1ce6ac4
commit 39e5880
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 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
@@ -135,19 +135,20 @@ html[it-header-transparent=true] ytd-masthead #logo-icon {
 /*--------------------------------------------------------------
 # HIDE RIGHT BUTTONS
 --------------------------------------------------------------*/
-html[it-header-hide-right-buttons='true'] #masthead #container #end {visibility: hidden !important; pointer-events: none !important;}
+html[it-header-hide-right-buttons='true'] #masthead #container #end {
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
 
 /* Define initial opacity for the icons */
 html[it-header-transparent=true] ytd-masthead #end {
     opacity: 1;
-    transition: opacity0.25 , 2s;
+    transition: opacity 2s ease;
 }
 
 /* Change opacity when scrolling down */
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end {
     opacity: 0;
-    pointer-events: none;
-	transition: opacity0.25 , 2s;
 }
 
 /*--------------------------------------------------------------
@@ -160,16 +161,14 @@ html[it-header-transparent=true] #country-code {
     display: none !important;
 }
 /*--------------------------------------------------------------
-# HIDE VOICE SEARCH BUTTON
+# VOICE SEARCH BUTTON
 --------------------------------------------------------------*/
 
 /* Show the voice search button when scrolled to the top */
-html[it-header-transparent=false] #voice-search-button {
+html[it-header-transparent=true] #voice-search-button {
     display: block !important;
-}
+	background-color: black !important;
 
-html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #voice-search-button {
-	display: none;
 }
 
 /*--------------------------------------------------------------

diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js
@@ -564,18 +564,21 @@ ImprovedTube.channelVideosCount = function () {
         xhr.send();
     }
 };
-
 /*------------------------------------------------------------------------------
- TURN TOP BAR TRANSPARENT WHEN SCROLLING
+TURN TOP BAR TRANSPARENT WHEN SCROLLING
 ------------------------------------------------------------------------------*/
+
 window.addEventListener('scroll', function () {
-    var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
-    var endButtons = masthead.querySelector('#end');
+    // Check if header transparency is enabled
+    if (ImprovedTube.storage.header_transparent === true) {
+        var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
+        var endButtons = masthead.querySelector('#end');
 
-    if (window.scrollY === 0) {
-        endButtons.style.visibility = 'visible';
-    } else {
-        endButtons.style.visibility = 'hidden';
+        if (window.scrollY === 0) {
+            endButtons.style.visibility = 'visible';
+        } else {
+            endButtons.style.visibility = 'hidden';
+        }
     }
 });
 
@@ -593,7 +596,7 @@ function handleScroll() {
 }
 
 /*------------------------------------------------------------------------------
- CHECK IF USER IS SCROLLING
+CHECK IF USER IS SCROLLING
 ------------------------------------------------------------------------------*/
 window.addEventListener("scroll", handleScroll);
 
@@ -612,22 +615,24 @@ var scrollDirection = getScrollDirection();
 window.addEventListener('scroll', function() {
     var direction = scrollDirection();
     if (direction === 'down') {
-
         document.documentElement.setAttribute('data-scroll-direction', 'down');
     } else {
         document.documentElement.removeAttribute('data-scroll-direction');
     }
 });
 
 /*------------------------------------------------------------------------------
- SHOW/HIDE VOICE SEARCH BUTTON
+SHOW/HIDE VOICE SEARCH BUTTON
 ------------------------------------------------------------------------------*/
 window.addEventListener('scroll', function() {
-    var voiceSearchButton = document.getElementById('voice-search-button');
-    if (window.scrollY === 0) {
-        // At the top of the page, show the voice search button
-        voiceSearchButton.style.display = 'block';
-    } else {
-        voiceSearchButton.style.display = 'none';
+    // Check if header transparency is enabled
+    if (ImprovedTube.storage.header_transparent === true) {
+        var voiceSearchButton = document.getElementById('voice-search-button');
+        if (window.scrollY === 0) {
+            // At the top of the page, show the voice search button
+            voiceSearchButton.style.display = 'block';
+        } else {
+            voiceSearchButton.style.display = 'none';
+        }
     }
 });