Modulation Matrix header and plotter CSS

[ustk]

Header

When setting different widths for the components, like in this case the button (40px while sliders and CBs are 75px) the columns don't reflect the real width. See the header distribution pushing the other labels:

Is there a way to distribute the different widths, or have column selector?

td, .targetLabel
{
	color: #999;
	font-size: 10px;
	width: 75px; /* all columns set to 75px despite the button is needing 40px */
}

Plotter

As for the plotter, it doesn't seem to react to any CSS (background, color, etc...)

[Christoph Hart]

@ustk you can address the columns using the id selector - the id selector for each column is assigned to both header and items in each row so it will affect the entire column - this is explicitly designed like this for this very use case:

#sourceindex, #targetid
{
	display: none;
}

#mode
{
	width: 200px;
}

#inverted
{
	width: 10%;
}

#plotter
{
	/** the plotter has the flex-grow property set to fill the remaining width so if we want to set it, we need to reset that first. */
	flex-grow: 0; 
	width: 50px;
	background: red;
}

And yes I've deliberately left out the plotter from CSS - the reason is that it has to convert the realtime updated path to a base64 string, pass that to the css renderer to be converted back to a path and this imposes significant CPU overhead for complex paths that are updated with ~30fps.

[ustk]

@Christoph-Hart Oh nice! I was sure I tested that but I've necessarily made a mistake otherwise it wouldn't have been a nice day

Hmmm... Understandable for the plotter, but would there be a way to still customise it behind the scene so the CSS renderer hasn't to take care of it?

[Christoph Hart]

@ustk sure you can use a laf script function as always.