Customize¶
The app is fully customisable with customize.css. How to save the customize.css is described in static-content. The customize.css can manage your own CSS classes, but also a number of predefined CSS variables to customise the app in general. The app also supports a light and a dark mode.
The colours must be defined like RGB. A number for red, green and blue, separated by a comma.
Example
:root {
/* working code */
--custom-background-color: 255, 255, 255;
/* not working code */
--custom-background-color: rgb(255, 255, 255);
}
Overview of all variables¶
App customizing¶
| Light Mode | Dark mode | Part of styling | Units |
|---|---|---|---|
| --custom-background-color | --custom-dark-background-color | Background-color of app | R, G, B |
| --custom-card-background-color | --custom-dark-card-background-color | Background-color of cards | R, G, B |
| --custom-text-color | --custom-dark-text-color | Text color of app | R, G, B |
| --custom-toolbar-background-color | --custom-dark-toolbar-background-color | Background-color of toolbar (top and bottom) and the menubar | R, G, B |
| --custom-toolbar-text-color | --custom-dark-toolbar-text-color | Text color of toolbar (top and bottom) and the menubar | R, G, B |
| --custom-menu-background-color | --custom-dark-menu-background-color | Background-color of active menu (Affects all menus that are not in the toolbar) | R, G, B |
| --custom-menu-text-color | --custom-dark-menu-text-color | Text color of menu (Affects all menus that are not in the toolbar) | R, G, B |
| --custom-action-background-color | --custom-dark-action-background-color | Background-color of action buttons | R, G, B |
| --custom-action-background-color-activated | --custom-dark-action-background-color-activated | Background-color of action buttons, if clicked | R, G, B |
| --custom-action-text-color | --custom-dark-action-text-color | Text color of action buttons | R, G, B |
| --custom-table-marker-background-color | --custom-dark-table-marker-background-color | Background-color of the table row, if selected | R, G, B |
| --custom-table-marker-text-color | --custom-dark-table-marker-text-color | Text color of the table row, if selected | R, G, B |
| --custom-login-background-color-top | --custom-dark-login-background-color-top | Top area color of loginscreen | R, G, B |
| --custom-login-background-color-center | --custom-dark-login-background-color-center | Middle area color of login screen | R, G, B |
| --custom-login-background-color-bottom | --custom-dark-login-background-color-bottom | Bottom area color of login screen | R, G, B |
Sucess, Warning, Danger and Requiered color¶
| Light Mode | Dark mode | Part of styling | Units |
|---|---|---|---|
| --custom-success-color | --custom-dark-success-color | Success color | R, G, B |
| --custom-success-text-color | --custom-dark-success-text-color | Success text color | R, G, B |
| --custom-warning-color | --custom-dark-warning-color | Warning color | R, G, B |
| --custom-warning-text-color | --custom-dark-warning-text-color | Warning text color | R, G, B |
| --custom-danger-color | --custom-dark-danger-color | Danger color | R, G, B |
| --custom-danger-text-color | --custom-dark-danger-text-color | Danger text color | R, G, B |
| --custom-required-color | --custom-dark-required-color | Text color of requiered attributes | R, G, B |
Font size¶
| CSS variables | Part of styling | Units |
|---|---|---|
| --custom-font-size-basis | General font size | px |
| --custom-card-font-size | Font size of cards | em |
| --custom-card-title-font-size | Font size of cards header | em |
| --custom-toolbar-font-size | Font-size of toolbar (top and bottom) | em |
| --custom-action-button-font-size | Font size of action buttons | em |
Predefined colors¶
| Light mode | Dark mode | Part of styling | Units |
|---|---|---|---|
| --custom-red | --custom-dark-red | color-red and bg-color-red | R, G, B |
| --custom-green | --custom-dark-green | color-green and bg-color-green | R, G, B |
| --custom-yellow | --custom-dark-yellow | color-yellow and bg-color-yellow | R, G, B |
| --custom-blue | --custom-dark-blue | color-blue and bg-color-blue | R, G, B |
| --custom-white | --custom-dark-white | color-white and bg-color-white | R, G, B |
| --custom-black | --custom-dark-black | color-black and bg-color-black | R, G, B |
| --custom-orange | --custom-dark-orange | color-orange and bg-color-orange | R, G, B |
| --custom-purple | --custom-dark-purple | color-purple and bg-color-purple | R, G, B |
| --custom-lightRed | --custom-dark-lightRed | color-lightRed and bg-color-lightRed | R, G, B |
| --custom-lightYellow | --custom-dark-lightYellow | color-lightYellow and bg-color-lightYellow | R, G, B |
| --custom-lightGreen | --custom-dark-lightGreen | color-lightGreen and bg-color-lightGreen | R, G, B |
| --custom-lightBlue | --custom-dark-lightBlue | color-lightBlue and bg-color-lightBlue | R, G, B |
| --custom-lightOrange | --custom-dark-lightOrange | color-lightOrange and bg-color-lightOrange | R, G, B |
| --custom-lightPurple | --custom-dark-lightPurple | color-lightPurple and bg-color-lightPurple | R, G, B |
Input styling¶
| Light Mode | Dark mode | Part of styling | Units |
|---|---|---|---|
| --custom-input-border-width | --custom-dark-input-border-width | Input border width. One Value => value = top, right, bottom, left; Two Values, seperate by a space => first value = first, bottom & second value = right, left; Three Values, seperate by a space => first value = top & second value = left, right & third value = bottom; Four Values, seperate by a space => first value = top & second value = right & third value = bottom & fourth value = left | px |
| --custom-input-border-width-readonly | --custom-dark-input-border-width-readonly | Input border width. One Value => value = top, right, bottom, left; Two Values, seperate by a space => first value = first, bottom & second value = right, left; Three Values, seperate by a space => first value = top & second value = left, right & third value = bottom; Four Values, seperate by a space => first value = top & second value = right & third value = bottom & fourth value = left | px |
| --custom-input-border-radius | --custom-dark-input-border-radius | Input border radius. Default is 0. | px |
| --custom-input-border-color | --custom-dark-input-border-color | Input border color for the top, right, bottom and left border. If --custom-input-border-width is zero, nothing appears. | R, G, B |
| --custom-input-border-color-readonly | --custom-dark-input-border-color-readonly | Input border color for the top, right, bottom and left border. If --custom-input-border-width-readonly is zero, nothing appears. | R, G, B |
| --custom-input-bg-color | --custom-dark-input-bg-color | Input background color | R, G, B |
| --custom-input-bg-color-readonly | --custom-dark-input-bg-color-readonly | Input background color for editable input | R, G, B |
| --custom-input-bg-color-readonly | --custom-dark-input-bg-color-readonly | Input background color for readonly input | R, G, B |
Example:
:root {
/* light mode */
--custom-background-color: 255, 255, 255;
--custom-card-background-color: 249, 250, 250;
--custom-text-color: 84, 84, 83;
--custom-toolbar-background-color: 255, 255, 255;
--custom-toolbar-text-color: 84, 84, 83;
--custom-menu-background-color: 255, 255, 255;
--custom-menu-text-color: 84, 84, 83;
--custom-action-background-color: 211, 77, 39;
--custom-action-background-color-activated: 117, 113, 110;
--custom-action-text-color: 255, 255, 255;
--custom-table-marker-background-color: 117, 113, 110;
--custom-table-marker-text-color: 255, 255, 255;
--custom-login-background-color-top: 211, 77, 39;
--custom-login-background-color-center: 117, 113, 110;
--custom-login-background-color-bottom: 255, 255, 255;
--custom-success-color: 45, 211, 111;
--custom-success-text-color: 0, 0, 0;
--custom-warning-color: 255, 196, 9;
--custom-warning-text-color: 0, 0, 0;
--custom-danger-color: 235, 68, 90;
--custom-danger-text-color: 255, 255, 255;
--custom-reqiured-color: 211, 77, 39;
/* predefined colors */
--custom-red: 255, 0, 0;
--custom-yellow: 255, 191, 3;
--custom-green: 0, 128, 0;
--custom-blue: 0, 0, 255;
--custom-white: 255, 255, 255;
--custom-black: 0, 0, 0;
--custom-orange: 255, 101, 1;
--custom-purple: 149, 1, 255;
--custom-lightRed: 255, 180, 180;
--custom-lightYellow: 255, 233, 167;
--custom-lightGreen: 179, 236, 179;
--custom-lightBlue: 182, 209, 255;
--custom-lightOrange: 255, 217, 145;
--custom-lightPurple: 226, 185, 255;
/* input styling */
--custom-input-border-width: 0 0 1px 0;
--custom-input-border-width-readonly: 0;
--custom-input-border-radius: 0;
--custom-input-border-color: 0, 0, 0;
--custom-input-border-color-readonly: 0, 0, 0;
--custom-input-bg-color: 255, 255, 255;
--custom-input-bg-color-readonly: 255, 255, 255;
/* dark mode */
--custom-dark-background-color: 0, 0, 0;
--custom-dark-card-background-color: 48, 51, 46;
--custom-dark-text-color: 204, 204, 204;
--custom-dark-toolbar-background-color: 92, 92, 92;
--custom-dark-toolbar-text-color: 255, 255, 255;
--custom-dark-menu-background-color: 92, 92, 92;
--custom-dark-menu-text-color: 255, 255, 255;
--custom-dark-action-background-color: 20, 189, 255;
--custom-dark-action-background-color-activated: 15, 141, 191;
--custom-dark-action-text-color: 0, 0, 0;
--custom-dark-table-marker-background-color: 15, 141, 191;
--custom-dark-table-marker-text-color: 0, 0, 0;
--custom-dark-login-background-color-top: 20, 189, 255;
--custom-dark-login-background-color-center: 92, 92, 92;
--custom-dark-login-background-color-bottom: 0, 0, 0;
--custom-dark-success-color: 45, 211, 111;
--custom-dark-success-text-color: 0, 0, 0;
--custom-dark-warning-color: 255, 196, 9;
--custom-dark-warning-text-color: 0, 0, 0;
--custom-dark-danger-color: 235, 68, 90;
--custom-dark-danger-text-color: 255, 255, 255;
--custom-dark-reqiured-color: 20, 189, 255;
/* predefined colors */
--custom-dark-red: 255, 0, 0;
--custom-dark-yellow: 255, 191, 3;
--custom-dark-green: 0, 128, 0;
--custom-dark-blue: 0, 0, 255;
--custom-dark-white: 255, 255, 255;
--custom-dark-black: 0, 0, 0;
--custom-dark-orange: 255, 101, 1;
--custom-dark-purple: 149, 1, 255;
--custom-dark-lightRed: 255, 180, 180;
--custom-dark-lightYellow: 255, 233, 167;
--custom-dark-lightGreen: 179, 236, 179;
--custom-dark-lightBlue: 182, 209, 255;
--custom-dark-lightOrange: 255, 217, 145;
--custom-dark-lightPurple: 226, 185, 255;
/* input styling */
--custom-dark-input-border-width: 0 0 1px 0;
--custom-dark-input-border-width-readonly: 0;
--custom-dark-input-border-radius: 0;
--custom-dark-input-border-color: 0, 0, 0;
--custom-dark-input-border-color-readonly: 0, 0, 0;
--custom-dark-input-bg-color: 255, 255, 255;
--custom-dark-input-bg-color-readonly: 255, 255, 255;
/* font size */
--custom-font-size-basis: 16px;
--custom-card-font-size: 1em;
--custom-card-title-font-size: 1.65em;
--custom-toolbar-font-size: 1em;
--custom-action-button-font-size: 1em;
}
Image/Placeholder Image in List¶
| CSS variables | Part of styling |
|---|---|
| --list-image-position | Type of positioning |
| --list-image-left | Horizontal position of an image container |
| --list-image-height | Height of an image container |
| --list-image-width | Width of an image container |
| --list-image-object-fit | Resizing of the image |
| --list-image-placeholder-opacity | Opacity of the placeholder |
| --list-image-placeholder-display | Behavior of placeholder element |
| --list-image-placeholder-justify-content | Alignment of placeholder in container |
| --list-image-placeholder-align-items | Alignment of placeholder on cross axis |
| --list-image-placeholder-font-size | Font size of placeholder |
Example:
:root {
/* image */
--list-image-position: absolute;
--list-image-left: 0;
--list-image-height: 100%;
--list-image-width: 40px;
--list-image-object-fit: cover;
/* placeholder */
--list-image-placeholder-opacity: 0.3;
--list-image-placeholder-display: flex;
--list-image-placeholder-justify-content: left;
--list-image-placeholder-align-items: center;
--list-image-placeholder-font-size: 32px;
}