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/13.1/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/13.1/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}