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">