Add selectable controller background styles

[Jayian1890]

Summary

• add a dedicated controller background style setting (ribbon, mesh, grid) separate from existing color themes
• apply style + theme consistently across controller library and controller loading overlays
• add new settings controls and style-specific CSS treatments while preserving existing animation toggle behavior

Test plan

• npm run typecheck --prefix opennow-stable
• verify edited files have no lints
• in app settings, switch style/theme combinations and confirm controller library visuals update
• launch/switch in controller mode and confirm loading overlay matches selected style/theme

Made with Cursor

[capy-ai]

Added 1 comment

[capy-ai]

[🟡 Medium] [🔵 Bug]

The grid background style defines animation overrides for .xmb-bg-gradient (xmb-grid-pan) and .xmb-bg-gradient::before (xmb-grid-pulse), but there is no .xmb-wrapper.xmb-bg-style-grid.xmb-animate .xmb-bg-gradient::after rule. The pre-existing ribbon animation rule:

/* line 6643 */
.xmb-wrapper.xmb-animate .xmb-bg-gradient::after {
  animation: xmb-ribbon-swell 22s ease-in-out infinite;
}

matches when grid + xmb-animate is active because the selector still applies (the element has both xmb-wrapper and xmb-animate classes). The animation property isn't overridden by any grid-specific rule for ::after, so xmb-ribbon-swell runs on the grid's noise-dot pseudo-element. That keyframe animates opacity between 0.74–0.9 and applies transform scaling/rotation — completely overriding the grid's intended static opacity: 0.24 and producing visible visual artifacts (swelling/rotating noise dots). Add animation: none for the grid ::after to cancel the inherited ribbon animation.

Suggested change

	.xmb-wrapper.xmb-bg-style-grid.xmb-animate .xmb-bg-gradient::before {
	animation: xmb-grid-pulse 10s ease-in-out infinite;
	}
	.xmb-wrapper.xmb-bg-style-grid.xmb-animate .xmb-bg-gradient::before {
	animation: xmb-grid-pulse 10s ease-in-out infinite;
	}
	.xmb-wrapper.xmb-bg-style-grid.xmb-animate .xmb-bg-gradient::after {
	animation: none;
	}