diff --git a/js&css/extension/www.youtube.com/appearance/header/header.css b/js&css/extension/www.youtube.com/appearance/header/header.css index 338d8d838..8fdf3fda7 100644 --- 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 index b5bb89e98..564149a9a 100644 --- 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,7 +615,6 @@ 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'); @@ -620,14 +622,17 @@ window.addEventListener('scroll', function() { }); /*------------------------------------------------------------------------------ - 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'; + } } });