From 8feabe16da43b2e00ce3d0b428f49b57019f13b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Costa?= Date: Sat, 11 May 2024 02:51:28 +0100 Subject: [PATCH] Fix #2069: Transparent top bar stops working when scroll. This commit resolves issue #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. Added an alternative choice in apperance to this transparent header. --- .../appearance/header/header.css | 40 ++++++++++--------- menu/skeleton-parts/appearance.js | 4 ++ 2 files changed, 25 insertions(+), 19 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 index 888a2f05e..bba96f844 100644 --- a/js&css/extension/www.youtube.com/appearance/header/header.css +++ b/js&css/extension/www.youtube.com/appearance/header/header.css @@ -14,34 +14,36 @@ html[it-header-transparent=true] { --ytd-searchbox-background: rgba(var(--ytd-s /* Header-transparent alternative by @joaolscosta */ /* Change opacity when scrolling down */ -html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;} -html[it-header-transparent2=true] ytd-masthead #logo-icon, +html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0;} +html[it-header-transparent-alternative=true] ytd-masthead #logo-icon, /* Hide country code when scrolling down */ -html[it-header-transparent2=true][data-scroll-direction=down] #country-code, +html[it-header-transparent-alternative=true][data-scroll-direction=down] #country-code, /* Hide the filter chips*/ -html[it-header-transparent2=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;} +html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-feed-filter-chip-bar-renderer {display: none !important;} /* Define opacity for the icons */ -html[it-header-transparent2=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;} +html[it-header-transparent-alternative=true] ytd-masthead #end {opacity: 1 !important; transition: opacity 2s ease;} /* Show the voice search button when scrolled to the top */ -html[it-header-transparent2=true] #voice-search-button {display: block !important; background-color: black !important;} +html[it-header-transparent-alternative=true] #voice-search-button {display: block !important; background-color: black !important;} /* TURN TOP BAR SEARCH BUTTONS BARELY VISIBLE */ /* Make top header bar transparent */ -html[it-header-transparent2=true] ytd-masthead, -html[it-header-transparent2=true] ytd-masthead #masthead, -html[it-header-transparent2=true] ytd-masthead #background, -html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt, -html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt-container, -html[it-header-transparent2=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;} -html[it-header-transparent2=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;} -html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #search-input input, +html[it-header-transparent-alternative=true] ytd-masthead, +html[it-header-transparent-alternative=true] ytd-masthead #masthead, +html[it-header-transparent-alternative=true] ytd-masthead #background, +html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt, +html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container, +html[it-header-transparent-alternative=true] ytd-masthead #search-input input {opacity: 0.7 !important; background: transparent; box-shadow: none; border: none;} +html[it-header-transparent-alternative=true] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: transparent !important;} +html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input input, /* Make other icons barely visible */ -html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;} +html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #end {opacity: 0.7 !important;} /* Make the entire search bar transparent with transparent border */ -html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;} +html[it-header-transparent-alternative=true][data-scroll-direction=down] ytd-masthead #search-input.ytd-searchbox-spt-container {background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important;} /* Fill search button with black */ -html[it-header-transparent2=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;} -/* Make other icons fully opaque */ -html[it-header-transparent2=true][data-scroll-direction=down] ytd-masthead #logo-icon {opacity: 1 !important;} +html[it-header-transparent-alternative=true] ytd-masthead #search-icon-legacy {background-color: black !important; opacity: 1 !important;} +/* Make chips filter bar barely visible */ +html[it-header-transparent-alternative=true] #chips-wrapper {opacity: 0.7 !important;} + + /*-------------------------------------------------------------- # POSITION diff --git a/menu/skeleton-parts/appearance.js b/menu/skeleton-parts/appearance.js index d0958163b..e8b9b37b1 100644 --- a/menu/skeleton-parts/appearance.js +++ b/menu/skeleton-parts/appearance.js @@ -97,6 +97,10 @@ extension.skeleton.main.layers.section.appearance.on.click.header = { component: "switch", text: "transparentBackground" }, + header_transparent_alternative: { + component: "switch", + text: "Transparent background alternative" + }, header_hide_country_code: { component: "switch", text: "hideCountryCode",