Removed forehead on macOS (#1424)

Author: veler

src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/dark.scss

@@ -423,4 +423,8 @@
   /* Hero */
   --hero-background-image: url("../img/hero/dark-theme-tile.png");
   --hero-background-color: rgba(91, 42, 134, 0.5);
+
+  /* Tool Page */
+  --tool-page-padding: 40px;
+  --tool-page-top-right-toolbar-margin-right: 0;
 }

src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/light.scss

@@ -423,4 +423,8 @@
   /* Hero */
   --hero-background-image: url("../img/hero/light-theme-tile.png");
   --hero-background-color: rgba(131, 0, 255, 0.35);
+
+  /* Tool Page */
+  --tool-page-padding: 40px;
+  --tool-page-top-right-toolbar-margin-right: 0;
 }

src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/dark.scss

@@ -423,4 +423,8 @@
     /* Hero */
     --hero-background-image: url("../img/hero/dark-theme-tile.png");
     --hero-background-color: rgba(91, 42, 134, 0.5);
+
+    /* Tool Page */
+    --tool-page-padding: 16px;
+    --tool-page-top-right-toolbar-margin-right: 36px;
 }

src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/light.scss

@@ -423,4 +423,8 @@
     /* Hero */
     --hero-background-image: url("../img/hero/light-theme-tile.png");
     --hero-background-color: rgba(131, 0, 255, 0.35);
+
+    /* Tool Page */
+    --tool-page-padding: 16px;
+    --tool-page-top-right-toolbar-margin-right: 36px;
 }

src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/dark.scss

@@ -423,4 +423,8 @@
     /* Hero */
     --hero-background-image: url("../img/hero/dark-theme-tile.png");
     --hero-background-color: rgba(91, 42, 134, 0.5);
+
+    /* Tool Page */
+    --tool-page-padding: 40px;
+    --tool-page-top-right-toolbar-margin-right: 0;
 }

src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/light.scss

@@ -423,4 +423,8 @@
     /* Hero */
     --hero-background-image: url("../img/hero/light-theme-tile.png");
     --hero-background-color: rgba(131, 0, 255, 0.35);
+
+    /* Tool Page */
+    --tool-page-padding: 40px;
+    --tool-page-top-right-toolbar-margin-right: 0;
 }

src/app/dev/DevToys.Blazor/Components/Menu/NavBar/NavBar.razor.scss

@@ -4,14 +4,30 @@ $sidebar-hidden-width: 0px;
 $sidebar-collapsed-width: 49px;
 $sidebar-expanded-width: 320px;
 $sidebar-expanded-overlay-zindex: 10000;
-$sidebar-top-bar-height: 48px;
+
+:root {
+  --sidebar-top-bar-height-hard: 48px;
+  --sidebar-top-bar-height: var(--sidebar-top-bar-height-hard);
+  --sidebar-margin-top: 0px;
+}
+
+div[data-theme='macos-dark-theme'], div[data-theme='macos-light-theme'] {
+  --sidebar-top-bar-height: 0px;
+  --sidebar-margin-top: var(--sidebar-top-bar-height-hard);
+}
+
+div[data-compactmode] {
+  div[data-theme='macos-dark-theme'], div[data-theme='macos-light-theme'] {
+    --sidebar-top-bar-height: var(--sidebar-top-bar-height-hard);
+  }
+}
 
 .nav-bar-root {
     pointer-events: auto;
     height: 100%;
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-template-rows: $sidebar-top-bar-height calc(100vh - $sidebar-top-bar-height);
+    grid-template-rows: var(--sidebar-top-bar-height) calc(100vh - var(--sidebar-top-bar-height));
     gap: 0px 0px;
     grid-template-areas:
         "header header"
@@ -35,13 +51,16 @@ $sidebar-top-bar-height: 48px;
 
     .nav-bar-header {
         grid-area: header;
+        height: var(--sidebar-top-bar-height-hard);
         z-index: calc($sidebar-expanded-overlay-zindex + 1);
+        pointer-events: none;
     }
 
     nav {
         grid-area: sidebar;
         width: $sidebar-expanded-width;
         max-width: $sidebar-expanded-width;
+        margin-top: var(--sidebar-margin-top);
         overflow: hidden;
         display: grid;
         grid-template-columns: 1fr;
@@ -71,7 +90,7 @@ $sidebar-top-bar-height: 48px;
         &.expanded-overlay {
             z-index: $sidebar-expanded-overlay-zindex;
             position: absolute;
-            padding-top: $sidebar-top-bar-height;
+            padding-top: var(--sidebar-top-bar-height);
             height: 100%;
             width: $sidebar-expanded-width;
             max-width: $sidebar-expanded-width;

src/app/dev/DevToys.Blazor/Pages/Index.razor

@@ -106,6 +106,7 @@
                         IsEnabled="@compactOverlayModeAllowed"
                         IsVisible="@WindowService.IsCompactOverlayModeSupportedByPlatform"
                         ToolTip="@(WindowService.IsCompactOverlayMode ? MainWindow.PictureInPictureExpand : MainWindow.PictureInPictureContract)"
+                        Class="compact-overlay-button"
                         @onclick="@OnToggleCompactOverlayModeButtonClick">
                     <FontIcon Glyph="@(WindowService.IsCompactOverlayMode ? '\uF42C' : '\uF364')"
                               Rotation="@(WindowService.IsCompactOverlayMode ? -90 : 180)"/>

src/app/dev/DevToys.Blazor/Pages/Index.razor.scss

@@ -15,9 +15,20 @@
     }
 }
 
+div[data-theme='macos-dark-theme'], div[data-theme='macos-light-theme'] {
+    .compact-overlay-button {
+        margin-top: 16px;
+    }
+}
 
 // Compact mode
 div[data-compactmode] {
+    div[data-theme='macos-dark-theme'], div[data-theme='macos-light-theme'] {
+        .compact-overlay-button {
+            margin-top: 8px;
+        }
+    }
+
     .sidebar-footer-button {
         min-block-size: 32px !important;
         padding-block: 4px 6px !important;

src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss

@@ -65,7 +65,7 @@
 }
 
 .tool-group-grid-view {
-    padding: 40px;
+    padding: var(--tool-page-padding);
     transform: translateZ(0);
 
     .tool-group-grid-view-item {