game designer css should not be applied in edit mode #105

New issue

Open

opened 2026-02-20 10:14:13 -05:00 by deekerman · 0 comments

deekerman commented

2026-02-20 10:14:13 -05:00

Owner

Originally created by @robartsd on GitHub (Jan 31, 2021).

CSS is a powerful way to change the look and feel of the game, but some properties mess up the edit view. I think all game designer css should be toggled off when viewing in edit mode.

Things I've done that mess with edit view:

transparent buttons opacity: 0 (could mitigate by adding transparent class styles to all widgets)
override holder drag target border with !important (partially mitigate by removing !important from .widget.droppable.droptarget in stylesheet, but then any game designer setting the border with an inline style would override the dynamic appearance)

Proposed solutions:

when entering/exiting edit mode, update each widget's inline styles in the DOM (most likely best solution)
use nested divs for all widgets
- outer div
  - receives supported positioning properties
  - transparent in play mode
  - receives all edit mode styles
- inner div
  - receives all visible styles for play mode
  - receives game designer css
- potential issues
  - child widgets being children of the inner div could still cause potential issues in edit mode
  - child widgets being children of the outer div would break custom css inheritance for widgets
- side benefit
  - game designer could freely use transform to manipulate the appearance of the inner div without overriding basic positioning

Originally created by @robartsd on GitHub (Jan 31, 2021). CSS is a powerful way to change the look and feel of the game, but some properties mess up the edit view. I think all game designer css should be toggled off when viewing in edit mode. Things I've done that mess with edit view: - transparent buttons `opacity: 0` (could mitigate by adding transparent class styles to all widgets) - override holder drag target border with `!important` (partially mitigate by removing !important from `.widget.droppable.droptarget` in stylesheet, but then any game designer setting the border with an inline style would override the dynamic appearance) Proposed solutions: - when entering/exiting edit mode, update each widget's inline styles in the DOM (most likely best solution) - use nested divs for all widgets - outer div - receives supported positioning properties - transparent in play mode - receives all edit mode styles - inner div - receives all visible styles for play mode - receives game designer css - potential issues - child widgets being children of the inner div could still cause potential issues in edit mode - child widgets being children of the outer div would break custom css inheritance for widgets - side benefit - game designer could freely use transform to manipulate the appearance of the inner div without overriding basic positioning