Video css parts
Style
SDK's style can be customized via the integration's html file. In the style html section next to the SDK html tag.
We recommend to use ::part pseudo-element to ensure that the inner components are style correctly following the web components best practices.
Default UI
By default SDK's style comes with some interface components disabled (example: instructions_slide_header), through the parts you have the possibility to activate them to customize the user interface (UI). For example the instructions_slide_header
css part should be enabled like the code below:
vd-video::part(instructions_slide_header) {
display: block; /** THIS IS VERY IMPORTANT TO ENABLE THE HIDDEN ELEMENTS */
background-color: #eb3d1e;
}
CSS Part instructions
- In the following sections you will be able to see the sdk's available views and its parts with a border coloured line.
- Each lines has an hexadecimal color that you could find in the
parts.css
demo file applied specifically in the CSS Part section.
- So if you want to check how this section could be styled using parts, just use the example below:
vd-video::part(display_message_container) {
background-color: #eb3d1e;
}
vd-video::part(display_message_text) {
color: #ffffff;
}
Instructions
id |
name |
default value landscape |
default value portrait |
1 |
instructions |
Better not to configure |
Better not to configure |
2 |
instructions_guide_modal |
Better not to configure |
Better not to configure |
3 |
instructions_close_button_button |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
4 |
instructions_close_button_img |
- |
- |
5 |
instructions_slide |
background-color: #ffffff; border-radius: 8px; box-shadow: none; color: #000D44; font-family: PublicSansRegular; font-size: calc(var(--main-sdk-height) * 0.04); |
background-color: #ffffff; border-radius: 8px; box-shadow: none; color: #000D44; font-family: PublicSansRegular; font-size: calc(var(--main-sdk-height) * 0.04); |
6 |
instructions_slide_box |
background-color: #ffffff; border-radius: 8px; box-shadow: none; text-align: center; |
background-color: #ffffff; border-radius: 8px; box-shadow: none; text-align: center; |
7 |
instructions_slide_box_title |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.05); font-weight: normal; text-align: left; |
color: #000D44; font-size: min((calc(var(--main-sdk-width) * 0.08)), (calc(var(--main-sdk-height) * 0.06))); font-weight: normal; text-align: left; |
8 |
instructions_slide_box_subtitle |
font-family: PublicSansRegular; color: #000D44; text-align: left; font-size: calc(var(--main-sdk-height) * 0.04); |
font-family: PublicSansRegular; color: #000D44; text-align: left; font-size: calc(var(--main-sdk-width) * 0.04); |
9 |
instructions_slide_box_image |
max-width: 100%; max-height: calc(var(--main-sdk-height) * 0.35); |
max-width: 100%; max-height: calc(var(--main-sdk-height) * 0.35); |
10 |
instructions_slide_buttons_container |
font-family: PublicSansNormal; |
font-family: PublicSansNormal; |
11 |
instructions_slide_button_prev |
background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
12 |
instructions_slide_button_next |
background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
background-color: #ffffff; color: #000D44; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.02); |
13 |
instructions_slide_dots |
border-radius: 50%; background: #cccccc; |
|
14 |
instructions_slide_button |
background: #000D44; border-radius: 8px; box-shadow: none; color: #ffffff; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-height) * 0.04); |
background: #000D44; border-radius: 8px; box-shadow: none; color: #ffffff; font-family: PublicSansNormal; font-size: calc(var(--main-sdk-width) * 0.04); |
- |
instructions_logo |
- |
- |
- |
instructions_logo_img |
- |
- |
Face detection
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_top_div |
background-color: #f2f2f2; text-align: left; font-size: 85%; border-radius: 4px; |
background: #000D44; color: #ffffff; text-align: center; |
2 |
capture_glowing_outline_top_message |
font-size: calc(var(--main-sdk-height) * 0.035); |
- |
3 |
capture_close_button_button |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
4 |
capture_close_button_img |
- |
- |
5 |
capture_glowing_outline_container_faceCentered |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #53A335; border-style: solid; |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #53A335; border-style: solid; |
6 |
capture_display_message |
background-color: #ffffff; text-align: center; border-radius: 16px; |
background-color: #ffffff; text-align: center; border-radius: 16px; |
7 |
capture_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
8 |
capture_logo |
- |
- |
9 |
capture_logo_img |
width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; |
width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
10 |
capture_glowing_outline_header_top_message |
font-size: calc(var(--main-sdk-height) * 0.035); |
- |
- |
capture |
Better not to configure |
Better not to configure |
- |
capture_display_message_header |
display: none; font-size: calc(var(--main-sdk-height) * 0.02); |
display: none; font-size: calc(var(--main-sdk-height) * 0.02); |
- |
capture_display_message_media |
display: none; |
display: none; |
- |
capture_glowing_outline |
Better not to configure |
Better not to configure |
Face Capture default
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_container |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #ffffff; border-style: solid; |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #ffffff; border-style: solid; |
Face Capture detection
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_container_detection |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #257CD0; border-style: solid; |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #257CD0; border-style: solid; |
Face Capture face not centered
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_container_faceNotCentered |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #f2f2f2; border-style: solid; |
background-color: transparent; border-width: 4px; border-radius: 20%; border-color: #f2f2f2; border-style: solid; |
Document capture
id |
name |
default value landscape |
default value portrait |
1 |
capture |
Better not to configure |
Better not to configure |
2 |
capture_glowing_outline |
Better not to configure |
Better not to configure |
3 |
capture_logo |
Better not to configure |
Better not to configure |
4 |
capture_logo_img |
width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; |
width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
5 |
capture_close_button_button |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
6 |
capture_close_button_img |
Better not to configure |
filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
7 |
capture_glowing_outline_top_div |
background-color: #f2f2f2; text-align: left; |
background: #000D44; color: #ffffff; text-align: center; |
8 |
capture_glowing_outline_header_top_message |
font-size: calc(var(--main-sdk-height) * .045); |
font-size: var(--sdk-font-size, calc(1rem + 1vw)); |
9 |
capture_glowing_outline_container |
background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
10 |
capture_glowing_outline_top_message |
display: none; |
display: block; font-size: 80%; |
- |
capture_manual_capture_button_img |
Better not to configure |
Better not to configure |
- |
capture_close_button |
Better not to configure |
Better not to configure |
Document capture too far
id |
name |
default value landscape |
default value portrait |
1 |
capture |
Better not to configure |
Better not to configure |
2 |
capture_glowing_outline |
Better not to configure |
Better not to configure |
3 |
capture_logo |
Better not to configure |
Better not to configure |
4 |
capture_logo_img |
width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; |
width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
5 |
capture_close_button_button |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
6 |
capture_close_button_img |
Better not to configure |
filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
7 |
capture_glowing_outline_top_div |
background-color: #f2f2f2; text-align: left; |
background: #000D44; color: #ffffff; text-align: center; |
8 |
capture_glowing_outline_header_top_message |
font-size: calc(var(--main-sdk-height) * .045); |
font-size: var(--sdk-font-size, calc(1rem + 1vw)); |
9 |
capture_glowing_outline_container_tooFar |
background-color: transparent; border: 3px solid #257CD0; border-radius: 15px; |
background-color: transparent; border: 3px solid #257CD0; border-radius: 15px; |
10 |
capture_glowing_outline_top_message |
display: none; |
display: block; font-size: 80%; |
- |
capture_close_button |
Better not to configure |
Better not to configure |
Capture View - Center the document
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_container_detection |
background-color: transparent; border: 3px solid #53A335 border-radius: 15px; |
background-color: transparent; border: 3px solid #53A335 border-radius: 15px; |
2 |
capture_display_message |
border-radius: 16px; text-align: center; background-color: #f2f2f2; |
border-radius: 16px; text-align: center; background-color: #f2f2f2; |
3 |
capture_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
Capture View detection
id |
name |
default value landscape |
default value portrait |
1 |
capture_glowing_outline_container_detection |
background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
2 |
capture_display_message_context |
background-color: #f2f2f2; text-align: left; border-radius: 4px; |
background-color: #f2f2f2; text-align: left; border-radius: 4px; |
3 |
capture_display_message_media |
width: 15px; |
- |
4 |
capture_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
To properly display a custom successTick image through the configuration, you need to add the following property to your config file with the desired image:
"sdkVideo": {
"views": {
"capture": {
"successTick": {
"media": "/images/successTick.gif"
}
}
}
}
}
id |
name |
default value landscape |
default value portrait |
1 |
capture_display_message_success |
border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
2 |
capture_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
3 |
capture_glowing_outline_container_success |
background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
4 |
capture_success_tick |
Better not to configure |
Better not to configure |
5 |
capture_success_tick_img |
width: calc(var(--main-sdk-height) * 0.5); height: 100%; opacity: 1; |
width: calc(var(--main-sdk-width) * 0.5); height: 100%; opacity: 1; |
Capture Success Tick
id |
name |
default value landscape |
default value portrait |
1 |
capture_display_message_success |
border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
border-radius: 4px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: #AEE4C1; border-left: 10px solid #53A335; text-align: left; |
2 |
capture_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
3 |
capture_glowing_outline_container_success |
background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
background-color: transparent; border-radius: 15px; box-shadow: var(--capture-box-shadow, 0 0 0 9999px rgba(255, 255, 255, 1)); border-color: #53A335; |
4 |
capture_success_tick |
Better not to configure |
Better not to configure |
5 |
capture_success_tick_circle |
stroke: #53A335; fill: none; |
stroke: #53A335; fill: none; |
6 |
capture_success_tick_path |
stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; |
stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; |
Feedback
id |
name |
default value landscape |
default value portrait |
1 |
feedback_logo |
Better not to configure |
Better not to configure |
2 |
feedback_logo_img |
width: calc(var(--main-sdk-height) * 0.25); height: 100%; opacity: 1; |
width: calc(var(--main-sdk-width) * 0.25); height: 100%; opacity: 1; |
3 |
feedback_close_button |
Better not to configure |
Better not to configure |
- |
feedback_close_button_button |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
max-width: 50px; min-width: 25px; border: 0; background-color: transparent; |
4 |
feedback_close_button_img |
filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
5 |
feedback_display_message |
border-radius: 16px; background-color: #ffffff; text-align: center; |
border-radius: 16px; background-color: #ffffff; text-align: center; |
6 |
feedback_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
7 |
feedback_restart_button |
background-color: #000D44; border: 1px solid #000D44; font-size: calc(var(--main-sdk-height) * 0.03); color: #ffffff; border-radius: 16px; box-shadow: none; font-family: PublicSansNormal; |
background-color: #000D44; border: 1px solid #000D44; color: #ffffff; border-radius: 16px; font-size: calc(var(--main-sdk-height) * 0.02); box-shadow: none; font-family: PublicSansNormal; |
Rotate device
id |
name |
default value landscape |
default value portrait |
1 |
rotate_device_container |
background-color: #000D44; |
background-color: #000D44; |
2 |
rotate_device_img |
max-height: calc(var(--main-sdk-height) * 0.45); transform: translateY(-25%); |
max-height: calc(var(--main-sdk-width) * 0.45); transform: translateY(-25%); |
3 |
rotate_device_display_message |
border-radius: 16px; background-color: #ffffff; text-align: center; |
border-radius: 16px; background-color: #ffffff; text-align: center; |
4 |
rotate_device_display_message_text |
color: #000D44; font-size: calc(var(--main-sdk-height) * 0.03); font-family: PublicSansNormal; |
color: #000D44; font-size: calc(var(--main-sdk-width) * 0.042); font-family: PublicSansNormal; |
- |
rotated_device |
Better not to configure |
Better not to configure |