Selfie 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-selfie::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-selfie::part(display_message_container) {
background-color: #eb3d1e;
}
vd-selfie::part(display_message_text) {
color: #ffffff;
}
vd-selfie::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 | 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_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); |
| 14 | instructions_slide_dots | border-radius: 50%; background: #cccccc; | border-radius: 50%; background: #cccccc; |
| - | instructions_logo | - | - |
| - | instructions_logo_img | - | - |
Capture¶
| 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_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; |
| 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); | font-size: 80%; |
| - | 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 |
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; |
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; |
Capture successs¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_success | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; |
Selfie Head¶
| 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_head_pose_rectangle | background-color: transparent; border-radius: 3px; | background-color: transparent; border-radius: 5px; |
| 6 | capture_head_pose_inner_rectangle | background-color: #000D44; border-radius: 3px; | background-color: #000D44; border-radius: 5px; |
| 7 | capture_success_tick | Better not to configure | Better not to configure |
| 8 | capture_arrow_bottom_img capture_arrow_left_img capture_arrow_top_img capture_arrow_right_img |
transform: translateX(-50%); transform: translateY(-50%); transform: translateX(-50%); transform: translateY(-50%); |
transform: translateX(-50%); transform: translateY(-50%); transform: translateX(-50%); transform: translateY(-50%); |
| 9 | capture_logo | - | - |
| 10 | 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; |
| 11 | capture_glowing_outline_header_top_message | font-size: calc(var(--main-sdk-height) * 0.035); | font-size: 80%; |
| - | capture | Better not to configure | Better not to configure |
Success Tick¶
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_success | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; |
| 2 | capture_success_tick | Better not configure | Better not configure |
| 3 | capture_success_tick_circle | stroke: #53A335; fill: none; | stroke: #53A335; fill: none; |
| 4 | 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; |
| 5 | capture_logo | - | - |
| 6 | 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; |
Success Tick 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:
"sdkSelfie": {
"views": {
"capture": {
"successTick": {
"media": "/images/successTick.gif"
}
}
}
}
}
| id | name | default value landscape | default value portrait |
|---|---|---|---|
| 1 | capture_glowing_outline_container_success | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; | background-color: transparent; border-width: 4px; border-color: #53A335; border-style: solid; border-radius: 50%; |
| 2 | capture_success_tick | Better not configure | Better not configure |
| 3 | 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; |
| 4 | capture_logo | - | - |
| 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; |
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 | - | - |
| 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 | width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); | width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); |
| 9 | review_image_img_container | border: 4px solid #F2F2F2; border-radius: 50%; box-shadow: none; | border: 4px solid #F2F2F2; border-radius: 50%; box-shadow: none; |
| 10 | review_image_message_buttons | - | - |
| 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; color: #FFFFFF; | box-shadow: none; border-radius: 8px; font-size: calc(var(--main-sdk-width) * 0.04); font-family: PublicSansNormal; background: #000D44; color: #FFFFFF; |
| - | review_logo | - | - |
| - | review_logo_img | - | - |
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: #ce12c1; | max-width: 50px; min-width: 25px; border: 0; background-color: #ce12c1; |
| 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; |
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 |