Canonical button: one framed + rune-trace button family (P1 of the GUI-consistency pass)#172
Merged
Conversation
…gacy classes Consolidates ~12 of the fragmented button styles onto ONE canonical, distinctive button that draws on the project's own world: PoE's ESC-menu frame + our tooltip motifs. Two size tiers in one family, CSS-only — no HTML changes. - FULL tier (ornate): a single gold frame with baroque VOLUTE corner ornaments + elongated centre lozenges on the top/bottom edges, and the RUNE-TRACE hover — a gold filament traces the frame on hover (reuses the tooltip's @Property --tipAngle + codexTipFrameSweep). Routed: .cfg-btn .hk-btn .hk-key-btn .uib-btn .ei-btn .tsv-gen-btn .cp-btn .cp-btn-primary (+ .btn / .btn-primary). - PLAIN tier (compact): the same frame + rune-trace hover but WITHOUT the big ornaments, small — so dense/icon buttons don't blow up. Routed: .tree-tbtn .hk-icon-btn .tsv-pg-btn .cat-btn (+ .btn-plain). - Variants .btn-primary (gold fill) / .btn-danger (blood) / .btn-sm / .btn-wide. - Placed as a trailing <style> so it beats the scattered legacy rules incl. the #panel-hotkeys .hk-btn id override (verified). Ornaments are inline SVG (no assets). Kept special/untouched: .wm-btn (title bar), .hk-num-btn (steppers), .cp-btn-row / .patch-path-btns containers. Verified structurally (node --check + computed styles): full-tier buttons get 6 ornament layers + rune-trace, plain-tier gets the compact frame with 0 ornaments, primary gets the gold fill, .wm-btn stays untouched. VISUAL verification across tabs is pending in-app (the preview tool's rasteriser hangs on the conic/glow buttons), especially button-row density. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces a new “canonical button” CSS family in the WebView2 UI to unify previously divergent button styles as part of the GUI consistency pass, while also bumping the project version.
Changes:
- Added a trailing CSS block in
ui/index.htmlimplementing a two-tier (FULL/PLAIN) framed button design with an animated rune-trace hover effect that reuses the tooltip sweep animation. - Introduced button variants (
.btn-primary,.btn-danger,.btn-wide, sizing tweaks) to cover common visual states within the unified family. - Bumped version from
0.45.13.253→0.45.13.254across README and AHK/docs.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| ui/index.html | Adds the canonical button CSS family (framed + rune-trace) intended to override legacy scattered button rules. |
| README.md | Updates the version badge to v0.45.13.254. |
| InGameStateMonitor.ahk | Updates POEFORMANCE_VERSION to 0.45.13.254. |
| CLAUDE.md | Updates the referenced version to 0.45.13.254. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address PR #172 review (Copilot): the base / ::after / :hover / :hover::after rules each repeated the same long comma list of button classes, which could drift out of sync. Rewrote them to reference ONE :is(...) group per tier (ALL / FULL / PLAIN) — each behavioural rule now carries a single identical :is() list instead of a class×pseudo expansion, so adding a class updates every rule that uses that tier. :is() specificity equals its most specific argument (a single class here), so the cascade behaviour is unchanged — verified via computed styles: full-tier buttons still get 6 ornament layers + rune-trace at 9x18, plain-tier the compact frame with 0 ornaments, the #panel-hotkeys .hk-btn id override is still beaten, and .wm-btn stays untouched. node --check clean. Co-Authored-By: Claude Opus 4.8 <[email protected]>
…uts) Owner feedback from the running app: the button looks good but is too big — especially too tall next to a text input. Reduced the FULL tier's vertical padding 9px -> 5px and scaled the ornaments to fit the shorter height (corners 16px -> 13px, edge lozenges 8x14 -> 7x11). Measured: a full-tier button is now ~27px tall vs a ~24px text input (was ~40px). Horizontal padding, the PLAIN tier, and the ornament look are unchanged. Co-Authored-By: Claude Opus 4.8 <[email protected]>
Disabled buttons (e.g. .tree-tbtn[disabled] like the RE Dissector's
back/forward nav) still matched the :hover rules because they lacked a
:disabled exclusion, so hovering a disabled control reintroduced the
gold border, box-shadow glow and the animated rune-trace ::after.
- Guard every hover selector with :not(:disabled): the base :is(ALL):hover,
its ::after rune-trace, the FULL ::before ornament shadow, .btn-danger:hover,
and the reduced-motion ::after override.
- Add :is(ALL):disabled{opacity:.45;cursor:not-allowed} so disabled buttons
read as inert instead of merely non-interactive.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
First phase of the GUI-consistency work: replace the ~16 divergent button styles with one distinctive, cohesive button family — CSS-only, no HTML changes.
The button
Draws on the project's own world instead of a generic fantasy button:
@property --tipAngle+codexTipFrameSweep), so buttons and tooltips share one signature motif.Two tiers, one family
.cfg-btn .hk-btn .hk-key-btn .uib-btn .ei-btn .tsv-gen-btn .cp-btn .cp-btn-primary(+.btn)..tree-tbtn .hk-icon-btn .tsv-pg-btn .cat-btn(+.btn-plain)..btn-primary(gold fill) /.btn-danger(blood) /.btn-sm/.btn-wide.<style>so it beats the scattered legacy rules, incl. the#panel-hotkeys .hk-btnid override (verified). Kept untouched/special:.wm-btn(title bar),.hk-num-btn(steppers),.cp-btn-row/.patch-path-btnscontainers.Verification
node --checkclean. Computed-style checks: full-tier buttons carry 6 ornament layers + the rune-trace; plain-tier gets the compact frame with 0 ornaments; primary gets the gold fill;.wm-btnstays untouched.