Frontfire UI CSS variables documentation

--accordion-header-background

Type: color Default: see description (for Accordion)

The background colour of accordion headers. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header background colour is computed from the three H, S and L variables:
hsl(var(--accordion-header-background-h), var(--accordion-header-background-s), var(--accordion-header-background-l))

--accordion-header-background-h

Type: number Range: 0 ≤ value < 360 Default: 0 (for Accordion)

The hue of the background colour of accordion headers, in the HSL colour space.

--accordion-header-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 87% Dark default: 35% (for Accordion)

The lightness of the background colour of accordion headers, in the HSL colour space.

--accordion-header-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for Accordion)

The saturation of the background colour of accordion headers, in the HSL colour space.

--accordion-header-color

Type: color Default: see description (for Accordion)

The text colour of accordion headers. The default value is:
var(--default-text-color)

--accordion-header-expanded-background

Type: color Default: see description (for Accordion)

The background colour of expanded accordion headers. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header background colour is computed from the three H, S and L variables:
hsl(var(--accordion-header-expanded-background-h), var(--accordion-header-expanded-background-s), var(--accordion-header-expanded-background-l))

--accordion-header-expanded-background-h

Type: number Range: 0 ≤ value < 360 Default: 0 (for Accordion)

The hue of the background colour of expanded accordion headers, in the HSL colour space.

--accordion-header-expanded-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 94% Dark default: 24% (for Accordion)

The lightness of the background colour of expanded accordion headers, in the HSL colour space.

--accordion-header-expanded-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for Accordion)

The saturation of the background colour of expanded accordion headers, in the HSL colour space.

--accordion-header-expanded-color

Type: color Default: see description (for Accordion)

The text colour of expanded accordion headers. The default value is:
var(--default-text-color)

--accordion-header-expanded-hover-background

Type: color Default: see description (for Accordion)

The background colour of expanded accordion headers when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header hover background colour is computed from the three H, S and L variables --accordion-header-expanded-background-h, --accordion-header-expanded-background-s and --accordion-header-expanded-background-l where the lightness is adjusted by the factor in --accordion-header-expanded-hover-lf.

--accordion-header-expanded-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.05 Dark default: 0.08 (for Accordion)

The lightness factor of expanded accordion headers when they are hovered by the mouse cursor. The base lightness from --accordion-header-expanded-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--accordion-header-expanded-pressed-background

Type: color Default: see description (for Accordion)

The background colour of expanded accordion headers while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header hover background colour is computed from the three H, S and L variables --accordion-header-expanded-background-h, --accordion-header-expanded-background-s and --accordion-header-expanded-background-l where the lightness is adjusted by the factor in --accordion-header-expanded-pressed-lf.

--accordion-header-expanded-pressed-color

Type: color Default: see description (for Accordion)

The text colour of expanded accordion headers while they are pushed down. The default value is:
var(--accordion-header-expanded-color)

--accordion-header-expanded-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.15 Dark default: 0.18 (for Accordion)

The lightness factor of expanded accordion headers while they are pushed down. The base lightness from --accordion-header-expanded-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--accordion-header-hover-background

Type: color Default: see description (for Accordion)

The background colour of accordion headers when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header hover background colour is computed from the three H, S and L variables --accordion-header-background-h, --accordion-header-background-s and --accordion-header-background-l where the lightness is adjusted by the factor in --accordion-header-hover-lf.

--accordion-header-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.08 Dark default: 0.12 (for Accordion)

The lightness factor of accordion headers when they are hovered by the mouse cursor. The base lightness from --accordion-header-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--accordion-header-pressed-background

Type: color Default: see description (for Accordion)

The background colour of accordion headers while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the accordion header hover background colour is computed from the three H, S and L variables --accordion-header-background-h, --accordion-header-background-s and --accordion-header-background-l where the lightness is adjusted by the factor in --accordion-header-pressed-lf.

--accordion-header-pressed-color

Type: color Default: see description (for Accordion)

The text colour of accordion headers while they are pushed down. The default value is:
var(--accordion-header-color)

--accordion-header-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.2 Dark default: 0.25 (for Accordion)

The lightness factor of accordion headers while they are pushed down. The base lightness from --accordion-header-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--animation-duration

Type: time Default: 0.2s

The duration of most animations and transitions of visual effects. The value is used for the animation-duration CSS property.

--animation-function

Type: easing function Default: ease

The timing function of most animations and transitions of visual effects. The value is used for the animation-timing-function CSS property.

--breakpoint-desktop

Type: length Default: 1200px

The maximum viewport width of a desktop or laptop monitor. This value is defined in the SCSS source file of Frontfire UI and provided as CSS variable for convenience. The variable should not be changed directly. All breakpoint widths are listed in the documentation of the require-desktop CSS class.

--breakpoint-minitab

Type: length Default: 760px

The maximum viewport width of a small tablet device. This value is defined in the SCSS source file of Frontfire UI and provided as CSS variable for convenience. The variable should not be changed directly. All breakpoint widths are listed in the documentation of the require-desktop CSS class.

--breakpoint-phone

Type: length Default: 540px

The maximum viewport width of a phone device. This value is defined in the SCSS source file of Frontfire UI and provided as CSS variable for convenience. The variable should not be changed directly. All breakpoint widths are listed in the documentation of the require-desktop CSS class.

--breakpoint-tablet

Type: length Default: 900px

The maximum viewport width of a regular tablet device. This value is defined in the SCSS source file of Frontfire UI and provided as CSS variable for convenience. The variable should not be changed directly. All breakpoint widths are listed in the documentation of the require-desktop CSS class.

--button-active-background

Type: color Default: see description (for Form)

The background colour of toggle buttons in the active state. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button background colour is computed from the three H, S and L variables:
hsl(var(--button-active-background-h), var(--button-active-background-s), var(--button-active-background-l))

--button-active-background-h

Type: number Range: 0 ≤ value < 360 Default: 0 (for Form)

The hue of the background colour of toggle buttons in the active state, in the HSL colour space.

--button-active-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 44% Dark default: 80% (for Form)

The lightness of the background colour of toggle buttons in the active state, in the HSL colour space.

--button-active-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for Form)

The saturation of the background colour of toggle buttons in the active state, in the HSL colour space.

--button-active-color

Type: color Default: #f0f0f0 Dark default: #202020 (for Form)

The text colour of toggle buttons in the active state.

--button-active-disabled-background

Type: color Default: see description (for Form)

The background colour of toggle buttons in the active state while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-active-background-h, --button-active-background-s and --button-active-background-l where the lightness is adjusted by the factor in --button-active-disabled-lf.

--button-active-disabled-color

Type: color Default: see description (for Form)

The text colour of toggle buttons in the active state while they are pushed down. The default value is:
var(--button-active-color)

--button-active-disabled-lf

Type: number Range: -1 ≤ value ≤ 1 Default: 0.5 Dark default: -0.35 (for Form)

The lightness factor of toggle buttons in the active state while they are pushed down. The base lightness from --button-active-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-active-hover-background

Type: color Default: see description (for Form)

The background colour of toggle buttons in the active state when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-active-background-h, --button-active-background-s and --button-active-background-l where the lightness is adjusted by the factor in --button-active-hover-lf.

--button-active-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.08 Dark default: -0.12 (for Form)

The lightness factor of toggle buttons in the active state when they are hovered by the mouse cursor. The base lightness from --button-active-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-active-pressed-background

Type: color Default: see description (for Form)

The background colour of toggle buttons in the active state while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-active-background-h, --button-active-background-s and --button-active-background-l where the lightness is adjusted by the factor in --button-active-pressed-lf.

--button-active-pressed-color

Type: color Default: see description (for Form)

The text colour of toggle buttons in the active state while they are pushed down. The default value is:
var(--button-active-color)

--button-active-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.2 Dark default: -0.25 (for Form)

The lightness factor of toggle buttons in the active state while they are pushed down. The base lightness from --button-active-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-background

Type: color Default: see description (for Form)

The background colour of buttons. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button background colour is computed from the three H, S and L variables:
hsl(var(--button-background-h), var(--button-background-s), var(--button-background-l))

--button-background-h

Type: number Range: 0 ≤ value < 360 Default: 0 (for Form)

The hue of the background colour of buttons, in the HSL colour space.

--button-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 87% Dark default: 35% (for Form)

The lightness of the background colour of buttons, in the HSL colour space.

--button-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for Form)

The saturation of the background colour of buttons, in the HSL colour space.

--button-caution-background

Type: color Default: see description (for Form)

The background colour of buttons with the caution CSS class. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button background colour is computed from the three H, S and L variables:
hsl(var(--button-caution-background-h), var(--button-caution-background-s), var(--button-caution-background-l))

--button-caution-background-h

Type: number Range: 0 ≤ value < 360 Default: see description (for Form)

The hue of the background colour of buttons with the caution CSS class, in the HSL colour space. The default value is:
var(--error-background-h)

--button-caution-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: see description (for Form)

The lightness of the background colour of buttons with the caution CSS class, in the HSL colour space. The default value is:
var(--error-background-l)
The default value for the dark theme is:
calc(var(--error-background-l) * 0.9)

--button-caution-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: see description (for Form)

The saturation of the background colour of buttons with the caution CSS class, in the HSL colour space. The default value is:
var(--error-background-s)

--button-caution-color

Type: color Default: #ffffff (for Form)

The text colour of buttons with the caution CSS class.

--button-caution-hover-background

Type: color Default: see description (for Form)

The background colour of buttons with the caution CSS class when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-caution-background-h, --button-caution-background-s and --button-caution-background-l where the lightness is adjusted by the factor in --button-caution-hover-lf.

--button-caution-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.1 (for Form)

The lightness factor of buttons with the caution CSS class when they are hovered by the mouse cursor. The base lightness from --button-caution-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-caution-pressed-background

Type: color Default: see description (for Form)

The background colour of buttons with the caution CSS class while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-caution-background-h, --button-caution-background-s and --button-caution-background-l where the lightness is adjusted by the factor in --button-caution-pressed-lf.

--button-caution-pressed-color

Type: color Default: see description (for Form)

The text colour of buttons with the caution CSS class while they are pushed down. The default value is:
var(--button-caution-color)

--button-caution-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.3 (for Form)

The lightness factor of buttons with the caution CSS class while they are pushed down. The base lightness from --button-caution-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-color

Type: color Default: #000000 Dark default: see description (for Form)

The text colour of buttons. The default value for the dark theme is:
var(--default-text-color)

--button-default-background

Type: color Default: see description (for Form)

The background colour of buttons with the default CSS class. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button background colour is computed from the three H, S and L variables:
hsl(var(--button-default-background-h), var(--button-default-background-s), var(--button-default-background-l))

--button-default-background-h

Type: number Range: 0 ≤ value < 360 Default: 225 (for Form)

The hue of the background colour of buttons with the default CSS class, in the HSL colour space.

--button-default-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 50% Dark default: 65% (for Form)

The lightness of the background colour of buttons with the default CSS class, in the HSL colour space.

--button-default-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 73% Dark default: 100% (for Form)

The saturation of the background colour of buttons with the default CSS class, in the HSL colour space.

--button-default-color

Type: color Default: #ffffff (for Form)

The text colour of buttons with the default CSS class.

--button-default-hover-background

Type: color Default: see description (for Form)

The background colour of buttons with the default CSS class when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-default-background-h, --button-default-background-s and --button-default-background-l where the lightness is adjusted by the factor in --button-default-hover-lf.

--button-default-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.15 (for Form)

The lightness factor of buttons with the default CSS class when they are hovered by the mouse cursor. The base lightness from --button-default-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-default-pressed-background

Type: color Default: see description (for Form)

The background colour of buttons with the default CSS class while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-default-background-h, --button-default-background-s and --button-default-background-l where the lightness is adjusted by the factor in --button-default-pressed-lf.

--button-default-pressed-color

Type: color Default: see description (for Form)

The text colour of buttons with the default CSS class while they are pushed down. The default value is:
var(--button-default-color)

--button-default-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.35 (for Form)

The lightness factor of buttons with the default CSS class while they are pushed down. The base lightness from --button-default-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-disabled-background

Type: color Default: see description (for Form)

The background colour of disabled buttons. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-background-h, --button-background-s and --button-background-l where the lightness is adjusted by the factor in --button-disabled-lf.

--button-disabled-color

Type: color Default: #808080 Dark default: #909090 (for Form)

The text colour of disabled buttons.

--button-disabled-lf

Type: number Range: -1 ≤ value ≤ 1 Default: 0.5 Dark default: -0.35 (for Form)

The lightness factor of disabled buttons. The base lightness from --button-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-group-disabled-separator-color

Type: color Default: see description (for Form)

The line colour of separators between disabled buttons in a group. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the group separator colour is computed from the three H, S and L variables --button-background-h, --button-background-s and --button-background-l where the lightness is adjusted by the factor in --button-group-disabled-separator-lf.

--button-group-disabled-separator-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.05 Dark default: 0 (for Form)

The lightness factor of the line colour of separators between disabled buttons in a group. The base lightness from --button-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-group-separator-color

Type: color Default: see description (for Form)

The line colour of separators between buttons in a group. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the group separator colour is computed from the three H, S and L variables --button-background-h, --button-background-s and --button-background-l where the lightness is adjusted by the factor in --button-group-separator-lf.

--button-group-separator-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.15 Dark default: 0.2 (for Form)

The lightness factor of the line colour of separators between buttons in a group. The base lightness from --button-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-hover-background

Type: color Default: see description (for Form)

The background colour of buttons when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-background-h, --button-background-s and --button-background-l where the lightness is adjusted by the factor in --button-hover-lf.

--button-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.08 Dark default: 0.12 (for Form)

The lightness factor of buttons when they are hovered by the mouse cursor. The base lightness from --button-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-pressed-background

Type: color Default: see description (for Form)

The background colour of buttons while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button hover background colour is computed from the three H, S and L variables --button-background-h, --button-background-s and --button-background-l where the lightness is adjusted by the factor in --button-pressed-lf.

--button-pressed-color

Type: color Default: see description (for Form)

The text colour of buttons while they are pushed down. The default value is:
var(--button-color)

--button-pressed-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.2 Dark default: 0.25 (for Form)

The lightness factor of buttons while they are pushed down. The base lightness from --button-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--button-transparent-background

Type: color Default: transparent (for Form)

The background colour of buttons with the transparent CSS class.

--button-transparent-color

Type: color Default: see description (for Form)

The text colour of buttons with the transparent CSS class. The default value is the same as --link-color.

--button-transparent-hover-background

Type: color Default: rgb(0, 0, 0, 0.07) Dark default: rgb(255, 255, 255, 0.14) (for Form)

The background colour of buttons with the transparent CSS class when they are hovered by the mouse cursor.

--button-transparent-hover-color

Type: color Default: see description (for Form)

The text colour of buttons with the transparent CSS class when they are hovered by the mouse cursor. The default value is the same as --link-hover-color.

--button-transparent-pressed-background

Type: color Default: see description (for Form)

The background colour of buttons with the transparent CSS class while they are pushed down. The default value is the same as --button-pressed-background.

--button-transparent-pressed-color

Type: color Default: see description (for Form)

The text colour of buttons with the transparent CSS class while they are pushed down. The default value is the same as --button-pressed-color.

--carousel-indicator-active-background

Type: color Default: rgb(0, 0, 0, 0.3) Dark default: rgb(255, 255, 255, 0.5) (for Carousel)

The colour of the active carousel item indicator dot.

--carousel-indicator-background

Type: color Default: rgb(0, 0, 0, 0.1) Dark default: rgb(255, 255, 255, 0.15) (for Carousel)

The colour of carousel item indicator dots.

--checkbox-pressed-background

Type: color Default: see description (for Form)

The background colour of checkboxes while they are pushed down. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the button background colour is computed from the three H, S and L variables:
hsl(var(--button-background-h), var(--button-background-s), var(--button-background-l))
If --button-background is set, it is also used as fallback for this variable if unset.

--checkbox-validation-error-pressed-background

Type: color Default: #e9bebe Dark default: #854747 (for Form)

The background colour of checkboxes that have a validation error while they are pushed down.

--code-background

Type: color Default: rgb(0, 0, 0, 0.06) Dark default: rgb(255, 255, 255, 0.12) (for Typography)

The background colour of block <div class="code"> and inline <code> elements.

--code-inline-padding

Type: padding Default: 0 2px (for Typography)

The padding of inline <code> elements. The value is used for the padding CSS property.

--code-padding

Type: padding Default: 6px 10px (for Typography)

The padding of block <div class="code"> elements. The value is used for the padding CSS property.

--critical-background

Type: color Default: see description (for Message)

The background colour of critical message boxes. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the background colour is computed from the three H, S and L variables:
hsl(var(--critical-background-h), var(--critical-background-s), var(--critical-background-l))

--critical-background-h

Type: number Range: 0 ≤ value < 360 Default: 347 (for Message)

The hue of the background colour of critical message boxes, in the HSL colour space.

--critical-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 35% (for Message)

The lightness of the background colour of critical message boxes, in the HSL colour space.

--critical-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 79% (for Message)

The saturation of the background colour of critical message boxes, in the HSL colour space.

--critical-color

Type: color Default: #ffffff (for Message)

The text colour of critical message boxes.

--default-background

Type: color Default: #ffffff Dark default: #202020 (for Typography)

The background colour for the page. This is redefined for the dark CSS class.

--default-font-family

Type: font families Default: see description (for Typography)

The default font for the page. The value is used for the font-family CSS property. The default value is:
var(--system-font-family)

This is the place to include custom fonts to use as default, for example:
--default-font-family: "My Custom Font", var(--system-font-family);

--default-font-size

Type: length Default: 14px (for Typography)

The default font size for the page. The value is used for the font-size CSS property.

--default-line-height

Type: number Range: 0 < value Default: 1.42857 (for Typography)

The factor of the default line height for the page, relative to the default font size.

Note:
Frontfire uses a very maintainable system of line heights by only setting this single factor that applies to all elements at their different font sizes. Using a single factor for different base sizes always results in non-integer product values for most font sizes. Browsers understand fractional positions but will round each element to its nearest pixel. This results in slightly inconsistent line height, varying by one pixel. What is usually invisible in paragraphs of text or short messages, becomes more obvious for example in selectables when scrolling through the items with the arrow keys.

The default value of this variable has been optimised to produce a near-integer line height at the default font size of 14px. If you change the --default-font-size variable, you should also consider setting this variable to a value whose product with the font-size results in an integer size to avoid inconsistent line heights. For example, start with (default-font-size · 1.4), round the result, and divide the rounded value by the default-font-size to get an optimised line-height factor.

Font size

px

Line height factor

Optimised factor

Real line height

One off every

--default-text-color

Type: color Default: #000000 Dark default: #f0f0f0 (for Typography)

The text colour for the page. This is redefined for the dark CSS class.

--disabled-label-color

Type: color Default: #a0a0a0 (for Form)

The text colour of a form field label for a disabled field, and for disabled hyperlinks (<a>) and link-styled buttons.

Type: color Default: see description (for Dropdown)

The background colour of a dropdown container. The default value is the same as --default-background.

Type: color Default: #0078d7 (for Dropdown)

The border colour of a dropdown container if the bordered is set.

--error-background

Type: color Default: see description (for Message)

The background colour of error message boxes. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the background colour is computed from the three H, S and L variables:
hsl(var(--error-background-h), var(--error-background-s), var(--error-background-l))

--error-background-h

Type: number Range: 0 ≤ value < 360 Default: 17 (for Message)

The hue of the background colour of error message boxes, in the HSL colour space.

--error-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 43% (for Message)

The lightness of the background colour of error message boxes, in the HSL colour space.

--error-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 78% (for Message)

The saturation of the background colour of error message boxes, in the HSL colour space.

--error-color

Type: color Default: #ffffff (for Message)

The text colour of error message boxes.

--focus-keyboard-outline

Type: outline Default: see description

The outline around elements that match the :focus-visible selector or that are otherwise focused and currently operated by keyboard input. The value is used for the outline CSS property. The default value is:
solid 2px hsl(var(--selection-h), var(--selection-s), var(--selection-l), 0.5)

--focus-keyboard-outline-full-offset

Type: length Default: -2px

Similar to --focus-keyboard-outline-offset but this offset will move the outline completely inside the focused element. It must be set to the same length as for --focus-keyboard-outline. This variable can be used to show the full focus outline on elements that must not paint outside their bounding box because of hidden overflow.

--focus-keyboard-outline-offset

Type: length Default: -1px

The offset of the outline around elements that match the :focus-visible selector or that are otherwise focused and currently operated by keyboard input. The value is used for the outline-offset CSS property. The default value of -1px moves the outline by 1 pixel inwards so that it usually overlaps with the element’s border line and still extends one more pixel to the outside.

--focus-outline

Type: outline Default: see description

The outline around elements that match the :focus selector but are currently not operated by keyboard input. The value is used for the outline CSS property. The default value is:
solid 1px hsl(var(--selection-h), var(--selection-s), var(--selection-l), 0.5)

--focus-outline-offset

Type: length Default: -1px

The offset of the outline around elements that match the :focus selector but are currently not operated by keyboard input. The value is used for the outline-offset CSS property. The default value of -1px moves the outline by 1 pixel inwards so that it usually completely overlaps with the element’s border line.

--h1-font-size

Type: length Default: 2rem (for Typography)

The font size for headers <h1>. The value is used for the font-size CSS property.

--h2-font-size

Type: length Default: 1.6rem (for Typography)

The font size for headers <h2>. The value is used for the font-size CSS property.

--h3-font-size

Type: length Default: 1.3rem (for Typography)

The font size for headers <h3>. The value is used for the font-size CSS property.

--h4-font-size

Type: length Default: 1.1rem (for Typography)

The font size for headers <h4>. The value is used for the font-size CSS property. The headers <h5> and <h6> have the --default-font-size.

--header-weight

Type: font weight Default: 600 (for Typography)

The font weight for headers <h1> to <h6>. The value is used for the font-weight CSS property. The value 600 (semibold) is better for the Windows default font Segoe UI, it is effectively rendered as 700 (bold) on Android.

--image-caption-color

Type: color Default: #666666 Dark default: #888888 (for Image)

The text colour of image captions, the text directly below an image. See the plugin page for examples.

--information-background

Type: color Default: see description (for Message)

The background colour of information message boxes. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the background colour is computed from the three H, S and L variables:
hsl(var(--information-background-h), var(--information-background-s), var(--information-background-l))

--information-background-h

Type: number Range: 0 ≤ value < 360 Default: 202 (for Message)

The hue of the background colour of information message boxes, in the HSL colour space.

--information-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 84% Dark default: 37% (for Message)

The lightness of the background colour of information message boxes, in the HSL colour space.

--information-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 78% (for Message)

The saturation of the background colour of information message boxes, in the HSL colour space.

--information-color

Type: color Default: #000000 Dark default: #ffffff (for Message)

The text colour of information message boxes.

--input-label-background

Type: color Default: #f4f4f4 Dark default: #303030 (for Form)

The background colour of a label in a segmented input field.

--larger-font-size

Type: length Default: 1.3em (for Typography)

The font size for larger than default text. This is used for all elements with the larger CSS class. The value is used for the font-size CSS property.

--link-color

Type: color Default: see description (for Typography)

The text colour of hyperlinks (<a>) and link-styled buttons. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the link colour is computed from the three H, S and L variables:
hsl(var(--link-color-h), var(--link-color-s), var(--link-color-l))

--link-color-h

Type: number Range: 0 ≤ value < 360 Default: 226 (for Typography)

The hue of the text colour of hyperlinks (<a>) and link-styled buttons, in the HSL colour space.

--link-color-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 51% Dark default: 78% (for Typography)

The lightness of the text colour of hyperlinks (<a>) and link-styled buttons, in the HSL colour space.

--link-color-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 73% Dark default: 100% (for Typography)

The saturation of the text colour of hyperlinks (<a>) and link-styled buttons, in the HSL colour space.

--link-hover-color

Type: color Default: see description (for Typography)

The text colour of hyperlinks (<a>) and link-styled buttons when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the link hover colour is computed from the three H, S and L variables --link-color-h, --link-color-s and --link-color-l where the lightness is adjusted by the factor in --link-hover-lf.

--link-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.25 Dark default: 0.2 (for Typography)

The lightness factor of hyperlinks (<a>) and link-styled buttons when they are hovered by the mouse cursor. The base lightness from --link-color-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--link-hover-text-decoration

Type: text decoration Default: see description (for Typography)

The text decoration of hyperlinks (<a>) and link-styled buttons when they are hovered by the mouse cursor. The value is used for the text-decoration CSS property. If unset, the text decoration is:
var(--link-hover-text-decoration, var(--link-text-decoration, underline))
That means, by default it is underline, but if --link-text-decoration was defined, its value will also be used by the hovered style by default.

--link-hover-text-decoration-color

Type: color Default: see description (for Typography)

The color of the text decoration of hyperlinks (<a>) and link-styled buttons when they are hovered by the mouse cursor. If unset, the text decoration is:
var(--link-hover-text-decoration-color, var(--link-text-decoration-color, transparent))
That means, by default it is transparent, but if --link-text-decoration-color was defined, its value will also be used by the hovered style by default.

--link-invert-hover-color

Type: color Default: see description (for Image)

The background colour of hyperlinks as image overlay when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the colour is computed from the three H, S and L variables --link-color-h, --link-color-s and --link-color-l where the lightness is adjusted by the factor in --link-invert-hover-lf.

--link-invert-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.15 (for Image)

The lightness factor of hyperlinks as image overlay when they are hovered by the mouse cursor. The base lightness from --link-color-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--link-text-decoration

Type: text decoration Default: underline (for Typography)

The text decoration of hyperlinks (<a>) and link-styled buttons. The value is used for the text-decoration CSS property.

--link-text-decoration-color

Type: color Default: currentcolor (for Typography)

The color of the text decoration of hyperlinks (<a>) and link-styled buttons. The default value `currentcolor` means that the text colour of the link will be used for its underlining as well.

--loading-color

Type: color Default: rgb(0, 0, 0, 0.1) Dark default: rgb(255, 255, 255, 0.15) (for Typography)

The ring colour of loading indicator <i class="loading"> elements.

--loading-highlight-color

Type: color Default: rgb(0, 0, 0, 0.6) Dark default: rgb(255, 255, 255, 0.8) (for Typography)

The rotating highlight colour of loading indicator <i class="loading"> elements.

--mark-background

Type: color Default: see description (for Typography)

The background colour of <mark> elements. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the mark background colour is computed from the four H, S, L and A variables:
hsl(var(--mark-background-h), var(--mark-background-s), var(--mark-background-l), var(--mark-background-a))

--mark-background-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.35 Dark default: 0.4 (for Typography)

The alpha value (opacity) of the background colour of <mark> elements.

--mark-background-h

Type: number Range: 0 ≤ value < 360 Default: 59 Dark default: 51 (for Typography)

The hue of the background colour of <mark> elements, in the HSL colour space.

--mark-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 50% (for Typography)

The lightness of the background colour of <mark> elements, in the HSL colour space.

--mark-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 50% (for Typography)

The saturation of the background colour of <mark> elements, in the HSL colour space.

--mark-color

Type: color Default: unset (for Typography)

The text colour of <mark> elements. With the default value unset, the text colour will match its parent element.

--monospace-font-family

Type: font families Default: see description (for Typography)

The font for monospace elements like <code>, <tt>, <pre>, <samp>, <div class="code"> and all elements with the monospace CSS class. The value is used for the font-family CSS property. The default value is:
var(--ff-monospace-font-family)
The variable resolves to:
Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace

This is the place to include custom fonts to use as default, for example:
--monospace-font-family: "My Custom Monospace Font", var(--ff-monospace-font-family);

--monospace-font-size

Type: length Default: 13px (for Typography)

The font size for monospace elements. The value is used for the font-size CSS property.

--monospace-line-height

Type: number Range: 0 < value Default: 1.3 (for Typography)

The factor of the line height for monospace elements, relative to the monospace font size.

--notification-bar-critical-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.35 Dark default: 0.3 (for Notification)

The opacity of the timeout progress bar in a notification box of the critical type. The fill colour of that progress bar is set by --critical-color. The background colour of the notification box is set by --critical-background.

--notification-bar-error-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.35 Dark default: 0.3 (for Notification)

The opacity of the timeout progress bar in a notification box of the error type. The fill colour of that progress bar is set by --error-color. The background colour of the notification box is set by --error-background.

--notification-bar-information-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.12 Dark default: 0.3 (for Notification)

The opacity of the timeout progress bar in a notification box of the information type. The fill colour of that progress bar is set by --information-color. The background colour of the notification box is set by --information-background.

--notification-bar-success-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.12 Dark default: 0.3 (for Notification)

The opacity of the timeout progress bar in a notification box of the success type. The fill colour of that progress bar is set by --success-color. The background colour of the notification box is set by --success-background.

--notification-bar-warning-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.12 Dark default: 0.2 (for Notification)

The opacity of the timeout progress bar in a notification box of the warning type. The fill colour of that progress bar is set by --warning-color. The background colour of the notification box is set by --warning-background.

--notification-top-base

Type: length Default: 0px (for Notification)

The top position of notification boxes. This can be adjusted to be just below a fixed header element.

--notification-z-index

Type: number Default: 4000 (for Notification)

The z-index style of notification boxes. This is normally above all other Frontfire elements but can be adjusted to be just underneath a fixed header element to preserve the effect of notifications disappearing towards the top.

--page-width

Type: length Range: 1px ≤ value Default: 900px (for Page)

The maximum width of elements with the page-width CSS class, limited to the window width. See the plugin page for a comprehensive description of this class.

--page-width-padding

Type: length Range: 0px ≤ value Default: 15px (for Page)

The horizontal padding of elements with the page-width or full-page-width class. See the plugin page for a comprehensive description of this class.

--progress-color

Type: color Default: #808080 (for Progressbar)

The bar colour of a progress bar.

--progress-error-color

Type: color Default: #c44818 (for Progressbar)

The bar colour of a progress bar with the error CSS class.

--progress-error-label-color

Type: color Default: #ffffff (for Progressbar)

The label colour of a progress bar with the error CSS class.

--progress-label-color

Type: color Default: #ffffff (for Progressbar)

The label colour of a progress bar.

--progress-no-border-background

Type: color Default: rgb(160, 160, 160, 0.12) (for Progressbar)

The background colour of a progress bar without a border (no-border CSS class).

--progress-success-color

Type: color Default: #6ec418 (for Progressbar)

The bar colour of a progress bar with the success CSS class.

--progress-success-label-color

Type: color Default: #ffffff (for Progressbar)

The label colour of a progress bar with the success CSS class.

--progress-warning-color

Type: color Default: #dfb511 (for Progressbar)

The bar colour of a progress bar with the warning CSS class.

--progress-warning-label-color

Type: color Default: #ffffff (for Progressbar)

The label colour of a progress bar with the warning CSS class.

--resizable-handle-box-background

Type: color Default: see description (for Resizable)

The fill colour of a box handle of a resizable element. The default value is:
var(--default-background)

--resizable-handle-box-border

Type: color Default: silver Dark default: gray (for Resizable)

The colour of the border around a box handle of a resizable element.

--selectable-focused-border

Type: color Default: see description (for Selectable)

The border colour of focused items in a selection view. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-focused-a))

--selectable-hover-background

Type: color Default: see description (for Selectable)

The background colour of unselected items in a selection view when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-hover-a))

--selectable-hover-color

Type: color Default: see description (for Selectable)

The text colour of unselected items in a selection view when they are hovered by the mouse cursor. The default value is:
var(--textbox-color)

--selectable-selected-background

Type: color Default: see description (for Selectable)

The background colour of selected items in a selection view. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-selected-a))

--selectable-selected-color

Type: color Default: see description (for Selectable)

The text colour of selected items in a selection view. The default value is:
var(--textbox-color)

--selectable-selected-disabled-background

Type: color Default: rgb(180, 180, 180, 0.3) (for Selectable)

The background colour of selected items in a selection view, where the individual item or the entire selection view is disabled.

--selectable-selected-hover-background

Type: color Default: see description (for Selectable)

The background colour of selected items in a selection view when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-selected-hover-a))

--selection-focused-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.35 Dark default: 0.7 (for Selectable)

The alpha value (opacity) of the border colour of focused items in a selection view.

--selection-h

Type: number Range: 0 ≤ value < 360 Default: 212 (for Selectable)

The hue of the background colour of selected items in a selection view, in the HSL colour space.

--selection-hover-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.06 Dark default: 0.15 (for Selectable)

The alpha value (opacity) of the background colour of unselected items in a selection view when they are hovered by the mouse cursor.

--selection-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 50% Dark default: 60% (for Selectable)

The lightness of the background colour of selected items in a selection view, in the HSL colour space.

--selection-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 100% (for Selectable)

The saturation of the background colour of selected items in a selection view, in the HSL colour space.

--selection-selected-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.2 Dark default: 0.6 (for Selectable)

The alpha value (opacity) of the background colour of selected items in a selection view.

--selection-selected-hover-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.24 Dark default: 0.67 (for Selectable)

The alpha value (opacity) of the background colour of selected items in a selection view when they are hovered by the mouse cursor.

--slider-background

Type: color Default: #dddddd Dark default: #505050 (for Slider)

The background colour of the slider track bar. The value is used for the background CSS property and can also define images or gradients.

--slider-disabled-background

Type: color Default: #eeeeee Dark default: #404040 (for Slider)

The background colour of the disabled slider track bar. The value is used for the background CSS property and can also define images or gradients.

--slider-disabled-handle-background

Type: color Default: #aaaaaa Dark default: #909090 (for Slider)

The background colour of handles in a disabled slider. The value is used for the background CSS property and can also define images or gradients.

--slider-disabled-large-tick-color

Type: color Default: #bbbbbb Dark default: #909090 (for Slider)

The line and text colour of large ticks and their labels in a disabled slider.

--slider-disabled-small-tick-color

Type: color Default: #dddddd Dark default: #707070 (for Slider)

The line and text colour of small ticks and their labels in a disabled slider.

--slider-handle-background

Type: color Default: #505050 Dark default: #d0d0d0 (for Slider)

The background colour of handles in a slider. The value is used for the background CSS property and can also define images or gradients.

--slider-handle-border-radius

Type: length Range: 0px ≤ value Default: 0 (for Slider)

The border radius of the draggable slider handle. To make circular handles, set --slider-handle-length, --slider-handle-width and this variable to the same values of the desired handle diameter.

--slider-handle-hover-background

Type: color Default: #505050 Dark default: #d0d0d0 (for Slider)

The background colour of slider handles when they are hovered by the mouse cursor. The value is used for the background CSS property and can also define images or gradients.

--slider-handle-length

Type: length Range: 0px ≤ value Default: 10px (for Slider)

The length of the draggable slider handle in drag direction, along the track bar. If this is 0px, the handle will be invisible.

--slider-handle-pressed-background

Type: color Default: #000000 Dark default: #f0f0f0 (for Slider)

The background colour of slider handles while they are being clicked on. The value is used for the background CSS property and can also define images or gradients.

--slider-handle-width

Type: length Range: 0px ≤ value Default: 20px (for Slider)

The width of the draggable handle, across the track bar. If this is 0px, the handle will be invisible.

--slider-large-tick-color

Type: color Default: #808080 Dark default: #c0c0c0 (for Slider)

The line and text colour of large ticks and their labels in a slider.

--slider-margin

Type: length Range: 0px ≤ value Default: 8px (for Slider)

The additional touchable width outside of the visible slider track bar, to both sides.

--slider-range-background

Type: color Default: #808080 Dark default: #b0b0b0 (for Slider)

The background colour of the active range in a slider track bar. The default range spans from the base value (default 0) to the single handle value, or between two handles. The value is used for the background CSS property and can also define images or gradients.

--slider-small-tick-color

Type: color Default: #c0c0c0 Dark default: #808080 (for Slider)

The line and text colour of small ticks and their labels in a slider.

--slider-tick-label-font-size

Type: length Default: 0.85em (for Slider)

The font size for tick labels in a slider. The value is used for the font-size CSS property.

--slider-width

Type: length Range: 1px ≤ value Default: 10px (for Slider)

The width of the slider track bar.

--smaller-font-size

Type: length Default: 0.8em (for Typography)

The font size for smaller than default text. This is used for all elements with the smaller CSS class. The value is used for the font-size CSS property.

--sticky-aside-gap

Type: length Default: 2rem (for Typography)

The gap between content and the column for a sticky side element.

--sticky-aside-top

Type: length Default: 0px (for Typography)

The vertical position of a sticky side element. Can be set to the height of a fixed top header bar, to place the side element below that fixed element and keep it visible. The value is used for the top CSS property.

--sticky-aside-width

Type: length Default: 200px (for Typography)

The width of the column for a sticky side element.

--submenu-active-background

Type: color Default: see description (for Menu)

The background colour of active submenu items. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the submenu active item background colour is computed from the three H, S and L variables --submenu-background-h, --submenu-background-s and --submenu-background-l where the lightness is adjusted by the factor in --submenu-active-lf.

--submenu-active-color

Type: color Default: see description (for Menu)

The text colour of active submenu items. The default value is:
var(--submenu-color)

--submenu-active-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.2 Dark default: 0.2 (for Menu)

The lightness factor of active submenu items. The base lightness from --submenu-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--submenu-background

Type: color Default: see description (for Menu)

The background colour of submenus. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the submenu background colour is computed from the three H, S and L variables:
hsl(var(--submenu-background-h), var(--submenu-background-s), var(--submenu-background-l))

--submenu-background-h

Type: number Range: 0 ≤ value < 360 Default: 0 (for Menu)

The hue of the background colour of submenus, in the HSL colour space.

--submenu-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 96% Dark default: 25% (for Menu)

The lightness of the background colour of submenus, in the HSL colour space.

--submenu-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for Menu)

The saturation of the background colour of submenus, in the HSL colour space.

--submenu-color

Type: color Default: #000000 Dark default: see description (for Menu)

The text colour of submenus. The default value for the dark theme is:
var(--default-text-color)

--submenu-hover-background

Type: color Default: see description (for Menu)

The background colour of submenu items when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the submenu item hover background colour is computed from the three H, S and L variables --submenu-background-h, --submenu-background-s and --submenu-background-l where the lightness is adjusted by the factor in --submenu-hover-lf.

--submenu-hover-color

Type: color Default: see description (for Menu)

The text colour of submenu items when they are hovered by the mouse cursor. The default value is:
var(--submenu-color)

--submenu-hover-lf

Type: number Range: -1 ≤ value ≤ 1 Default: -0.08 Dark default: 0.1 (for Menu)

The lightness factor of submenu items when they are hovered by the mouse cursor. The base lightness from --submenu-background-l is adjusted by this factor. The value -1 turns the base colour to black, the value 0 leaves it unchanged and the value 1 turns it to white. Values less than 0 make the colour darker, greater than 0 make it lighter.

--success-background

Type: color Default: see description (for Message)

The background colour of success message boxes. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the background colour is computed from the three H, S and L variables:
hsl(var(--success-background-h), var(--success-background-s), var(--success-background-l))

--success-background-h

Type: number Range: 0 ≤ value < 360 Default: 90 (for Message)

The hue of the background colour of success message boxes, in the HSL colour space.

--success-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 78% Dark default: 29% (for Message)

The lightness of the background colour of success message boxes, in the HSL colour space.

--success-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 78% (for Message)

The saturation of the background colour of success message boxes, in the HSL colour space.

--success-color

Type: color Default: #000000 Dark default: #ffffff (for Message)

The text colour of success message boxes.

--system-font-family

Type: font families Default: see description (for Typography)

Names all system fonts of most operating systems. This is the default font set when using Frontfire. It should nicely blend into other apps and UI of the device you’re using. The value is used for the font-family CSS property. The default value is:
system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

--table-grid-color

Type: color Default: #d8d8d8 Dark default: #585858 (for Table)

The border and grid line colour of tables, and also the border line of the separator <hr>.

--table-header-background

Type: color Default: rgb(0, 0, 0, 0.04) Dark default: rgb(255, 255, 255, 0.12) (for Table)

The background colour of table header cells.

--tabs-active-header-background

Type: color Default: transparent (for Tabs)

The background colour of active tab headers.

--tabs-border-color

Type: color Default: #d8d8d8 Dark default: #606060 (for Tabs)

The border colour of tab headers and pages.

--tabs-color

Type: color Default: see description (for Tabs)

The text colour of tab headers and pages. The default value is:
var(--default-text-color)

--tabs-inactive-header-background

Type: color Default: #f4f4f4 Dark default: #383838 (for Tabs)

The background colour of inactive tab headers.

--tabs-inactive-header-hover-background

Type: color Default: #fafafa Dark default: #2c2c2c (for Tabs)

The background colour of inactive tab headers when they are hovered by the mouse cursor.

--tabs-noborder-active

Type: color Default: see description (for Tabs)

The bottom border colour of active tab headers with the no-border CSS class. The default value is:
hsl(var(--link-color-h), var(--link-color-s), var(--link-color-l))

--tabs-noborder-hover

Type: color Default: see description (for Tabs)

The bottom border colour of inactive tab headers with the no-border CSS class when they are hovered by the mouse cursor. The default value is:
hsl(var(--link-color-h), var(--link-color-s), var(--link-color-l), 0.25)
The default value for the dark theme is:
hsl(var(--link-color-h), var(--link-color-s), var(--link-color-l), 0.45)

--tabs-page-background

Type: color Default: transparent (for Tabs)

The background colour of the visible tab page.

--textbox-background

Type: color Default: #ffffff Dark default: see description (for Form)

The background colour of a form text field or similar types like select or checkbox. The default value for the dark theme is:
var(--default-background)

--textbox-border

Type: color Default: #cccccc Dark default: #707070 (for Form)

The border colour of a form text field or similar types like select or checkbox.

--textbox-color

Type: color Default: #000000 Dark default: see description (for Form)

The text colour of a form text field or similar types like select. The default value for the dark theme is:
var(--default-text-color)

--textbox-disabled-border

Type: color Default: #e4e4e4 Dark default: #505050 (for Form)

The border colour of a disabled form text field or similar types like select or checkbox.

--textbox-disabled-color

Type: color Default: #a0a0a0 Dark default: #808080 (for Form)

The text colour of a disabled form text field or similar types like select.

--textbox-hover-border

Type: color Default: #999999 (for Form)

The border colour of a form text field or similar types like select or checkbox when it is hovered by the mouse cursor.

--thin-scrollbar-thumb

Type: color Default: rgb(0, 0, 0, 0.3) Dark default: rgb(255, 255, 255, 0.3) (for Page)

The colour of the thumb of a thin scrollbar. Used for elements with the thin-scrollbar CSS class.

--timepicker-clock-background

Type: color Default: rgb(180, 180, 180, 0.1) (for TimePicker)

The background colour of the clock in a time picker dropdown.

--timepicker-clock-border-color

Type: color Default: rgb(180, 180, 180, 0.3) (for TimePicker)

The border colour of the clock in a time picker dropdown.

--timepicker-clock-border-width

Type: length Range: 0px ≤ value Default: 1px (for TimePicker)

The border width of the clock in a time picker dropdown.

--timepicker-clock-line-color

Type: color Default: see description (for TimePicker)

The colour of the clockhand line in a time picker dropdown. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l))

--timepicker-clock-secondary-line-color

Type: color Default: see description (for TimePicker)

The colour of the secondary clockhand line in a time picker dropdown. This indicates the hour during the selection of the minute. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--timepicker-clock-secondary-line-a, 0.4))

--timepicker-clock-secondary-line-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.4 (for TimePicker)

The alpha value (opacity) of the secondary clockhand line colour in a time picker dropdown.

--timepicker-clock-selected-a

Type: number Range: 0 ≤ value ≤ 1 Default: 0.3 Dark default: 0.7 (for TimePicker)

The alpha value (opacity) of the background colour of selected items in a time picker dropdown.

--timepicker-clock-selected-background

Type: color Default: see description (for TimePicker)

The background colour of selected digits of the clock in a time picker dropdown. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--timepicker-clock-selected-a, var(--selection-selected-a)))

--timepicker-clock-selected-color

Type: color Default: unset (for TimePicker)

The text colour of selected digits of the clock in a time picker dropdown.

--timepicker-empty-color

Type: color Default: rgb(0, 0, 0, 0.33) Dark default: rgb(240, 240, 240, 0.33) (for TimePicker)

The text colour of the placeholders in a time picker input when no date or time is specified. The default values are set to the default values of --textbox-color with additional transparency.

--timepicker-hover-background

Type: color Default: see description (for TimePicker)

The background colour of unselected items in a time picker dropdown when they are hovered by the mouse cursor. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-hover-a))

--timepicker-hover-color

Type: color Default: see description (for TimePicker)

The text colour of unselected items in a time picker dropdown when they are hovered by the mouse cursor. The default value is:
var(--default-text-color)

--timepicker-month-border-color

Type: color Default: rgb(180, 180, 180, 0.5) (for TimePicker)

The colour of the border line separating the days in a month from the weekdays and week numbers in a time picker dropdown.

--timepicker-now-border-color

Type: color Default: darkorange (for TimePicker)

The colour of the border around the current date in a time picker dropdown.

--timepicker-now-other-month-border-color

Type: color Default: #ffc581 Dark default: #c06800 (for TimePicker)

The colour of the border around the current date in a time picker dropdown when the current date is in another month than selected.

--timepicker-selected-background

Type: color Default: see description (for TimePicker)

The background colour of selected items in a time picker dropdown. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the item background colour is computed from the three H, S and L variables:
hsl(var(--selection-h), var(--selection-s), var(--selection-l), var(--selection-selected-a))

--timepicker-selected-color

Type: color Default: unset (for TimePicker)

The text colour of selected items in a time picker dropdown.

--toggle-switch-disabled-opacity

Type: number Range: 0 ≤ value ≤ 1 Default: 0.5 Dark default: 0.6 (for ToggleSwitch)

The opacity of a toggle switch when it is disabled.

--toggle-switch-set-h

Type: number Range: 0 ≤ value < 360 Default: 225 (for ToggleSwitch)

The hue of the colour of toggle switches in the active or indeterminate state, in the HSL colour space.

--toggle-switch-set-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 51% Dark default: 70% (for ToggleSwitch)

The lightness of the colour of toggle switches in the active state, in the HSL colour space. In the indeterminate state, the set and unset lightness values are averaged.

--toggle-switch-set-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 73% Dark default: 100% (for ToggleSwitch)

The saturation of the colour of toggle switches in the active state, in the HSL colour space. In the indeterminate state, the set and unset saturation values are averaged.

--toggle-switch-unset-h

Type: number Range: 0 ≤ value < 360 Default: 225 (for ToggleSwitch)

The hue of the colour of toggle switches in the inactive state, in the HSL colour space.

--toggle-switch-unset-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 50% Dark default: 55% (for ToggleSwitch)

The lightness of the colour of toggle switches in the inactive state, in the HSL colour space. In the indeterminate state, the set and unset lightness values are averaged.

--toggle-switch-unset-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 0% (for ToggleSwitch)

The saturation of the colour of toggle switches in the inactive state, in the HSL colour space. In the indeterminate state, the set and unset saturation values are averaged.

--tree-guideline-color

Type: color Default: rgb(0, 0, 0, 0.4) Dark default: rgb(255, 255, 255, 0.4) (for Tree)

The border colour of the vertical guideline in a tree level.

--validation-error-background

Type: color Default: #ffdddd Dark default: #502020 (for Form)

The background colour of a form field that has a validation error.

--validation-error-text

Type: color Default: #ff0000 Dark default: #f00000 (for Form)

The text colour of a form field validation error message, and the border colour of a form field that has a validation error.

--warning-background

Type: color Default: see description (for Message)

The background colour of warning message boxes. This variable overwrites the HSL colour component variables, so only set this if you do not want to use them. If unset, the background colour is computed from the three H, S and L variables:
hsl(var(--warning-background-h), var(--warning-background-s), var(--warning-background-l))

--warning-background-h

Type: number Range: 0 ≤ value < 360 Default: 48 (for Message)

The hue of the background colour of warning message boxes, in the HSL colour space.

--warning-background-l

Type: percentage Range: 0% ≤ value ≤ 100% Default: 67% Dark default: 43% (for Message)

The lightness of the background colour of warning message boxes, in the HSL colour space.

--warning-background-s

Type: percentage Range: 0% ≤ value ≤ 100% Default: 86% Dark default: 100% (for Message)

The saturation of the background colour of warning message boxes, in the HSL colour space.

--warning-color

Type: color Default: #000000 (for Message)

The text colour of warning message boxes.

Frontfire UI CSS variables

Introduction

Cascaded variables

Limitations

Documentation

Search

Variable names

--accordion-header-background

--accordion-header-background-h

--accordion-header-background-l

--accordion-header-background-s

--accordion-header-color

--accordion-header-expanded-background

--accordion-header-expanded-background-h

--accordion-header-expanded-background-l

--accordion-header-expanded-background-s

--accordion-header-expanded-color

--accordion-header-expanded-hover-background

--accordion-header-expanded-hover-lf

--accordion-header-expanded-pressed-background

--accordion-header-expanded-pressed-color

--accordion-header-expanded-pressed-lf

--accordion-header-hover-background

--accordion-header-hover-lf

--accordion-header-pressed-background

--accordion-header-pressed-color

--accordion-header-pressed-lf

--animation-duration

--animation-function

--breakpoint-desktop

--breakpoint-minitab

--breakpoint-phone

--breakpoint-tablet

--button-active-background

--button-active-background-h

--button-active-background-l

--button-active-background-s

--button-active-color

--button-active-disabled-background

--button-active-disabled-color

--button-active-disabled-lf

--button-active-hover-background

--button-active-hover-lf

--button-active-pressed-background

--button-active-pressed-color

--button-active-pressed-lf

--button-background

--button-background-h

--button-background-l

--button-background-s

--button-caution-background

--button-caution-background-h

--button-caution-background-l

--button-caution-background-s

--button-caution-color

--button-caution-hover-background

--button-caution-hover-lf

--button-caution-pressed-background

--button-caution-pressed-color

--button-caution-pressed-lf

--button-color

--button-default-background

--button-default-background-h

--button-default-background-l

--button-default-background-s

--button-default-color

--button-default-hover-background

--button-default-hover-lf

--button-default-pressed-background

--button-default-pressed-color

--button-default-pressed-lf

--button-disabled-background

--button-disabled-color

--button-disabled-lf

--button-group-disabled-separator-color

--button-group-disabled-separator-lf

--button-group-separator-color

--button-group-separator-lf

--button-hover-background

--button-hover-lf