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 6f2322338..98cd91f14 100644 --- 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 */ -} \ No newline at end of file + 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 index d44e9b179..b5bb89e98 100644 --- 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'; } -}); \ No newline at end of file +});