CSS Customization
The CryptoChill SDK modal can be customized using CSS variables to match your application's design system. This allows you to override the default styling without modifying the SDK code directly.
Interactive Demo
CSS Customization Example
This button uses custom CSS variables to style the SDK modal and integrates with our site's theme:
Available CSS Variables
The SDK uses CSS custom properties (variables) that can be overridden to customize the appearance:
body .SDK {
/* Modal and backdrop */
--sdk-modal-backdrop: rgba(0, 0, 0, 0.5); /* Modal backdrop overlay */
/* Loading spiner */
--sdk-loader: #597af6; /* Loading spinner color */
--sdk-loader-border, rgba(123 123 123 / 0.3)
/* Text colors */
--sdk-text: #353d45; /* Primary text color */
--sdk-dark: #FFFFFF; /* Dark text color */
--sdk-white: var(--sdk-text); /* White text color */
--sdk-gray: #8484a2; /* Gray text color */
/* Interactive elements */
--sdk-link-color: #597af6; /* Link color */
--sdk-link-light: #ffffff; /* Light link color */
/* Backgrounds */
--sdk-input: #f7f7fc; /* Input field background */
--sdk-qr: var(--sdk-input); /* QR code background */
--sdk-pay-border: #f7f7fc; /* Payment button background */
/* Borders and dividers */
--sdk-borders: #e3e3e6; /* Border color */
/* Status colors */
--sdk-yellow: #597af6; /* Accent/warning color */
--sdk-success: #37A480; /* Success color */
--sdk-error: #FF8C82; /* Error color */
}Complete Working Example
Here's a complete working example with all variables that are actually used in the SDK:
body .SDK {
--sdk-modal-backdrop: rgba(0, 0, 0, 0.5);
--sdk-text: #353d45;
--sdk-dark: #FFFFFF;
--sdk-white: var(--sdk-text);
--sdk-gray: #8484a2;
--sdk-link-color: #597af6;
--sdk-link-light: #ffffff;
--sdk-input: #f7f7fc;
--sdk-qr: var(--sdk-input);
--sdk-pay-border: #f7f7fc;
--sdk-borders: #e3e3e6;
--sdk-loader: #597af6;
--sdk-loader-border: rgba(123 123 123 / 0.3);
--sdk-yellow: #597af6;
--sdk-success: #37A480;
--sdk-error: #FF8C82;
}Implementation
To customize the SDK appearance, add your CSS overrides after the SDK is loaded. Important: Use a more specific selector like body .SDK to ensure your CSS variables override the default ones:
<style>
body .SDK {
--sdk-modal-backdrop: rgba(0, 0, 0, 0.7);
--sdk-text: #333333;
--sdk-dark: #1a1a1a;
--sdk-white: #ffffff;
--sdk-gray: #6c757d;
--sdk-link-color: #007bff;
--sdk-link-light: #ffffff;
--sdk-input: #f8f9fa;
--sdk-qr: #ffffff;
--sdk-pay-border: #e9ecef;
--sdk-borders: #dee2e6;
--sdk-loader: #007bff;
--sdk-loader-border: rgba(123 123 123 / 0.3);
--sdk-yellow: #ffc107;
--sdk-success: #28a745;
--sdk-error: #dc3545;
}
</style>CSS Specificity
For CSS variables to work properly, you need to use a more specific selector than just .SDK. Here are some options:
/* Option 1: Use body selector (recommended) */
body .SDK {
--sdk-text: #333333;
--sdk-dark: #1a1a1a;
--sdk-link-color: #007bff;
--sdk-input: #f8f9fa;
}
/* Option 2: Use html selector */
html .SDK {
--sdk-text: #333333;
--sdk-dark: #1a1a1a;
--sdk-link-color: #007bff;
--sdk-input: #f8f9fa;
}
/* Option 3: Use !important (not recommended) */
.SDK {
--sdk-text: #333333 !important;
--sdk-dark: #1a1a1a !important;
--sdk-link-color: #007bff !important;
--sdk-input: #f8f9fa !important;
}Advanced Customization
For more advanced styling, you can also target specific elements within the SDK. Remember to use specific selectors:
body .SDK {
/* Override CSS variables */
--sdk-text: #333333;
--sdk-dark: #1a1a1a;
--sdk-link-color: #007bff;
--sdk-input: #f8f9fa;
--sdk-borders: #dee2e6;
--sdk-success: #28a745;
--sdk-error: #dc3545;
}
/* Custom styling for specific elements */
body .SDK .payment-button {
border-radius: 8px;
font-weight: 600;
}
body .SDK .currency-selector {
border: 2px solid var(--sdk-borders);
}
body .SDK .amount-input {
font-size: 18px;
padding: 12px;
}Button Loading State Customization
The SDK widget button changes its data-status attribute to reflect different states, allowing you to customize the button appearance for each state using CSS.
Available Button States
The button can have the following data-status values:
loading- When the widget is loading or processingopen- When the modal is openclosed- When the modal is closed (default state)
Customizing Button States
You can target these states using CSS attribute selectors to provide visual feedback for different button states:
/* Base button styles */
.btn {
font-size: 15px;
padding: 10px;
color: white !important;
background-color: #496cd2;
text-decoration: none !important;
border-radius: 5px;
display: inline-block;
transition: all 0.3s ease;
}
/* Loading state - shows spinner and disables interaction */
.btn[data-status="loading"] {
cursor: not-allowed;
position: relative;
color: transparent !important;
}
.btn[data-status="loading"] * {
opacity: 0;
}
.btn[data-status="loading"]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -6px 0 0 -6px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
/* Open state - when modal is open */
.btn[data-status="open"] {
background-color: #10b981 !important;
}
/* Closed state - default state */
.btn[data-status="closed"] {
background-color: #496cd2;
}
/* Disabled state */
.btn:disabled {
cursor: not-allowed;
opacity: 0.75;
}
/* Spinner animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Best Practices
Use specific selectors: Always use
body .SDKorhtml .SDKinstead of just.SDKto ensure your CSS variables override the defaults.Use CSS variables: Prefer using the provided CSS variables over hardcoded values for better maintainability.
Test thoroughly: Always test your customizations across different browsers and devices.
Consider accessibility: Ensure your color choices maintain good contrast ratios for accessibility.
Keep it simple: Avoid overly complex customizations that might break the SDK functionality.
Avoid !important: Use specific selectors instead of
!importantwhen possible for better CSS maintainability.