Skip to content

Commit

Permalink
Fix code-charity#2069: Transparent top bar stops working when scroll.
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@joaolscosta
joaolscosta committed Mar 14, 2024
1 parent fa32a1b commit 51cb3b6
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 11 deletions.
117 changes: 106 additions & 11 deletions js&css/extension/www.youtube.com/appearance/header/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,17 @@
# Hide right buttons
# Hide country code
# Hide voice search button
# Turn top bar icons barely visible
--------------------------------------------------------------*/

html[it-header-transparent=true] ytd-masthead {background-color: rgba(230, 230, 230, 0.1) !important;}

/*--------------------------------------------------------------
# POSITION
--------------------------------------------------------------*/

html[it-header-position=hidden] #masthead-container:not([it-search-focus=true]),
html[it-header-position=hidden_on_video_page][data-page-type=video] #masthead-container:not([it-search-focus=true]) {
transform: translateY(-100%);
}

html[it-header-position=hidden] tp-yt-app-drawer#guide #guide-spacer,
html[it-header-position=hidden] tp-yt-app-drawer:not([opened]) #header ytd-topbar-logo-renderer,
html[it-header-position=hidden] tp-yt-app-drawer:not([opened]) #header .it-button,
Expand All @@ -29,7 +28,7 @@ html[it-header-position=static] tp-yt-app-drawer:not([opened]) #header ytd-topba
html[it-header-position=static] tp-yt-app-drawer:not([opened]) #header .it-button,
html[it-header-position=hidden_on_video_page][data-page-type=video] tp-yt-app-drawer#guide #guide-spacer,
html[it-header-position=hover_on_video_page][data-page-type=video] tp-yt-app-drawer#guide #guide-spacer {
display:none;
display: none;
}

html[it-header-position=hover] #masthead-container,
Expand All @@ -41,6 +40,7 @@ html[it-header-position=hover_on_video_page][data-page-type='video'] ytd-mini-gu
html[it-header-position=static] tp-yt-app-drawer,
html[it-header-position=static] ytd-mini-guide-renderer {
z-index: 2200 !important;
z-index: 7 !important;
}

html[it-header-position=hidden] ytd-page-manager#page-manager,
Expand Down Expand Up @@ -77,14 +77,21 @@ html[it-header-position=hover][it-search-focus=true] #masthead-container #backgr
html[it-header-position=hover_on_video_page][data-page-type='video'] #masthead-container:hover #background,
html[it-header-position=hover_on_video_page][data-page-type='video'] #masthead-container:focus-within #background,
html[it-header-position=hover_on_video_page][data-page-type='video'][it-search-focus=true] #masthead-container #background {
transform: translateY(0%);
opacity: 1 !important;
transform: translateY(0%);
opacity: 1 !important;
transform: translateY(0%);
opacity: 1 !important;
}


html[it-header-position=static] .ytd-app:not([masthead-hidden_]) #masthead-container {
position: absolute;
z-index: 7000 !important;
z-index: 7 !important;
}

html[it-header-position="static"] ytd-app {
padding-top: var(--it-header-size);
}

html[it-header-position=hover_on_video_page]:not([data-page-type=video]) tp-yt-app-drawer:not([opened]) #header,
Expand All @@ -106,33 +113,121 @@ html[it-header-position=static] tp-yt-app-drawer #header {
}

html[it-header-position=hover] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=hidden] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=hidden] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=hidden] #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
html[it-header-position=static] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
top: 9px !important;
}


/*--------------------------------------------------------------
# IMPROVE LOGO
--------------------------------------------------------------*/
html[it-header-improve-logo='true'] ytd-topbar-logo-renderer path[fill='#FF0000'],
html[it-header-improve-logo='true'] ytd-topbar-logo-renderer polygon[fill='#FFFFFF'] {
fill: rgb(40, 40, 40) !important;
}

html[it-header-improve-logo='true'][dark] ytd-topbar-logo-renderer path[fill='#FF0000'] {
fill: rgb(66, 66, 66) !important;
}

html[it-header-transparent=true] ytd-masthead #logo-icon {
display: none !important;
}

/*--------------------------------------------------------------
# HIDE RIGHT BUTTONS
--------------------------------------------------------------*/
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: 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;
transition: opacity 3s;
}

/*--------------------------------------------------------------
# HIDE COUNTRY CODE
--------------------------------------------------------------*/
html[it-header-hide-country-code='true'] #logo #country-code,

/* Hide country initials when scrolling down */
html[it-header-transparent=true] #country-code {
display: none !important;
}
/*--------------------------------------------------------------
# HIDE VOICE SEARCH BUTTON
--------------------------------------------------------------*/
html[it-hide-voice-search-button='true'] #voice-search-button {
display: none !important;

/* Show the voice search button when scrolled to the top */
html[it-header-transparent=false] #voice-search-button {
display: block !important;
}

html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #voice-search-button {
display: none;
}

/*--------------------------------------------------------------
# TURN TOP BAR SEARCH BUTTONS BARELY VISIBLE
--------------------------------------------------------------*/

/* Make top header bar transparent */
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 {
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;

}

html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #search-input input {
opacity: 0.7 !important;
}

html[it-header-transparent=true][data-scroll-direction='down'] ytd-masthead #search-input.ytd-searchbox-spt-container {
background-color: rgba(255, 255, 255, 0.5) !important;
}


/* Fill search button with black */
html[it-header-transparent=true] ytd-masthead #search-icon-legacy {
background-color: black !important;
}

/* Make other icons fully opaque */
html[it-header-transparent=true] ytd-masthead #search-icon-legacy,
html[it-header-transparent=true] ytd-masthead #end {
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;
}
67 changes: 67 additions & 0 deletions js&css/web-accessible/www.youtube.com/appearance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,3 +564,70 @@ ImprovedTube.channelVideosCount = function () {
xhr.send();
}
};

/*------------------------------------------------------------------------------
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');

if (window.scrollY === 0) {
endButtons.style.visibility = 'visible';
} else {
endButtons.style.visibility = 'hidden';
}
});

function handleScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

// Variable with all top bar buttons
var buttonsContainer = document.getElementById('buttons');

if (scrollTop > 100) {
buttonsContainer.classList.add('hidden');
} else {
buttonsContainer.classList.remove('hidden');
}
}

/*------------------------------------------------------------------------------
CHECK IF USER IS SCROLLING
------------------------------------------------------------------------------*/
window.addEventListener("scroll", handleScroll);

function getScrollDirection() {
var lastScrollTop = 0;
return function() {
var st = window.pageYOffset || document.documentElement.scrollTop;
var scrollDirection = st > lastScrollTop ? 'down' : 'up';
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
return scrollDirection;
};
}

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
------------------------------------------------------------------------------*/
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';
}
});

0 comments on commit 51cb3b6

Please sign in to comment.