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;
|
padding: 0 1.5rem;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
border-bottom: 1px solid var(--border);
|
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 {
|
.navbar-brand {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
"description": "Internet radio player",
|
"description": "Internet radio player",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
|
"display_override": ["window-controls-overlay", "standalone"],
|
||||||
"background_color": "#000000",
|
"background_color": "#000000",
|
||||||
"theme_color": "#000000",
|
"theme_color": "#000000",
|
||||||
"orientation": "any",
|
"orientation": "any",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue