Cloudflare Zaraz Compact Consent UI | CSS-only progressive disclosure for the native Zaraz CMP

Starred Gists，GitHub Gist，即时分享代码、笔记与代码片段。关注
<!--
Cloudflare Zaraz → Consent → Consent modal text
The text can be translated freely. Keep the .zc-toggle class names unchanged,
because the CSS uses them as its progressive-disclosure state.
-->
Usamos cookies para medir o uso do site e melhorar sua experiência.
</p>
Personalizar preferências
</details>
/*
* Cloudflare Zaraz Compact Consent UI
* CSS-only progressive disclosure for the native Zaraz CMP.
*
* Docs:
* https://developers.cloudflare.com/zaraz/consent-management/
* https://developers.cloudflare.com/zaraz/consent-management/custom-css/
* https://dash.cloudflare.com/?to=/:account/tag-management/consent
*
* Quick setup:
* 1. Enable Zaraz Consent Management.
* 2. Add the snippet to "Consent modal text".
* 3. Paste this file into "Custom CSS".
* 4. Customize only CONFIG 1 (colors) and CONFIG 2 (position).
*
* No custom consent logic. No JavaScript.
* Relies on Zaraz's current .cf_* consent markup.
*/
/* ============================================================
CONFIG 1/2 — COLORS
Change only these master colors.
============================================================ */
.cf_modal {
--zc-brand: #8c583f;
--zc-on-brand: #ffffff;
--zc-ink: #17293a;
--zc-paper: #ffffff;
}
/* ============================================================
CONFIG 2/2 — POSITION
Options:
top-left top-center top-right
center-left center center-right
bottom-left bottom-center bottom-right
============================================================ */
.cf_modal {
--zc-position: var(--zc-bottom-right);
--zc-gap: 18px;
}
/* ============================================================
ENGINE — NOTHING TO CONFIGURE BELOW THIS LINE
============================================================ */
.cf_modal {
--zc-brand-hover: color-mix(in srgb, var(--zc-brand) 80%, black);
--zc-heading: color-mix(in srgb, var(--zc-ink) 90%, black);
--zc-muted: color-mix(in srgb, var(--zc-ink) 72%, var(--zc-paper));
--zc-border: color-mix(in srgb, var(--zc-ink) 16%, var(--zc-paper));
--zc-border-soft: color-mix(in srgb, var(--zc-ink) 9%, var(--zc-paper));
--zc-soft: color-mix(in srgb, var(--zc-ink) 5%, var(--zc-paper));
--zc-top-left: var(--zc-gap) auto auto var(--zc-gap);
--zc-top-center: var(--zc-gap) auto auto auto;
--zc-top-right: var(--zc-gap) var(--zc-gap) auto auto;
--zc-center-left: auto auto auto var(--zc-gap);
--zc-center: auto;
--zc-center-right: auto var(--zc-gap) auto auto;
--zc-bottom-left: auto auto var(--zc-gap) var(--zc-gap);
--zc-bottom-center: auto auto var(--zc-gap) auto;
--zc-bottom-right: auto var(--zc-gap) var(--zc-gap) auto;
position: fixed;
inset: 0;
width: min(370px, calc(100vw - (var(--zc-gap) * 2)));
height: fit-content;
max-width: none;
max-height: calc(100vh - (var(--zc-gap) * 2));
margin: var(--zc-position);
padding: 18px;
--padding: 18px;
overflow: auto;
overscroll-behavior: contain;
background: color-mix(in srgb, var(--zc-paper) 98.5%, transparent);
color: var(--zc-ink);
border: 1px solid var(--zc-border);
border-radius: 14px;
box-shadow:
0 16px 42px color-mix(in srgb, var(--zc-ink) 12%, transparent),
0 2px 6px color-mix(in srgb, var(--zc-ink) 5%, transparent);
filter: none;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
-webkit-font-smoothing: antialiased;
animation:
zc-enter
220ms
cubic-bezier(0.16, 1, 0.3, 1)
both;
transition:
width 240ms cubic-bezier(0.16, 1, 0.3, 1),
padding 240ms cubic-bezier(0.16, 1, 0.3, 1),
border-radius 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
dialog::backdrop,
.cf_modal::backdrop {
background: color-mix(in srgb, var(--zc-ink) 8%, transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@keyframes zc-enter {
from {
opacity: 0;
transform: translateY(10px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.title_container {
margin: 0 0 9px;
padding: 0;
}
.cf_modal h2 {
margin: 0;
padding: 0;
font-size: 1.075rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--zc-heading);
}
.cf_consent-intro {
margin: 0;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
color: var(--zc-muted);
text-align: left;
}
.cf_consent-intro p {
margin: 0;
}
.cf_consent-intro p + p {
margin-top: 6px;
}
.cf_consent-intro strong,
.cf_consent-intro b {
font-weight: 600;
color: var(--zc-heading);
}
.cf_consent-intro a {
color: var(--zc-brand);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.cf_consent-intro a:hover {
color: var(--zc-brand-hover);
}
.zc-toggle {
margin: 11px 0 0;
padding: 0;
}
.zc-toggle > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
margin: 0;
padding: 5px 0;
border: 0;
outline: 0;
list-style: none;
cursor: pointer;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.3;
color: var(--zc-brand);
user-select: none;
transition: color 140ms ease;
}
.zc-toggle > summary::-webkit-details-marker {
display: none;
}
.zc-toggle > summary:hover {
color: var(--zc-brand-hover);
}
.cf_modal .zc-toggle > summary:focus,
.cf_modal .zc-toggle > summary:focus-visible {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
border-color: transparent !important;
}
.zc-toggle > summary::after {
content: "+";
display: grid;
place-items: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 1px solid var(--zc-border);
border-radius: 999px;
background: transparent;
color: var(--zc-muted);
font-family: system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 400;
line-height: 1;
transition:
background 140ms ease,
color 140ms ease,
border-color 140ms ease;
}
.zc-toggle > summary:hover::after {
background: var(--zc-soft);
border-color: var(--zc-border);
}
.zc-toggle[open] > summary::after {
content: "−";
background: var(--zc-soft);
color: var(--zc-ink);
border-color: var(--zc-border);
}
.zc-toggle__sentinel {
display: none;
}
@supports selector(.cf_modal:has(details[open])) {
.cf_modal:not(:has(.zc-toggle[open]))
ul:has(> .cf_consent-element),
.cf_modal:not(:has(.zc-toggle[open]))
.cf_consent-vendorlist-button,
.cf_modal:not(:has(.zc-toggle[open]))
.cf_consent-vendors-list,
.cf_modal:not(:has(.zc-toggle[open]))
.cf_button--save,
.cf_modal:not(:has(.zc-toggle[open]))
hr {
display: none;
}
.cf_modal:has(.zc-toggle[open]) {
width: min(470px, calc(100vw - (var(--zc-gap) * 2)));
padding: 22px;
--padding: 22px;
}
.cf_modal:has(.zc-toggle[open]) .cf_button--accept {
box-shadow:
0 2px 7px color-mix(in srgb, var(--zc-brand) 18%, transparent);
}
}
.cf_modal hr {
height: 1px;
margin: 14px 0;
border: 0;
background: var(--zc-border-soft);
}
.cf_modal ul {
margin: 12px 0 0;
padding: 0;
}
.cf_consent-element {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
background: transparent;
border: 1px solid var(--zc-border-soft);
border-radius: 7px;
transition:
background 140ms ease,
border-color 140ms ease;
}
.cf_consent-element + .cf_consent-element {
margin-top: 5px;
}
.cf_consent-element:hover {
background: var(--zc-soft);
border-color: var(--zc-border);
}
.cf_consent-element label {
grid-column: 1;
}
.cf_consent-element > div:last-child {
grid-column: 2;
display: flex;
align-items: center;
padding-top: 0;
}
.cf_consent-element__checkbox-wrapper {
display: flex;
align-items: center;
}
.cf_consent-element summary,
.cf_modal details:not(.zc-toggle) > summary {
list-style: none;
cursor: pointer;
margin: 0;
font-size: 0.775rem;
font-weight: 500;
line-height: 1.35;
color: var(--zc-ink);
}
.cf_consent-element summary::-webkit-details-marker,
.cf_modal details:not(.zc-toggle) > summary::-webkit-details-marker {
display: none;
}
.cf_consent-element summary::before,
.cf_modal details:not(.zc-toggle) > summary::before {
content: "›";
display: inline-block;
width: 12px;
color: var(--zc-brand);
transition: transform 140ms ease;
}
.cf_consent-element details[open] > summary::before,
.cf_modal details:not(.zc-toggle)[open] > summary::before {
transform: rotate(90deg);
}
.cf_consent-element h3 {
margin: 0;
font-size: 0.775rem;
font-weight: 500;
line-height: 1.35;
color: var(--zc-ink);
}
.cf_consent-element p {
margin: 6px 0 0 12px;
font-size: 0.72rem;
line-height: 1.45;
color: var(--zc-muted);
}
details > :nth-child(2) {
margin-top: 6px;
font-size: 0.72rem;
line-height: 1.45;
color: var(--zc-muted);
}
.cf_modal input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--zc-brand);
cursor: pointer;
}
.cf_consent-vendorlist-button {
margin: 7px 0 0;
padding: 3px 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.72rem;
font-weight: 500;
color: var(--zc-brand);
cursor: pointer;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.cf_consent-vendorlist-button:hover {
color: var(--zc-brand-hover);
}
.cf_label {
margin-left: 0.5em;
font-size: 0.7rem;
font-weight: 400;
color: var(--zc-muted);
}
.cf_consent-vendors-list {
margin: 7px 0 0;
padding: 0;
list-style: none;
font-size: 0.72rem;
}
.cf_consent-vendors-list a {
color: var(--zc-brand);
text-decoration: underline;
text-underline-offset: 2px;
}
.cf_consent-buttons {
display: flex;
align-items: stretch;
gap: 6px;
margin: 14px 0 0;
padding: 0;
background: transparent;
}
.cf_button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
height: 36px;
margin: 0;
padding: 0 11px;
border: 1px solid transparent;
border-radius: 4px;
font: inherit;
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition:
background 140ms ease,
color 140ms ease,
border-color 140ms ease,
transform 140ms ease,
box-shadow 140ms ease;
}
.cf_button:active {
transform: translateY(1px);
}
.cf_button--accept {
background: var(--zc-brand);
color: var(--zc-on-brand);
border-color: var(--zc-brand);
box-shadow:
0 2px 5px color-mix(in srgb, var(--zc-brand) 12%, transparent);
}
.cf_button--accept:hover {
background: var(--zc-brand-hover);
border-color: var(--zc-brand-hover);
}
.cf_button--reject,
.cf_button--save {
background: transparent;
color: var(--zc-ink);
border-color: var(--zc-border);
}
.cf_button--reject:hover,
.cf_button--save:hover {
background: var(--zc-soft);
border-color: var(--zc-border);
}
.cf_modal :where(
a,
button,
input
):focus-visible {
outline: 2px solid color-mix(in srgb, var(--zc-brand) 55%, var(--zc-paper));
outline-offset: 2px;
}
@supports selector(.cf_modal:has(details[open])) {
.cf_modal:has(.zc-toggle[open]) .cf_consent-element,
.cf_modal:has(.zc-toggle[open]) .cf_consent-vendorlist-button,
.cf_modal:has(.zc-toggle[open]) .cf_button--save {
opacity: 1;
transform: translateY(0);
transition:
opacity 180ms ease,
transform 180ms ease;
}
@starting-style {
.cf_modal:has(.zc-toggle[open]) .cf_consent-element,
.cf_modal:has(.zc-toggle[open]) .cf_consent-vendorlist-button,
.cf_modal:has(.zc-toggle[open]) .cf_button--save {
opacity: 0;
transform: translateY(-4px);
}
}
}
@media (max-width: 560px) {
.cf_modal {
--zc-gap: 10px;
width: calc(100vw - (var(--zc-gap) * 2));
padding: 16px;
--padding: 16px;
border-radius: 12px;
}
.cf_modal:has(.zc-toggle[open]) {
width: calc(100vw - (var(--zc-gap) * 2));
padding: 18px;
--padding: 18px;
}
.cf_consent-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
}
.cf_button--save {
grid-column: 1 / -1;
}
}
@media (max-width: 380px) {
.cf_consent-buttons {
grid-template-columns: 1fr;
}
.cf_button--save {
grid-column: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cf_modal {
animation: none !important;
}
.cf_modal,
.cf_modal *,
.cf_modal *::before,
.cf_modal *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
details[data-show=""] {
display: none;
}
添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论