CSS Specification

Introduction

eepp CSS custom implementation is heavily based on the official CSS standard. This document will try to explain the shared features and the current differences with the CSS specification. Since CSS is widely used and documented, every feature that it’s shared with the CSS standard will be directly linked to the Mozilla CSS documentation. If you are totally new to CSS please go the Mozilla CSS portal.

Relevant differences with CSS standard

  • Layout properties are not supported (display, float, etc), since eepp layout system differs from the HTML+CSS specification (design decision).

  • inheritance is not supported, except for CSS custom properties (design decision).

  • Attribute selector is not supported (probably will not be supported in the near future, since collides with some implementation decisions).

  • CSS relative paths start from the process current working directory instead the relative path from the CSS file.

  • eepp CSS supports alternative path methods besides paths (resource locator to previously loaded resources by the process).

  • eepp CSS supports Device-independent pixel unit dp.

  • CSS files should be always UTF-8 encoded.

CSS Selectors

CSS selectors define the elements to which a set of CSS rules apply.

Basic selectors

Universal Selector

Universal selector selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|*

Example: * will match all the elements of the document.

Type Selector

Type selector selects all elements that have the given node name.

Syntax: elementname

Example: widget will match any <widget> element.

Class Selector

Class selector selects all elements that have the given class attribute.

Syntax: .classname

Example: .index will match any element that has a class of “index”.

ID Selector

ID selector selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

Syntax: #idname

Example: #toc will match the element that has the ID “toc”.

Grouping selectors

Selector List

The selector list , is a grouping method, it selects all the matching nodes.

Syntax: A, B

Example: widget, image will match both <widget> and <image> elements.

Combinators

Descendant combinator

The descendant combinator ” ” (space) combinator selects nodes that are descendants of the first element.

Syntax: A B

Example: LinearLayout image will match all <image> elements that are inside a <LinearLayout> element.

Child combinator

The child combinator > selects nodes that are direct children of the first element.

Syntax: A > B

Example: LinearLayout > listbox will match all <listbox> elements that are nested directly inside a <LinearLayout> element.

General sibling combinator

The general sibling combinator ~ selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

Syntax: A ~ B

Example: TextView ~ image will match all <image> elements that follow a <TextView>, immediately or not.

Adjacent sibling combinator

The adjacent sibling combinator + selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

Syntax: A + B

Example: TextView + image will match all <image> elements that directly follow an <TextView>.

CSS Properties

eepp CSS properties can be categorized in two big groups: CSS standard properties and eepp CSS properties.

Definitions:

  • Property names are case insensitive.

  • Some properties have aliases.

  • All property names that contain dashes (-), have aliases without those dashes.

    • For example: animation-delay also is animationDelay.

    • Other aliases will be clarified in the properties documentation.

  • All properties can be used as attributes of the XML node.

    • XML attributes are treated as inline CSS styling.

    • For example:

      • Something like:

      • LinearLayout { layout-width: match_parent; layout_height: match_parent; orientation: vertical; }

      • is similar to (but not equivalent, since specificity of inline CSS is higher):

      • <LinearLayout layout_width="match_parent" layout_height="match_parent" orientation="vertical"></LinearLayout>

  • CSS standard properties directly linked to the Mozilla docs are fully supported, otherwise a clarification will appear.

  • Applicable to will link to the EE::UI::UIWidget that can use that property, and betweeen parenthesis is the CSS element name.

animation-delay

Read animation-delay docs.

animation-direction

Read animation-direction documenation.

animation-duration

Read animation-duration documenation.

animation-fill-mode

Read animation-fill-mode documentation.

animation-iteration-count

Read animation-iteration-count documentation.

animation-name

Read animation-name documentation.

animation-play-state

Read animation-play-state documentation.

animation-timing-function

Read animation-timing-function documentation.

Timing function names are custom, and not the same as the standard, but cubic-bezier will be added soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none.

allow-editing

Enable or disable editing on input elements.

allow-float

On a input that only accept numbers, enables floating point numbers.

animation-speed

Sets the loader speed animation.

arc-start-angle

The angle value where a loader progress starts rendering.

background-color

Read background-color documentation.

background-expand

Sets if the element skin background should be expanded to the element dimensions.

background-image

Read background-image documentation.

  • Applicable to: Any element

  • Data Type: resource-path

  • Default value: none

background-position-x

Read background-position-x documentation.

background-position-y

Read background-position-y documentation.

backtround-repeat

Read background-repeat documentation. space and round values are not supported yet.

  • Default value: no-repeat (this is different from the CSS standard)

background-tint

Sets the tint color of the background image.

  • Applicable to: Any element

  • Data Type: color

  • Default value: white

background-size

Read background-size documentation.

blend-mode

Sets the blend mode to the widget.

  • Applicable to: Any element

  • Data Type: string-list

  • Value List:

    • add

    • alpha

    • multiply

    • none

  • Default value: alpha

border-bottom-color

Read border-bottom-color documentation.

border-bottom-left-radius

Read border-bottom-left-radius documentation.

border-bottom-right-radius

Read border-bottom-right-radius documentation.

border-bottom-width

Read border-bottom-width documentation.

border-left-color

Read border-left-color documentation.

border-left-width

Read border-left-width documentation.

border-right-color

Read border-right-color documentation.

border-right-width

Read border-right-width documentation.

border-top-color

Read border-top-color documentation.

border-top-left-radius

Read border-top-left-radius documentation.

border-top-right-radius

Read border-top-right-radius documentation.

border-top-width

Read border-top-width documentation.

border-type

Defines where the border box is drawn.

  • Applicable to: Any element

  • Data Type: string-list

  • Value List:

    • inside : The border will be drawn inside the content box.

    • outside : The border will be drawn outside the content box.

    • outline : The border will be drawn in the middle point between the content box and the border width.

  • Default value: inside

change-page-percent

Sets the percentage of scroll of a page that triggers a page change in a ViewPager.

checked

Sets as checkbox as checked

check-mode

Checkboxs have two possible interaction modes for changing its checked state.

  • Applicable to: EE::UI::UICheckBox (CheckBox).

  • Data Type: string-list

  • Value List:

    • element : Checked state will change by clicking anywhere in the widget (clicking over text or icon)

    • button : Checked state will only change by clicking over the icon

  • Default value: element

click-step

For any element that has a stepped value change, this sets the step variation for a click to the element.

clip

Specifies how the clipping is applied to the element if clip is enabled.

  • Applicable to: Any element

  • Data Type: string-list

  • Value List:

    • none : No clipping is applied.

    • content-box : Clips the content box of the element (means the whole box).

    • padding-box : Clips the padding box of the element (the whole box minus the padding).

    • border-box : Clips the border box of the element (the content box plus the border).

  • Default Value: Varies for each widget/element.

color

Read color documentation.

column-mode

Sets the column mode of a grid layout. The column mode defines how the size of the column of a grid layout is measured.

  • Applicable to: EE::UI::UIGridLayout (GridLayout)

  • Data Type: string-list

  • Value List:

    • size : The column width of each grid child will be defined with a fixed width based on the value of the column-width length.

    • weight : The column width of each grid child will be calculated as a normalized percentage of the total grid width using the column-weight value.

  • Default value: weight

column-margin

Sets the horizontal separation between each element in the grid layout.

column-weight

Sets the percentage width of the child elements of a grid layout. column-mode must be weight in order to work.

column-width

Sets the width of the child elements of a grid layout.

cursor

Read cursor documentation.

Custom cursors not yet supported (but supported by the engine, only not implemented in the CSS side).

display-percent

Enables/disables displaying the percentage of progress in the progress bar.

drag-resistance

Sets the amount of drag that is needed to start dragging an element.

droppable-hovering-color

Sets the foreground color to highlight the current dragged element that its is hovering an element that accepts a drop of the dragged element.

enabled

Sets if the element is enabled

  • Applicable to: Any element

  • Data Type: boolean

  • Default value: true

font-family

Read font-family documentation.

font-size

Read font-size documentation.

font-style

Read font-style documentation.

fill-color

Sets the fill color of a element.

flags

Allows to set some very specific flags to the element. Multiple flags can be set, flags are separated by |.

  • Applicable to: Any element

  • Data Type: string-list

  • Value List:

    • autosize : This flag allows the widget/element to resize itself to a minimum size that allows the widget to be fully visible.

    • clip : Enables clipping of the element box.

    • multiselect : Enables multiple selection on elements that support selection. EE::UI::UIListBox (ListBox) for the moment.

    • autopadding : Enables the element to calculate the padding based on the skin size.

    • reportsizechangetochilds : When enabled the element will emmit a event (OnParentSizeChange) to its childs reporting the size change of the parent.

  • Default value: No value

foreground-color

Same as background-color but for the foreground.

foreground-image

Same as background-image but for the foreground.

  • Applicable to: Any element

  • Data Type: resource-path

  • Default value: none

foreground-position-x

Same as background-position-x but for the foreground.

foreground-position-y

Same as background-position-y but for the foreground.

foreground-repeat

Same as background-repeat but for the foreground.

foreground-size

Same as background-size but for the foreground.

foreground-tint

Sets the tint color of the foreground image.

  • Applicable to: Any element

  • Data Type: color

  • Default value: white

gravity

Sets the horizontal and vertical align of the inner elements/contents of a widget (for example the text on a TextView). Vertical and horizontal can be set by using | as a separator of each rule.

  • Applicable to: Any element. This applies at the EE::UI::UIWidget (Widget) level, the base element of all widgets. But every widget has it’s own behaviour, based on it’s own content. Some may not do anything.

  • Data Type: string-list

  • Value List:

    • left

    • right

    • center_horizontal

    • top

    • bottom

    • center_vertical

    • center : shorthand of center_horizontal|center_vertical

  • Default value: Varies on each widget implementation.

  • Syntax:

gravity: center;
gravity: left;
gravity: left|top;
gravity: center_horizontal|bottom;

gravity-owner

Widgets elements can inform that own childs position using a special flag on its implementation (UI_OWNS_CHILDS_POSITION). Sometimes some layouts may need to override the parent behavior that uses that flag. This flag will let the layout manage his gravity against its parent in all cases.

  • Applicable to: Any layout element.

  • Data Type: boolean

  • Default value: false

half-slider

Defines how the slider widget should set its movement limits against the slider. With half-slider enabled the button will start and end from its center (and not its border).

hint

Sets the hint text of an input. This is the equivalen of placeholder in HTML. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it’s available as an option.

hint-color

Sets the hint font color.

hint-display

Sets the hint display mode.

  • Applicable to: EE::UI::UITextInput (TextInput)

  • Data Type: string-list

  • Value List:

    • always : Always visible

    • focus : Visible on focus

  • Default value: always

hint-font-family

Sets the hint font family.

hint-font-size

Sets the hint font size.

hint-font-style

Sets the hint font style.

  • Applicable to: EE::UI::UITextInput (TextInput)

  • Data Type: string-list

  • Value List:

    • underline

    • bold

    • italic

    • strikethrough

    • shadow : Drops a shadow to the text.

  • Default value: No value

hint-shadow-color

Sets the hint font shadow color.

hint-stroke-color

Sets the hint font stroke (the outline) color.

hint-shadow-offset

Sets the hint font shadow offset.

hint-stroke-width

Sets the hint font stroke (the outline) width.

href

Specifies the link destination of an Anchor element

hscroll-mode

Sets the horizontal scroll mode to any scrollable element. The mode defines the visibility of the horizontal scroll.

icon

Sets an icon to an element that support icons.

indeterminate

Enables/disables indeterminate mode for a loader. Indeterminate mode is used when the progress of the load can’t be determined.

inner-widget-orientation

PushButton can contain 3 widgets: the text (textbox), the icon, and a custom extra item. And with these 3 items does its own layouting. This property allows configuring the order in which these items are displayed/sorted inside the button.

  • Applicable to: EE::UI::UIPushButton (PushButton) and any element that extends it: UIMenuItem, UISelectButton (SelectButton), UITableCell , UITableHeaderColumn.

  • Data Type: string-list

  • Value List (Widget is the custom widget):

    • widgeticontextbox : Widget | Icon | TextBox

    • widgettextboxicon : Widget | TextBox | Icon

    • icontextboxwidget : Icon | TextBox | Widget

    • iconwidgettextbox : Icon | Widget | TextBox

    • textboxiconwidget : TextBox | Icon | Widget

    • textboxwidgeticon : TextBox | Widget | Icon

  • Default value: widgeticontextbox

layout-gravity

The layout gravity defines how the element gravitates againts its parent (when possible). Gravity specifies how a component should be placed in its group of cells. Must be one or more (separated by |) of the value list values. This behaves as the android:layout_gravity XML attribute (for those who are familiar with).

  • Applicable to: Any element child of a layout element

  • Data Type: string-list

  • Value List:

    • left : Push element to the left of its container.

    • right : Push element to the right of its container.

    • center_horizontal : Push element to the horizontal center of its container.

    • top : Push element to the top of its container.

    • bottom : Push element to the bottom of its container.

    • center_vertical : Place element in the vertical center of its container.

    • center : shorthand of center_horizontal|center_vertical

  • Default value: left|top

  • Aliases: layout_gravity, lg

layout-height

Specifies the basic height of the element. This is a required attribute for any element inside of a containing layout element that doesn’t use any fixed size for its childs (ej: EE::UI::UILinearLayout, EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as 12dp) for a constant height or one of the special constants.

  • Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: length or string-list

  • Value List: (for the constant values)

    • match_parent : The element must be as big as its parent.

    • wrap_content : The element should be only big enough to enclose its content (plus padding).

  • Default value: wrap_content

  • Aliases: layout_height, lh

layout-to-bottom-of

Positions the top edge of this element below the given anchor element ID. Accommodates top margin of this element and bottom margin of anchor view.

  • Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: string (anchor element ID)

  • Default value: No value

  • Aliases: layout_to_bottom_of

layout-to-left-of

Positions the right edge of this element to the left of the given anchor element ID. Accommodates right margin of this element and left margin of anchor element.

  • Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: string (anchor element ID)

  • Default value: No value

  • Aliases: layout_to_left_of

layout-to-right-of

Positions the left edge of this element to the right of the given anchor element ID. Accommodates left margin of this element and right margin of anchor element.

  • Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: string (anchor element ID)

  • Default value: No value

  • Aliases: layout_to_right_of

layout-to-top-of

Positions the bottom edge of this element above the given anchor element ID. Accommodates bottom margin of this element and top margin of anchor view.

  • Applicatable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: string (anchor element ID)

  • Default value: No value

  • Aliases: layout_to_top_of

layout-weight

Indicates how much of the extra space in the EE::UI::UILinearLayout (LinearLayout) is allocated to the element. Specify 0 if the element should not be stretched. Otherwise the extra pixels will be pro-rated among all views whose weight is greater than 0. The weight sum of all elements must be 1 to fill the whole parent length. The weight is applied to the orientation that the LinearLayout uses. This property behaves the same as the android:layout_weight XML attribute in Android (for those who are familiar with it). LinearLayout supports assigning a weight to individual children. This attribute assigns an “importance” value to a element, and allows it to expand to fill any remaining space in the parent view. Element/widget default weight is zero. In order to work properly you must set the layout-width or the layout-height to 0 to the element that uses layout weight. If the parent is a horizontal LinearLayout the layout-width must be set to 0, and if the parent if a vertical LinearLayout the layout-height must be set to 0, in order to use the layout weight.

  • Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout)

  • Data Type: number (normalized from 0 to 1)

  • Default value: 0

  • Aliases: layout_weight, lw8

layout-width

Specifies the basic width of the element. This is a required attribute for any element inside of a containing layout element that doesn’t use any fixed size for its childs (ej: EE::UI::UILinearLayout, EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as 12dp) for a constant width or one of the special constants.

  • Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or EE::UI::UIRelativeLayout (RelativeLayout)

  • Data Type: length or string-list

  • Value List: (for the constant values)

    • match_parent : The element must be as big as its parent.

    • wrap_content : The element should be only big enough to enclose its content (plus padding).

  • Default value: wrap_content

  • Aliases: layout_width, lw

line-spacing

Sets a extra line spacing to the line box.

locked

Enable or disable editing on code editor elements.

margin-bottom

Read margin-bottom documentation.

  • Aliases: layout_marginBottom

margin-left

Read margin-left documentation.

  • Aliases: layout_marginLeft

margin-right

Read margin-right documentation.

  • Aliases: layout_marginRight

margin-top

Read margin-top documentation.

  • Aliases: layout_marginTop

max-height

Read max-height documentation.

max-width

Read max-width documentation.

max-edge-resistance

On a view pager the max edge resistance allows to scroll outside the edge limits by a percentage of the element width/height (depending on the view pager orientation) and automatically go back to the final position when released.

max-length

Sets the maximum length of an input.

max-progress

Sets the maximum number of progress that a loader can have.

max-tab-width

Sets the maximum tab width accepted in a tab widget.

max-text-length

Sets the maximum text length in a tab.

max-value

Sets the maximum value that a range element will hold.

max-visible-items

Sets the maximum visible items for the list shown by a drop down list or combo box.

min-height

Read min-height documentation.

min-icon-size

Sets the minimum size of the icon inside a push button (or any widget that extends from it, for example a menu item or a tab). It’s usually required for the EE::UI::UIMenu (Menu) sice the icon box must have a size if the menu contains items with icons and others without, otherwise the menu items will be misaligned.

min-tab-width

Sets the minimum width that a tab can have inside a EE::UI::UITabWidget (TabWidget).

min-value

Sets the minimum value that a range element will hold.

min-width

Read min-width documentation.

movement-speed

Sets the movement speed in displaced length per second of the progress bar filler.

numeric

Sets the text input as a numeric input, this means that only numbers will be accepted and if allow-float also is enabled it will allow numeric float numbers.

opacity

Read opacity documentation.

orientation

Sets the orientation to any element that allows vertical and horizontal orientation.

outline-thickness

Sets the outline thickness of the loader spinner.

owns

Indicates the element ID that the Tab element owns. The ownership indicates that the element ID is going to be shown when the Tab element is selected, and will be closed if the Tab is closed. The owned element will be automatically resized to the tab widget container size.

padding-bottom

Read padding-bottom documentation.

padding-left

Read padding-left documentation.

padding-right

Read padding-right documentation.

padding-top

Read padding-top documentation.

page-locked

Locks/unlocks the current page in a view pager (locking means that the page cannot be changed and it’s not scrollable).

page-step

Sets the length value that needs the element to scroll a page. Currently the page step it’s not used by any element but it’s a value that can be fetched to implement a page up and down in a scrollable component.

progress

Sets the current progress of any type of progress bar or loader.

  • Applicable to: EE::UI::UIProgresBar (ProgressBar), EE::UI::UILoader (Loader)

  • Data Type: number

  • Default value: 0

radius

Sets the radius of a loader. This will not change the size of the loader, only the loader internal size.

  • Applicable to: EE::UI::UILoader (Loader)

  • Data Type: length

  • Default value: 0 (but it will change with the loader layout size)

reverse-draw

Enables/disables the reverse draw order for the element. When enabled the element will draw from the last child to the first.

  • Applicable to: Any element

  • Data Type: boolean

  • Default value: false

rotation

Sets the element rotation in degrees.

  • Applicable to: Any element

  • Data Type: number

  • Default value: 0

  • Aliases: rotate

rotation-origin-point-x

Sets the x-axis rotation origin point relative to the element expressed as a length or a percentage.

  • Applicable to: Any element

  • Data Type: length-percentage

  • Default value: center

  • Aliases: rotate-origin-point-x

Syntax:

rotation-origin-point-x: 50dp;
rotation-origin-point-x: center;
rotation-origin-point-x: 100%;

rotation-origin-point-y

Sets the y-axis rotation origin point relative to the element expressed as a length or a percentage.

  • Applicable to: Any element

  • Data Type: length-percentage

  • Default value: center

  • Aliases: rotate-origin-point-y

Syntax:

rotation-origin-point-y: 50dp;
rotation-origin-point-y: center;
rotation-origin-point-y: 100%;

row-height

Sets the row height in any element that contains fixed size rows.

row-mode

Sets the row mode of a grid layout. The row mode defines how the size of the row of a grid layout is measured.

  • Applicable to: EE::UI::UIGridLayout (GridLayout)

  • Data Type: string-list

  • Value List:

    • size : The row width of each grid child will be defined with a fixed width based on the value of the row-width length.

    • weight : The row width of each grid child will be calculated as a normalized percentage of the total grid width using the row-weight value.

  • Default value: weight

row-margin

Sets the vertical separation between each element in the grid layout.

row-weight

Sets the percentage height of the child elements of a grid layout. row-mode must be weight in order to work.

scale

Sets the scale of the element.

  • Applicable to: Any element

  • Data Type: vector2-number

  • Default value: 1 1

scale-origin-point-x

Sets the x-axis scale origin point relative to the element expressed as a length or a percentage.

Syntax:

scale-origin-point-x: 50dp;
scale-origin-point-x: center;
scale-origin-point-x: 100%;

scale-origin-point-y

Sets the y-axis scale origin point relative to the element expressed as a length or a percentage.

Syntax:

scale-origin-point-y: 50dp;
scale-origin-point-y: center;
scale-origin-point-y: 100%;

scale-type

Sets a method to scale the image inside an element.

  • Applicable to: EE::UI::UIImage (Image), EE::UI::UITextureRegion (TextureRegion)

  • Data Type: string-list

  • Value List:

    • fit-inside : Fits the image inside the element mantaining its ratio.

    • expand : Expands the image to cover the whole element without mantaining its ratio.

    • none : Keeps the image as it is.

scrollbar-mode

Defines how the scrollbar should fit inside an scrollable element.

  • Applicable to: EE::UI::UIScrollView (ScrollView)

  • Data Type: string-list

  • Value List:

    • inclusive : The scrollbar is part of the scrollable element container, this means that it will be on top of the content (scrollbars on mobile usually behave like this).

    • exclusive : The scrollbar is outside the scrollable element container, this means that it will not be on top of the content (scrollbars on desktop usually behave like this).

  • Default value: exclusive

scrollbar-style

Sets the scrollbar style (for the moment defines if it contains buttons at its edge or it’s simply a bar).

selected

Sets the element state as selected when supported by the specific widget.

selected-index

Selects an item inside an element containing a list of items from the item index in the list (starting from 0).

selectex-text

Selects an item inside an element containing a list of items from its item text.

selection-back-color

Sets the text selection background color on a text element that suports text selection.

selection-color

Sets the text selection color on a text element that suports text selection.

select-on-click

Enables the selection state toggle on element click.

  • Applicable to: EE::UI::SelectButton (SelectButton)

  • Data Type: boolean

  • Default value: false

skin

Sets the skin (a.k.a. decoration) to an element. Element skins are automatically applied if there’s a specific skin for the element loaded in the current theme, but new skins can be used and loaded with this property. Skins are a way to decorate the widgets, they are loaded from a list of textures or from a texture atlas. Skins are stateful, this means that a skin can contain all the possible states that a widget can have for decoration, these are: normal, focus, selected, hover, pressed, selectedhover, selectedpressed, disabled, checked. Current UI skin documentation is lacking.

  • Applicable to: Any element

  • Data Type: string (skin name or none to disable skinning)

  • Default value: The skin corresponding to the widget.

skin-color

Sets the skin tint color.

  • Applicable to: Any element

  • Data Type: color

  • Default value: white (no tint)

splitter-always-show

Sets if the splitter divisor is always visible. If false it will be shown only if two views are attached to the splitter.

splitter-partition

Sets the space ocuppied by the first view contained by the splitter.

src

Sets the source of a resource in an element that supports source.

tabbar-hide-on-single-tab

Enables/disables the tab bar hiding when only one tab is contained in the tab widget.

tabbar-allow-rearrange

Enables/disables manually rearraging the tabs in the tab bar.

tabbar-allow-drag-and-drop-tabs

Enables/disables the hability to move any tab from a TabWidget to another.

tabbar-allow-switch-tabs-in-empty-spaces

Enables/disables switching tabs from empty/blank spaces in the tab widget.

tab-closable

Enables/disables tabs to be closable with the middle mouse button click or by clicking on the close button.

tabs-edges-diff-skin

Enable/disable the tabs edges (most left and right) to use a different skin/decoration from the other tabs. The most left tab will use the skin: tab_left and the most right tab will use tab_right. instead of using the normal tab skin. This is to be able to achieve more “closed” tab widgets.

tab-height

Sets the tab widget tabs container height. If not set it will try to get the height from the tab skin height.

tab-separation

Sets the tabs separation/distance between each other. Negative values are accepted.

text

Sets the text to any element that holds or contains text. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it’s available as an option.

text-align

Read text-align documentation.

text-as-fallback

When enabled will only display text if the icon is not set/found.

text-overflow

Read text-overflow documentation.

text-selection

Enables/disables text selection in any element that contains text.

text-shadow-color

Sets the text shadow color.

text-shadow-offset

Sets the text shadow offset.

text-stroke-color

Sets the text stroke (also known as text outline) color.

  • Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView.

  • Data Type: color

  • Default color: black

  • Aliases: fontOutlineColor

text-stroke-width

Sets the text stroke (also known as text outline) width/thickness.

  • Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView.

  • Data Type: length

  • Default value: 0dp

  • Aliases: fontOutlineThickness

text-transform

The text-transform CSS property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

theme

Sets a theme to the element. Changing the theme will not have any effect unless skin is also set.

  • Applicable to: Any element

  • Data Type: string

  • Default value: No value

timing-function

Sets the timing function (easing function) of a view pager.

  • Applicable to: EE::UI::UIViewPager (ViewPager)

  • Data Type: string

  • Value List:

    • Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none.

  • Default value: sine-in

tint

Sets the tint color of an image.

tooltip

Sets the tooltip text and enables the tooltip to the element. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it’s available as an option.

  • Applicable to: Any element

  • Data Type: string

  • Default value: No value

total-steps

Sets the total steps required to complete a progress bar (the maximum value a progress bar will hold).

touch-drag

Enables/disables the element as draggable. When enabled the element will be able to be dragged.

touch-drag-deceleration

Sets a acceleration value that defines how much will accelerate the drag when the mouse or touch is released.

transition-delay

Read transition-delay documentation.

transition-duration

Read transition-duration documentation.

transition-property

Read transition-property documentation.

transition-timing-function

Read transition-timing-function documentation.

Timing function names are custom, and not the same as the standard, but cubic-bezier is supported. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, cubic-bezier, none.

value

Sets the current value to an element that accepts values.

vertical-expand

In a progress bar enables/disables if the progress bar filler should be expanded vertically to the element height. Whend disabled the filler height will be defined by the filler skin height.

visible

Enables/disables the element visibility.

  • Applicable to: Any element

  • Data Type: boolean

  • Default value: true

vscroll-mode

Sets the vertical scroll mode to any scrollable element. The mode defines the visibility of the vertical scroll.

window-border-auto-size

Sets if the window border size should be automatically calculated based on the skin size.

window-border-size

Manually sets the size of the window border.

window-buttons-offset

Sets the window titlebar buttons position offset.

window-buttons-separation

Sets the separation between the window titlebar buttons.

window-corner-distance

Sets the minimum distance where the hovering cursor detects an edge of the window to enable edge resizing.

window-flags

Sets the window flags. Window flags activate a set of different boolean options of the window. Multiple values are separated with a | (as a logical or).

  • Applicable to: EE::UI::UIWindow (Window)

  • Data Type: string-list

  • Value List:

    • default : same as close|buttonactions|resizeable|shareopacity

    • close : Adds a close button to the titlebar.

    • maximize : Adds a maximize button to the titlebar.

    • minimize : Adds a minimize button to the titlebar.

    • draggable : Makes the window background draggable.

    • shadow : The window will project a shadow.

    • modal : Makes the window modal (blocks interacting any element ouside the window).

    • undecorated : Creates an undecorated window (no borders and titlebar).

    • resizeable : Makes the window resizeable.

    • shareopacity : Childs will inherit the window opacity (otherwise if you change the opacity of the window will only affect its borders, background and titlebar).

    • buttonactions : Implements the window minimize, maximize and close buttons default actions. This means that close button click will close, minimize will hide (but not close) and maximize will maximize.

    • framebuffer : Creates the window on its own frame buffer.

    • colorbuffer : Enables the color buffer to the frame buffer (if active).

  • Default value: default

window-min-size

Sets the window minimum size.

  • Applicable to: EE::UI::Window (Window)

  • Data Type: vector2-length

  • Default value: No value

window-opacity

Sets the base opacity of a window, this is the maximum opacity that the window will be able to have. And the opacity property applied to the window will be multiplied by this value.

window-title

Sets the window title.

window-titlebar-auto-size

Sets if the window titlebar size should be automatically calculated based on the skin size.

window-titlebar-size

Manually sets the size of the window titlebar.

word-wrap

Enables/disables word-wrap in the text view element.

CSS Shorthands

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

animation

Read animation documentation.

background

Read background documentation. Only eepp CSS properties supported are valid in the shorthand.

background-position

Read background-position documentation.

border

Read border documentation. border-style is not implemented yet.

border-bottom

Read border documentation. border-style is not implemented yet.

border-color

Read border-color documentation.

border-left

Read border documentation. border-style is not implemented yet.

border-radius

Read border-radius documentation.

border-right

Read border documentation. border-style is not implemented yet.

border-width

Read border-width documentation.

border-top

Read border documentation. border-style is not implemented yet.

box-margin

Shorthand for column-margin and row-margin (in that order).

The syntax consists in two lengths separated by a space.

Syntax:

box-margin: 10dp 10dp;

focusable

Set / unset the widget as focusable to navigate with tab / tab + shift navigation

foreground

Same as the background but for the foreground of the node. The foreground is rendered on the top of the element.

foreground-position

Same as the background-position but for the foreground of the node.

foreground-radius

Same as the border-radius but for the foreground of the node.

hint-shadow

The hint text shadow, same as text-shadow but for hints.

Read text-shadow documentation.

blur-radius is not supported.

margin

Read margin documentation.

min-size

Shorthand for min-width and min-height

max-size

Shorthand for max-width and max-height

padding

Read padding documentation.

rotation-origin-point

The origin point of the rotation expressed as a position.

Default value: center center. Aliases: rotate-origin-point

Syntax:

rotation-origin-point: 50dp 10dp;
rotation-origin-point: center top;
rotation-origin-point: 100% 0%;

scale-origin-point

The origin point of the node scale expressed as position.

Default value: center center.

Syntax:

scale-origin-point: 50dp 10dp;
scale-origin-point: center top;
scale-origin-point: 100% 0%;

transition

Read transition documentation.

text-shadow

Read text-shadow documentation.

blur-radius is not supported.

At-rules

At-rules are CSS statements that instructs CSS how to behave. They begin with an at sign, ‘@’ (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ‘;’ (U+003B SEMICOLON), or the next CSS block, whichever comes first.

The following at-rules are currently supported:

  • @import — Tells the CSS engine to include an external style sheet.

  • @media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. Media features currently supported: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, prefers-color-scheme. Note: eepp prefers dark as default.

    non-standard media features: pixel-density : The pixel-density feature is specified as a float value representing the current pixel density used by the application. It is a range feature, meaning that you can also use the prefixed min-pixel-density and max-pixel-density variants to query minimum and maximum values, respectively.

    Also, eepp only uses screen media type.

  • @font-face — Describes the aspect of an external font to be downloaded. Only font-family and src properties are supported at the moment.

  • @keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.

Pseudo-class selectors

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.

Most common pseudo-class selectors are supported. The list is:

CSS Data Types

CSS data types define typical values (including keywords and units) accepted by CSS properties and functions.

For more details regarding this topic please read the CSS values and units Mozilla docs.

Types:

boolean (data-type)

Binary state with two possible values:

  • true

    • Aliases: 1, t, T, y, Y

  • false

    • Aliases: 0, f, F, n, N

integer (data-type)

Read integer documentation.

color (data-type)

Read color documentation.

Differences with documentation:

  • Only CSS Level 1 color keywords supported.

  • eepp adds hsv and hsva functions with the same syntax that hsl and hsla.

  • System colors not support.

  • New global color keywords can be registered to eepp by calling the static function: EE::System::Color::registerColor.

length (data-type)

Read length documentation.

Differences with documentation:

  • Supported lenghts: em, rem, pt, pc, in, cm, mm, vw, vh, vmin, vmax.

  • Also adds: dp as Device-independent pixel. Plus dpr (dp rounded), dprd (dp rounded down) and dpru (dp rounded up).

length-percentage (data-type)

Read length-percentage documentation.

Differences with documentation:

  • calc currently not supported

number (data-type)

Read number documentation.

position (data-type)

Read position documentation.

resource-path (data-type)

For EE::UI::UIImage (Image), background-image, foreground-image (all the examples are valid).

For a EE::UI::UITextureRegion (TextureRegion) only the examples with: @textureregion, @drawable, drawable_resource_name from a texture region resource are valid.

For a EE::UI::UISprite (Sprite) only the examples with: all the examples are valid except for @9p and http/s resources.

Valid resources path:

file://assets/icon/ee.png; /** relative path to the current working diretory */
"file://assets/icon/ee.png";
https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png;
"https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png";
url(file://assets/icon/ee.png);
url(https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png);
url("file://assets/icon/ee.png");
url(data:image/format;base64,data);
url(data:image/format,url-encoded-data);
@image/image_name_already_in_texture_factory;
@texture/image_name_already_in_texture_factory;
@textureregion/region_name_already_in_any_texture_atlas;
@sprite/sprite_name_already_in_any_texture_atlas; /* sprite pattern name **/
@drawable/drawable_name_already_in_any_drawable_manager; /* drawable managers are any holder of image resources. This includes: texture atlases, textures, nine patchs. */
@9p/nine_patch_resource_name_already_in_the_nine_path_manager;
drawable_resource_name; /** same as doing: @drawable/drawable_resource_name */
linear-gradient(from_color, to_color);
linear-gradient(direction, from_color, to_color); /** valid directions are (without quotes): "to bottom", "to left", "to right", "to top". */
circle(radius, color, type); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). */
rectangle(type, color, rotation, radius); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). rotation (optional) is a number in degress: "0º" (without quotes). radius (optional), must be the last parameter. */
triangle(type, color, "point_1.x point1.y, point_2.x point2.y, point_3.x point3.y", lineWidth) /** type can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */
poly(type, color, "point_1.x point1.y, point_2.x point2.y, ...", lineWidth) /** polygon. type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */
icon(name, size) /** icons usually come from font glyphs, size is the font glyph size. For example: icon("quit", 24dp) */
glyph(font_family, font_size, codepoint) /** codepoint can be an integer value, an hex value (hex values start with 0x), or a 1 codepoint string representing glyph character. For example: glyph("monospace", 24dp, "@") */

string (data-type)

Read string documentation.

Differences with documentation:

  • Only supports " (double quote)

string-list (data-type)

A set of predefined string value types. Each CSS property will have its own string set specified in the documentation.

vector2-number (data-type)

A set of two number s separated by a ” ” (space), usually representing x and y axis in that order.

vector2-length (data-type)

A set of two length s separated by a ” ” (space), usually representing x and y axis in that order or also representing width and height.