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