ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Fredrik Jonsson 2026-09-27 22:35:43 +02:00
commit 6d4ee822a8
5 changed files with 86 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/_colors.css
View file

@ -71,7 +71,7 @@
/* Link colours. */
--color-link: light-dark(var(--color-brand-500), var(--color-grey-100));
--color-link-visited: light-dark(var(--color-brand-500), var(--color-grey-100));
--color-link-hover: light-dark(var(--color-brand-200), var(--color-brand-400));
--color-link-hover: light-dark(var(--color-brand-200), var(--color-grey-300));
--color-link-active: light-dark(var(--color-red), var(--color-red));
/* Button colours. */
@ -86,7 +86,7 @@
/* Border colours. */
--color-border: light-dark(var(--color-brand-400), var(--color-brand-200));
--color-border-light: light-dark(var(--color-brand-200), var(--color-brand-400));
--color-border-light: light-dark(var(--color-brand-200), var(--color-brand-100));
--color-border-dark: light-dark(var(--color-brand-600), var(--color-brand-300));
/* Background colours. */

16
assets/css/_zen.css
View file

@ -170,7 +170,7 @@ article {
border: unset;
text-shadow: unset;
font-size: var(--fs-l);
color: var(--color-border);
color: var(--color-border-light);
rotate: 90deg;
cursor: pointer;
@ -186,12 +186,22 @@ article {
}
.flash-item {
--color-flash: var(--color-warning);
--color-flash-bg: light-dark(
oklch(from var(--color-flash) 100% 0.03 h),
oklch(from var(--color-flash) calc(l - 0.3) c h)
);
--color-flash-border: light-dark(
oklch(from var(--color-flash) calc(l + 0.2) c h),
oklch(from var(--color-flash) calc(l - 0.07) c h)
);
animation: --flash 500ms ease-in-out 1ms;
}
@keyframes --flash {
50% {
border-color: var(--color-warning);
background-color: var(--color-warning-bg);
border-color: var(--color-flash-border);
background-color: var(--color-flash-bg);
}
}

23
assets/css/base/_forms.css
View file

@ -32,10 +32,21 @@ label {
/* Valid and invalid state. */
input,
textarea {
--color-input: currentColor;
--color-input-bg: light-dark(
oklch(from var(--color-input) 100% 0.03 h),
oklch(from var(--color-input) calc(l - 0.4) c h)
);
--color-input-border: light-dark(
oklch(from var(--color-input) calc(l + 0.2) c h),
oklch(from var(--color-input) calc(l - 0.07) c h)
);
&:user-valid {
border-color: var(--color-success);
--color-input: var(--color-success);
border-color: var(--color-input-border);
border-style: solid;
background-color: var(--color-success-bg);
background-color: var(--color-input-bg);
}
&:focus:user-valid {
@ -43,14 +54,16 @@ textarea {
}
&:user-invalid {
border-color: var(--color-error);
--color-input: var(--color-error);
border-color: var(--color-input-border);
border-style: solid;
background-color: var(--color-error-bg);
background-color: var(--color-input-bg);
}
&:focus:user-invalid {
--color-input: var(--color-warning);
border-color: transparent;
background-color: var(--color-warning-bg);
background-color: var(--color-input-bg);
}
}

59
assets/css/components/_button.css
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

21
assets/css/components/_cookieconsent.css
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;