@truconsent/consent-banner-react/dist/MarsConsentModal.css

React consent-banner components (in-page & modal)

.mcm-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.mcm-container { background:#fff; border-radius:8px; width:90%; max-width:600px; max-height:90%; overflow:auto; padding:20px; }
.mcm-header { display:flex; align-items:center; margin-bottom:15px; }
.mcm-logo { width:48px; height:48px; margin-right:10px; }
.mcm-header-text h1 { margin:0; font-size:1.25rem; }
.mcm-header-text p { margin:0; font-size:0.9rem; color:#555; }
.mcm-separator { height:1px; background:#eee; margin:10px 0; }
.mcm-body { display:grid; grid-template-columns:1fr; gap:10px; }
.mcm-card { border:1px solid #ddd; border-radius:4px; padding:10px; }
.mcm-card-header { display:flex; justify-content:space-between; align-items:center; }
.mcm-purpose-desc { font-size:0.9rem; color:#666; }
.badge { display:inline-block; padding:2px 6px; font-size:0.75rem; border-radius:4px; background:#eee; margin-right:5px; }
.badge.mandatory { background:#e74c3c; color:#fff; }
.badge.expiry { background:#3498db; color:#fff; }
.switch { position:relative; display:inline-block; width:40px; height:20px; margin:0 5px; }
.switch input { opacity:0; width:0; height:0; }
.track { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:20px; }
.thumb { position:absolute; content:""; height:16px; width:16px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:.2s; }
input:checked + .track { background:#2ecc71; }
input:checked + .track + .thumb { transform: translateX(20px); }
.toggle-label { font-size:0.9rem; }
.accordion-btn { width:100%; background:none; border:none; text-align:left; padding:8px 0; font-size:1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.panel { padding:5px 0 10px 0; }
.pill { display:inline-block; padding:4px 8px; background:#f1f1f1; border-radius:12px; margin:2px; font-size:0.8rem; }
.chevron { transition: transform .3s; }
.chevron.open { transform: rotate(180deg); }
.mcm-btn { padding:8px 16px; border:none; border-radius:4px; cursor:pointer; font-size:1rem; }
.mcm-btn.reject { background:#e74c3c; color:#fff; margin-right:10px; }
.mcm-btn.consent { background:#2ecc71; color:#fff; }
.mcm-spinner {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: mcm-spin 1s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes mcm-spin {
  to { transform: rotate(360deg); }
}