Styling options

CSS variables

Set variables on human-proof. Numeric length values without a unit are treated as px.

human-proof {
  --humanproof-background: #ffffff;
  --humanproof-border-color: #e2e8f0;
  --humanproof-border-radius: 6px;
  --humanproof-widget-height: 60px;
  --humanproof-widget-width: 100%;
  --humanproof-widget-padding: 12px;
  --humanproof-gap: 10px;
  --humanproof-color: #172033;
  --humanproof-checkbox-size: 25px;
  --humanproof-checkbox-border: 1px solid #cbd5e1;
  --humanproof-checkbox-border-radius: 4px;
  --humanproof-checkbox-background: #ffffff;
  --humanproof-checkbox-margin: 2px;
  --humanproof-font: system-ui, -apple-system, sans-serif;
  --humanproof-spinner-color: #1d4ed8;
  --humanproof-spinner-background-color: #e5e7eb;
  --humanproof-spinner-thickness: 3px;
}