CSS custom properties are CSS variables initialized with specific graphic properties, e.g. color, size, percentage, etc.

• They can be called in different places for each Service Apps app, such as in the theme, in widgets, or in CSS code.

• Modifications are automatically propagated to all of the relevant objects.

This enables customers to personalize their Service Apps style guide easily by only modifying CSS variables instead of the graphic properties of each widget in each app.

Notes

• CSS variables are grouped in a Secured HTML widget named __Root.
  • This widget is found in all templates from Service Apps Oxygen 2.1 onwards. It extends the scope of CSS variables to the entire app without requiring any other configuration.
  • If you create an app without using one of the templates, the widget will not be present. If this is the case, you must call the __Root widget in each app page in order to access CSS variables.

• CSS variables can be configured both in the theme editor and in each app.

Caution

• The __Root widget will not be initialized in pages in edit mode. To initialize it correctly in all app pages:
  • You can insert the __Root widget in a Page widget that is subsequently called in all app pages (standard integration in templates).
  • You can also insert the __Root widget in each app page.

• Templates provided in Service Apps do not have the __Root widget in popups. They automatically inherit the __Root widget of the parent page.

Declaring CSS variables

__Root widget

• The __Root widget contains a <style> </style> tag.

• A :root selector is encapsulated within this tag. It contains all CSS variables declared with their associated values.

Creating CSS variables

• The CSS variables used in templates are created by EasyVista.
  • You cannot modify the names of these CSS variables.
  • The name of each variable complies with a naming convention that indicates its scope and graphic element clearly.
     
• Customers can create their own CSS variables in compliance with this naming convention.

Naming convention of CSS variables

Rules

• Two mandatory dashes -- must be prefixed to the variable name.

• CSS variable names defined by EasyVista start with the following string of characters, ezv. This string of characters enables you to identify them easily.

• CSS variables created by customers can be named according to customer requirements.

Associating values with CSS variables

• You use the : character to associate a value with a CSS variable.

• Font size is expressed in pixels and colors in hexadecimal code.

Separators

• You use the semicolon ; to separate CSS variables within the :root selector.

Using CSS variables

• The CSS variable must be specified with its value in a CSS style sheet or in the Properties Inspector specific to each widget.

• A widget can refer to a CSS variable in a graphic property using the var(...) function.

List of CSS variables

You can customize the following elements using CSS variables:

• Background color of sections
• Font size, color and style
• Border width, color and corners (rounded or sharp)

CSS variables related to the page

• ezv-background-page: Used to define the background color of the page.

CSS variables related to the page header

• ezv-background-header-1 / ezv-font-color-header-1 / ezv-font-size-header-1: Used to define the visual aspect of the header, i.e. background color, font size and color.

• ezv-background-header-2 / ezv-font-color-header-2 / ezv-font-size-header-2: Used to define the visual aspect of a second header, or to define a header divided into two visually different sections, i.e. background color, font size and color.

CSS variables related to the page footer

• ezv-background-footer-1 / ezv-font-color-footer-1 / ezv-font-size-footer-1: Used to define the visual aspect of the footer, i.e. background color, font size and color.

• ezv-background-footer-2 / ezv-font-color-footer-2 / ezv-font-size-footer-2: Used to define the visual aspect of a second footer, or to define a footer divided into two visually different sections, i.e. background color, font size and color.

CSS variables related to menu items

• ezv-background-menu / ezv-font-color-menu-1 / ezv-font-color-menu-2: Used to define the color of the menu pane, the generic font color and the color of the active menu item.

CSS variables related to important elements

• ezv-background-element / ezv-font-color-element / ezv-background-element-2 / ezv-font-color-element-2 / ezv-background-element-3 / ezv-font-color-element-3 / ezv-background-element-4 / ezv-font-color-element-4: Used to define the background color and font color of elements that have been identified as important in the app. You can specify up to four such elements.

CSS variables related to main colors

• ezv-main-color-1 / ezv-main-color-2 / ezv-main-color-3 / ezv-main-color-4 / ezv-main-color-5: Used to define the colors in the graphic identity of a theme.

CSS variables related to buttons

• ezv-background-button-1 / ezv-font-color-button-1 / ezv-border-radius-button-1 / ezv-border-color-button-1: Used to define the background color of buttons, the color of text in buttons, border corners (rounded or sharp) and border color.

• ezv-background-button-2 / ezv-font-color-button-2 / ezv-border-radius-button-2 / ezv-border-color-button-2: Used to define the background color of buttons, the color of text in buttons, border corners (rounded or sharp) and border color when the cursor hovers over the buttons.

CSS variables related to indicators

• ezv-indicator-1 / ezv-font-color-indicator-1: Used to define the background color and font color of indicators.

• ezv-indicator-2 / ezv-indicator-3 / ezv-indicator-4 / ezv-indicator-5 / ezv-indicator-6 / ezv-indicator-7: Used to define the background color of indicators.

• ezv-indicator-link: Used to define the color of clickable elements in indicators.

CSS variables related to fonts

• ezv-font-color-1 / ezv-font-size-1: Used to define the color and size of titles, e.g. page titles, section titles, etc.

• ezv-font-color-2 / ezv-font-size-2: Used to define the color and size of sub-headings, e.g. widget names, etc.

• ezv-font-color-3 / ezv-font-size-3: Used to define the color and size of labels, e.g. text, field names, etc.

• ezv-font-color-4 / ezv-font-size-4: Used to define the color and size of values, e.g. numeric values, data retrieved from Service Manager, etc.

• ezv-font-color-5: Used to define the color of miscellaneous elements not belonging to any of the categories above.

• ezv-font-family-1 / ezv-font-family-2 / ezv-font-family-3 / ezv-font-family-4 / ezv-font-family-5: Used to define different font styles (Fine, Semi-Bold, Light, Bold, Italic).

CSS variables related to borders

• ezv-border-color-1 / ezv-border-size-1: Used to define the color and size of < Spacer Element > borders.

• ezv-border-color-2 / ezv-border-size-2: Used to define the color and size of < Spacer Data > borders.

• ezv-border-color-3 / ezv-border-size-3: Used to define the color and size of < Border Widget > borders.

• ezv-border-color-4: Used to define the border color of miscellaneous elements not belonging to any of the categories above.