Three defects reported from the real window, each with a distinct cause: 1. "Top and sides do not connect" — 7.css couples the glass treatment to the title bar with a DIRECT-child selector (.window.glass > .title-bar), and our .title-bar lived inside an inner div of <app-title-bar>, so the rule never matched: the title bar fell back to the opaque base style with its own border and radius, a blue slab sitting on the frame. The .title-bar class (and the drag region + dblclick-maximize) moved onto the component HOST, so the selector now matches and the title bar is the translucent streaked glass fused with the frame. 2. "Black background near the window buttons" — .window.glass::after is backdrop-filter: blur(4px). CSS cannot sample the DESKTOP behind a transparent native window (there is no backdrop to read) and WebKitGTK paints the unsampleable layer BLACK, so every see-through part of the glass — the ring, the area around the controls — composited over black. Neutralized in skinfix; the glass tint now shows the real desktop through the transparent window, which is closer to Aero than a blur we cannot have. (True blur-behind needs compositor support; GNOME exposes none to X11/XWayland clients.) 3. "Shadow way too strong" — the 6px gutter hard-clipped 7.css's 2px 2px 10px 1px #000000b3 shadow into a solid dark band. The gutter now matches the shadow's extents exactly: blur+spread-offset = 9px up/left, offset+blur+spread = 13px down/right, so it falls off to nothing. Verified on the REAL window this time: captured the running app with ImageMagick import (the app runs on XWayland, so X11 capture works) before and after. Before: black block around min/max/close, murky dark ring, detached blue title strip. After: streaks span the top, controls hang from the frame edge as on real Win7, ring is glass-blue, no black anywhere. Known remaining (pre-existing, next stages): the tab-bar/toolbar row overlaps itself top-left (tabs conversion, Stage 4); maximized windows should drop radius/shadow/gutter. Co-Authored-By: Claude <noreply@anthropic.com>
Ui
This project was generated using Angular CLI version 22.0.6.
Development server
To start a local development server, run:
ng serve
Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
Code scaffolding
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-name
For a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --help
Building
To build the project run:
ng build
This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
Running unit tests
To execute unit tests with the Vitest test runner, use the following command:
ng test
Running end-to-end tests
For end-to-end (e2e) testing, run:
ng e2e
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.