Sravan/BizGaze_Remote
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Android system bars — Option 1 preview: brand-blue bars + white icons

Browse Source 
Fill the status/nav inset regions with brand blue (#1F3B73) via html.sysbar-blue
pseudo-elements and switch the bar icons to light so they read on blue. This is
one of two looks for the user to compare on-device; Option 2 (white + separator)
is already in the CSS and swaps in by changing the class + icon style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sravan
2026-09-19 18:07:31 +05:30
parent 703cf1fcf0
commit 133208ae3f
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/home.html
+13 -1
View File
@@ -27,6 +27,15 @@
which populates env(safe-area-inset-*) with real values on every device (notch, Dynamic Island, home which populates env(safe-area-inset-*) with real values on every device (notch, Dynamic Island, home
indicator). On the web these resolve to 0. All layout below pads with var(--sat)/var(--sab). */ indicator). On the web these resolve to 0. All layout below pads with var(--sat)/var(--sab). */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--kb:0px;} :root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--kb:0px;}
/* Native system-bar look (Android), chosen via a class on <html>. Pseudo-elements fill/mark the status +
nav inset regions that are otherwise plain white under edge-to-edge. Exactly one class is set at a time. */
/* Option 1 — brand-blue bars (icons set to light/white to suit): */
html.native-app.sysbar-blue::before,html.native-app.sysbar-blue::after{content:"";position:fixed;left:0;right:0;background:#1F3B73;z-index:6000;pointer-events:none;}
html.native-app.sysbar-blue::before{top:0;height:env(safe-area-inset-top,0px);}
html.native-app.sysbar-blue::after{bottom:0;height:env(safe-area-inset-bottom,0px);}
/* Option 2 — clean white bars with a thin brand separator line (icons stay dark): */
html.native-app.sysbar-sep::before{content:"";position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:1.5px;background:rgba(31,59,115,.22);z-index:6000;pointer-events:none;}
html.native-app.sysbar-sep::after{content:"";position:fixed;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;height:1.5px;background:rgba(31,59,115,.22);z-index:6000;pointer-events:none;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%;} body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);margin:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%;}
/* ---- Top bar ---- */ /* ---- Top bar ---- */
@@ -1315,7 +1324,10 @@ function twemojify(_el){ /* native emoji: nothing to do */ }</script>
// clock/battery/nav icons vanish). Set them to DARK content — in @capacitor-community/safe-area, style // clock/battery/nav icons vanish). Set them to DARK content — in @capacitor-community/safe-area, style
// 'LIGHT' means "dark content on a light background". Also mirrored in capacitor.config.json (statusBarStyle/ // 'LIGHT' means "dark content on a light background". Also mirrored in capacitor.config.json (statusBarStyle/
// navigationBarStyle) for a permanent fix on the next build; this runtime call fixes already-installed APKs. // navigationBarStyle) for a permanent fix on the next build; this runtime call fixes already-installed APKs.
if(p==='android'){ try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'LIGHT', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'LIGHT', type:'NAVIGATION_BAR' }); } }catch(_){} } // OPTION 1 (brand-blue bars): fill the status/nav regions blue (CSS .sysbar-blue) + LIGHT/white icons so
// they contrast on the blue (plugin style 'DARK' = light content). Swap to Option 2 by changing the class to
// 'sysbar-sep' and the two styles below to 'LIGHT' (dark icons for white bars).
if(p==='android'){ r.classList.add('sysbar-blue'); try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'DARK', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'DARK', type:'NAVIGATION_BAR' }); } }catch(_){} }
// Keyboard. The device log proved that on our build (resize:none) the WebView does NOT resize and // Keyboard. The device log proved that on our build (resize:none) the WebView does NOT resize and
// VisualViewport does NOT reflect the keyboard (clientHeight & vvHeight both stay full) — so the ONLY // VisualViewport does NOT reflect the keyboard (clientHeight & vvHeight both stay full) — so the ONLY
// reliable signal is the Capacitor Keyboard plugin's reported height. Now that the iOS auto-zoom is // reliable signal is the Capacitor Keyboard plugin's reported height. Now that the iOS auto-zoom is