lil-gui › Examples
:
Styling Custom Controllers

Styling Custom Controllers

This is a reference for users writing CSS for a custom controller. Note that this page isn't about theming (i.e. changing colors and fonts).

todo

DOM Structure

todo

Controls 5a6b7c 0.5 color slider lil-gui string .controller .controller .widget .controller .name this.domElement this.$widget this.$name

CSS Variables

todo

Controls 5a6b7c 0.5 color slider lil-gui string --font-family --gutter --spacing --font-family-mono --border-radius --text-color --number-color --string-color --focus-color --hover-color --widget-color --input-padding

Common Variable Reference

The following describes each variable's purpose, starting with the most commonly used.
--spacing Distance between controllers. Use this to seperate elements if your controller has multiple widgets, or as a generic margin/padding.
--text-color Main text color for the GUI. Used for both controller names and input text. Can also be used as a general foreground color.
--widget-color Color for widgets. Expected to be different than the background, but still legible under --text-color.
--hover-color Color for widgets on hover.
--focus-color Color for widgets that are focused or active.
--string-color Indicates that an editable value is a string.
--number-color Indicates that an editable value is a number.
--border-radius Apply this border radius to rectangular elements inside $widget.
--font-family-mono Use this font family if your controller calls for a monospace font.

Extended Variable Reference

These variables might be used by custom controllers, but not often. Note that this still isn't an exhaustive list of theming variables.
--font-family Main font family for the GUI. Applied to .lil-gui by the base stylesheet, so most controllers shouldn't need it.
--font-size Main font size for the GUI. Applied to .lil-gui by the base stylesheet, so most controllers shouldn't need it.
--input-font-size Font size applied to elements you can type in. Prevents zoom on iOS. Applied to .lil-gui input by the base stylesheet, so most controllers shouldn't need it.
--widget-height Minimum height of a widget. Applied to .widget by the base style sheet (though custom controllers are free to stretch .widget taller). You can use this to reference the default widget height.
--input-padding Apply this padding to any of the textbox-like <input> types. The base stylesheet already does this for input[type=text] and input[type=number].
--gutter* Distance from a controller to the panel's edge. Not intended for use by controllers.

*(todo, still called this --padding)