Use Window Controls Overlay for Chrome PWA titlebar
Adds display_override: window-controls-overlay to the manifest so the app extends into the titlebar area. The navbar becomes draggable and uses env(titlebar-area-*) to avoid the window controls buttons. Interactive elements stay clickable via -webkit-app-region: no-drag. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
def879de2d
commit
8a3aedb0e7
2 changed files with 9 additions and 0 deletions
|
|
@ -98,6 +98,14 @@ a:hover {
|
|||
padding: 0 1.5rem;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
/* Window Controls Overlay: extend navbar into the titlebar area */
|
||||
padding-left: max(1.5rem, env(titlebar-area-x, 1.5rem));
|
||||
padding-top: env(titlebar-area-y, 0);
|
||||
height: calc(var(--nav-h) + env(titlebar-area-y, 0px));
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.navbar a, .navbar button, .navbar input, .navbar form {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"description": "Internet radio player",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"display_override": ["window-controls-overlay", "standalone"],
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#000000",
|
||||
"orientation": "any",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue