| Table of Contents | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Setting the appearance of the Video FaceMatch
It is possible to configure the appearance of the FaceMatch video by providing an additional CSS file named custom-video-identification.css, provided in the signbook customization.zip archive (
| View file | ||
|---|---|---|
|
This CSS file can contain your own CSS, but the recommended method is to use the CSS variables listed below:
List of CSS variables
CSS Variable | Default value | Description |
|---|---|---|
--nc-font-family | 'Quicksand', sans-serif; | global text font |
--nc-font-weight | 500 | font-weight for global text |
--nc-font-color | #333333 | global text color |
--nc-font-size | 1rem | global font size |
--nc-button-active-background | #014AD8 | background color for buttons |
--nc-button-active-color | #FFFFFF | text color for buttons |
--nc-button-disabled-background | rgba (47, 95, 227, 0.25) | background-color for disabled buttons |
--nc-button-disabled-color | rgba (255, 255, 255, 0.8) | text color for disabled buttons |
--nc-button-font-size | 16px | text size for buttons |
--nc-button-font-weight | bold | font-weight for text in buttons |
--nc-button-text-transform | uppercase | can be used to make button text appear in uppercase or lowercase |
--nc-button-border-radius | 8px | border-radius size for buttons |
--nc-checkbox-container-checked-background | #FFFFFF | checkbox container background color when selected |
--nc-checkbox-background | #2F5FE3 | background-color for checkboxes |
--nc-checkbox-checkmark-color | #FAFAFA | checkbox color when selected |
--nc-checkbox-border-color | ##014AD8 | border color of the checkbox |
--nc-checkbox-width | 20px | checkbox width size |
--nc-checkbox-height | 20px | checkbox height size |
--nc-link-color | #014AD8 | link text color |
--nc-box-background | rgba (1, 74, 216, 0.03) | background color for the box panel in first step |
--nc-box-border-radius | 8px | border-radius for the box panel in first step |
--nc-box-document-type-background | #FFFFFF | background-color for item selection in document type step |
--nc-box-document-type-border-radius | 8px | border-radius for item selection in document type step |
--nc-progress-bar-background | #014AD8 | background color for the progress bar in upload step |
--nc-validation-color | #1af9b6 | color used in animations during video recording screens |
--nc-live-control-succeed-color | rgb (25, 216, 115) | color indicating that the real-time control over sharpness is on |
--nc-live-control-fail-color | rgb (255, 57, 57) | color indicating that the real-time control on sharpness is not passing |
Example of a CSS file
| Code Block | ||||
|---|---|---|---|---|
| ||||
:root {
--nc-font-family: 'Courgette', serif;
--nc-font-color: black;
--nc-font-size: 16px;
--nc-font-weight: 400;
--nc-button-active-background: #22819f;
--nc-button-active-color: #affffa;
--nc-button-disabled-background: rgba(174, 206, 214, 0.5);
--nc-button-disabled-color: gray;
--nc-button-font-size: 16px;
--nc-button-font-weight: bold;
--nc-button-border-radius: 40px;
--nc-button-text-transform: none;
--nc-checkbox-container-checked-background: transparent;
--nc-checkbox-background: #22819f;
--nc-checkbox-checkmark-color: #affffa;
--nc-checkbox-border-color: #014AD8;
--nc-checkbox-width: 26px;
--nc-checkbox-height: 26px;
--nc-link-color: #014AD8;
--nc-box-background: #baf7ff;
--nc-box-border-radius: 20px;
--nc-box-document-type-background: #baf7ff;
--nc-box-document-type-border-radius: 40px;
--nc-progress-bar-background: #56dfb0;
--nc-validation-color: #1ac6ff;
--nc-live-control-succeed-color: #1ac6ff;
--nc-live-control-fail-color: #ff0071;
}
@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/courgette/v13/wEO_EBrAnc9BLjLQAUk1VvoK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} |
List of notable CSS classes
Several CSS classes in the interface are easily identifiable with a browser developer's tool, We list below the main CSS classes to be used to target each page element:
App-intro-step
...
App-document-type-step
...
App-guide-lines-document-step (1)
...
App-guide-lines-document-step (2)
...
App-guide-lines-document-step (3)
...
App-video-document-step (1)
...
App-video-document-step (2)
...
App-video-document-step (3)
...
App-video-document-step (4)
...
App-guide-lines-selfie-step (1)
...
App-guide-lines-selfie-step (2)
...
App-video-seflie-step
...
App-sending-step (1)
...
App-sending-step (2)
...
App-final-step
...
Video FaceMatch text customization
To achieve full visual integration, in addition to the appearance, you can configure the interface texts for video identification, by supplying an additional file named strings. custom-video-identification_[lang].json to be included in the SignBook customization ZIP archive.
...