fix(renderer): fix macos traffic lights gap

- resolve #2035

Author: Su-Yong

src/plugins/in-app-menu/titlebar.css

@@ -4,12 +4,14 @@
 }
 
 /* youtube-music style */
-
 ytmusic-app-layout {
   overflow: scroll;
   height: calc(100vh - var(--menu-bar-height, 36px));
   margin-top: var(--menu-bar-height, 36px) !important;
 }
+ytmusic-app-layout#layout {
+  --ytmusic-nav-bar-offset: 0px;
+}
 
 ytmusic-app-layout::-webkit-scrollbar{
   width: var(--ytmusic-scrollbar-width);

src/renderer.ts

@@ -225,6 +225,7 @@ const preload = async () => {
     t: i18t.bind(i18next),
   };
   defineYTMDTransElements();
+  document.body.dataset.os = navigator.userAgent;
 };
 
 const main = async () => {

src/youtube-music.css

@@ -80,3 +80,12 @@ tp-yt-paper-item.ytmusic-guide-entry-renderer::before {
 ytmusic-player[player-ui-state=FULLSCREEN] {
   margin-top: calc(var(--menu-bar-height, 32px) * -1) !important;
 }
+
+/* macos traffic lights fix */
+:where([data-os*="Macintosh"]) ytmusic-app-layout#layout ytmusic-nav-bar {
+  padding-top: var(--ytmusic-nav-bar-offset, 0);
+}
+:where([data-os*="Macintosh"]) ytmusic-app-layout#layout {
+  --ytmusic-nav-bar-offset: 24px;
+  --ytmusic-nav-bar-height: calc(90px + var(--ytmusic-nav-bar-offset, 0));
+}