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

Available Customization Options​

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