diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/dark.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/dark.scss
index 61191d03e7..c344c964bc 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/dark.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/light.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/light.scss
index eb5aef84e7..a13aa474f9 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/linux/light.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/dark.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/dark.scss
index 7b24e8f4fe..0238690bf0 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/dark.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/light.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/light.scss
index 69b3e389ec..5974a142a2 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/macos/light.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/dark.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/dark.scss
index a43a19caa7..2cba6e6206 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/dark.scss
+++ b/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;
}
diff --git a/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/light.scss b/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/light.scss
index c873d10f06..6a78c03073 100644
--- a/src/app/dev/DevToys.Blazor/Assets/sass/theme/windows/light.scss
+++ b/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;
}
diff --git a/src/app/dev/DevToys.Blazor/Components/Menu/NavBar/NavBar.razor.scss b/src/app/dev/DevToys.Blazor/Components/Menu/NavBar/NavBar.razor.scss
index 55c7b59ad4..4f51d3e54a 100644
--- a/src/app/dev/DevToys.Blazor/Components/Menu/NavBar/NavBar.razor.scss
+++ b/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;
diff --git a/src/app/dev/DevToys.Blazor/Pages/Index.razor b/src/app/dev/DevToys.Blazor/Pages/Index.razor
index dacf69e7a5..18eb9fcab3 100644
--- a/src/app/dev/DevToys.Blazor/Pages/Index.razor
+++ b/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">
diff --git a/src/app/dev/DevToys.Blazor/Pages/Index.razor.scss b/src/app/dev/DevToys.Blazor/Pages/Index.razor.scss
index 31562364a0..f75e5e1c9d 100644
--- a/src/app/dev/DevToys.Blazor/Pages/Index.razor.scss
+++ b/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;
diff --git a/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss b/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss
index 2bab3534fb..177d32ac3a 100644
--- a/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolGroup.razor.scss
+++ b/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 {
diff --git a/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolPage.razor b/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolPage.razor
index 16b44adf9d..8917f067bc 100644
--- a/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolPage.razor
+++ b/src/app/dev/DevToys.Blazor/Pages/SubPages/ToolPage.razor
@@ -66,7 +66,8 @@
+ IsVisible="@(!WindowService.IsCompactOverlayMode)"
+ Class="tool-page-top-right-toolbar">