## CSS Property Reference

This is a description of CSS properties recognized by RAP and their admissible values.

### animation

Defines one or more animated effects.

Any number of animations can be set at once, separated by commas. To disables all animations, set only `none`.

Format: `<animation-name> <animation-duration> <animation-timing-function> (, <animation-name> <animation-duration> <animation-timing-function> )* | none`

Examples:

- `animation: none;`
- `animation: hoverOut 500ms ease-out;`
- `animation: fadeIn 200ms linear, fadeOut 400ms ease-out;`
- `animation: flyInTop 500ms ease-out, flyOutBottom 500ms ease-in;`

#### <animation-name>

References the name of an effect the widget supports. (See the `animation`-description of the individual widgets.) Unsupported effects will be ignored. (However the effect might be supported in the future and then not be ignored anymore.) If the given effects contradict each other (e.g. `fadeIn` and `slideIn`), the widget may use either one.

Currently existing effects:

- `hoverIn`, `hoverOut`

  Animates the transition of the background when the mouse is moved over (`hover-in`) or leaves (`hover-out`) the widget. Requires that the pseudo class `hover` is used to define the alternate background. The effect only works between two background colors or two gradients. The gradients should have the same number of colors. Other changes like the border or text-color are currently not animated.

- `fadeIn`, `fadeOut`

  Animates the emergence (`fadeIn`) or disappearance (`fadeOut`) of a widget by gradually changing its opacity.

- `slideIn`, `slideOut`

  Animates the emergence (`slideIn`) or disappearance (`slideOut`) of a widget by gradually changing its height.

- `flyInTop`, `flyInRight`, `flyInBottom`, `flyInLeft`, `flyOutTop`, `flyOutRight`, `flyOutBottom`, `flyOutLeft`

  Animates the emergence (`flyIn`) or disappearance (`flyOut`) of a widget by gradually changing its origin point until it reaches the target coordinates.

#### <animation-duration>

The duration of the effect in seconds or milliseconds.

Format: positive integer, immediately followed by `s` or `ms`.

#### <animation-timing-function>

Describes how the animation progresses over time.

Valid values are: `ease`, `linear`, `ease-in`, `ease-out` and `ease-in-out`.

### background-color

Defines the color used as the background of the element:

Format: `<named-color> | <hex-color> | <rgb-color> | <rgba-color> | transparent`

Semi-transparent backgrounds may not be supported on all widgets, in which case the alpha channel of the `rgba-color` format will be ignored. If support for `rgba-color` is present, it is explicitly noted on the element.

### background-image

Defines either an image or a color-gradient to cover the background of a widget. May also be `none`, in this case background-color will be used.

Format: `<image-url> | <color-gradient> | none`

Examples:

- `background-image: none;`
- `background-image: url( path/my-image.png );`

-     background-image: gradient(
          linear, left top, left bottom,
          from( #ffffff ),
          color-stop( 48%, #f0f0f0 ),
          color-stop( 52%, #e0e0e0 ),
          to( #ffffff )
        );

#### <image-url>

Supported image-formats are `jpeg`, `gif` and `png`. The path is relative to the root of the bundle.

Format: `url(`, followed by the path and filename, followed by `)`.

#### <color-gradient>

Format: `gradient(`, followed by a list of comma-separated arguments, followed by `)`.

The first three arguments define the type and direction of the gradient. RAP currently only supports linear vertical gradients from the top to the bottom and linear vertical gradients from left to right. Therefore these arguments have to be either exactly "`linear, left top, left bottom`" or exactly "`linear, left top, right top`". Any other arguments will produce an error.

After this, the colors are defined. At least two colors have to be given, using `from( COLOR )` and `to( COLOR )`. Between these two, any number of colors may be defined using `color-stop( POSITION, COLOR )`.

`POSITION` is a ascending percentage value.
`COLOR` is `<named-color> | <hex-color> | <rgb-color>`.

For the same widget, `background-image` should not be combined with any `background-color` other than `transparent`, as the behavior of RAP for this case is not defined and may differ from case to case.

### border

Used to define the border that is drawn around a widget or a part of a widget.

Format: `<border-width> <border-style> <border-color>`

All 3 values are optional, though at least one must be given.

Examples:

- `border: none;`
- `border: 1px solid red;`
- `border: 3px outset;`

#### <border-width>

The width of the border. Defaults to `0px`.

Format: `<dimension>`

#### <border-style>

One of the following values: `solid`, `dotted`, `dashed`, `hidden`, `double`, `inset`, `outset`, `groove`, `ridge`, `none`.
Defaults to `solid`.

Note that if `border-radius` of the same widget has a value larger than `0px`, any `border-style` other than `none` or `hidden` is interpreted as `solid`.

#### <border-color>

Format: `<named-color> | <hex-color> | <rgb-color> | transparent`
Is `black` by default.

### border-top

See border.

### border-bottom

See border.

### border-left

See border.

### border-right

See border.

### border-radius

Defines the four radii of a rounded border.

Format: `<box-dimension>`

Note that in this case the box-dimension values stand for `top-left top-right bottom-right bottom-left`.

### border-color

Defines only the color of the border.

Format: `<border-color>`

### background-gradient-color

This property is currently ignored.

Format: `<named-color> | <hex-color> | <rgb-color>`

### border-top-color

Defines only the color of the upper border.

Format: `<border-color>`

### border-bottom-color

Defines only the color of the lower border.

Format: `<border-color>`

### box-shadow

Used to define the shadow that is drawn behind the widget.

Format: `<shadow> | none`

#### <shadow>

Format: `<dimension> <dimension> (<dimension> (<dimension>)?)? <shadow-color>`

- The first value defines the horizontal offset of the shadow. May be negative.
- The second value defines the vertical offset of the shadow. May be negative.
- The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.
- The optional fourth value defines the spread of the shadow. It is currently not supported and therefore must be 0px. The default value is 0px.
- The final value defines the color of the shadow.

Examples:

- box-shadow: 5px 5px black;
- box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 );
- box-shadow: 5px 5px 2px 0px #FF00FF;

#### <shadow-color>

Format: `<named-color> | <hex-color> | <rgb-color> | <rgba-color>`

#### <rgba-color>

Like the <rgb-color> notation, but with one more parameter for opacity as used in the opacity attribute.

Examples:

- `color: rgba( 255, 128, 0, 0.33 );`
- `color: rgba( 100%, 50%, 0%, 1 );`

### text-shadow

Used to define the shadow that is drawn behind the widget text. Note: Internet Explorer does not support text shadow.

Format: `<text-shadow> | none`

#### <text-shadow>

Format: `<dimension> <dimension> (<dimension>)? <shadow-color>`

- The first value defines the horizontal offset of the shadow. May be negative.
- The second value defines the vertical offset of the shadow. May be negative.
- The optional third value defines the radius of the blur effect. Negative values are not allowed. The default value is 0px.
- The final value defines the color of the shadow.

Examples:

- text-shadow: 2px 2px black;
- text-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 );
- text-shadow: 1px 1px 0 #FF00FF;

### color

The color used for foreground-elements, e.g. Text.

Format: `<named-color> | <hex-color> | <rgb-color> | inherit`

#### <named-color>

Valid color-names are: black, gray, silver, white, maroon, red, purple, fuchsia, green, lime, navy, blue, olive, yellow, teal, aqua.

#### <hex-color>

The format in hexadecimal notation is a `#` immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros.

Examples:

- `color: #FF8800;`
- `color: #F80; /* same as above */`

#### <rgb-color>

The format in the rgb notation is `rgb(`, followed by a comma-separated list of three numerical values (either integer or percentage), followed by `)`. The integer value 255 corresponds to 100%.

Examples:

- `color: rgb( 255, 128, 0 );`
- `color: rgb( 100%, 50%, 0% ); /* same as above */`

### cursor

Defines a the form of the mouse pointer over a certain widget.

Format: `<cursor-type> | <image-url>`

#### <cursor-type>

One of the following: `default`, `wait`, `crosshair`, `help`, `move`, `text`, `pointer`, `e-resize`, `n-resize`, `w-resize`, `s-resize`, `ne-resize`, `se-resize`, `nw-resize`, `sw-resize`, `col-resize`, `row-resize`, `progress`, `not-allowed`, `no-drop`.

### font

The font used to render the text.

Format: `(<font-style>)? (<font-weight>)? <font-size> <font-family>`

#### <font-style>

Optional value, may be `normal` or `italic`. Is `normal` by default.

#### <font-weight>

Optional value, may be `normal` or `bold`. Default is `normal`.

#### <font-size>

Height of the text in pixels. See <dimension>.

#### <font-family>

Name of the font that should be used. Is ignored if the font is not available on the client-system.
Several comma-seperated values can be given. The order is relevant, as the first available font will be used.
Font names containing any white spaces must be quoted.

As a fallback mechanism, one of the following generic fonts should be given as the last value: `serif`, `sans-serif`, `cursive`, `fantasy`, `monospace`.

For the color of the text, the `color`-property is used. Effects can be added using `text-decoration`.

Examples:

- `font: italic bold 16px serif;`
- `font: 11px 'Segoe UI', Corbel, Calibri, Tahoma, 'Lucida Sans Unicode', sans-serif;`

### height

A dimension that defines the height of certain parts of a widget.

Format: <dimension>

#### <dimension>

A non-negative integer with `px` as unit. May be zero.

Examples:

- `0px`
- `20px`
- `100px`

### margin

Defines the distance between the element and its surroundings.

Format: `<box-dimension>`

#### <box-dimension>

Defines four dimensions, in the order of `top right bottom left`.

- When only one value is given, it is used for all four dimension.
- When two values are given, the first is used for `top` and `bottom`, the second for `left` and `right`.
- When three values are given, the first value is used for `top`, the second for `left` and `right`, and the third for `bottom`.

Examples:

- `padding: 0px;`
- `margin: 3px 5px 3px 5px;`
- `margin: 3px 5px; /* same as above */`
- `border-radius: 5px;`

### opacity

A rational number between (and including) 0 and 1 without a unit.

Examples:

- `opacity: 1;`
- `opacity: 0.764467;`
- `opacity: 0;`

### padding

Defines the distance between the elements border and its content.

Format: `<box-dimension>`

### rwt-fontlist

The font list returned by Display#getFontList().

See font

### rwt-error-image

Defines an RWT system image.

Format: `<image-url>`

### rwt-information-image

Defines an RWT system image.

Format: `<image-url>`

### rwt-working-image

Defines an RWT system image.

Format: `<image-url>`

### rwt-question-image

Defines an RWT system image.

Format: `<image-url>`

### rwt-warning-image

Defines an RWT system image.

Format: `<image-url>`

### rwt-shadow-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-highlight-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-darkshadow-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-lightshadow-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-thinborder-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-selectionmarker-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### rwt-infobackground-color

Defines an RWT system color.

Format: `<named-color> | <hex-color> | <rgb-color>`

### spacing

A dimension that defines the distance between certain parts of a widget.

Format: <dimension>

### text-decoration

Additional decorative effects to render a text with.

Format: `underline | overline | line-through | none`

Examples:

- `text-decoration: line-through;`

### width

A dimension that defines the width of certain parts of a widget.

Format: <dimension>