Document 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-document::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.cssdemo 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-document::part(display_message_container) {
background-color: #eb3d1e;
}
vd-document::part(display_message_text) {
color: #ffffff;
}
vd-document::part(head_steps) {
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 | background-color: #ffffff; | background-color: #ffffff; |
| 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 | Better not to configure styles set by instructions_close_button_button | Better not to configure styles set by instructions_close_button_button |
| 5 | instructions_slide | background-color: #ffffff;color: #000D44;font-family: PublicSansRegular;font-size: calc(var(--main-sdk-height) * .04); | background-color: #ffffff;color: #000D44; font-family: PublicSansRegular; font-size: calc(var(--main-sdk-height) * .04); |
| 6 | instructions_slide_box | background-color: #ffffff; | background-color: #ffffff; |
| 7 | instructions_slide_box_title | font-size: calc(var(--main-sdk-height) * .05);font-weight: 400;color: #000D44;text-align: left; | font-size: min((calc(var(--main-sdk-width) * .08)),(calc(var(--main-sdk-height) * .06)));font-weight: 400;color: #000D44;text-align: left; |
| 8 | instructions_slide_box_subtitle | font-family: PublicSansRegular;font-size: calc(var(--main-sdk-height) * .03);color: #000D44;text-align: left;; | font-family: PublicSansRegular;font-size: calc(var(--main-sdk-width) * .04); color: #000D44;text-align: left; |
| 9 | instructions_slide_box_image | max-width: 100%; max-height: calc(var(--main-sdk-height) * .35); | max-width: 100%;max-height: calc(var(--main-sdk-height)* .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) * .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) * .02); |
| 13 | instructions_slide_button | background: #000D44;color: #ffffff;font-family: PublicSansNormal;font-size: calc(var(--main-sdk-height) * .04); | background: #000D44;color: #ffffff;font-family: PublicSansNormal;font-size: calc(var(--main-sdk-width) * .04); |
| 14 | instructions_slide_dots | background: #cccccc;width: calc(var(--main-sdk-height) * 0.012);height: calc(var(--main-sdk-height) * 0.012); | background: #cccccc;width: calc(var(--main-sdk-height) * 0.012);height: calc(var(--main-sdk-height) * 0.012); |
| 15 | instructions_document_back | Better not to configure | Better not to configure |
| - | instructions_logo | display:none | display: none; |
| - | instructions_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; |
| - | instructions_close_button | Better not to configure | Better not to configure |
| - | instructions_slide_header | display: none | display: none |
Capture View¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_manual_capture_button | Better not to configure | Better not to configure |
| 2 | capture | Better not to configure | Better not to configure |
| 3 | capture_glowing_outline | Better not to configure | Better not to configure |
| 4 | capture_logo | Better not to configure | Better not to configure |
| 5 | 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; |
| 6 | 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; |
| 7 | capture_close_button_img | Better not to configure | filter: invert(100%) sepia(100%) saturate(0) hue-rotate(288deg) brightness(102%) contrast(102%); |
| 8 | capture_glowing_outline_top_div | background-color: #f2f2f2; text-align: left; | background: #000D44; color: #ffffff; text-align: center; |
| 9 | capture_glowing_outline_header_top_message | font-size: calc(var(--main-sdk-height) * .045); | font-size: var(--sdk-font-size, calc(1rem + 1vw)); |
| 10 | capture_glowing_outline_container | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; |
| 11 | 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 |
Capture View - Bring the document closer¶
| 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 | 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 - Too Far stage¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_tooFar | background-color: transparent; border: 3px solid #ffffff; border-radius: 15px; border-color: #257CD0; | background-color: transparent; border: 3px solid #ffffff; border-color: #257CD0; border-radius: 15px; |
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_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; |
| 4 | capture_display_message_media | width: 15px; | - |
Capture Manual Capture¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_manual_capture_button | outline: none; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0); border: none; | outline: none; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0); border: none; |
| 2 | 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; |
| 3 | capture_display_message_context | background-color: #f2f2f2; text-align: left; border-radius: 4px; | background-color: #f2f2f2; text-align: left; border-radius: 4px; |
| 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; |
| 5 | capture_display_message_media | width: 15px; | - |
Capture Success media¶
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:
"sdkDocument": {
"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; |
Review Image¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | review | Better not to configure | Better not to configure |
| 2 | review_image | background-color: #ffffff; | background-color: #ffffff; |
| 3 | review_image_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 | review_image_close_button_img | border: 5px solid #e57e09; | border: 5px solid #e57e09; |
| 5 | review_image_container | color: #000D44; background-color: #ffffff; | color: #000D44; background-color: #ffffff; |
| 6 | review_image_message | border-radius: 8px; background-color: #ffffff; font-size: calc(var(--main-sdk-height) * 0.05); font-family: PublicSansRegular; color: #000D44; box-shadow: none; | border-radius: 8px; background-color: #ffffff; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansRegular; color: #000D44; box-shadow: none; |
| 7 | review_image_message_text | text-align: center; color: #000D44; | text-align: center; color: #000D44; |
| 8 | review_image_img | max-width: 100%; max-height: calc(var(--main-sdk-height) * 0.6); object-fit: contain; border: 4px solid #f2f2f2; border-radius: 15px; box-shadow: none; | max-width: calc(var(--main-sdk-width) * 0.9); max-height: calc(var(--main-sdk-height) * 0.6); object-fit: contain; border: 4px solid #f2f2f2; border-radius: 15px; box-shadow: none; |
| 9 | review_image_img_container | width: fit-content; max-width: calc(var(--main-sdk-width) * 0.9); max-height: calc(var(--main-sdk-height) * 0.6); | width: fit-content; max-width: calc(var(--main-sdk-width) * 0.9); max-height: calc(var(--main-sdk-height) * 0.6); |
| 10 | review_image_message_buttons | Better not to configure | Better not to configure |
| 11 | review_image_message_buttons_repeat | box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-height) * 0.04); font-family: PublicSansNormal; background: #D3EBFC; color: #000D44; | box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansNormal; background: #D3EBFC; color: #000D44; |
| 12 | review_image_message_buttons_continue | box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-height) * 0.04); font-family: PublicSansNormal; background: #000D44; | box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansNormal; color: #ffffff; |
Feedback¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | feedback | background: #000D44 | background: #000D44 |
| 2 | feedback_logo | Better not to configure | Better not to configure |
| 3 | 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; |
| 4 | feedback_close_button | Better not to configure | Better not to configure |
| 4 | 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; |
| 5 | 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%); |
| 6 | feedback_display_message | border-radius: 16px; background-color: #ffffff; text-align: center; | border-radius: 16px; background-color: #ffffff; text-align: center; |
| 7 | 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; |
| 8 | 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; |