Fix #2069: Transparent top bar stops working when scroll. Fixed revie…

…wer notes.
code-charity · Mar 18, 2024 · 1ce6ac4 · 1ce6ac4
1 parent 51e36a8
commit 1ce6ac4
Showing 1 changed file with 9 additions and 14 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
@@ -140,14 +140,14 @@ html[it-header-hide-right-buttons='true'] #masthead #container #end {visibility:
 /* Define initial opacity for the icons */
 html[it-header-transparent=true] ytd-masthead #end {
     opacity: 1;
-    transition: opacity 3s ease;
+    transition: opacity0.25 , 2s;
 }
 
 /* Change opacity when scrolling down */
 html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end {
     opacity: 0;
     pointer-events: none;
-	transition: opacity 3s;
+	transition: opacity0.25 , 2s;
 }
 
 /*--------------------------------------------------------------
@@ -180,23 +180,19 @@ html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #voi
 html[it-header-transparent=true] ytd-masthead,
 html[it-header-transparent=true] ytd-masthead #masthead,
 html[it-header-transparent=true] ytd-masthead #background,
-html[it-header-transparent=true] ytd-masthead #search-input.ytd-searchbox-spt {
+html[it-header-transparent=true] ytd-masthead #search-input.ytd-searchbox-spt,
+html[it-header-transparent=true] ytd-masthead #search-input.ytd-searchbox-spt-container,
+html[it-header-transparent=true] ytd-masthead #search-input input {
     opacity: 0.7 !important;
 	background: transparent;
 	box-shadow: none;
 	border: none;
 }
 
-
 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;
@@ -219,13 +215,12 @@ 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 #end {
+html[it-header-transparent=true] ytd-masthead #end,
+html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #logo-icon {
     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 {
+/* Make other icons barely visible */
+html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #end {
     opacity: 0.7 !important;
 }