6.1.5CSS variables

CSS variable

Description

--font-family

Standard font family (for example, Jakarta)

--font-family-numeric

In versions of the platform where the standard font does not have monospaced digits, an alternative font-family (such as Open Sans) to use for numeric values

--font-size-base

Standard font size (usually, 14px)

--font-size-larger

Larger font size (usually, 16px)

--font-size-small

Smaller font size (usually, 11px)

--clr-text

Standard text colour. For example, #f0f0f0

--clr-highlight

Colour for (slightly) highlighted text. For example, #ffffff

--clr-lessbold

Colour for less-highlighted text. For example, #e0e0e0

--clr-lowlight

"Lowlight" text colour. For example, #a0b0d0

--clr-disabled

Colour for disabled text/buttons. For example, #c0c0c0

--widget-chrome-inset-horizontal

Offset to allow space for the framework's close/action icon in widgets (40px)

--clr-profit

Text colour for profitable cash values (e.g. green)

--clr-loss

Text colour for loss-making cash values (e.g. red)

--clr-profitbackground

Background colour for when you want white text on top of a background denoting profitability

--clr-lossbackground

Background colour for when you want white text on top of a background denoting a financial loss

--clr-long

Text colour for buy/long values. For example, used for up candles and for displaying the trade volume on buy trades. User-configurable in the platform.

--clr-short

Text colour for sell/short values. For example, used for down candles and for displaying the trade volume on sell trades. User-configurable in the platform.

--clr-on-long-background

If --clr-long is used as a background colour, automatically switches to either white or black depending on which has better contrast

--clr-on-short-background

If --clr-short is used as a background colour, automatically switches to either white or black depending on which has better contrast

--clr-border1

Standard colour for borders around boxes and grids

--clr-border-dark

A darker border colour, for more emphasis

--clr-widget-background

Widget page background colour. Can, for example, be used as a theme-appropriate opaque background in modal pop-ups.

--clr-transparent-wash1

--clr-transparent-wash2

--clr-transparent-wash3

Three semi-transparent "washes", intended for use as backgrounds which highlight and pick out information. They range in intensity from wash1 being the most obvious and emphatic through to wash3 being very slight shading. For example, in the standard light theme, the three washes have the following values: rgba(128, 128, 128, 0.6), rgba(224, 224, 224, 0.4), rgba(210, 220, 240, 0.1)