Skip to content

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

videoInstructionsParts

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

videoFaceDetection

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

videoFaceDetectionDefault

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

videoFaceDetection

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

videoFaceNotCentered

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

videoDocumentCapture

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

videoDocumentCapture

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

documentCaptureCenterDocument

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

videoDocumentCaptureDetection

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;

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:

  "sdkVideo": {
    "views": {
      "capture": {
        "successTick": {
          "media": "/images/successTick.gif"
        }
      }
    }
  }
}

videoSuccessTickMediaParts

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

videotSuccessTick

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

feedbackParts

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

rotatedDeviceParts

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