custom.css

[engineDir]/configuration/reference/custom.css

  1/*
  2 * -------------------------------------------
  3 * Axon Ivy Application Branding
  4 * -------------------------------------------
  5 * 
  6 * This file shows which css variables you can override to brand your Axon Ivy Engine application.
  7 * https://developer.axonivy.com/doc/12.0/designer-guide/user-interface/branding/index.html
  8 *
  9 * By default HSL colors are used and some of them are split into the individual values.
 10 * This is improtant for some color effects (e.g. when you move the mouse over a button).
 11 *
 12 * Each application can have its own branding resources '<APPNAME>/branding/' (custom.css, logo.svg, etc) 
 13 * in the configuration directory. E.g. the corresponding 'custom.css' file for the application 'MyApp' is 
 14 * '[engineDir]/configuration/applications/MyApp/branding/custom.css'.
 15 *
 16 * Furthermore branding resources can be deployed as part of application zip in a 'config/branding' folder.
 17 * The deployed resources are installed in the application directory and has a lower
 18 * priority than the branding resources in the configuration directory.
 19 * https://developer.axonivy.com/doc/12.0/engine-guide/deployment
 20 *
 21 * Portal:
 22 * There are more css variables provided by the Portal.
 23 */
 24
 25:root {
 26  /*
 27   * Ivy Primary color
 28   * The primary-colors, e.g. used by the default proceed button in an html dialog. 
 29   */
 30  --ivy-primary-color-h: 195;
 31  --ivy-primary-color-s: 100%;
 32  --ivy-primary-color-l: 29%;
 33  --ivy-primary-color: hsl(var(--ivy-primary-color-h), var(--ivy-primary-color-s), var(--ivy-primary-color-l));
 34  --ivy-primary-dark-color: hsl(195, 100%, 24%);
 35  --ivy-primary-darker-color: hsl(195, 100%, 19%);
 36  --ivy-primary-light-color-h: 195;
 37  --ivy-primary-light-color-s: 100%;
 38  --ivy-primary-light-color-l: 44%;
 39  --ivy-primary-light-color: hsl(var(--ivy-primary-light-color-h), var(--ivy-primary-light-color-s), var(--ivy-primary-light-color-l));
 40  --ivy-primary-lightest-color: hsl(195, 100%, 54%);
 41  --ivy-primary-text-color: hsl(0, 0%, 100%);
 42}
 43
 44/*
 45*   Depreciated serenity variables
 46*
 47*   accent-color-h: 0;
 48*   accent-color-s: 1%;
 49*   accent-color-l: 34%;
 50*   accent-color: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l));
 51*   accent-light-color: hsl(180, 1%, 61%);
 52*   accent-text-color: hsl(0, 0%, 100%);
 53* 
 54*   button-text-color: hsl(0, 0%, 100%);
 55*   button-secondary-bg-color-h: 180;
 56*   button-secondary-bg-color-s: 1%;
 57*   button-secondary-bg-color-l: 61%;
 58*   button-secondary-bg-color: hsl(var(--button-secondary-bg-color-h), var(--button-secondary-bg-color-s), var(--button-secondary-bg-color-l));
 59*   button-secondary-text-color: hsl(0, 0%, 100%);
 60*   button-red-bg-color-h: 0;
 61*   button-red-bg-color-s: 63%;
 62*   button-red-bg-color-l: 52%;
 63*   button-red-bg-color: hsl(var(--button-red-bg-color-h), var(--button-red-bg-color-s), var(--button-red-bg-color-l));
 64*   button-amber-bg-color-h: 46;
 65*   button-amber-bg-color-s: 100%;
 66*   button-amber-bg-color-l: 58%;
 67*   button-amber-bg-color: hsl(var(--button-amber-bg-color-h), var(--button-amber-bg-color-s), var(--button-amber-bg-color-l));
 68* 
 69*   widget-header-bg-color: hsl(180, 1%, 85%);
 70*   widget-header-bg-light-color: hsl(180, 5%, 96%);
 71*   widget-header-paginator-text-color: hsl(180, 0%, 0%);
 72*   widget-header-text-color: hsl(0, 1%, 25%);
 73*   widget-header-text-bg-color: hsl(180, 1%, 61%);
 74*   tree-select-highlight-bg-color: hsl(0, 0%, 100%);
 75*   tree-select-highlight-text-color: hsl(0, 0%, 12.9%);
 76*   table-row-even-bg-color: hsl(0, 0%, 100%);
 77* 
 78*   message-info-bg-color: hsl(195, 100%, 29%);
 79*   message-info-text-color: hsl(0, 0%, 100%);
 80*   message-warn-bg-color: hsl(46, 100%, 58%);
 81*   message-warn-text-color: hsl(0, 1%, 34%);
 82*   message-error-bg-color: hsl(0, 63%, 52%);
 83*   message-error-text-color: hsl(0, 0%, 100%);
 84* 
 85*   sidebar-bg-color: hsl(180, 5%, 96%);
 86*   sidebar-logo-bg-color: var(--sidebar-bg-color);
 87*   sidebar-app-text-color: hsl(0, 0%, 20%);
 88* 
 89*   topbar-bg-color: hsl(180, 5%, 96%);
 90*   topbar-text-color-h: 0;
 91*   topbar-text-color-s: 0%;
 92*   topbar-text-color-l: 20%;
 93*   topbar-text-color: hsl(var(--topbar-text-color-h), var(--topbar-text-color-s), var(--topbar-text-color-l));
 94* 
 95*   submenu-bg-color: hsl(0, 1%, 90%);
 96* 
 97*   menuitem-text-color: hsl(0, 0%, 20%);
 98*   sub-menuitem-text-color: var(--menuitem-text-color);
 99* 
100*   menuitem-hover-bg-color: hsla(0, 0%, 0%, 0.1);
101*   menuitem-hover-text-color: var(--menuitem-text-color);
102*   sub-menuitem-hover-bg-color: var(--menuitem-hover-bg-color);
103*   sub-menuitem-hover-text-color: var(--menuitem-hover-text-color);
104* 
105*   menuitem-active-bg-color: hsl(0, 1%, 75%);
106*   menuitem-active-text-color: var(--menuitem-text-color);
107*   sub-menuitem-active-bg-color: var(--submenu-bg-color);
108*   sub-menuitem-active-text-color: hsl(195, 100%, 29%);
109*/