diff --git a/plugins/blur-nav-bar/style.css b/plugins/blur-nav-bar/style.css index e64b7526..d1722b79 100644 --- a/plugins/blur-nav-bar/style.css +++ b/plugins/blur-nav-bar/style.css @@ -1,4 +1,4 @@ -#nav-bar-background { +#nav-bar-background, #header.ytmusic-item-section-renderer { background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(18px) !important; } diff --git a/plugins/in-app-menu/front.js b/plugins/in-app-menu/front.js index 49e56b2b..c731b1a0 100644 --- a/plugins/in-app-menu/front.js +++ b/plugins/in-app-menu/front.js @@ -1,6 +1,7 @@ const { remote, ipcRenderer } = require("electron"); const customTitlebar = require("custom-electron-titlebar"); +function $(selector) { return document.querySelector(selector); } module.exports = () => { const bar = new customTitlebar.Titlebar({ @@ -13,4 +14,19 @@ module.exports = () => { ipcRenderer.on("updateMenu", function (_event, showMenu) { bar.updateMenu(showMenu ? remote.Menu.getApplicationMenu() : null); }); + + // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it) + document.addEventListener('apiLoaded', () => { + setNavbarMargin() + const playPageObserver = new MutationObserver(() => { + setNavbarMargin(); + }); + playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] }) + }) }; + +function setNavbarMargin() { + $('ytmusic-app-layout').playerPageOpen_ ? + $('#nav-bar-background').style.right = '0px' : + $('#nav-bar-background').style.right = '12px'; +} diff --git a/plugins/in-app-menu/style.css b/plugins/in-app-menu/style.css index d1efb3d0..090a94ef 100644 --- a/plugins/in-app-menu/style.css +++ b/plugins/in-app-menu/style.css @@ -4,9 +4,10 @@ font-size: 14px !important; } -/* fixes scrollbar positioning relative to nav bar */ -#nav-bar-background.ytmusic-app-layout { - right: 15px !important; +/* fixes nav-bar-background opacity bug and allows clicking scrollbar through it */ +#nav-bar-background { + opacity: 1 !important; + pointer-events: none; } /* remove window dragging for nav bar (conflict with titlebar drag) */ @@ -16,14 +17,9 @@ ytmusic-pivot-bar-item-renderer { -webkit-app-region: unset !important; } -/* navbar background black */ -.center-content.ytmusic-nav-bar { - background: #030303; -} - -/* move up item selectrion renderer by 15 px */ -ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer { - top: 75 !important; +/* move up item selection renderer by 13 px */ +ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer { + top: calc(var(--ytmusic-nav-bar-height) - 13px) !important; } /* fix weird positioning in search screen*/ @@ -32,8 +28,8 @@ ytmusic-header-renderer.ytmusic-search-page { } /* Move navBar downwards */ -ytmusic-app-layout > [slot="nav-bar"], -#nav-bar-background.ytmusic-app-layout { +ytmusic-nav-bar[slot="nav-bar"], +#nav-bar-background { top: 17px !important; }