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;
}

Available Customization Options

Modal Dialogs (Blur & Document Modals)

:root {
    /* Container Styles */
    --modal-background-color: rgba(255, 255, 255, 0.8);
    --modal-border-radius: 8px;
    --modal-z-index: 1000;

    /* Text Styles */
    --modal-text-color: #1e293b;
    --modal-text-font-family: 'Your-Font', sans-serif;
    --modal-text-font-size: 24px;

    /* Button Styles */
    --modal-button-width: 90%;
    --modal-button-padding: 24px 16px;
    --modal-button-border-radius: 4px;
    --modal-button-font-size: 14px;
    --modal-button-font-weight: 500;

    /* Primary Button */
    --modal-primary-button-background: linear-gradient(302deg, #2DB5D2 0%, #00FA6C 48%, #2DB5D2 100%);
    --modal-primary-button-color: #1e293b;

    /* Secondary Button */
    --modal-secondary-button-background: transparent;
    --modal-secondary-button-border: 1px solid #1e293b;
    --modal-secondary-button-color: #1e293b;
}

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;
}

Control Buttons (Capture, Torch, Submit)

:root {
    /* Capture Button */
    --capture-button-background-color: transparent;
    --capture-button-hover-background-color: rgba(255, 255, 255, 0.5);
    --capture-button-active-background-color: rgba(255, 0, 0, 0.5);

    /* Torch Button */
    --torch-button-background-color: rgba(107, 114, 128, 0.5);
    --torch-button-hover-background-color: rgba(75, 85, 99, 0.8);

    /* Submit Button */
    --submit-button-background-color: #4CAF50;
    --submit-button-color: white;
    --submit-button-border-radius: 5px;
    --submit-button-font-size: 16px;
}