Variable
|
Use
|
--primary-color
|
Default value:
#007DC1
Buttons, links, highlights, icons.
|
--dark-primary-color
|
Default value:
#004468
Hover on buttons, titles, active tabs.
|
--light-primary-color
|
Default value:
#CEE8F6
Hover on menus, dark-primary-color background.
|
--secondary-color
|
Default value:
#4ecc64
|
--tertiary-color
|
Default value:
#da9963
|
Variable
|
Use
|
--primary-bgcolor
|
Default value:
#DBDBDB
Background of the main panel of all views.
|
--secondary-bgcolor
|
Default value:
#FFFFFF
Profiles, pop ups, sidebars, table-body.
|
--tertiary-bgcolor
|
Default value:
#F2F2F2
Toolbars
, Table-headers, table-footer, accordion-tabs, overlays, hover-rows.
|
--hover-bgcolor
|
Default value:
#F2F2F2
Profile hover, float menu items hover.
|
--header-bgcolor
|
Default value:
--primary-bgcolor
App header.
|
--toolbar-bgcolor
|
Default value:
--tertiary-bgcolor
Toolbar.
|
--sidepanel-header-bgcolor
|
Default value:
--header-bgcolor
|
--sidepanel-bgcolor
|
Default value:
--secondary-bgcolor
|
--menu-bgcolor
|
Default value:
--secondary-bgcolor
Side menu.
|
--dialog-bgcolor
|
Default value:
--secondary-bgcolor
|
--submenu-bgcolor
|
Default value:
--tertiary-bgcolor
|
--graf-bgcolor
|
Default value:
--secondary-bgcolor
|
--light-mode-entity-bg
|
Default value:
#5db3e216
Profile background with custom icon. Replace "light-mode" with the appropriate theme class: (--MyOwnTheme-entity-bg). This is a dynamic class and is built from the theme class that uses it.
|
--bg-image
|
Default value:
url("<%=@BASEURL%>__themes__/BackgroundImg.png ")
Url of the main panel background image. Replace "BackgroundImg.png" with the appropriate filename.
|
--bg-size
|
Default value:
contain
Size of the background image (auto / contain / cover / inherit / initial / revert / unset).
|
--bg-blend-mode
|
Default value:
none
Background image blend mode (Use Demo
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode ).
|
Variable
|
Use
|
--button-bgcolor
|
Default value:
--primary-color
Background color of the primary action button.
|
--button-txtcolor
|
Default value:
#FFFFFF
Text color. |
--button-bgcolor-h
|
Default value:
--dark-primary-color
Background color on hover.
|
--button-txtcolor-h
|
Default value:
#FFFFFF
Text color on hover. |
--outline-button-color
|
Default value:
--button-bgcolor
Text color and border of the secondary action button.
|
--outline-button-bgcolor-h
|
Default value:
--button-bgcolor-h
Background color on hover.
|
--outline-button-color-h
|
Default value:
--button-txtcolor-h
Text color on hover. |
--special-button
|
Default value:
#FFFFFF
|
--switcher-button
|
Default value:
#ADADAD
|
Variable
|
Use
|
--link-color
|
Default value:
--primary-color
|
--link-color-h
|
Default value:
#5db4e2 |
--menu-selected-color
|
Default value:
--dark-primary-color
Text and border color.
|
--menu-selected-bgcolor
|
Default value:
--light-primary-color
Background color.
|
Variable
|
Use
|
--primary-txtcolor
|
Default value:
--bgcolor
Menu, general texts, profile names, etc.
|
--secondary-txtcolor
|
Default value:
#ADADAD
Clearer texts, for example the icons that appear below in the profiles.
|
--heading-color
|
Default value:
--dark-primary-color
Headers.
|
Variable
|
Use
|
--border-color
|
Default value:
#ADADAD
Borders.
|
--light-border-color
|
Default value:
#C4C4C4
Lighter borders.
|
--separator
|
Default value:
#B2B2B2
Separators.
|
Variable
|
Use
|
--table-header-bgcolor
|
Default value:
--hover-bgcolor
Table header background color.
|
--table-body-bgcolor
|
Default value:
--secondary-bgcolor
Table body background color.
|
--table-body-bgcolor-h
|
Default value:
--tertiary-bgcolor
Background color of rows on hover.
|
Variable
|
Use
|
--input-bgcolor
|
Default value:
#FFFFFF
Inputs background color
|
--header-input-bgcolor
|
Default value:
--secondary-bgcolor
|
--input-txtcolor
|
Default value:
#616161
Text color inside input
|
--inputpanel-bgcolor
|
Default value:
--secondary-bgcolor
Input panel background color as selected
|
Variable
|
Use
|
--desktop-logo
|
Default value:
url("<%=@BASEURL%>__themes_
_/YourLogo.svg ")
Replace "YourLogo.svg" with the name of the appropriate file. Remember that these files must be located in the folder defined for the .css file. It will be used in the product portal where the connections are displayed.
|
--mobile-logo
|
Default value:
url("<%=@BASEURL%>_
_themes__/YourMobileLogo.svg ")
Logo used in the mobile header and in the connections with the semi-folded side menu.
|
--login-logo
|
Default value:
url("<%=@BASEURL%>__themes__/YourLogo.svg ")
Logo on the login box.
|
--logo-bg-size
|
Default value:
contain
Logo size. (auto / contain / cover / inherit / initial / revert / unset)
|
Variable
|
Use
|
--
light-mode
-border-color
|
Default value:
#ADADAD
Graphics border color
|
--
light-mode
-text-color
|
Default value:
#616161
Graphics text color
|
--
light-mode
-grid-color
|
Default value:
#DBDBDB
Grid color in the graphics background
|
--
light-mode
-sessions-color
|
Default value:
--secondary-color
Default session color in secondary color
|
--
light-mode
-connections-color
|
Default value:
--primary-color
Default connections in primary color
|
Variable
|
Use
|
--disabled
|
Default value:
#ADADAD
Disabled buttons or texts.
|
--danger
|
Default value:
#DC4847
Errors, Danger buttons.
|
--alert
|
Default value:
#F17C1C
Warnings.
|
--allowed
|
Default value:
#4ECC64
Success messages. |
--shadow-color
|
Default value:
#00000019
Shadows. |