47 lines
1 KiB
CSS
47 lines
1 KiB
CSS
/* Cookieconsent */
|
|
|
|
.cookieconsent {
|
|
--color-cookieconsent: var(--color-warning);
|
|
--color-cookieconsent-text: light-dark(
|
|
oklch(from var(--color-cookieconsent) l c h),
|
|
oklch(from var(--color-cookieconsent) 100% 0.03 h)
|
|
);
|
|
--color-cookieconsent-bg: light-dark(
|
|
oklch(from var(--color-cookieconsent) 100% 0.03 h),
|
|
oklch(from var(--color-cookieconsent) calc(l + 0.07) c h)
|
|
);
|
|
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
position: sticky;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: var(--spacing-xs);
|
|
color: var(--color-cookieconsent-text);
|
|
background-color: var(--color-body-bg);
|
|
border-block-start: 4px solid var(--color-cookieconsent-text);
|
|
font-size: var(--fs-s);
|
|
transform: translateY(100vh);
|
|
transition: all 130ms ease-out;
|
|
z-index: 99;
|
|
|
|
.cookieconsent__message {
|
|
font-family: var(--ff-alt);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.cookieconsent__actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
[data-cookieconsentopen] {
|
|
transform: translateY(0);
|
|
}
|