Styling

Definition

Layout xml files do not contain any style information but each element can have a style attribute linking to a style defined in a stylesheet. Those stylesheets are loaded per layout and defined in ".seyegui" files which can look like the example below.

default
{
	background-color = 0x101010FF
	highlight-color=0x0000FFFF
}

button:default
{
	color = 0x707070A0
	background-color = 0x00000000
	icon-color = 0xFF0000FF
}

Colors must be given in RGBA hexa code with a "0x" as prefix. Each style has to have a name and can inherit properties from another style by postfixing it with ":" and the name of the parent style. The parent must be defined before the usage as parent. If a style property is not defined at all, some fallback is used.

Following properties are possible to define:

Property	Type	Description
color	Hex RGBA	Foreground color, like color of button
background-color	Hex RGBA	Background color, like color of box
highlight-color	Hex RGBA	Color used for highlighting
separator-color	Hex RGBA	Color used for separators
selection-color	Hex RGBA	Color used for selections
icon-color	Hex RGBA	Color multiplied with icon graphics
font-color	Hex RGBA	Color used for font rendering
dim-color	Hex RGBA	Color multiplied with if dimming active
mark-color	Hex RGBA	Color blended over marked elements
pick-color	Hex RGBA	Color used to for keyboard to indicate picking of a character during fast typing

Usage

The defined stylesheet can be loaded for a layout by giving the relative path the attribute "stylesheet" of layout xml element as shown in the following and described in Layouts:

<layout stylesheet="FancyStyling.seyegui">
	<circlebutton style="button"></circlebutton>
</layout>

A element uses the style of its parent element. If no style is chosen, the style called "default" is used. This style is always created and uses fallback values, if not overriden in the stylesheet.