Correcting bugs in warming-bg color, dark mode etc.

This commit is contained in:
Fredrik Jonsson 2026-09-27 22:35:43 +02:00
commit 6d4ee822a8
2 changed files with 86 additions and 37 deletions

View file

@ -9,7 +9,9 @@
text-decoration: none;
text-align: center;
width: fit-content;
padding: 0.2rem 1rem;
padding: 0.5rem 1rem;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
/* Improve usability and consistency of cursor style between image-type `input` and others. */
cursor: pointer;
@ -34,7 +36,7 @@
.button--small {
font-size: var(--fs-xs);
padding: 0.2rem 0.75rem;
padding: 0.35rem 0.5rem;
}
.button--alt {
@ -54,40 +56,49 @@
background: var(--color-button-text);
}
.button--accept {
color: var(--color-success);
border-color: var(--color-success);
.button--accept,
.button--decline,
.button--delete {
--color-button: currentColor;
--color-button-text: light-dark(
oklch(from var(--color-button) l c h),
oklch(from var(--color-button) 100% 0.03 h)
);
--color-button-bg: light-dark(
oklch(from var(--color-button) 100% 0.03 h),
oklch(from var(--color-button) calc(l - 0.3) c h)
);
--color-button-border: light-dark(
oklch(from var(--color-button) calc(l + 0.2) c h),
oklch(from var(--color-button) calc(l - 0.07) c h)
);
--color-button-hover: light-dark(
oklch(from var(--color-button) 90% 0.03 h),
oklch(from var(--color-button) calc(l - 0.6) c h)
);
color: var(--color-button-text);
background: linear-gradient(var(--color-button-bg), var(--color-button-hover));
border-color: var(--color-button-border);
&:hover,
&:focus-visible,
&:active {
color: var(--color-button-text);
background: var(--color-success);
background: linear-gradient(var(--color-button-hover), var(--color-button-bg));
}
}
.button--accept {
--color-button: var(--color-success);
}
.button--decline {
color: var(--color-warning);
border-color: var(--color-warning);
&:hover,
&:focus-visible,
&:active {
color: var(--color-button-text);
background: var(--color-warning);
}
--color-button: var(--color-warning);
}
.button--delete {
color: var(--color-error);
border-color: var(--color-error);
&:hover,
&:focus-visible,
&:active {
color: var(--color-button-text);
background: var(--color-error);
}
--color-button: var(--color-error);
}
/* The disabled variation should always go last, so that it overrides any

View file

@ -1,6 +1,16 @@
/* 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;
@ -9,14 +19,19 @@
bottom: 0;
width: 100%;
padding: var(--spacing-xs);
color: var(--color-warning);
background-color: var(--color-warning-bg);
border-block-start: 4px solid var(--color-warning);
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;