From 25054e137c251bba0eeb0b357e80bf82b92ebd41 Mon Sep 17 00:00:00 2001 From: Gary Wang Date: Sun, 26 Jan 2025 09:07:38 +0800 Subject: [PATCH] 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" `` 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 --- app/src/assets/scss/base.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 1605c7ab4..49c9380c6 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -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); }