styling the flyout button

[Sketch]

Hi,

I would like to style the flyout button to fit a bit more into my design,I've used css to style it but nothing changes no padding,no margin etc.

css:

.blocklyFlyoutButton {
    fill: var(--OnTertirayTonal);
  margin-left:auto;
  margin-right:auto;
  border-radius:20px;
  padding:8px;
    cursor: default;
}

Thanks

[Neil Fraser]

This is the right track.  But be aware that marign-left/right, border-radius, and padding are CSS attributes for HTML elements.  The flyout and its buttons are SVG elements.  SVG elements have a mostly different set of CSS properties.  So 'fill' will work fine (that's SVG) as will 'cursor' (that's both SVG and HTML).

However, I don't think there's a way to modify radius and location on SVG elements using CSS.

Blake just added a feature to the next release which will allow you to set the radius of these buttons by setting a class variable:

https://github.com/google/blockly/pull/6838