Skip to main content

UI Customization

SDK provides extensive customization options through CSS variables, allowing you to match your application's design system.

General Styling​

You can set provided CSS variables in your stylesheet to customize the SDK's appearance:

:root {
    /* Colors */
    --modal-background-color: rgba(255, 255, 255, 0.8);
    --modal-text-color: #1e293b;
    
    /* Border Styles */
    --modal-border-radius: 8px;
    
    /* Font Settings */
    --modal-text-font-family: 'Your-Font-Family', sans-serif;
    --modal-text-font-size: 24px;
}

Modals & Dialogs​

Modal Dialogs
info

Text in the blur modal is customizable through the blurModalMessage.

:root {
    /* Container Styles */
    --blur-modal-background-color: white;
    --blur-modal-border-radius: 8px;
    --blur-modal-padding: 20px;
    --blur-modal-width: 300px;
    --blur-modal-max-width: 300px;

    /* Text Styles */
    --blur-modal-text-color: #1e293b;
    --blur-modal-text-font-family: 'NB International Pro', sans-serif;
    --blur-modal-text-font-size: 17px;

    /* Button Styles */
    --blur-modal-button-width: 100%;
    --blur-modal-button-padding: 12px;
    --blur-modal-button-border-radius: 4px;
    --blur-modal-button-font-family: 'DIN Pro', sans-serif;
    --blur-modal-button-font-size: 14px;
    --blur-modal-button-font-weight: 700;

    /* Primary Button (Retake) */
    --blur-modal-primary-button-background: #00AA00;
    --blur-modal-primary-button-color: white;

    /* Secondary Button (Submit Anyway) */
    --blur-modal-secondary-button-background: transparent;
    --blur-modal-secondary-button-border: 1px solid #333;
    --blur-modal-secondary-button-color: #333;
}

Global Modal Positioning

:root {
    /* Modal Positioning (applies to all modals) */
    --modal-border-radius: 8px;
    --modal-z-index: 1000;
    --modal-width: 300px;
    --modal-height: 250px; /* Auto-adjusts for enforced modes */
    --modal-top: 50%;
    --modal-left: 50%;
    --modal-transform: translate(-50%, -50%);
}

UI Components​

Credit Card Scanner
:root {
    /* Overlay Settings */
    --card-overlay-max-width: 500px;
    --card-overlay-height: 100%;
    --card-overlay-z-index: 150;

    /* Card Outline */
    --card-outline-width: 400px;
    --card-outline-height: 250px;
    --card-outline-border-width: 8px;
    --card-outline-border-color: white;
    --card-outline-border-radius: 12px;

    /* Text Display */
    --card-text-color: white;
    --card-number-font-size: 24px;
    --card-number-margin: 90px 0 10px 40px;
    --card-info-margin-left: 20px;
    --card-info-font-weight: bold;

    /* Flip Message */
    --flip-message-width: 300px;
    --flip-message-font-size: 25px;
}