CSS language

Warning:
This tutorial covers only Mobile Widgets versions.
Tiny Mobile Widgets don't support CSS..

CSS is used to define (or modify) the application style.
More information about CSS language: http://en.wikipedia.org/wiki/CSS.

The Style API uses CSS files to change the appearance of Protypes.

To insert CSS file in scene, use the Style node.

Note:
default.css is the default style sheet.
It is recommended to include it whenever if you use Mobile Widgets prototypes.

See Style node documentation for more information about this node.

Example of style sheet:

This example redefine the background color and the border size of Alert prototype.

Alert prototype with default.css file.	Alert prototype with the previous custom CSS file.

Attributes following the standard CSS format:

• background-attachement,
• background-color,
• background-image,
• background-position,
• background-repeat,
• border-color,
• border-style,
• border-width,
• color,
• float,
• font-family,
• font-size,
• font-style,
• font-weight,
• height,
• line-height,
• margin-bottom,
• margin-left,
• margin-right,
• margin-top,
• padding-left,
• padding-bottom,
• padding-right,
• padding-top,
• text-align,
• text-decoration,
• text-indent,
• width

Attributes added to standard CSS format to ease the VRML development:

• animation,
• disabled-color,
• duration,
• filled,
• font-filter,
• font-justify (DEPRECATED),
• horizontal-align,
• image-position,
• image-size,
• light,
• orientation,
• position,
• rectangle-position,
• rectangle-size,
• rotation,
• scale,
• size,
• text-position,
• text-size,
• translation,
• transparency,
• vertical-align

Colors can be defined by a:

• color name: red
• hexa value: #FF0000 for red
• RGB value: rgb(255,0,0) for red

Colors names

•   aqua,
•   black,
•   blue,
•   fuchsia,
•   gray,
•   green,
•   lime,
•   maroon,
•   navy,
•   olive,
•   purple,
•   red,
•   silver,
•   teal,
•   white,
•   yellow,
•   pink,
•   orange

Note:
The attribute background-color can take the value transparent.

Some of the previous attributes should take non-trivial values. Here is a list of the authorized values:

• background-attachement: "fixed" (no scrollbar). Default : not fixed
• background-position:
  vertical position "top", "center", "bottom". Horizontal position "left", "center", "right". Default "center".
  Positions can also be set in percentage, pixels or em.
  Example background-position: "left" "top"; background-position: 10% 45%; background-position: 24 144; background-position: 3em 12em;
• background-repeat: "repeat" (repeath both), "repeat-x", "repeat-y". Default : no repeat
• border-style: "none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"
• border-width: "thin", "medium", "thick". Width can also be set in percentage, pixels or em. Default : no border.
• font-family: "times", "serif", "helvetica", "geneva", "sans", "courrier"
• font-size: "medium", "small", "large", "larger", "smaller"
• font-style: "italic" or "oblique"
• font-weight: "bold" or "bolder"
• text-align: Uses the first letter of the string passed in parameter.
  "c" or "m" for center, "l" for left, "r" for right, "j" for justify.
  HTML tag <center> automatically set text-align attribute to center.
• text-decoration: "underline" underlines the string. Default : no underline.

By convention, a CSS file should sit in its own style directory: "MyProject/styles/MyStyle/mystyle.css".
Where MyStyle is the style defined in the project settings with property "style" and mystyle.css should be referenced by the Style node in your main scene.

A default CSS file is already included in the SDK to handle default values that you can override in your own CSS file.
This file is named "default.css" and should always be included as the first CSS file in the Style node.

You can define the style folder via the app.properties file.
In app.properties file, change the style property by your style.
Example:
style=MyPersonalStyle : Path to CSS files is MyProject/styles/MyPersonalStyle

Warning:
If your are developing a widget (not a standalone Memo application), your should not include "default.css" as it is already handled by the Mobile Widgets application.

Light mode allows you to make lighter widgets (memory, processor, ...).
Light mode is only accessible for Mobile Widgets (not for Tiny Mobile Widgets).
This mode is used by Mobile Widgets prototypes to remove some pictures and animations.

We add a CSS node named "Common", light is an attribute of this CSS node and is global to one application (per style).
In CSS we have :