Genero Browser Client User Guide - Theme variables reference

This topic lists the theme variables you can use or change in your theme.scss.json file.

Theme

Defines theme main variables

Theme colors

Defines theme main colors

$theme-selection-text-color = $theme-currentrow-color

computed value

white

Theme selection text color

Type	color
Default value	$theme-currentrow-color

$theme-primary-color = $palette-text-primary-100

computed value

white

Theme primary color

Type	color
Default value	$palette-text-primary-100

Aliases (for compatibility only)

$gbc-secondary-text-color

$theme-primary-background-color = $palette-primary-700

computed value

#1976d2

Theme primary background color

Type	color
Default value	$palette-primary-700

Aliases (for compatibility only)

$gbc-primary-color

$theme-primary-emphasis-background-color = $palette-primary-500

computed value

#2196f3

Theme primary emphasis background color

Type	color
Default value	$palette-primary-500

Aliases (for compatibility only)

$gbc-primary-medium-color

$theme-primary-faded-background-color = $palette-primary-100

computed value

#bbdefb

Theme primary faded background color

Type	color
Default value	$palette-primary-100

Aliases (for compatibility only)

$gbc-primary-light-color

$theme-secondary-color = $palette-text-secondary-100

computed value

#212121

Theme secondary color

Type	color
Default value	$palette-text-secondary-100

Aliases (for compatibility only)

$gbc-primary-text-color

$theme-secondary-faded-color = $palette-text-secondary-54

computed value

rgba(33, 33, 33, 0.54)

Theme secondary faded color

Type	color
Default value	$palette-text-secondary-54

$theme-secondary-background-color = $palette-secondary-50

computed value

#fafafa

Theme secondary background color

Type	color
Default value	$palette-secondary-50

Aliases (for compatibility only)

$gbc-primary-background-color

$theme-secondary-alternative-background-color = $mt-white

computed value

#ffffff

Theme secondary alternative background color

Type	color
Default value	$mt-white

Aliases (for compatibility only)

$gbc-secondary-background-color

$theme-field-background-color = $mt-white

computed value

#ffffff

Theme field background color

Widget background color.

Type	color
Default value	$mt-white

Aliases (for compatibility only)

$gbc-field-background-color

$theme-header-color = $palette-secondary-100

computed value

whitesmoke

Theme header color

Table header background color.

Type	color
Default value	$palette-secondary-100

Aliases (for compatibility only)

$gbc-header-color

$theme-separator-color = $palette-secondary-400

computed value

#bdbdbd

Theme separator color

Toolbar separator color.

Type	color
Default value	$palette-secondary-400

Aliases (for compatibility only)

$gbc-separator-color

$theme-disabled-color = $palette-disabled-200

computed value

#eeeeee

Theme disabled color

Generally used as widgets disabled foreground color

Type	color
Default value	$palette-disabled-200

$theme-disabled-background-color = $palette-disabled-400

computed value

#bdbdbd

Theme disabled background color

Generally used as widgets disabled background color

Type	color
Default value	$palette-disabled-400

Aliases (for compatibility only)

$gbc-disabled-color

$theme-field-disabled-background-color = $palette-disabled-200

computed value

#eeeeee

Theme field disabled background color

Widget disabled background color.

Type	color
Default value	$palette-disabled-200

Aliases (for compatibility only)

$gbc-field-disabled-background-color

$theme-field-readonly-background-color = $palette-disabled-200

computed value

#eeeeee

Theme field readonly background color

Type	color
Default value	$palette-disabled-200

Aliases (for compatibility only)

$gbc-field-readonly-background-color

$theme-placeholder-color = $palette-disabled-400

computed value

#bdbdbd

Theme placeholder color

Type	color
Default value	$palette-disabled-400

$theme-overlay-background-color = $palette-text-secondary-26

computed value

rgba(33, 33, 33, 0.26)

Theme overlay color

Type	color
Default value	$palette-text-secondary-26

$theme-message-color = $theme-primary-color

computed value

white

Message foreground color.

Type	color
Default value	$theme-primary-color

$theme-message-background-color = $palette-secondary-800

computed value

#424242

Message background color.

Type	color
Default value	$palette-secondary-800

Aliases (for compatibility only)

$gbc-message-color

$theme-error-color = $theme-primary-color

computed value

white

Error message foreground color.

Type	color
Default value	$theme-primary-color

$theme-error-background-color = $mt-red-800

computed value

#c62828

Error message background color.

Type	color
Default value	$mt-red-800

Aliases (for compatibility only)

$gbc-error-color

$theme-currentrow-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$theme-currentrow-background-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

Theme layout variables

Defines theme layout variables

$theme-field-height-ratio = 0.7

computed value

0.7

Theme field height ratio

Ratio applied to the space around text in a field (top and bottom).

Type	number
Default value	0.7

Aliases (for compatibility only)

$gbc-field-height-ratio

$theme-field-default-height = $theme-field-height-ratio * 32px

computed value

22.4px

Theme field default height

Type	size
Default value	$theme-field-height-ratio * 32px

Aliases (for compatibility only)

$field-default-height

$theme-font-size-ratio = 0.8

computed value

0.8

Theme font-size ratio

The font size adjustment ratio in relation to Droid Sans font family sizes. For example, if the browser's available font for the <body> element is Times (12px), size of letters are adjusted by multiplying theme-font-size-ratio by font size. In our example, they display at 10.8 pixels high, (0.9 × 12).

Type	number
Default value	0.8

Aliases (for compatibility only)

$gbc-font-size-ratio

$theme-host-action-default-height = $theme-margin-ratio * 56px

computed value

33.6px

Theme host-action default height

Type	size
Default value	$theme-margin-ratio * 56px

Aliases (for compatibility only)

$mt-toolbar-height

$theme-button-default-width = $theme-font-size-ratio * 100px

computed value

80px

theme button default width

Type	size
Default value	$theme-font-size-ratio * 100px

Aliases (for compatibility only)

$button-default-width

$theme-margin-ratio = 0.6

computed value

0.6

Theme margin ratio

Ratio applied to the margin or space on the left of a field. When you type text in a field you have some space before text that is defined by this variable.

Type	number
Default value	0.6

Aliases (for compatibility only)

$gbc-margin-ratio

$theme-input-padding-top = $theme-margin-ratio*2px

computed value

1.2px

Theme input padding-top

Type	size
Default value	$theme-margin-ratio*2px

$theme-input-padding-right = $theme-margin-ratio*6px

computed value

3.6px

Theme input padding-right

Type	size
Default value	$theme-margin-ratio*6px

$theme-input-padding-bottom = $theme-margin-ratio*2px

computed value

1.2px

Theme input padding-bottom

Type	size
Default value	$theme-margin-ratio*2px

$theme-input-padding-left = $theme-margin-ratio*6px

computed value

3.6px

Theme input padding-left

Type	size
Default value	$theme-margin-ratio*6px

$theme-textarea-padding-top = $theme-margin-ratio*4px

computed value

2.4px

Theme textarea padding-top

Type	size
Default value	$theme-margin-ratio*4px

$theme-textarea-padding-right = $theme-input-padding-right

computed value

3.6px

Theme textarea padding-right

Type	size
Default value	$theme-input-padding-right

$theme-textarea-padding-bottom = 0

computed value

0

Theme textarea padding-bottom

Type	size
Default value	0

$theme-textarea-padding-left = $theme-input-padding-left

computed value

3.6px

Theme textarea padding-left

Type	size
Default value	$theme-input-padding-left

$theme-table-margin = 6px

computed value

6px

Type	size
Default value	6px

Aliases (for compatibility only)

$gbc-table-margin

$theme-combobox-margin = 5px

computed value

5px

Type	size
Default value	5px

Aliases (for compatibility only)

$gbc-combobox-margin

$theme-combobox-padding = 2px

computed value

2px

Type	size
Default value	2px

Aliases (for compatibility only)

$gbc-combobox-padding

$theme-radiobutton-size = 14px

computed value

14px

radiobutton size

Size of the radio button in pixels.

Type	size
Default value	14px

Aliases (for compatibility only)

$gbc-radiobutton-size

$theme-checkbox-size = 14px

computed value

14px

checkbox size

Size of the checkbox in pixels

Type	size
Default value	14px

Aliases (for compatibility only)

$gbc-checkbox-size

$theme-sidebar-always-visible-min-width = 1400px

computed value

1400px

Theme sidebar always-visible min-width

Browser window width size (in pixels) for the left sidebar to appear. Use this setting to hide the left sidebar.See Display or hide the sidebar.

Type	size
Default value	1400px

Aliases (for compatibility only)

$gbc-sidebar-always-visible-min-width

$theme-sidebar-default-width = 300px

computed value

300px

Theme sidebar default width

Default size of sidebar in pixels.

Type	size
Default value	300px

Aliases (for compatibility only)

$gbc-sidebar-default-width

$theme-sidebar-max-width = 800px

computed value

800px

Type	size
Default value	800px

Aliases (for compatibility only)

$gbc-sidebar-max-width

$theme-toggle-chromebar-min-width = 720px

computed value

720px

chromebar toggling min-width

Warning, this is a deprecated feature! Browser window width size (in pixels) for the chromebar to appear. Use this setting to hide the chromebar.

Type	size
Default value	720px

Aliases (for compatibility only)

$theme-toggle-right-sidebar-min-width $gbc-toggle-right-sidebar-min-width

$theme-group-separation-size = $theme-margin-ratio * 12

computed value

7.2

Type	string
Default value	$theme-margin-ratio * 12

Aliases (for compatibility only)

$group-separation-size

$theme-splitter-size = $theme-group-separation-size * 1px

computed value

7.2px

Theme splitter size

Type	size
Default value	$theme-group-separation-size * 1px

Aliases (for compatibility only)

$splitter-size

$theme-traditional-mode-letter-spacing = 1px

computed value

1px

Type	size
Default value	1px

Aliases (for compatibility only)

$traditional-mode-letter-spacing

$theme-max-icon-size = 32px

computed value

32px

Type	size
Default value	32px

Aliases (for compatibility only)

$gbc-max-icon-size

$theme-small-icon-size = 20px * $theme-font-size-ratio

computed value

16px

Type	size
Default value	20px * $theme-font-size-ratio

$theme-grid-inner-gutter = 3

computed value

3

Type	number
Default value	3

Aliases (for compatibility only)

$layout-grid-inner-gutter

$theme-grid-inner-gutter-x = undefined

computed value

false

if defined override the 'theme-grid-inner-gutter' value

Type

number

$theme-grid-inner-gutter-y = undefined

computed value

false

if defined override the 'theme-grid-inner-gutter' value

Type

number

Theme miscellaneous

Defines theme variables

$theme-font-family = 'Droid Sans, sans-serif'

computed value

Droid Sans, sans-serif

Theme font family

Type	string
Default value	'Droid Sans, sans-serif'

$theme-font-family-monospace = 'Droid Sans Mono, monospace'

computed value

Droid Sans Mono, monospace

Theme font family monospace

Type	string
Default value	'Droid Sans Mono, monospace'

$theme-animation-duration = 0.3s

computed value

0.3s

Animation duration (in seconds), such as the speed of Product identication window pop-down appearance.

Type	string
Default value	0.3s

Aliases (for compatibility only)

$gbc-animation-duration

$theme-disable-context-menu = true

computed value

true

Disable context menu

Disable the genero context menu

Type	boolean
Default value	true

Aliases (for compatibility only)

$gbc-disable-context-menu

$theme-scrollers-clickonly = false

computed value

false

Define general scrollers behavior

Type

boolean

Aliases (for compatibility only)

$gbc-scrollers-clickonly

$theme-scrollers-speed = 10

computed value

10

Define the scrollers speed

Type	number
Default value	10

Aliases (for compatibility only)

$gbc-scrollers-speed

$theme-message-display-time = 0

computed value

0

Specify the number of seconds to display the message pane

A positive value is the number of seconds to display the pane before fade-out.
Set to zero (0) to always show the pane.
Set to a negative value to always hide the pane.

Type

number

Aliases (for compatibility only)

$gbc-message-display-time

$theme-message-display-position = bottom-right

computed value

bottom-right

Position of the message panel.
Valid values are:

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right (default)

If the error and message positions are defined for the same place, the two panels will stack.

Type	string
Default value	bottom-right

Possible values

top-left top-center top-right bottom-left bottom-center bottom-right

Aliases (for compatibility only)

$gbc-message-position

$theme-error-display-time = 0

computed value

0

Specify the number of seconds to display the error message pane

A positive value is the number of seconds to display the pane before fade-out.
Set to zero (0) to always show the pane.
Set to a negative value to always hide the pane.

Type

number

Aliases (for compatibility only)

$gbc-error-display-time

$theme-error-display-position = bottom-right

computed value

bottom-right

Position of the error panel.
Valid values are:

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right (default)

If the error and message positions are defined for the same place, the two panels will stack.

Type	string
Default value	bottom-right

Possible values

top-left top-center top-right bottom-left bottom-center bottom-right

Aliases (for compatibility only)

$gbc-error-position

$theme-collapser-position = left

computed value

left

Define the default collapser position (left or right)

Type
Default value	left

$aui-mutation-watch = false

computed value

false

Gbc Watch aui mutations

Enable watching aui mutations

Type

boolean

$aui-mobileUI-default = false

computed value

false

Define if 'mobileUI' flag is sent to DVM

Type

boolean

$theme-table-default-widget = table

computed value

table

Gbc table default widget

Gbc default widget used to render table (if value is 'listview' table will be rendered as listview by default else it will be rendered as normal table). Behavior can still be override by 4ST (tableType).

Type	string
Default value	table

$theme-legacy-topbar = false

computed value

false

Use the old topbar of GBC instead of Chromebar

Warning, this is a deprecated feature, the old topbar will be removed in the future

Type

boolean

$theme-default-reduceFilter = false

computed value

false

Define if 'reduceFilter' is set by default for Tables and ScrollGrids

Type

boolean

$theme-webkit-scrollbars-global-enable = false

computed value

false

Theme webkit scrollbars enabled for all gbc

Use webkit rendering for scrollbars (Only for Chrome and Safari)

Type

boolean

$theme-webkit-scrollbars-size = 8px

computed value

8px

Theme webkit scrollbars size

Define webkit scrollbars size

Type	size
Default value	8px

$theme-webkit-scrollbars-color = $theme-primary-background-color

computed value

#1976d2

Theme webkit scrollbars thumb color

Define webkit scrollbars default thumb color

Type	color
Default value	$theme-primary-background-color

Main color palettes

Defines general colors palettes appearing in the customization

$palette-primary = $mt-blue

computed value

#2196f3

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Primary color base

Defines the theme's main color base

Type	color
Default value	$mt-blue

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

Aliases (for compatibility only)

$primary

$palette-secondary = $mt-grey

computed value

#9e9e9e

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Secondary color base

Defines the theme's secondary color base

Type	color
Default value	$mt-grey

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

$palette-disabled = $mt-grey

computed value

#9e9e9e

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Disabled color base

Defines the theme's disabled color base

Type	color
Default value	$mt-grey

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $palette-text-primary = $mt-text-white

computed value

#ffffff

100

Text Light

Type	color
Value	$mt-text-white

Generator	material-text-color
100 87 54 26 12 0

Aliases (for compatibility only)

$text-light

CONST $palette-text-secondary = $mt-text-black

computed value

#212121

100

Text Dark

Type	color
Value	$mt-text-black

Generator	material-text-color
100 87 54 26 12 0

Aliases (for compatibility only)

$text-dark

Features

Gbc Fonts

Configure Gbc fonts

$droid-font-path = "$$RES/fonts"

computed value

$$RES/fonts

Droid font path

Type	string
Default value	"$$RES/fonts"

$mdi-font-path = "$$RES/fonts"

computed value

$$RES/fonts

Material design icons font path

Type	string
Default value	"$$RES/fonts"

$mdi-css-prefix = zmdi

computed value

zmdi

Material design icons css prefix

Type	string
Default value	zmdi

$mdi-cust-icons = []

computed value

""

Defines additional icons used in the customization

space separated icons identifiers

Type	array<mdi>
Default value	[]

Possible values

Host menu actions order

Defines the order of the different actions available in the host menu

$host-menu-order-upload-icon = 1

computed value

1

Host Menu Order upload-icon

Type	number
Default value	1

$host-menu-order-runtime-status = 10

computed value

10

Host Menu Order runtime-status

Type	number
Default value	10

$host-menu-order-about = 50

computed value

50

Host Menu Order about

Type	number
Default value	50

$host-menu-order-debug = 100

computed value

100

Host Menu Order debug

Type	number
Default value	100

$host-menu-order-run-gwc = 200

computed value

200

Host Menu Order run-gwc

Type	number
Default value	200

$host-menu-order-run-gdc = 500

computed value

500

Host Menu Order run-gdc

Type	number
Default value	500

$host-menu-order-log-proxy = 1000

computed value

1000

Host Menu Order log-proxy

Type	number
Default value	1000

$host-menu-order-log-vm = 2000

computed value

2000

Host Menu Order log-vm

Type	number
Default value	2000

$host-menu-order-settings = 5000

computed value

5000

Host Menu Order settings

Type	number
Default value	5000

$host-menu-order-bookmark = 10000

computed value

10000

Host Menu Order bookmark

Type	number
Default value	10000

$host-menu-order-close = 20000

computed value

20000

Host Menu Order close

Type	number
Default value	20000

HTML defaults variables

variables applied to defaults HTML elements

$html-font-family = $theme-font-family

computed value

Droid Sans, sans-serif

html font family

Type	string
Default value	$theme-font-family

$html-font-family-monospace = $theme-font-family-monospace

computed value

Droid Sans Mono, monospace

html font family monospace

Type	string
Default value	$theme-font-family-monospace

$html-font-size-ratio = $theme-font-size-ratio

computed value

0.8

html font size ratio

Type	number
Default value	$theme-font-size-ratio

$html-anchor-color = $theme-primary-background-color

computed value

#1976d2

html anchor color

Type	color
Default value	$theme-primary-background-color

$html-anchor-active-color = $theme-primary-emphasis-background-color

computed value

#2196f3

html anchor active color

Type	color
Default value	$theme-primary-emphasis-background-color

$html-separator-color = $theme-separator-color

computed value

#bdbdbd

html separator color

Type	color
Default value	$theme-separator-color

Theme network features

Defines theme variables linked to network features

$theme-network-use-credentials-headers = false

computed value

false

Enable credentials headers

Type

boolean

$theme-network-retry-on-error = []

computed value

""

Resend the HTTP request on specified HTTP error

Type	array<number>
Default value	[]

$theme-network-retry-timeout = 1,1,1,2,2,2,4,4,4

computed value

1 1 1 2 2 2 4 4 4

Resend the HTTP request on HTTP error

Timeout (in seconds) after which an HTTP request is resent

Type	array<number>
Default value	1,1,1,2,2,2,4,4,4

Z-indexes

Defines the different layer levels used in the customization

$z-index-Normal = 1

computed value

1

Z-index Normal

Type	number
Default value	1

$z-index-above-Normal = $z-index-Normal + 1

computed value

2

Z-index above-Normal

Type	number
Default value	$z-index-Normal + 1

$z-index-TopMenu = $z-index-Normal * 10

computed value

10

Z-index TopMenu

Type	number
Default value	$z-index-Normal * 10

$z-index-under-Dialog = $z-index-Normal * 39

computed value

39

Z-index under Dialog

Type	number
Default value	$z-index-Normal * 39

$z-index-Dialog = $z-index-Normal * 40

computed value

40

Z-index Dialog

Type	number
Default value	$z-index-Normal * 40

$z-index-BarsContainer = $z-index-Normal * 56

computed value

56

Z-index BarsContainer

Type	number
Default value	$z-index-Normal * 56

$z-index-Message = $z-index-Normal * 60

computed value

60

Z-index Message

Type	number
Default value	$z-index-Normal * 60

$z-index-LogPrompt = $z-index-Normal * 100

computed value

100

Z-index LogPrompt

Type	number
Default value	$z-index-Normal * 100

Gbc layout variables

Configure Gbc layout variables

Material variables

mt-button

$mt-button-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-button-default-height = $theme-field-default-height

computed value

22.4px

Type	size
Default value	$theme-field-default-height

$mt-button-default-width = $theme-button-default-width

computed value

80px

Type	size
Default value	$theme-button-default-width

$mt-button-primary-background-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$mt-button-primary-emphasis-background-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

$mt-button-primary-faded-background-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$mt-button-primary-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$mt-button-secondary-faded-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

$mt-button-disabled-color = $theme-disabled-color

computed value

#eeeeee

Type	color
Default value	$theme-disabled-color

$mt-button-disabled-background-color = $theme-disabled-background-color

computed value

#bdbdbd

Type	color
Default value	$theme-disabled-background-color

$mt-button-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$mt-button-link-color = $html-anchor-color

computed value

#1976d2

Type	color
Default value	$html-anchor-color

$mt-button-link-active-color = $html-anchor-active-color

computed value

#2196f3

Type	color
Default value	$html-anchor-active-color

mt-card

$mt-card-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-card-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$mt-card-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

mt-dialog

$mt-dialog-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-dialog-field-height-ratio = $theme-field-height-ratio

computed value

0.7

Type	number
Default value	$theme-field-height-ratio

$mt-dialog-z-index = $z-index-Dialog

computed value

40

Type	number
Default value	$z-index-Dialog

$mt-dialog-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$mt-dialog-overlay-background-color = $theme-overlay-background-color

computed value

rgba(33, 33, 33, 0.26)

Type	color
Default value	$theme-overlay-background-color

mt-field

$mt-field-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-field-default-height = $theme-field-default-height

computed value

22.4px

Type	size
Default value	$theme-field-default-height

$mt-field-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

$mt-field-border-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$mt-field-border-width-top = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-border-width-right = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-border-width-bottom = 2px

computed value

2px

Type	size
Default value	2px

$mt-field-border-width-left = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-focus-border-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

$mt-field-focus-border-width-top = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-focus-border-width-right = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-focus-border-width-bottom = 2px

computed value

2px

Type	size
Default value	2px

$mt-field-focus-border-width-left = 0px

computed value

0px

Type	size
Default value	0px

$mt-field-readonly-background-color = $theme-field-readonly-background-color

computed value

#eeeeee

Type	color
Default value	$theme-field-readonly-background-color

$mt-field-disabled-background-color = $theme-field-disabled-background-color

computed value

#eeeeee

Type	color
Default value	$theme-field-disabled-background-color

$mt-field-placeholder-color = $theme-placeholder-color

computed value

#bdbdbd

Type	color
Default value	$theme-placeholder-color

$mt-field-input-padding-top = $theme-input-padding-top

computed value

1.2px

Type	size
Default value	$theme-input-padding-top

$mt-field-input-padding-right = $theme-input-padding-right

computed value

3.6px

Type	size
Default value	$theme-input-padding-right

$mt-field-input-padding-bottom = $theme-input-padding-bottom

computed value

1.2px

Type	size
Default value	$theme-input-padding-bottom

$mt-field-input-padding-left = $theme-input-padding-left

computed value

3.6px

Type	size
Default value	$theme-input-padding-left

$mt-field-textarea-padding-top = $theme-textarea-padding-top

computed value

2.4px

Type	size
Default value	$theme-textarea-padding-top

$mt-field-textarea-padding-right = $theme-textarea-padding-right

computed value

3.6px

Type	size
Default value	$theme-textarea-padding-right

$mt-field-textarea-padding-bottom = $theme-textarea-padding-bottom

computed value

0

Type	size
Default value	$theme-textarea-padding-bottom

$mt-field-textarea-padding-left = $theme-textarea-padding-left

computed value

3.6px

Type	size
Default value	$theme-textarea-padding-left

mt-list

$mt-list-field-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

mt-progress

$mt-progress-background-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$mt-progress-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

$mt-progress-alternate-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$mt-progress-height = 4px

computed value

4px

Type	size
Default value	4px

mt-responsive

$mt-responsive-sidebar-always-visible-min-width = $theme-sidebar-always-visible-min-width

computed value

1400px

Type	size
Default value	$theme-sidebar-always-visible-min-width

$mt-responsive-sidebar-default-width = $theme-sidebar-default-width

computed value

300px

Type	size
Default value	$theme-sidebar-default-width

$mt-responsive-screen-width-breakpoint = 768

computed value

768

Phone and tablet width breakpoint (px number). Under that size we consider screen being on a phone.

Type	number
Default value	768

mt-sidebar

$mt-sidebar-always-visible-min-width = $theme-sidebar-always-visible-min-width

computed value

1400px

Type	size
Default value	$theme-sidebar-always-visible-min-width

$mt-sidebar-default-width = $theme-sidebar-default-width

computed value

300px

Type	size
Default value	$theme-sidebar-default-width

$mt-sidebar-splitter-size = $theme-splitter-size

computed value

7.2px

Type	size
Default value	$theme-splitter-size

$mt-sidebar-item-height = $theme-host-action-default-height

computed value

33.6px

Type	size
Default value	$theme-host-action-default-height

$mt-sidebar-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-sidebar-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$mt-sidebar-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$mt-sidebar-item-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$mt-sidebar-overlay-background-color = $theme-overlay-background-color

computed value

rgba(33, 33, 33, 0.26)

Type	color
Default value	$theme-overlay-background-color

$mt-sidebar-resizer-hover-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$mt-sidebar-overlay-z-index = $z-index-DropDown

computed value

58

Type	number
Default value	$z-index-DropDown

$mt-sidebar-z-index = $z-index-above-DropDown

computed value

59

Type	number
Default value	$z-index-above-DropDown

$mt-sidebar-animation-duration = $theme-animation-duration

computed value

0.3s

Type	string
Default value	$theme-animation-duration

mt-tabs

$mt-tabs-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$mt-tabs-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$mt-tabs-tab-z-index = $z-index-Normal

computed value

1

Type	number
Default value	$z-index-Normal

$mt-tabs-tab-current-z-index = $z-index-above-Normal

computed value

2

Type	number
Default value	$z-index-above-Normal

mt-toolbar

$mt-sidebar-faded-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

Widgets specific variables

Configure variables specific to a widget

Application Host level specific variables

Configure variables specific to Application Host

$gbc-ApplicationHostMenuWidget-actions-height = $theme-margin-ratio*72px

computed value

43.2px

Gbc ApplicationHostMenuWidget actions height

Type	size
Default value	$theme-margin-ratio*72px

$gbc-ApplicationHostMenuWidget-chromebar-min-width = $theme-toggle-chromebar-min-width

computed value

720px

Type	size
Default value	$theme-toggle-chromebar-min-width

Aliases (for compatibility only)

$gbc-ApplicationHostMenuWidget-right-sidebar-min-width

$gbc-ApplicationHostMenuWidget-actions-z-index = $z-index-above-DropDown

computed value

59

Gbc ApplicationHostMenuWidget actions z-index

Type	number
Default value	$z-index-above-DropDown

$gbc-ApplicationHostMenuWidget-runtime-processing-opacity = 0.7

computed value

0.7

Type	number
Default value	0.7

$gbc-SessionSidebarWindowItemWidget-height = $theme-margin-ratio*48px

computed value

28.8px

Gbc SessionSidebarWindowItemWidget height

Type	size
Default value	$theme-margin-ratio*48px

$gbc-MainContainerWidget-z-index = $z-index-under-Dialog

computed value

39

Gbc MainContainerWidget z-index

Type	number
Default value	$z-index-under-Dialog

$gbc-ApplicationHostMenuWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-ApplicationHostMenuWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-ApplicationHostMenuWidget-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$gbc-ApplicationHostMenuWidget-sidebar-item-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-ApplicationHostWidget-dialog-button-hover-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-LogPlayerWidget-header-background-color = $theme-disabled-color

computed value

#eeeeee

Type	color
Default value	$theme-disabled-color

$gbc-LogPlayerWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

Application launcher

$gbc-ApplicationLauncher-item-title-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-ApplicationLauncher-item-title-background-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$gbc-ApplicationLauncher-item-title-hover-background-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-ApplicationLauncher-item-title-hover-link-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

Application Monitor Debug level specific variables

Configure variables specific to Application Monitor Debug

$gbc-MonitorDebug-block-title-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$gbc-MonitorDebug-block-title-background-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-MonitorDebug-block-title-background-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-MonitorDebug-odd-line-background-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-MonitorDebug-table-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-MonitorDebug-placeholder-color = $mt-black

computed value

#000000

Type	color
Default value	$mt-black

$gbc-MonitorDebug-actions-height = $theme-margin-ratio*72px

computed value

43.2px

Gbc ApplicationHostMenuWidget actions height

Type	size
Default value	$theme-margin-ratio*72px

AccordionFolderWidget

$gbc-AccordionFolderWidget-title-margin = $theme-margin-ratio*16px

computed value

9.6px

Gbc AccordionWidget title margin

Type	number
Default value	$theme-margin-ratio*16px

$gbc-AccordionFolderWidget-page-margin = $theme-margin-ratio*10px

computed value

6px

Gbc AccordionWidget page margin

Type	number
Default value	$theme-margin-ratio*10px

$gbc-AccordionFolderWidget-font-size = $theme-font-size-ratio*18px

computed value

14.4px

Gbc AccordionWidget font size

Type	number
Default value	$theme-font-size-ratio*18px

$gbc-AccordionFolderWidget-color = $theme-secondary-color

computed value

#212121

Gbc AccordionWidget color

Type	color
Default value	$theme-secondary-color

$gbc-AccordionFolderWidget-background-color = $theme-header-color

computed value

whitesmoke

Gbc AccordionWidget background color

Type	color
Default value	$theme-header-color

$gbc-AccordionFolderWidget-collapser-position = $theme-collapser-position

computed value

left

Define the accordion folder collapser position (left or right)

Type	string
Default value	$theme-collapser-position

ChromeBarWidget

$gbc-ChromeBarWidget-height = 56px

computed value

56px

Defines the ChromeBar height

Type	size
Default value	56px

$gbc-ChromeBarWidget-item-height = 24px

computed value

24px

Defines the ChromeBar item height

Type	size
Default value	24px

$gbc-ChromeBarWidget-item-toggle-margin = 16px

computed value

16px

Defines the ChromeBar item toggle (burger + dots) margins

Type	size
Default value	16px

$gbc-ChromeBarWidget-title-margin = 32px

computed value

32px

Defines the ChromeBar title margin

Type	size
Default value	32px

$gbc-ChromeBarWidget-item-spacing = 24px

computed value

24px

Defines the space between ChromeBar item

Type	size
Default value	24px

$gbc-ChromeBarWidget-right-item-height = $gbc-ChromeBarWidget-height

computed value

56px

Defines the Right ChromeBar item height

Type	size
Default value	$gbc-ChromeBarWidget-height

$gbc-ChromeBarWidget-right-item-margin = 16px

computed value

16px

Defines the Right ChromeBar item margins

Type	size
Default value	16px

$gbc-ChromeBarWidget-right-item-image-margin = $gbc-ChromeBarWidget-title-margin

computed value

32px

Defines the Right ChromeBar item image margins

Type	size
Default value	$gbc-ChromeBarWidget-title-margin

$gbc-ChromeBarWidget-visible-items = uploadStatus runtimeStatus settings

computed value

uploadStatus runtimeStatus settings

Defines items visible in the Chromebar

space separated item identifiers, could be "about", "debug", "runInGDC", "uploadStatus", "runtimeStatus", "proxyLog", "VMLog", "settings", "bookmark"

Type	array
Default value	uploadStatus runtimeStatus settings

$gbc-ChromeBarWidget-flow-gbc-items = false

computed value

false

Force GBC items to the right sidebar

Force GBC items to be flown in the right sidebar

Type

boolean

ContextMenuWidget

$gbc-ContextMenuWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

DropDownWidget

$gbc-DropDownWidget-z-index = $z-index-DropDown

computed value

58

Type	number
Default value	$z-index-DropDown

$gbc-DropDownWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-DropDownWidget-margin = $theme-combobox-margin

computed value

5px

Type	size
Default value	$theme-combobox-margin

$gbc-DropDownWidget-line-height = 2.2em

computed value

2.2em

Type	size
Default value	2.2em

$gbc-DropDownWidget-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$gbc-DropDownWidget-item-current-color = $theme-currentrow-color

computed value

white

Type	color
Default value	$theme-currentrow-color

$gbc-DropDownWidget-item-current-background-color = $theme-currentrow-background-color

computed value

#2196f3

Type	color
Default value	$theme-currentrow-background-color

$gbc-DropDownWidget-item-current-disabled-background-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

$gbc-DropDownWidget-item-hover-background-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-DropDownWidget-min-width = 0

computed value

0

Type

number

$gbc-DropDownWidget-max-height = 300

computed value

300

Type	number
Default value	300

$gbc-DropDownWidget-icon-size = $theme-small-icon-size

computed value

16px

Type	size
Default value	$theme-small-icon-size

FolderWidget

$gbc-FolderWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-FolderWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-FolderWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-FolderWidget-tab-current-border-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-FolderWidget-trigger-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-FolderWidget-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

FormWidget

$gbc-FormWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

GroupWidget

$gbc-GroupWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-GroupWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-GroupWidget-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$gbc-GroupWidget-collapser-position = $theme-collapser-position

computed value

left

Define the group collapser position (left or right)

Type	string
Default value	$theme-collapser-position

HBoxSplitViewWidget

$gbc-HBoxSplitViewWidget-arrows-z-index = $z-index-above-Normal

computed value

2

Type	number
Default value	$z-index-above-Normal

$gbc-HBoxSplitViewWidget-dots-z-index = $z-index-above-Normal

computed value

2

Type	number
Default value	$z-index-above-Normal

$gbc-HBoxSplitViewWidget-arrows-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

$gbc-HBoxSplitViewWidget-arrows-child-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$gbc-HBoxSplitViewWidget-dots-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

$gbc-HBoxSplitViewWidget-dots-current-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

ListViewWidget

$gbc-ListViewWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-ListViewWidget-table-margin = $theme-table-margin

computed value

6px

Type	size
Default value	$theme-table-margin

$gbc-ListViewWidget-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

$gbc-ListViewWidget-border-width-top = $mt-field-border-width-top

computed value

0px

Type	size
Default value	$mt-field-border-width-top

$gbc-ListViewWidget-border-width-right = $mt-field-border-width-right

computed value

0px

Type	size
Default value	$mt-field-border-width-right

$gbc-ListViewWidget-border-width-bottom = $mt-field-border-width-bottom

computed value

2px

Type	size
Default value	$mt-field-border-width-bottom

$gbc-ListViewWidget-border-width-left = $mt-field-border-width-left

computed value

0px

Type	size
Default value	$mt-field-border-width-left

$gbc-ListViewWidget-border-color = $mt-field-border-color

computed value

#bbdefb

Type	color
Default value	$mt-field-border-color

$gbc-ListViewWidget-focus-border-width-top = $mt-field-focus-border-width-top

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-top

$gbc-ListViewWidget-focus-border-width-right = $mt-field-focus-border-width-right

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-right

$gbc-ListViewWidget-focus-border-width-bottom = $mt-field-focus-border-width-bottom

computed value

2px

Type	size
Default value	$mt-field-focus-border-width-bottom

$gbc-ListViewWidget-focus-border-width-left = $mt-field-focus-border-width-left

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-left

$gbc-ListViewWidget-focus-border-color = $mt-field-focus-border-color

computed value

#2196f3

Type	color
Default value	$mt-field-focus-border-color

$gbc-ListViewWidget-currentRow-background-color = $theme-currentrow-background-color

computed value

#2196f3

Gbc ListViewWidget currentRow background color

Type	color
Default value	$theme-currentrow-background-color

$gbc-ListViewWidget-currentRow-color = $theme-currentrow-color

computed value

white

Gbc ListViewWidget currentRow text color

Type	color
Default value	$theme-currentrow-color

$gbc-ListViewWidget-min-width = 60

computed value

60

Gbc ListViewWidget minimum width (pixels)

Type	number
Default value	60

$gbc-ListViewWidget-min-page-size = 1

computed value

1

Gbc ListViewWidget minimum page size

Type	number
Default value	1

MenuWidget

$gbc-MenuWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-MenuWidget-item-height-ratio = $theme-field-height-ratio

computed value

0.7

Type	number
Default value	$theme-field-height-ratio

$gbc-MenuWidget-tabbed-z-index = $z-index-Tabbed-Modal

computed value

57

Type	number
Default value	$z-index-Tabbed-Modal

ModalWidget

$gbc-ModalWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-ModalWidget-field-height-ratio = $theme-field-height-ratio

computed value

0.7

Type	number
Default value	$theme-field-height-ratio

$gbc-ModalWidget-z-index = $z-index-Modal

computed value

55

Type	number
Default value	$z-index-Modal

$gbc-ModalWidget-button-hover-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

PageWidget

$gbc-PageWidget-background-color = $theme-secondary-alternative-background-color

computed value

#ffffff

Type	color
Default value	$theme-secondary-alternative-background-color

$gbc-PageTitleWidget-icon-size = $theme-small-icon-size

computed value

16px

Type	size
Default value	$theme-small-icon-size

ScrollGridWidget

$gbc-ScrollGridWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-ScrollGridWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-ScrollGridWidget-field-default-height = $theme-field-default-height

computed value

22.4px

Type	number
Default value	$theme-field-default-height

$gbc-ScrollGridWidget-inner-gutter = $theme-grid-inner-gutter

computed value

3

Type	number
Default value	$theme-grid-inner-gutter

$gbc-ScrollGridWidget-disabled-color = $theme-disabled-color

computed value

#eeeeee

Type	color
Default value	$theme-disabled-color

$gbc-ScrollGridWidget-current-background-color = $theme-currentrow-background-color

computed value

#2196f3

Type	color
Default value	$theme-currentrow-background-color

$gbc-ScrollGridWidget-current-color = $theme-currentrow-color

computed value

white

Type	color
Default value	$theme-currentrow-color

$gbc-ScrollGridWidget-field-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

SplitterWidget

$gbc-SplitterWidget-hover-color = $mt-light-grey-200

computed value

#eeeeee

SplitterWidget hover color

Type	color
Default value	$mt-light-grey-200

$gbc-SplitterWidget-splitter-size = $theme-splitter-size

computed value

7.2px

Type	size
Default value	$theme-splitter-size

StackWidget

$gbc-StackWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

TableWidget

$gbc-TableWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-TableWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-TableWidget-table-margin = $theme-table-margin

computed value

6px

Type	size
Default value	$theme-table-margin

$gbc-TableWidget-resizer-z-index = $z-index-above-Normal

computed value

2

Type	number
Default value	$z-index-above-Normal

$gbc-TableWidget-border-width-top = $mt-field-border-width-top

computed value

0px

Type	size
Default value	$mt-field-border-width-top

$gbc-TableWidget-border-width-right = $mt-field-border-width-right

computed value

0px

Type	size
Default value	$mt-field-border-width-right

$gbc-TableWidget-border-width-bottom = $mt-field-border-width-bottom

computed value

2px

Type	size
Default value	$mt-field-border-width-bottom

$gbc-TableWidget-border-width-left = $mt-field-border-width-left

computed value

0px

Type	size
Default value	$mt-field-border-width-left

$gbc-TableWidget-border-color = $mt-field-border-color

computed value

#bbdefb

Type	color
Default value	$mt-field-border-color

$gbc-TableWidget-focus-border-width-top = $mt-field-focus-border-width-top

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-top

$gbc-TableWidget-focus-border-width-right = $mt-field-focus-border-width-right

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-right

$gbc-TableWidget-focus-border-width-bottom = $mt-field-focus-border-width-bottom

computed value

2px

Type	size
Default value	$mt-field-focus-border-width-bottom

$gbc-TableWidget-focus-border-width-left = $mt-field-focus-border-width-left

computed value

0px

Type	size
Default value	$mt-field-focus-border-width-left

$gbc-TableWidget-focus-border-color = $mt-field-focus-border-color

computed value

#2196f3

Type	color
Default value	$mt-field-focus-border-color

$gbc-TableWidget-inner-border-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-TableWidget-field-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

$gbc-TableWidget-field-disabled-background-color = $theme-field-disabled-background-color

computed value

#eeeeee

Type	color
Default value	$theme-field-disabled-background-color

$gbc-TableWidget-currentRow-background-color = $theme-currentrow-background-color

computed value

#2196f3

Gbc TableWidget currentRow background color

Type	color
Default value	$theme-currentrow-background-color

$gbc-TableWidget-unfocused-currentRow-background-color = $theme-primary-faded-background-color

computed value

#bbdefb

Gbc TableWidget unfocused currentRow background color

Type	color
Default value	$theme-primary-faded-background-color

$gbc-TableWidget-currentRow-color = $theme-currentrow-color

computed value

white

Gbc TableWidget currentRow text color

Type	color
Default value	$theme-currentrow-color

$gbc-TableWidget-unfocused-currentRow-color = $palette-text-secondary

computed value

#212121

Gbc TableWidget unfocused currentRow text color

Type	color
Default value	$palette-text-secondary

$gbc-TableWidget-dnd-border-color = $theme-separator-color

computed value

#bdbdbd

Gbc TableWidget dnd border color

Type	color
Default value	$theme-separator-color

$gbc-TableWidget-header-color = $theme-header-color

computed value

whitesmoke

Gbc TableWidget header text color

Type	color
Default value	$theme-header-color

$gbc-TableWidget-header-disabled-color = $theme-separator-color

computed value

#bdbdbd

Gbc TableWidget disabled header text color

Type	color
Default value	$theme-separator-color

$gbc-TableWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Gbc TableWidget hover color

Type	color
Default value	$theme-primary-faded-background-color

$gbc-TableWidget-mrs-border-color = $theme-separator-color

computed value

#bdbdbd

Gbc TableWidget mrs border color

Type	color
Default value	$theme-separator-color

$gbc-TableWidget-treeview-collapsed-icon = menu-right

computed value

menu-right

Gbc TableWidget Treeview icon when collapsed

Type	string
Default value	menu-right

$gbc-TableWidget-treeview-expanded-icon = menu-down

computed value

menu-down

Gbc TableWidget Treeview icon when expanded

Type	string
Default value	menu-down

$gbc-TableWidget-treeview-leaf-icon = blank

computed value

blank

Gbc TableWidget Treeview icon on leaf

Type	string
Default value	blank

$gbc-TableWidget-min-width = 60

computed value

60

Gbc TableWidget minimum width (pixels)

Type	number
Default value	60

Aliases (for compatibility only)

$table-min-width $theme-table-min-width

$gbc-TableWidget-min-page-size = 3

computed value

3

Gbc TableWidget minimum page size

Type	number
Default value	3

Aliases (for compatibility only)

$table-min-pageSize $theme-table-min-page-size

$gbc-TableWidget-focused-cell-border-width = 1px

computed value

1px

Gbc TableWidget focused cell highlight width

Type	size
Default value	1px

ToolbarWidget

$gbc-ToolBarWidget-trigger-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-ToolBarWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-ToolBarWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-ToolBarSeparatorWidget-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-ToolBarItemWidget-icon-size = $theme-small-icon-size

computed value

16px

Type	size
Default value	$theme-small-icon-size

Top menu specific variables

Configure variables specific to Top menu widget

$gbc-TopMenuWidget-horizontal-padding = $theme-margin-ratio * 20px

computed value

12px

Type	size
Default value	$theme-margin-ratio * 20px

$gbc-TopMenuWidget-line-height = $theme-font-size-ratio * 26px

computed value

20.8px

Type	size
Default value	$theme-font-size-ratio * 26px

$gbc-TopMenuWidget-vertical-padding = $theme-margin-ratio * 6px

computed value

3.6px

Type	size
Default value	$theme-margin-ratio * 6px

$gbc-TopMenuWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-TopMenuWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-TopMenuWidget-icon-size = $theme-small-icon-size

computed value

16px

Type	size
Default value	$theme-small-icon-size

TraditionalScreenWidget

$gbc-TraditionalScreenWidget-background-color = $theme-secondary-background-color

computed value

#fafafa

Type	color
Default value	$theme-secondary-background-color

UserInterfaceWidget

$gbc-UserInterfaceWidget-bars-container-z-index = $z-index-BarsContainer

computed value

56

Type	number
Default value	$z-index-BarsContainer

$gbc-UserInterfaceWidget-topmenu-z-index = $z-index-TopMenu

computed value

10

Type	number
Default value	$z-index-TopMenu

$gbc-UserInterfaceWidget-background-color = $theme-secondary-background-color

computed value

#fafafa

Type	color
Default value	$theme-secondary-background-color

$gbc-UserInterfaceWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-UserInterfaceWidget-header-color = $theme-header-color

computed value

whitesmoke

Type	color
Default value	$theme-header-color

WindowWidget

$gbc-WindowWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-WindowWidget-z-index = $z-index-Normal

computed value

1

Type	number
Default value	$z-index-Normal

$gbc-WindowWidget-background-color = $theme-secondary-background-color

computed value

#fafafa

Type	color
Default value	$theme-secondary-background-color

$gbc-WindowWidget-header-color = $theme-header-color

computed value

whitesmoke

Type	color
Default value	$theme-header-color

$gbc-WindowWidget-defaultActionPanelPosition = right

computed value

right

Change the default ActionPanel position

Type	string
Default value	right

$gbc-WindowWidget-defaultRingMenuPosition = right

computed value

right

Change the default RingMenu position

Type	string
Default value	right

$gbc-WindowWidget-defaultToolBarPosition = top

computed value

top

Change the default ToolBar position

Type	string
Default value	top

ButtonEditWidget

$gbc-ButtonEditWidget-default-height = $theme-field-default-height

computed value

22.4px

Type	size
Default value	$theme-field-default-height

$gbc-ButtonEditWidget-focus-border-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

ButtonWidget

$gbc-ButtonWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-ButtonWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-ButtonWidget-default-height = $theme-field-default-height

computed value

22.4px

Type	size
Default value	$theme-field-default-height

$gbc-ButtonWidget-color = $theme-primary-color

computed value

white

Type	color
Default value	$theme-primary-color

$gbc-ButtonWidget-focus-background-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Type	color
Default value	$theme-primary-emphasis-background-color

CanvasWidget

$gbc-CanvasWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-CanvasWidget-default-height = $theme-field-default-height

computed value

22.4px

Type	size
Default value	$theme-field-default-height

CheckBoxWidget

$gbc-CheckBoxWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-CheckBoxWidget-checkbox-size = $theme-checkbox-size

computed value

14px

Type	size
Default value	$theme-checkbox-size

$gbc-CheckBoxWidget-unchecked-color = $theme-secondary-color

computed value

#212121

Type	color
Default value	$theme-secondary-color

$gbc-CheckBoxWidget-checked-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-CheckBoxWidget-unchecked-icon = checkbox-blank-outline

computed value

checkbox-blank-outline

Type	string
Default value	checkbox-blank-outline

$gbc-CheckBoxWidget-indeterminate-icon = minus-box

computed value

minus-box

Type	string
Default value	minus-box

$gbc-CheckBoxWidget-checked-icon = checkbox-marked

computed value

checkbox-marked

Type	string
Default value	checkbox-marked

$gbc-CheckBoxWidget-disabled-color = $theme-disabled-background-color

computed value

#bdbdbd

Type	color
Default value	$theme-disabled-background-color

$gbc-CheckBoxWidget-focus-border-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

ComboBoxWidget

$gbc-ComboBoxWidget-padding = $theme-combobox-padding

computed value

2px

Type	size
Default value	$theme-combobox-padding

$gbc-ComboBoxWidget-placeholder-color = $theme-placeholder-color

computed value

#bdbdbd

Type	color
Default value	$theme-placeholder-color

$gbc-ComboBoxWidget-background-color = $theme-field-background-color

computed value

#ffffff

Type	color
Default value	$theme-field-background-color

$gbc-ComboBoxWidget-color = $theme-secondary-color

computed value

#212121

Type	color
Default value	$theme-secondary-color

$gbc-ComboBoxWidget-toggle-icon = menu-down

computed value

menu-down

Type	string
Default value	menu-down

$gbc-ComboBoxWidget-toggle-open-icon = menu-down

computed value

menu-down

Type	string
Default value	menu-down

$gbc-ComboBoxWidget-toggle-size = 1em

computed value

1em

Type	size
Default value	1em

CommandLinkWidget

$gbc-CommandLinkWidget-ttf-color = $mt-green-400

computed value

#66bb6a

Color definition of ttf icon in CommandLink Buttons

Type	color
Default value	$mt-green-400

DateEditWidget

$gbc-DateEdit-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-DateEdit-field-height-ratio = $theme-field-height-ratio

computed value

0.7

Type	size
Default value	$theme-field-height-ratio

$gbc-DateEdit-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

$gbc-DateEdit-color = $theme-secondary-color

computed value

#212121

icon color

Type	color
Default value	$theme-secondary-color

$gbc-DateEdit-daysOff-color = $theme-secondary-faded-color

computed value

rgba(33, 33, 33, 0.54)

Type	color
Default value	$theme-secondary-faded-color

EditWidget

$gbc-Edit-mobile-comment-to-placeholder = 0

computed value

0

Type	number
Default value	0

$gbc-Edit-desktop-comment-to-placeholder = 0

computed value

0

Type	number
Default value	0

FileInputWidget

$gbc-FileInput-drop-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

FilePickerWidget

$gbc-FilePicker-selfdestroy-timeout = 900

computed value

900

Timeout (in seconds) after which the picker will free its file hooks. The purpose here is to prevent potential memory leaks if openfile(s) is called without a following getfile.

Type	number
Default value	900

HLineWidget

$gbc-HLineWidget-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

ImageWidget

$gbc-ImageWidget-max-icon-size = $theme-max-icon-size

computed value

32px

Type	size
Default value	$theme-max-icon-size

LabelWidget

$gbc-LabelWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-LabelWidget-margin = $theme-combobox-margin

computed value

5px

Type	size
Default value	$theme-combobox-margin

MessageWidget

$gbc-MessageWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-MessageWidget-z-index = $z-index-Message

computed value

60

MessageWidget z-index

Type	number
Default value	$z-index-Message

$gbc-MessageWidget-color = $theme-message-color

computed value

white

Type	color
Default value	$theme-message-color

$gbc-MessageWidget-background-color = $theme-message-background-color

computed value

#424242

Type	color
Default value	$theme-message-background-color

$gbc-MessageWidget-shadow-color = $theme-overlay-background-color

computed value

rgba(33, 33, 33, 0.26)

Type	color
Default value	$theme-overlay-background-color

ProgressBarWidget

$gbc-ProgressBarWidget-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

RadioGroupWidget

$gbc-RadioGroupWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-RadioGroupWidget-radiobutton-size = $theme-radiobutton-size

computed value

14px

Type	size
Default value	$theme-radiobutton-size

$gbc-RadioGroupWidget-unchecked-color = $theme-secondary-color

computed value

#212121

Type	color
Default value	$theme-secondary-color

$gbc-RadioGroupWidget-checked-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-RadioGroupWidget-unchecked-icon = radiobox-blank

computed value

radiobox-blank

Type	string
Default value	radiobox-blank

$gbc-RadioGroupWidget-checked-icon = radiobox-marked

computed value

radiobox-marked

Type	string
Default value	radiobox-marked

$gbc-RadioGroupWidget-disabled-color = $theme-disabled-background-color

computed value

#bdbdbd

Type	color
Default value	$theme-disabled-background-color

$gbc-RadioGroupWidget-focus-border-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

RipGraphicWidget

$gbc-RipGraphicWidget-separator-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

Slider specific variables

Configure variables specific to slider widget

$gbc-SliderWidget-field-height-ratio = $theme-field-height-ratio

computed value

0.7

Type	size
Default value	$theme-field-height-ratio

$gbc-SliderWidget-background-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-SliderWidget-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-SliderWidget-disabled-color = $theme-disabled-color

computed value

#eeeeee

Type	color
Default value	$theme-disabled-color

$gbc-SliderWidget-thumb-hover-color = $theme-primary-emphasis-background-color

computed value

#2196f3

Gbc Slider thumb hover color

Type	color
Default value	$theme-primary-emphasis-background-color

$gbc-SliderWidget-focus-border-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

SpinEditWidget

$gbc-SpinEditWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-SpinEditWidget-font-family = $theme-font-family

computed value

Droid Sans, sans-serif

Type	string
Default value	$theme-font-family

$gbc-SpinEditWidget-color = $theme-secondary-color

computed value

#212121

Type	color
Default value	$theme-secondary-color

$gbc-SpinEditWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-SpinEditWidget-arrows-size = 0.6em

computed value

0.6em

Type	size
Default value	0.6em

TextEditWidget

$gbc-TextEditWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-TextEditWidget-font-size-ratio = $theme-font-size-ratio

computed value

0.8

Type	number
Default value	$theme-font-size-ratio

TimeEditWidget

$gbc-TimeEditWidget-margin-ratio = $theme-margin-ratio

computed value

0.6

Type	number
Default value	$theme-margin-ratio

$gbc-TimeEditWidget-font-family = $theme-font-family

computed value

Droid Sans, sans-serif

Type	string
Default value	$theme-font-family

$gbc-TimeEditWidget-color = $theme-secondary-color

computed value

#212121

icon color

Type	color
Default value	$theme-secondary-color

$gbc-TimeEditWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

Session level specific variables

Configure variables specific to Session

$gbc-SessionEndWidget-message-separator = $palette-text-secondary-12

computed value

rgba(33, 33, 33, 0.12)

Gbc SessionEndWidget message separator

Type	color
Default value	$palette-text-secondary-12

$gbc-SessionLogPromptWidget-color = $theme-primary-color

computed value

white

Gbc SessionLogPromptWidget color

Type	color
Default value	$theme-primary-color

$gbc-SessionLogPromptWidget-background-color = $theme-secondary-color

computed value

#212121

Gbc SessionLogPromptWidget background color

Type	color
Default value	$theme-secondary-color

$gbc-SessionLogPromptWidget-z-index = $z-index-LogPrompt

computed value

100

Gbc SessionLogPromptWidget z index

Type	number
Default value	$z-index-LogPrompt

$gbc-SessionLogPromptWidget-button-height = $theme-field-default-height

computed value

22.4px

Gbc SessionLogPromptWidget button height

Type	size
Default value	$theme-field-default-height

$gbc-WaitingWidget-color = $theme-secondary-color

computed value

#212121

Gbc WaitingWidget color

Type	color
Default value	$theme-secondary-color

$gbc-WaitingWidget-background-color = $theme-disabled-background-color

computed value

#bdbdbd

Gbc WaitingWidget background color

Type	color
Default value	$theme-disabled-background-color

StartMenu specific variables

Configure variables specific to StartMenu widgets

$gbc-StartMenuWidget-color = $theme-primary-background-color

computed value

#1976d2

Type	color
Default value	$theme-primary-background-color

$gbc-StartMenuWidget-background-color = $theme-secondary-background-color

computed value

#fafafa

Type	color
Default value	$theme-secondary-background-color

$gbc-StartMenuGroupWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-StartMenuCommandWidget-hover-color = $theme-primary-faded-background-color

computed value

#bbdefb

Type	color
Default value	$theme-primary-faded-background-color

$gbc-StartMenuCommandWidget-disabled-color = $theme-disabled-background-color

computed value

#bdbdbd

Type	color
Default value	$theme-disabled-background-color

$gbc-StartMenuSeparatorWidget-color = $theme-separator-color

computed value

#bdbdbd

Type	color
Default value	$theme-separator-color

$gbc-StartMenuWidget-maxWidth = 300px

computed value

300px

Type	size
Default value	300px

Constant variables

Constants variables that can be used but not modified

Genero color definitions

Genero colors (legacy equivalent)

CONST $gbc-genero-black = $mt-grey-900

computed value

#212121

Genero 'black'

Color code corresponding to Genero named color.

Type	color
Value	$mt-grey-900

CONST $gbc-genero-blue = $mt-blue-500

computed value

#2196f3

Genero 'blue'

Color code corresponding to Genero named color.

Type	color
Value	$mt-blue-500

CONST $gbc-genero-cyan = $mt-cyan-500

computed value

#00bcd4

Genero 'cyan'

Color code corresponding to Genero named color.

Type	color
Value	$mt-cyan-500

CONST $gbc-genero-darkBlue = $mt-blue-800

computed value

#1565c0

Genero 'darkBlue'

Color code corresponding to Genero named color.

Type	color
Value	$mt-blue-800

CONST $gbc-genero-darkCyan = $mt-cyan-800

computed value

#00838f

Genero 'darkCyan'

Color code corresponding to Genero named color.

Type	color
Value	$mt-cyan-800

CONST $gbc-genero-darkGray = $mt-grey-800

computed value

#424242

Genero 'darkGray'

Color code corresponding to Genero named color.

Type	color
Value	$mt-grey-800

CONST $gbc-genero-darkGreen = $mt-green-800

computed value

#2e7d32

Genero 'darkGreen'

Color code corresponding to Genero named color.

Type	color
Value	$mt-green-800

CONST $gbc-genero-darkMagenta = $mt-pink-800

computed value

#ad1457

Genero 'darkMagenta'

Color code corresponding to Genero named color.

Type	color
Value	$mt-pink-800

CONST $gbc-genero-darkOlive = $mt-light-green-800

computed value

#558b2f

Genero 'darkOlive'

Color code corresponding to Genero named color.

Type	color
Value	$mt-light-green-800

CONST $gbc-genero-darkOrange = $mt-orange-800

computed value

#ef6c00

Genero 'darkOrange'

Color code corresponding to Genero named color.

Type	color
Value	$mt-orange-800

CONST $gbc-genero-darkRed = $mt-red-800

computed value

#c62828

Genero 'darkRed'

Color code corresponding to Genero named color.

Type	color
Value	$mt-red-800

CONST $gbc-genero-darkTeal = $mt-teal-800

computed value

#00695c

Genero 'darkTeal'

Color code corresponding to Genero named color.

Type	color
Value	$mt-teal-800

CONST $gbc-genero-darkYellow = $mt-yellow-800

computed value

#f9a825

Genero 'darkYellow'

Color code corresponding to Genero named color.

Type	color
Value	$mt-yellow-800

CONST $gbc-genero-gray = $mt-grey-500

computed value

#9e9e9e

Genero 'gray'

Color code corresponding to Genero named color.

Type	color
Value	$mt-grey-500

CONST $gbc-genero-green = $mt-green-500

computed value

#4caf50

Genero 'green'

Color code corresponding to Genero named color.

Type	color
Value	$mt-green-500

CONST $gbc-genero-lightBlue = $mt-blue-100

computed value

#bbdefb

Genero 'lightBlue'

Color code corresponding to Genero named color.

Type	color
Value	$mt-blue-100

CONST $gbc-genero-lightCyan = $mt-cyan-100

computed value

#b2ebf2

Genero 'lightCyan'

Color code corresponding to Genero named color.

Type	color
Value	$mt-cyan-100

CONST $gbc-genero-lightGray = $mt-grey-300

computed value

#e0e0e0

Genero 'lightGray'

Color code corresponding to Genero named color.

Type	color
Value	$mt-grey-300

CONST $gbc-genero-lightGreen = $mt-green-100

computed value

#c8e6c9

Genero 'lightGreen'

Color code corresponding to Genero named color.

Type	color
Value	$mt-green-100

CONST $gbc-genero-lightMagenta = $mt-pink-100

computed value

#f8bbd0

Genero 'lightMagenta'

Color code corresponding to Genero named color.

Type	color
Value	$mt-pink-100

CONST $gbc-genero-lightOlive = $mt-light-green-100

computed value

#dcedc8

Genero 'lightOlive'

Color code corresponding to Genero named color.

Type	color
Value	$mt-light-green-100

CONST $gbc-genero-lightOrange = $mt-orange-100

computed value

#ffe0b2

Genero 'lightOrange'

Color code corresponding to Genero named color.

Type	color
Value	$mt-orange-100

CONST $gbc-genero-lightRed = $mt-red-100

computed value

#ffcdd2

Genero 'lightRed'

Color code corresponding to Genero named color.

Type	color
Value	$mt-red-100

CONST $gbc-genero-lightTeal = $mt-teal-100

computed value

#b2dfdb

Genero 'lightTeal'

Color code corresponding to Genero named color.

Type	color
Value	$mt-teal-100

CONST $gbc-genero-lightYellow = $mt-yellow-100

computed value

#fff9c4

Genero 'lightYellow'

Color code corresponding to Genero named color.

Type	color
Value	$mt-yellow-100

CONST $gbc-genero-magenta = $mt-pink-500

computed value

#e91e63

Genero 'magenta'

Color code corresponding to Genero named color.

Type	color
Value	$mt-pink-500

CONST $gbc-genero-olive = $mt-light-green-500

computed value

#8bc34a

Genero 'olive'

Color code corresponding to Genero named color.

Type	color
Value	$mt-light-green-500

CONST $gbc-genero-orange = $mt-orange-500

computed value

#ff9800

Genero 'orange'

Color code corresponding to Genero named color.

Type	color
Value	$mt-orange-500

CONST $gbc-genero-red = $mt-red-500

computed value

#f44336

Genero 'red'

Color code corresponding to Genero named color.

Type	color
Value	$mt-red-500

CONST $gbc-genero-teal = $mt-teal-500

computed value

#009688

Genero 'teal'

Color code corresponding to Genero named color.

Type	color
Value	$mt-teal-500

CONST $gbc-genero-white = $mt-white

computed value

#ffffff

Genero 'white'

Color code corresponding to Genero named color.

Type	color
Value	$mt-white

CONST $gbc-genero-yellow = $mt-yellow-500

computed value

#ffeb3b

Genero 'yellow'

Color code corresponding to Genero named color.

Type	color
Value	$mt-yellow-500

Genero system color definitions

Genero system colors (legacy equivalent)

CONST $gbc-genero-appWorkSpace = $theme-secondary-background-color

computed value

#fafafa

Gbc Genero system color appWorkSpace

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-background-color

CONST $gbc-genero-background = $theme-secondary-alternative-background-color

computed value

#ffffff

Gbc Genero system color background

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-alternative-background-color

CONST $gbc-genero-buttonFace = $theme-primary-background-color

computed value

#1976d2

Gbc Genero system color buttonFace

Color code corresponding to Genero named system color.

Type	color
Value	$theme-primary-background-color

CONST $gbc-genero-buttonText = $theme-primary-color

computed value

white

Gbc Genero system color buttonText

Color code corresponding to Genero named system color.

Type	color
Value	$theme-primary-color

CONST $gbc-genero-grayText = $theme-disabled-color

computed value

#eeeeee

Gbc Genero system color grayText

Color code corresponding to Genero named system color.

Type	color
Value	$theme-disabled-color

CONST $gbc-genero-highLight = $theme-primary-emphasis-background-color

computed value

#2196f3

Gbc Genero system color highLight

Color code corresponding to Genero named system color.

Type	color
Value	$theme-primary-emphasis-background-color

CONST $gbc-genero-highLightText = $theme-primary-color

computed value

white

Gbc Genero system color highLightText

Color code corresponding to Genero named system color.

Type	color
Value	$theme-primary-color

CONST $gbc-genero-infoBackground = $theme-secondary-background-color

computed value

#fafafa

Gbc Genero system color infoBackground

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-background-color

CONST $gbc-genero-infoText = $theme-secondary-color

computed value

#212121

Gbc Genero system color infoText

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-color

CONST $gbc-genero-systemAlternateBackground = $theme-primary-faded-background-color

computed value

#bbdefb

Gbc Genero system color systemAlternateBackground

Color code corresponding to Genero named system color.

Type	color
Value	$theme-primary-faded-background-color

CONST $gbc-genero-window = $theme-secondary-background-color

computed value

#fafafa

Gbc Genero system color window

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-background-color

CONST $gbc-genero-windowText = $theme-secondary-color

computed value

#212121

Gbc Genero system color windowText

Color code corresponding to Genero named system color.

Type	color
Value	$theme-secondary-color

Material color constants

Predefined material base colors for theming

CONST $mt-white = #ffffff

computed value

#ffffff

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material White

Material color and generated palette.

Type	color
Value	#ffffff

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-black = #000000

computed value

#000000

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Black

Material color and generated palette.

Type	color
Value	#000000

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-text-white = $mt-white

computed value

#ffffff

100

Material Text white

Material color and generated palette.

Type	color
Value	$mt-white

Generator	material-text-color
100 87 54 26 12 0

CONST $mt-text-black = $mt-grey-900

computed value

#212121

100

Material Text Black

Material color and generated palette.

Type	color
Value	$mt-grey-900

Generator	material-text-color
100 87 54 26 12 0

CONST $mt-red = #f44336

computed value

#f44336

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Red

Material color and generated palette.

Type	color
Value	#f44336

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-pink = #e91e63

computed value

#e91e63

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Pink

Material color and generated palette.

Type	color
Value	#e91e63

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-purple = #9c27b0

computed value

#9c27b0

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Purple

Material color and generated palette.

Type	color
Value	#9c27b0

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-deep-purple = #673ab7

computed value

#673ab7

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Deep Purple

Material color and generated palette.

Type	color
Value	#673ab7

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-indigo = #3f51b5

computed value

#3f51b5

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Indigo

Material color and generated palette.

Type	color
Value	#3f51b5

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-blue = #2196f3

computed value

#2196f3

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Blue

Material color and generated palette.

Type	color
Value	#2196f3

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-light-blue = #03a9f4

computed value

#03a9f4

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Light Blue

Material color and generated palette.

Type	color
Value	#03a9f4

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-cyan = #00bcd4

computed value

#00bcd4

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Cyan

Material color and generated palette.

Type	color
Value	#00bcd4

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-teal = #009688

computed value

#009688

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Teal

Material color and generated palette.

Type	color
Value	#009688

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-green = #4caf50

computed value

#4caf50

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Green

Material color and generated palette.

Type	color
Value	#4caf50

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-light-green = #8bc34a

computed value

#8bc34a

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Light Green

Material color and generated palette.

Type	color
Value	#8bc34a

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-lime = #cddc39

computed value

#cddc39

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Lime

Material color and generated palette.

Type	color
Value	#cddc39

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-yellow = #ffeb3b

computed value

#ffeb3b

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Yellow

Material color and generated palette.

Type	color
Value	#ffeb3b

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-amber = #ffc107

computed value

#ffc107

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Amber

Material color and generated palette.

Type	color
Value	#ffc107

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-orange = #ff9800

computed value

#ff9800

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Orange

Material color and generated palette.

Type	color
Value	#ff9800

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-deep-orange = #ff5722

computed value

#ff5722

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Deep Orange

Material color and generated palette.

Type	color
Value	#ff5722

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-brown = #795548

computed value

#795548

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Brown

Material color and generated palette.

Type	color
Value	#795548

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-grey = #9e9e9e

computed value

#9e9e9e

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Grey

Material color and generated palette.

Type	color
Value	#9e9e9e

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-light-grey = #9e9e9e

computed value

#9e9e9e

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Light Grey

Material color and generated palette.

Type	color
Value	#9e9e9e

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-lighter-grey = #CCCCCC

computed value

#CCCCCC

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Lighter Grey

Material color and generated palette.

Type	color
Value	#CCCCCC

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

CONST $mt-blue-grey = #607d8b

computed value

#607d8b

100

200

300

400

500

600

700

800

900

a100

a200

a400

a700

Material Blue Grey

Material color and generated palette.

Type	color
Value	#607d8b

Generator	material-color
50 100 200 300 400 500 600 700 800 900 a100 a200 a400 a700

Deprecated variables

deprecated variables that will be removed

$gbc-primary-strong-color = undefined

computed value

false

deprecated variable that will be removed

Type

$gbc-secondary-color = undefined

computed value

false

deprecated variable that will be removed

Type

$theme-selection-text-color = $theme-currentrow-color computed value white

$theme-primary-color = $palette-text-primary-100 computed value white

$theme-primary-background-color = $palette-primary-700 computed value #1976d2

$theme-primary-emphasis-background-color = $palette-primary-500 computed value #2196f3

$theme-primary-faded-background-color = $palette-primary-100 computed value #bbdefb

$theme-secondary-color = $palette-text-secondary-100 computed value #212121

$theme-secondary-faded-color = $palette-text-secondary-54 computed value rgba(33, 33, 33, 0.54)

$theme-secondary-background-color = $palette-secondary-50 computed value #fafafa

$theme-secondary-alternative-background-color = $mt-white computed value #ffffff

$theme-field-background-color = $mt-white computed value #ffffff

$theme-header-color = $palette-secondary-100 computed value whitesmoke

$theme-separator-color = $palette-secondary-400 computed value #bdbdbd

$theme-disabled-color = $palette-disabled-200 computed value #eeeeee

$theme-disabled-background-color = $palette-disabled-400 computed value #bdbdbd

$theme-field-disabled-background-color = $palette-disabled-200 computed value #eeeeee

$theme-field-readonly-background-color = $palette-disabled-200 computed value #eeeeee

$theme-placeholder-color = $palette-disabled-400 computed value #bdbdbd

$theme-overlay-background-color = $palette-text-secondary-26 computed value rgba(33, 33, 33, 0.26)

$theme-message-color = $theme-primary-color computed value white

$theme-message-background-color = $palette-secondary-800 computed value #424242

$theme-error-color = $theme-primary-color computed value white

$theme-error-background-color = $mt-red-800 computed value #c62828

$theme-currentrow-color = $theme-primary-color computed value white

$theme-currentrow-background-color = $theme-primary-emphasis-background-color computed value #2196f3

$theme-field-height-ratio = 0.7 computed value 0.7

$theme-field-default-height = $theme-field-height-ratio * 32px computed value 22.4px

$theme-font-size-ratio = 0.8 computed value 0.8

$theme-host-action-default-height = $theme-margin-ratio * 56px computed value 33.6px

$theme-button-default-width = $theme-font-size-ratio * 100px computed value 80px

$theme-margin-ratio = 0.6 computed value 0.6

$theme-input-padding-top = $theme-margin-ratio*2px computed value 1.2px

$theme-input-padding-right = $theme-margin-ratio*6px computed value 3.6px

$theme-input-padding-bottom = $theme-margin-ratio*2px computed value 1.2px

$theme-input-padding-left = $theme-margin-ratio*6px computed value 3.6px

$theme-textarea-padding-top = $theme-margin-ratio*4px computed value 2.4px

$theme-textarea-padding-right = $theme-input-padding-right computed value 3.6px

$theme-textarea-padding-bottom = 0 computed value 0

$theme-textarea-padding-left = $theme-input-padding-left computed value 3.6px

$theme-table-margin = 6px computed value 6px

$theme-combobox-margin = 5px computed value 5px

$theme-combobox-padding = 2px computed value 2px

$theme-radiobutton-size = 14px computed value 14px

$theme-checkbox-size = 14px computed value 14px

$theme-sidebar-always-visible-min-width = 1400px computed value 1400px

$theme-sidebar-default-width = 300px computed value 300px

$theme-sidebar-max-width = 800px computed value 800px

$theme-toggle-chromebar-min-width = 720px computed value 720px

$theme-group-separation-size = $theme-margin-ratio * 12 computed value 7.2

$theme-splitter-size = $theme-group-separation-size * 1px computed value 7.2px

$theme-traditional-mode-letter-spacing = 1px computed value 1px

$theme-max-icon-size = 32px computed value 32px

$theme-small-icon-size = 20px * $theme-font-size-ratio computed value 16px

$theme-grid-inner-gutter = 3 computed value 3

$theme-grid-inner-gutter-x = undefined computed value false

$theme-grid-inner-gutter-y = undefined computed value false

$theme-font-family = 'Droid Sans, sans-serif' computed value Droid Sans, sans-serif

$theme-font-family-monospace = 'Droid Sans Mono, monospace' computed value Droid Sans Mono, monospace

$theme-animation-duration = 0.3s computed value 0.3s

$theme-disable-ending-popup = false computed value false

$theme-disable-context-menu = true computed value true

$theme-scrollers-clickonly = false computed value false

$theme-scrollers-speed = 10 computed value 10

$theme-message-display-time = 0 computed value 0

$theme-message-display-position = bottom-right computed value bottom-right

$theme-error-display-time = 0 computed value 0

$theme-error-display-position = bottom-right computed value bottom-right

$theme-collapser-position = left computed value left

$aui-mutation-watch = false computed value false

$aui-mobileUI-default = false computed value false

$theme-table-default-widget = table computed value table

$theme-legacy-topbar = false computed value false

$theme-default-reduceFilter = false computed value false

$theme-webkit-scrollbars-global-enable = false computed value false

$theme-webkit-scrollbars-size = 8px computed value 8px

$theme-webkit-scrollbars-color = $theme-primary-background-color computed value #1976d2

$palette-primary = $mt-blue computed value #2196f3

$palette-secondary = $mt-grey computed value #9e9e9e

$palette-disabled = $mt-grey computed value #9e9e9e

CONST $palette-text-primary = $mt-text-white computed value #ffffff

CONST $palette-text-secondary = $mt-text-black computed value #212121

$theme-selection-text-color = $theme-currentrow-color

computed value

white

$theme-primary-color = $palette-text-primary-100

computed value

white

$theme-primary-background-color = $palette-primary-700

computed value

#1976d2

$theme-primary-emphasis-background-color = $palette-primary-500

computed value

#2196f3

$theme-primary-faded-background-color = $palette-primary-100

computed value

#bbdefb

$theme-secondary-color = $palette-text-secondary-100

computed value

#212121

$theme-secondary-faded-color = $palette-text-secondary-54

computed value

rgba(33, 33, 33, 0.54)

$theme-secondary-background-color = $palette-secondary-50

computed value

#fafafa

$theme-secondary-alternative-background-color = $mt-white

computed value

#ffffff

$theme-field-background-color = $mt-white

computed value

#ffffff

$theme-header-color = $palette-secondary-100

computed value

whitesmoke

$theme-separator-color = $palette-secondary-400

computed value

#bdbdbd

$theme-disabled-color = $palette-disabled-200

computed value

#eeeeee

$theme-disabled-background-color = $palette-disabled-400

computed value

#bdbdbd

$theme-field-disabled-background-color = $palette-disabled-200

computed value

#eeeeee

$theme-field-readonly-background-color = $palette-disabled-200

computed value

#eeeeee

$theme-placeholder-color = $palette-disabled-400

computed value

#bdbdbd

$theme-overlay-background-color = $palette-text-secondary-26

computed value

rgba(33, 33, 33, 0.26)

$theme-message-color = $theme-primary-color

computed value

white

$theme-message-background-color = $palette-secondary-800

computed value

#424242

$theme-error-color = $theme-primary-color

computed value

white

$theme-error-background-color = $mt-red-800

computed value

#c62828

$theme-currentrow-color = $theme-primary-color

computed value

white

$theme-currentrow-background-color = $theme-primary-emphasis-background-color

computed value

#2196f3

$theme-field-height-ratio = 0.7

computed value

0.7

$theme-field-default-height = $theme-field-height-ratio * 32px

computed value

22.4px

$theme-font-size-ratio = 0.8

computed value

0.8

$theme-host-action-default-height = $theme-margin-ratio * 56px

computed value

33.6px

$theme-button-default-width = $theme-font-size-ratio * 100px

computed value

80px

$theme-margin-ratio = 0.6

computed value

0.6

$theme-input-padding-top = $theme-margin-ratio*2px

computed value

1.2px

$theme-input-padding-right = $theme-margin-ratio*6px

computed value

3.6px

$theme-input-padding-bottom = $theme-margin-ratio*2px

computed value

1.2px

$theme-input-padding-left = $theme-margin-ratio*6px

computed value

3.6px

$theme-textarea-padding-top = $theme-margin-ratio*4px

computed value

2.4px

$theme-textarea-padding-right = $theme-input-padding-right

computed value

3.6px

$theme-textarea-padding-bottom = 0

computed value

0

$theme-textarea-padding-left = $theme-input-padding-left

computed value

3.6px

$theme-table-margin = 6px

computed value

6px

$theme-combobox-margin = 5px

computed value

5px

$theme-combobox-padding = 2px

computed value

2px

$theme-radiobutton-size = 14px

computed value

14px

$theme-checkbox-size = 14px

computed value

14px

$theme-sidebar-always-visible-min-width = 1400px

computed value

1400px

$theme-sidebar-default-width = 300px

computed value

300px

$theme-sidebar-max-width = 800px

computed value

800px

$theme-toggle-chromebar-min-width = 720px

computed value

720px

$theme-group-separation-size = $theme-margin-ratio * 12

computed value

7.2

$theme-splitter-size = $theme-group-separation-size * 1px

computed value

7.2px

$theme-traditional-mode-letter-spacing = 1px

computed value

1px

$theme-max-icon-size = 32px

computed value

32px

$theme-small-icon-size = 20px * $theme-font-size-ratio

computed value

16px

$theme-grid-inner-gutter = 3

computed value

3

$theme-grid-inner-gutter-x = undefined

computed value

false

$theme-grid-inner-gutter-y = undefined

computed value

false

$theme-font-family = 'Droid Sans, sans-serif'

computed value

Droid Sans, sans-serif

$theme-font-family-monospace = 'Droid Sans Mono, monospace'

computed value

Droid Sans Mono, monospace

$theme-animation-duration = 0.3s

computed value

0.3s

$theme-disable-ending-popup = false

computed value

false

$theme-disable-context-menu = true

computed value

true

$theme-scrollers-clickonly = false

computed value

false

$theme-scrollers-speed = 10

computed value

10

$theme-message-display-time = 0

computed value

0

$theme-message-display-position = bottom-right

computed value

bottom-right

$theme-error-display-time = 0

computed value

0

$theme-error-display-position = bottom-right

computed value

bottom-right

$theme-collapser-position = left

computed value

left

$aui-mutation-watch = false

computed value

false

$aui-mobileUI-default = false

computed value

false

$theme-table-default-widget = table

computed value

table

$theme-legacy-topbar = false

computed value

false

$theme-default-reduceFilter = false

computed value

false

$theme-webkit-scrollbars-global-enable = false

computed value

false

$theme-webkit-scrollbars-size = 8px

computed value

8px

$theme-webkit-scrollbars-color = $theme-primary-background-color

computed value

#1976d2

$palette-primary = $mt-blue

computed value

#2196f3

$palette-secondary = $mt-grey

computed value

#9e9e9e

$palette-disabled = $mt-grey

computed value

#9e9e9e

CONST $palette-text-primary = $mt-text-white

computed value

#ffffff

CONST $palette-text-secondary = $mt-text-black

computed value

#212121