Visualize media queries

[Inwerpsel]

Media queries are taken into account during the inspection and have some UI, but important elements are missing.

What is already there?

• The variable has a lower opacity to indicate the rule does not match the current frame dimensions
• A button is shown for every screen option that would match this query (and not overridden by other query). Clicking this button switches to that screen.

What's missing?

• The conditions of the media query, or any indication that a media query is used (unless lower opacity but that still doesn't tell which)
• Probably more?

What could be improved?

• Some less common other at-rules are being incorrectly picked up as a non matched media query.
• Some sites use media queries that don't seem to be satisfiable, or are only satisfiable in a very small range. These are currently indistinguishable from the non-media-query at-rules mentioned in the previous point.

On the technical side probably not a lot has to happen, as the data is already there. It's mostly a question of how to nicely integrate it with the existing UI without making stuff too noisy.

[Inwerpsel]

A simple initial implementation was added in https://github.com/Inwerpsel/use-theme-editor/commit/9d138e1de46b0d65ae2a40113eae31633e4029b1