Guerra24 / Firefox-UWP-Style

Sun Valley + MDL2 Theme for Firefox
MIT License
406 stars 9 forks source link

Minimise, Maximise, and Close aren't Aligned on Touch Density #50

Closed lzlrd closed 2 years ago

lzlrd commented 2 years ago

There's not much else to say, but here's an image:

image

I know that some themes aren't meant to be used with higher densities, but even the "Normal" density has a gap...

image

...and the "Normal" density is much more compact than Edge...

image

...and other Fluent Design (especially Sun Valley/WinUI 3) applications.

Guerra24 commented 2 years ago

Actually... that's the standard behavior for UWP apps. image I think you are using non-integer scaling which is probably the reason why it doesn't fit correctly. explorer_2022-03-12_11-59-45

Because it is not an Edge theme it does not tries to mimic it, the tab bar/nav bar size is personal preference.

If you want to change the tab bar/nav bar size add the following into customChrome.css

    --tab-min-height: 42px !important;
    --uwp-urlbar-height: 42px !important;
    --uwp-navbar-letterbox: 0px !important;
    --uwp-navbar-letterbox-bookmarks: 0px !important;

Adjust to preference. It also disables the letterboxing margin.

lzlrd commented 2 years ago

Actually... that's the standard behavior for UWP apps.

I assumed that was an inconsistency on Microsoft's side, since some other apps with a "bar" at the top [which is darker than the "main" app interface] the navigation? buttons are stretched to match it.

I think you are using non-integer scaling which is probably the reason why it doesn't fit correctly.

I am, yes, though I'm not sure what you're referring to by "it doesn't fit" here since your GIF exhibits the same "problems" I brought up.

Because it is not an Edge theme it does not tries to mimic it, the tab bar/nav bar size is personal preference.

Alright, if that's the reasoning then I'm content with it as is.

If you want to change the tab bar/nav bar size add the following into customChrome.css

Thanks for the tip! It seems...

--tab-min-height: 42px !important;
--uwp-urlbar-height: 42px !important;

...isn't making any difference for me, however.

Guerra24 commented 2 years ago

I assumed that was an inconsistency on Microsoft's side, since some other apps with a "bar" at the top [which is darker than the "main" app interface] the navigation? buttons are stretched to match it.

This is quite common. UWP apps have a predefined and enforced titlebar and buttons but Win32 apps can go wild so for the sake of consistency and because the theme tries to mimic UWP the titlebar and buttons were made to respect the default behavior.

I am, yes, though I'm not sure what you're referring to by "it doesn't fit" here since your GIF exhibits the same "problems" I brought up.

Fit as in not leaving a gap in compact/normal mode. This is a bug when scaling but I'm not sure how to fix it properly, I'll check. Touch mode is gonna have the gap regardless of scaling setting.

...isn't making any difference for me, however.

It might be in touch mode. Add another selector like this:

:root[uidensity="touch"] {
    --tab-min-height: 50px !important;
    --uwp-urlbar-height: 50px !important;
}

image

lzlrd commented 2 years ago

It might be in touch mode. Add another selector like this:

:root[uidensity="touch"] {
  --tab-min-height: 50px !important;
  --uwp-urlbar-height: 50px !important;
}

That works, thanks.