Kodflux
Kodflux
Crear cuenta gratisIniciar Sesión

CSS / Intermedio / 5 min

CSS personalizado para modal de consentimiento

Estilos dark mode con botones, checkboxes y media queries mobile para un modal de consentimiento más claro.

Estilos optimizados para un diseño moderno y responsivo.

CSS
dialog[aria-modal="true"] {
  font-family: 'Poppins', sans-serif !important;
  background: #121212 !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  max-width: 420px !important;
  width: 100%;
  padding: 22px 22px 8px 22px !important;
  box-shadow: 0 25px 70px rgba(0,0,0,0.5);
  overflow: hidden !important;
  box-sizing: border-box !important;
}

dialog[aria-modal="true"] p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
dialog[aria-modal="true"] strong { font-size: 16px; display: block; margin-bottom: 8px; }
dialog[aria-modal="true"] a { color: #ff2e63; text-decoration: none; font-weight: 500; }

dialog[aria-modal="true"] .cf_consent-buttons,
dialog[aria-modal="true"] div:last-child {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  transform: translateY(-21px) !important;
}

dialog[aria-modal="true"] button {
  min-width: 132px;
  height: 44px;
  border-radius: 10px !important;
  font-weight: 600;
  cursor: pointer;
}

dialog[aria-modal="true"] button:first-child {
  background: linear-gradient(135deg, #ff2e63, #ff4d7e) !important;
  color: #ffffff !important;
}

@media (max-width: 480px) {
  dialog[aria-modal="true"] { width: 92% !important; }
  dialog[aria-modal="true"] .cf_consent-buttons { flex-direction: column !important; }
}

Buscar en Kodflux