style: finetuning titlebar look-n-feel for PWA support (#13779)

The previous patch (675e59c) introduce initial PWA WCO support,
this patch finetunes the PWA titlebar support by ensure the
titlebar is always visible and fill 100% page (window)
width, with the following changes:

* Use margin instead of padding to ensure 'width' fills 100% page
  width, so does bottom border.

Remaining PWA stuff:

The remaining PWA WCO part have inconsistent color with the actual
color that SiYuan('s titlebar) uses, thus to make the PWA titlebar
feel native, we still needs to set either:

- a "theme-color" `<meta>` attribute (suggested)
- a "theme_color" member in the PWA manifest

...which will be a seprated topic that won't be worked on in this
patchset.

Also, the titlebar bottom border might be covered by the WCO, since
it involves half-pixel border issue which seems to be by-design,
I won't address such issue in this patchset.

See also:

* https://github.com/siyuan-note/siyuan/issues/13226#issuecomment-2594551219
  This patchset can address this issue
* https://github.com/siyuan-note/siyuan/pull/13779#discussion_r1918108643
  Previously mentioned half-pixel issue
This commit is contained in:
Gary Wang 2025-01-26 09:07:38 +08:00 committed by GitHub
parent 8d9cc439db
commit 25054e137c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -104,9 +104,8 @@ html {
border-bottom: .5px solid var(--b3-border-color);
&--browser {
padding-left: 0;
margin-left: env(titlebar-area-x, 0);
width: env(titlebar-area-width, 100%);
padding-left: env(titlebar-area-x, 0);
padding-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
height: env(titlebar-area-height, 32px);
}