Style Customization

To tweak the theme of the component you can redeclare variables in CSS custom properties. Don't forget to place the CSS file with redeclared variables below the component's CSS file. Redeclaration of CSS custom properties looks like this:

 .idvc {
   --btn-border-radius-big: 40px;
   --color-background-white: #000000;
 }

The component has the following customizable properties:

--btn-border-radius-big

default: 4px

• radius of retake, continue, submit buttons

--btn-border-radius-small

default: 4px

• radius of the manual switch button

--color-background-subheader

default: #F5F6F9

• background of the bottom part of the active step in 'steps' section
• 'type not defined' select background of the modal window
• scrollbar of 'result' modal window

--color-background-white

default: #FFF

• uploader's background
• background of 'result' modal window container
• background of 'type not defined' modal window
• background of 'document type-hint’ section

--border-color-base

default: #DCDFE6

• border of 'type not defined' modal window select
• border of 'document type-hint' section
• borders of top part in 'steps' section
• bottom icons of inactive step in 'steps' section
• image background in 'steps' section

--color-primary

default: #5185F3

• background of primary buttons
• active step name, icon, and bottom line of the active step in 'steps' section
• uploader labels, border
• manual take picture button in video capturing
• change the document type in 'document type-hint' section
• step name on hover in 'steps' section
• guideline inscription
• background of the upload icon in the uploader
• uploader's emphasized descriptions
• disabled primary buttons
• disabled button border
• spinner's color;

--color-success

default: #13CE66

• succeeded steps in 'steps' section
• face shape when capturing the video in face step
• capture progress
• valid sign of 'result' modal window container
• hints on video capture
• background of uploader's success sign

--color-danger

default: #FF4949

• background and bottom border of the step error in 'steps' section
• header of 'type not defined' modal window
• invalid sign of 'result' modal window container
• license error text

--color-warning

default: #FFC632

• warning sign of uploader

--color-text-secondary

default: #909399

• scrollbar of 'result' modal window
• library version
• descriptions of the uploader
• close sign of 'result' modal window
• name of the inactive step in 'steps' section

--color-black

default: #000

• face shape icon in video capturing when the face is not detected at the face step
• shadow of 'type not defined' modal window
• caption of 'type not defined' modal window select
• uploader's bold descriptions
• shadow of 'result' modal window
• bottom border of 'result' modal window row
• options of change the document type in 'document type-hint' section
• uploader's error sign stroke
• uploader's error description

--color-white

default: #FFF

• caption of buttons
• border and caption of manual take picture button
• upload icon
• header description of 'type not defined' modal window
• uploader success sign's checkmark
• description of capture progress