GUI elements are styled using a CSS-like system. You load style scripts in the GUI environment, and then specify the names of the style classes to use with a given element.
Here is a simple example of a style script:
my-button
{
width: auto
padding: 8px
cursor: hand
font-size: 16pt
text-color: #666
}
my-button:hovered
{
text-color: #333
}
my-button:pushed
{
text-color: #000
}
The above script defines a style class called "my-button" that could be used for a button element. You can see that this is very similar to CSS, but with a few minor differences (see below).
You will notice the "hovered" and "pushed" keywords. These allow a style class to mutate in response to certain events. The engine refers to these as "event classes". The identifiers for these events are in past-tense.
Disclaimer: There are likely a few things missing from this list.
This section is a quick reference of each style attribute.
Controls the size of the element. When set to auto, it is set to the size of the auto-positioned child elements. When set to a percentage value, it's based on the size of the parent. A px value is an absolute size.
| Default Value: | width:100%, height:auto |
| Allowable Values: | auto, *%, *px |
Controls the minimum and maximum size of an element. Accepts the same values as width and height.
| Default Value: | auto |
| Allowable Values: | auto, *%, *px |
Controls where on the element percentaged-sized children will be sized on. The default value is inner which means a 100% sized child element will be the size of the inner part of the element, on the inside of the padding.
When set to inner-border, a 100% sized child element will be the size of the parent element, on the outside of the padding, but the inside of the border.
When set to outer, a 100% sized child element will be the size of the parent element, on the outside of the padding, and the outside of the border.
| Default Value: | inner |
| Allowable Values: | inner, inner-border, outer |
Controls whether or not the width of a percentage-sized child should be flexed so that it never goes beyond the clipping area.
Consider two elements with a height of 100%. By default, this would cause the second element to be clipped entirely because the space is being used up by the first element. By enabling flexing, both children will be flexed so that they are both visible. In this example, it would be equivalent to each element being sized as 50%.
The best use case for this is to make it easier to support a variable sized element with a fixed size sibling. You could set the element to 100% and let the layout manager handle the rest.
| Default Value: | false |
| Allowable Values: | true, false |
Controls the colour of the background. Takes a CSS/HTML style value.
| Default Value: | none |
| Allowable Values: | CSS/HTML style colour value. E.g. #000, #ffffff, etc |
Controls the image to use as the background of the element. The value can be a URL value such as url("path/to/my-image.png") or the identifier of a pre-defined image.
| Default Value: | none |
| Allowable Values: | A URL value or pre-defined identifier. |
Controls the colour to modulate the background image with.
| Default Value: | inherit, #fff |
| Allowable Values: | A CSS/HTML style colour value. E.g. #000, #ffffff, etc |
Controls the alignment of the background image.
You can use background-align as shorthand which takes the X value as the first argument and the Y value as the second.
| Default Value: | center |
| Allowable Values: | center, left, right, top, bottom |
Controls how the background image is repeated.
You can use background-repeat as shorthand which takes the X value as the first argument and the Y value as the second.
| Default Value: | none |
| Allowable Values: | none, stetch, repeat |
Controls the size of the border. Borders can only a take an absolute px value.
You can use border-width as shorthand which takes the left, right, top and bottom values respectively.
| Default Value: | 0px |
| Allowable Values: | *px |
Controls the colour of the border. Values are defined as CSS/HTML style colours.
You can use border-color as shorthand which takes the left, right, top and bottom values respectively.
| Default Value: | none |
| Allowable Values: | none, CSS/HTML style colour. |
Shorthand for controlling the width and colour of the border as a single statement.
You can use border as shorthand for setting the values of all four borders.
| Example: | border-left:1px #000 |
| Example: | border:1px #000 |
Controls the amount of space between the inside of the border and the inner clipping area. Padding can only take an absolute px value.
You can use padding as shorthand for setting the values of all four sides.
| Default Value: | 0px |
| Allowable Values: | *px |
Controls the amount of space between the outside of the border and elements around it. Margins can only take an absolute px value.
You can use margin as shorthand for setting the values of all four sides.
| Default Value: | 0px |
| Allowable Values: | *px |
Controls the axis each successive child to be placed along.
When set to vertical (default), each child will be positioned to the bottom of the previous child.
When set to hotizontal, each child will be positioned to the right of the previous child.
| Default Value: | vertical |
| Allowable Values: | vertical, horizontal |
Controls the alignment of children.
| Default Value: | left, top |
| Allowable Values: | left, right, top, bottom, center |
Controls the cursor to show when hovered over the element. Currently, only pre-defined cursors can be used. Support for custom cursors is planned for the future.
| Default Value: | arrow |
| Allowable Values: | arrow, beam, hand, cross, vert-double-arrow, horz-double-arrow, size-top, size-bottom, size-left, size-right |
Controls whether or not the element is visible.
| Default Value: | true |
| Allowable Values: | true, false |
Controls whether or not the element is enabled. When disabled, the element will not receive most events. The disabled event class will be activated when an element is disabled.
| Default Value: | true |
| Allowable Values: | true, false |
Controls the priority of an element when determining which elements should be shown on top of other elements. Only used with absolute and relative elements. Larger values means higher priority.
| Default Value: | auto |
| Allowable Values: | auto, integer value |
Controls whether or not mouse events should fall through to elements underneath. This is useful for container and alignment elements, among others.
| Default Value: | false |
| Allowable Values: | true, false |
Controls the colour of the blinking cursor for text input (the caret).
| Default Value: | inherit, #000 |
| Allowable Values: | inherit, CSS/HTML style colour. |
Controls whether or not the element should receive focus when it is clicked by the mouse.
When an element is disabled, it will not receive focus when clicked regardless of how this value is set.
When the element has editable-text enabled, it will still receive focus when clicked even if this is set to false.
| Default Value: | false |
| Allowable Values: | true, false |
Controls how an element is positioned relative to the parent.
When set to auto (default), the layout manager controls the position.
When set to relative, the position is relative to the position of the parent and controlled with left, top, right and bottom.
When set to absolute, the position is relative to the top/left of the main viewport and controlled with left, top, right and bottom.
| Default Value: | auto |
| Allowable Values: | auto, relative, absolute |
Controls the position of a relative or absolute positioned element. These do nothing when the positioning property is set to auto
| Default Value: | 0px |
| Allowable Values: | *%, *px |
Controls the position the element is relative to when positioning is set to relative
When set to inner (inner), the element will be positioned relative to the inside of the padding
When set to inner-border, the element will be positioned relative to the outside of the padding, but the inside of the border.
When set to outer, the element will be positioned relative to the the outside of the padding, and the outside of the border.
| Default Value: | inner |
| Allowable Values: | inner, inner-border, outer |
Controls the offset to apply to the position of everything positioned on the inside of the element. This is how you would implement scrolling.
| Default Value: | 0px |
| Allowable Values: | *px |
Controls the font to use with the element.
| Default Value: | "dejavu sans" |
| Allowable Values: | Any text value. |
Controls the size of the font.
When set to a percentage value, it is based on the size of the host element.
| Default Value: | 9pt |
| Allowable Values: | *%, *px, *pt |
Controls the weight (boldness) of the font.
It is not guaranteed that the font family will support all font weights, but it should at the very least support "default" and "bold". If the weight is not supported by the font family, the font mapper should find the closest match.
The "medium" weight is not the same as "default" - it is slightly heavier.
| Default Value: | default |
| Allowable Values: | thin, extra-light, light, default, medium, semi-bold, bold, extra-bold, heavy |
Controls the slant (whether or not it is italic) of a font.
| Default Value: | default |
| Allowable Values: | default, italic |
The colour of regular, unselected text.
| Default Value: | #000 |
| Allowable Values: | CSS/HTML style colour. |
The colour of selected text.
| Default Value: | #000 |
| Allowable Values: | CSS/HTML style colour. |
The colour of the background of selected text (the selection highlight).
| Default Value: | #55a |
| Allowable Values: | CSS/HTML style colour. |
The colour of the background of selected text (the selection highlight) when the element does not have focus.
| Default Value: | #338 |
| Allowable Values: | CSS/HTML style colour. |
Controls whether or not the element allows it's text to be edited.
| Default Value: | false |
| Allowable Values: | true, false |
Controls whether or not the text of an element should be constrained to a single line. Only really used with elements that allow text editing.
| Default Value: | false |
| Allowable Values: | true, false |
Controls the opacity of the element.
| Default Value: | 1.0 |
| Allowable Values: | A real number, typically between 0 and 1 |
Controls whether or not the element should inherit the opacity of it's parent.
| Default Value: | true |
| Allowable Values: | true, false |
Controls whether or not the element should cast a shadow.
| Default Value: | false |
| Allowable Values: | true, false |
Controls how much blurring to apply to the edges of the shadow.
| Default Value: | 4px |
| Allowable Values: | *px |
Controls how much to offset the shadow.
| Default Value: | 0px |
| Allowable Values: | *px |
Controls how much to extrude the shadow volume. By default, the shadow is the same size of the element. This controls how much bigger to make it on each side.
| Default Value: | 8px |
| Allowable Values: | *px |
Controls the opacity of the shadow.
| Default Value: | 50% |
| Allowable Values: | *% or a real number, typically between 0 and 1 |
Controls whether or not to allow a relative or absolute positioned element by dragging it with the mouse. This is ignored with auto positioned elements.
| Default Value: | false |
| Allowable Values: | true, false |
Controls whether or not mouse dragging should be constrained on a particular axis. By default, neither access is constrained.
| Default Value: | false |
| Allowable Values: | true, false |
Controls how to clamp mouse dragging of an element against it's parent.
When set to none, no clamping is applied.
When set to clickpos (default), the element will be clamped against the click position and the inner area of the parent.
When set to border, the element will be clamped against the border and the inner area of the parent.
| Default Value: | clickpos |
| Allowable Values: | none, clickpos, border |
Controls whether or not to allow the element to be resized using the mouse.
This depends on the values of left-gripper-width, right-gripper-width, top-gripper-width and bottom-gripper-width.
| Default Value: | false |
| Allowable Values: | true, false |
Controls the margin to use when determining whether or not to allow mouse resizing.
| Default Value: | 0px |
| Allowable Values: | *px |