Overview CSS Classes and CSS Variables

The hierarchy of elements when applying CSS styles is explained below from general to specific:

Dashboard: The dashboard is the parent element that encompasses the entire interface or area. It represents the most general framework to which CSS styles are applied.
Page: Within the dashboard there are individual pages. Each page can have its own CSS styles that are applied to all elements on that specific page.
Panel: A panel is a section within a page. It represents a more specific area that can have its own styles applying only to that section of the page.
Template: The template is the most specific element in this hierarchy. It can represent individual components or content within a panel and can have very detailed CSS styles.

Difference Between CSS Styles and CSS Variables

CSS styles define the visual appearance of HTML elements on a web page. Properties such as font size, colours, or spacing are applied directly to the respective elements via styles.

CSS variables (custom properties) enable the reuse of values in your CSS. They can be defined globally or locally and help to centrally manage recurring values such as colours or sizes, improving code maintainability and flexibility.

Relationship Between CSS Styles and CSS Variables

CSS variables are a complement to CSS styles. While styles define the appearance, variables enable more efficient management and reuse of design values. Changes to a CSS variable automatically affect all styles that use this variable.

Dashboard Controls I

The following variables can only be applied at dashboard and page level

--dashboard-font-family: changes the font for the dashboard. This property is inherited by all elements in the dashboard by default ✔
--dashboard-page-background: changes the background colour of the page. This is a global variable. This means all pages in the dashboard inherit their colour from this variable. Individual page colours can be set with the variable "--page-background" ✔

Dashboard Controls II

The following variables can be applied at dashboard, page, and panel level

--dashboard-panel-border: sets the width, line type, and colour for the panel borders within the dashboard — "universal panel border control".
--dashboard-button-control-background: sets the background colour for all buttons within a dashboard
--dashboard-button-control-active: Default #00ff00, background colour when the building block is active.
--dashboard-button-control-inactive: Default #ff4040, background colour when the building block is inactive.
--dashboard-button-control-enabled-opacity: Default 1, the CSS opacity for an enabled button. Note that this value is also the default of the HTML element, so using the default values, enabled makes no visual difference.
--dashboard-button-control-disabled-opacity: Default 0.5, analogous for disabled.
--dashboard-button-control-hover-active: Default #00cc00, for the case that the button is active.
--dashboard-button-control-hover: Default #ff8080, in all other cases, i.e. when the button is inactive or the parameter Active delivers neither true nor false.
--dashboard-radio-control-background: Default #ffffff, the global background (CSS background) of the entire building block.
--dashboard-radio-control-foreground: Default #000000, the global background (CSS background) of the toggle button when the parameter Source delivers a truthy (JavaScript !!) value.
--dashboard-slider-control-knob-size: Default 1em: the size of the knob.
--dashboard-slider-control-knob-shadow: Default 1px 1px 0px #cccccc: the shadow (CSS filter of the type drop-shadow) around the knob. If this variable is not set but --dashboard-control-knob-shadow is, its value is used instead of the default.
--dashboard-slider-control-round-knob-offset: Default calc(-1em / 4) an offset (CSS bottom) for displaying a round knob.
--dashboard-slider-control-up-knob-offset: Default calc(1em / 12) an offset (CSS top) for displaying the teardrop upwards.
--dashboard-slider-control-down-knob-offset: Default calc(1em / 12): an offset (CSS bottom) for displaying the teardrop downwards (unit: em).
--dashboard-knob-control-knob-position. Default -2.5%, essentially describes the position (CSS margin-top) of the actual knob for changing the value. A value of 23% would move this to the middle ring.
--dashboard-knob-control-knob-shadow: Default 1px 1px 0 #cccccc, the shadow of the knob (CSS filter of the type drop-shadow). If this variable is not set but --dashboard-control-knob-shadow is, its value is used instead of the default.
--dashboard-knob-control-background: Default #ffffff, the background (CSS background) between the outer ring and the inner circle.
--dashboard-icon-control-text-foreground: Default #000000, the colour of the symbol itself (CSS color). If this variable is not set but --dashboard-control-text-foreground is, its value is used before the default.
--dashboard-icon-control-text-background: Default transparent: the background of the symbol itself (CSS background). If this variable is not set but --dashboard-control-text-background is, its value is used before the default.
--control-border: Creates the border around all template elements in a dashboard. This property can only be adjusted via dashboard, page, and panel. (width(px), style(solid, dashed), colour)
--control-border-radius: used to create rounded corners for the outer border of an element. This property can only be adjusted via dashboard, page, and panel.
--control-knob-shadow: only gives the knob of the slider a shadow (horizontal-offset vertical-offset blur-radius spread-radius color inset)
--control-padding: adds a padding (spacing between the element itself and the edge of the element) of a certain width to the element it is applied to. This property can only be adjusted via dashboard, page, and panel.
--control-text-align: determines the horizontal alignment of text within a block element. Possible values are left, right, center, and justify to align text left-aligned, right-aligned, centred, or justified.
--control-text-background: determines the background colour of text elements. This can be applied from dashboard level down to templates
--control-text-foreground: determines the colour of text elements. This can be applied at all levels of the dashboard hierarchy.

Deprecated Dashboard Controls

--dashboard-background
--dashboard-panel-background
--dashboard-format-control-text-background
--control-color
--control-knob-color
--control-shadow

Page Controls

--page-background: changes the background colour of a page and can be applied at dashboard level as well as page level.

Panel Controls

These variables can be applied at dashboard, page, and panel levels.

--panel-background: changes the background colour of a panel.
--panel-border: sets the width, style, and colour of the border of a panel. The possible values are: width (in pixels), style (e.g. solid or dashed), and colour.
--panel-border-radius: used to define rounded corners for the border of an element.
--panel-shadow: adds a shadow effect to an element. The shadow can appear either outside or inside the element. The size, blur, spread, and colour of the shadow can be adjusted with the parameters (horizontal-offset, vertical-offset, blur-radius, spread-radius, colour, and optionally inset for inner shadows). (horizontal-offset vertical-offset blur-radius spread-radius color inset)
--panel-title-background: colours the background of the title text within a panel.
--panel-title-foreground: changes the colour of the title text within a panel.
--panel-title-separator: adds an underline below the title of the panel, the colour of which can also be adjusted.

Push Button Controls

These variables enable flexible colour adjustment at any specificity level — from individual elements to the entire layout.

--radio-background: the background (CSS background) of the entire building block.
--radio-foreground: the background (CSS background) of the toggle button when the parameter Source delivers a truthy (JavaScript !!) value.