Stage 3a: wrap the app in 7.css's .window.glass.active frame
The app rendered a bare .title-bar with no .window around it, which is why the Aero frame, glass and drop shadow were missing and the title-bar controls sat permanently in their inactive colours: EVERY control-glyph rule in 7.css is keyed on `.title-bar.active` / `.window.active .title-bar`, and nothing ever set .active. - app.html's root is now `.window.glass`, so it picks up the 6px radius, the 1px frame, the `inset 0 0 0 1px #fff9` highlight, the drop shadow and the backdrop-filter glass layer. - The content below the title bar moved into `.window-body`, 7.css's recessed inner panel (6px inset + its own border) — the thing that gives a Win7 window its depth. - `.active` binds to a new `windowFocused` signal, seeded from document.hasFocus() and updated from window focus/blur. The webview receives those when the NATIVE window's focus changes, so no RPC is needed. Harness renders the shell focused and unfocused: active shows the red close button and crisp glyphs, inactive desaturates, matching the reference. Native window transparency (for the drop shadow and rounded corners to fall outside the window rather than being clipped by an opaque surface) is deliberately NOT in this commit — it is a native flag with a real chance of misbehaving on Linux, so it gets its own change and a real-app check. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+13
-4
@@ -51,9 +51,9 @@
|
||||
</div>
|
||||
</figure>
|
||||
<figure class="cell" style="margin:0">
|
||||
<figcaption>ours — bare .title-bar, no wrapper</figcaption>
|
||||
<figcaption>ours — app.html shell (active above, inactive below)</figcaption>
|
||||
<div class="stage">
|
||||
<div style="width: 320px">
|
||||
<div class="window glass active" style="width: 320px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">miniSCP</div>
|
||||
<div class="title-bar-controls">
|
||||
@@ -62,9 +62,18 @@
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: var(--w7-surface); padding: 10px">
|
||||
<p style="margin:0">No frame, no shadow, no glass.</p>
|
||||
<div class="window-body"><p style="margin:0">Focused window.</p></div>
|
||||
</div>
|
||||
<div class="window glass" style="width: 320px; margin-top: 12px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">miniSCP</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body"><p style="margin:0">Unfocused — chrome desaturates.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
Reference in New Issue
Block a user