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/10.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/10.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   * Accent color
 45   * The accent-color, e.g. used for selections in Primefaces widgets like SelectOneMenu.
 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  /* 
 55   * Button colors 
 56   * Colors to restyle the most used buttons.
 57   */
 58  --button-text-color: hsl(0, 0%, 100%);
 59  --button-secondary-bg-color-h: 180;
 60  --button-secondary-bg-color-s: 1%;
 61  --button-secondary-bg-color-l: 61%;
 62  --button-secondary-bg-color: hsl(var(--button-secondary-bg-color-h), var(--button-secondary-bg-color-s), var(--button-secondary-bg-color-l));
 63  --button-secondary-text-color: hsl(0, 0%, 100%);
 64  --button-red-bg-color-h: 0;
 65  --button-red-bg-color-s: 63%;
 66  --button-red-bg-color-l: 52%;
 67  --button-red-bg-color: hsl(var(--button-red-bg-color-h), var(--button-red-bg-color-s), var(--button-red-bg-color-l));
 68  --button-amber-bg-color-h: 46;
 69  --button-amber-bg-color-s: 100%;
 70  --button-amber-bg-color-l: 58%;
 71  --button-amber-bg-color: hsl(var(--button-amber-bg-color-h), var(--button-amber-bg-color-s), var(--button-amber-bg-color-l));
 72  
 73  /* 
 74   * Widget colors
 75   * Some colors to restyle Primefaces widgets, e.g. DataTable or DatePicker.
 76   */
 77  --widget-header-bg-color: hsl(180, 1%, 85%);
 78  --widget-header-bg-light-color: hsl(180, 5%, 96%);
 79  --widget-header-paginator-text-color: hsl(180, 0%, 0%);
 80  --widget-header-text-color: hsl(0, 1%, 25%);
 81  --widget-header-text-bg-color: hsl(180, 1%, 61%);
 82  --tree-select-highlight-bg-color: hsl(0, 0%, 100%);
 83  --tree-select-highlight-text-color: hsl(0, 0%, 12.9%);
 84  --table-row-even-bg-color: hsl(0, 0%, 100%);
 85  
 86  /* 
 87   * Message colors
 88   * Colors to adjust Primefaces message boxes. 
 89   */
 90  --message-info-bg-color: hsl(195, 100%, 29%);
 91  --message-info-text-color: hsl(0, 0%, 100%);
 92  --message-warn-bg-color: hsl(46, 100%, 58%);
 93  --message-warn-text-color: hsl(0, 1%, 34%);
 94  --message-error-bg-color: hsl(0, 63%, 52%);
 95  --message-error-text-color: hsl(0, 0%, 100%);
 96  
 97  /* 
 98   * Navigation sidebar colors
 99   * Sidebar colors, e.g. to restyle the Portal navigation sidebar 
100   */
101  --sidebar-bg-color: hsl(180, 5%, 96%);
102  --sidebar-logo-bg-color: var(--sidebar-bg-color);
103  --sidebar-app-text-color: hsl(0, 0%, 20%);
104  
105  /* 
106   * Navigation topbar colors
107   * Topbar colors, e.g. to restyle the Portal topbar 
108   */
109  --topbar-bg-color: hsl(180, 5%, 96%);
110  --topbar-text-color-h: 0;
111  --topbar-text-color-s: 0%;
112  --topbar-text-color-l: 20%;
113  --topbar-text-color: hsl(var(--topbar-text-color-h), var(--topbar-text-color-s), var(--topbar-text-color-l));
114  
115  /* 
116   * Navigation submenu background color
117   */
118  --submenu-bg-color: hsl(0, 1%, 90%);
119  
120  /* 
121   * Navigation menuItem text color
122   */
123  --menuitem-text-color: hsl(0, 0%, 20%);
124  --sub-menuitem-text-color: var(--menuitem-text-color);
125  
126  /* 
127   * Navigation menuItem hover text and background colors
128   */
129  --menuitem-hover-bg-color: hsla(0, 0%, 0%, 0.1);
130  --menuitem-hover-text-color: var(--menuitem-text-color);
131  --sub-menuitem-hover-bg-color: var(--menuitem-hover-bg-color);
132  --sub-menuitem-hover-text-color: var(--menuitem-hover-text-color);
133  
134  /* 
135   * Navigation selected menuItem text and background colors
136   */
137  --menuitem-active-bg-color: hsl(0, 1%, 75%);
138  --menuitem-active-text-color: var(--menuitem-text-color);
139  --sub-menuitem-active-bg-color: var(--submenu-bg-color);
140  --sub-menuitem-active-text-color: hsl(195, 100%, 29%);
141}