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¶
| Light Mode | Dark mode | Part of styling | Units |
|---|---|---|---|
| --custom-background-color | --custom-dark-background-color | Backgroundcolor of app | R, G, B |
| --custom-card-background-color | --custom-dark-card-background-color | Backgroundcolor 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 | Backgroundcolor of toolbar (top and bottom) | R, G, B |
| --custom-toolbar-text-color | --custom-dark-toolbar-text-color | Text color of toolbar (top and bottom) | R, G, B |
| --custom-action-background-color | --custom-dark-action-background-color | Backgroundcolor of action buttons | R, G, B |
| --custom-action-background-color-activated | --custom-dark-action-background-color-activated | Backgroundcolor 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-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 loginscreen | R, G, B |
| --custom-login-background-color-bottom | --custom-dark-login-background-color-bottom | Bottom area color of loginscreen | R, G, B |
| --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-reqiured-color | --custom-dark-reqiured-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¶
| css variables | Declaration in config | Units |
|---|---|---|
| --red | color-red | HEX, rgb, hsl |
| --green | color-green | HEX, rgb, hsl |
| --yellow | color-yellow | HEX, rgb, hsl |
| --blue | color-blue | HEX, rgb, hsl |
| --white | color-white | HEX, rgb, hsl |
| --black | color-black | HEX, rgb, hsl |
| --orange | color-orange | HEX, rgb, hsl |
| --purple | color-purple | HEX, rgb, hsl |
| --lightRed | color-lightRed | HEX, rgb, hsl |
| --lightYellow | color-lightYellow | HEX, rgb, hsl |
| --lightGreen | color-lightGreen | HEX, rgb, hsl |
| --lightBlue | color-lightBlue | HEX, rgb, hsl |
| --lightOrange | color-lightOrange | HEX, rgb, hsl |
| --lightPurple | color-lightPurple | HEX, rgb, hsl |
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-action-background-color: 211, 77, 39;
--custom-action-background-color-activated: 117, 113, 110;
--custom-action-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;
/* 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-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-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;
/* 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;
/* predefined colors */
--red: red;
--yellow: #ffbf03;
--green: hsl(120, 100%, 25%);
--blue: blue;
--white: rgb(255,255,255);
--black: black;
--orange: #ff6501;
--purple: #9501ff;
--lightRed: #ffb4b4;
--lightYellow: #ffe9a7;
--lightGreen: #b3ecb3;
--lightBlue: #b6d1ff;
--lightOrange: #ffd991;
--lightPurple: #e2b9ff;
}
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;
}