From 1ea70c6d26e1697bb4d119ac40e72c1dc2192fee Mon Sep 17 00:00:00 2001 From: Daniel Kraus Date: Sat, 8 Aug 2026 21:01:18 +0200 Subject: [PATCH] Make banner and button styling configurable via CSS custom properties Sites had to copy the entire stylesheet to change colors or sizing. Every value is now backed by a --cookie-* custom property with the original value as fallback, so sites can override just what they need from their own CSS. Also fixes the README's @import path, which had gone stale since the stylesheet was renamed and moved in 5597e11. Co-Authored-By: Claude Sonnet 5 --- README.md | 49 ++++++++++++++++++++++++++-- assets/scss/hugo_cookie_consent.scss | 40 +++++++++++++---------- 2 files changed, 69 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index dbcbca1..5117e5a 100644 --- a/README.md +++ b/README.md @@ -49,10 +49,10 @@ structure with `_partials` and `_shortcode` directories with leading underscores ``` 6. Ensure that the SCSS style sheet is being loaded, e.g. by adding this line to - your main *.css file: + your main *.scss file: ```scss - @import "hugo_cookie_consent/style"; + @import "hugo_cookie_consent"; ``` 7. Optionally, insert a `hugo_cookie_consent/settings` partial somewhere on your @@ -85,8 +85,51 @@ hugo_cookie_consent: | `matomo_host` | URL of the Matomo host. | | `matomo_site_id` | Matomo site ID to use for tracking. | +## Styling + +The banner and its buttons are styled with a small set of [CSS custom +properties][css-vars], each with a sensible default baked in. To adjust the +look of the banner on your site, set any of these properties in your own +stylesheet (no need to copy or override `hugo_cookie_consent.scss`): + +```css +:root { + --cookie-banner-bg: #1e293b; + --cookie-banner-color: #f1f5f9; + --cookie-accept-bg: #16a34a; + --cookie-decline-bg: #dc2626; +} +``` + +| Custom property | Default | Applies to | +|----------------------------------|-----------------|---------------------------------------------| +| `--cookie-banner-bg` | `#4A5568` | Banner background | +| `--cookie-banner-color` | `#E2E8F0` | Banner text color | +| `--cookie-banner-border-color` | `#e2e2e2` | Banner border | +| `--cookie-banner-border-radius` | `12px` | Banner corner radius | +| `--cookie-banner-shadow` | `0 0 36px #111` | Banner drop shadow | +| `--cookie-banner-max-width` | `480px` | Banner max width | +| `--cookie-banner-top` | `2.5rem` | Banner distance from top of viewport | +| `--cookie-banner-padding` | `1rem 1.25rem` | Banner inner padding | +| `--cookie-banner-font-size` | `14px` | Banner message text size | +| `--cookie-banner-z-index` | `9999` | Banner stacking order | +| `--cookie-button-padding` | `.45rem 1rem` | All buttons | +| `--cookie-button-border-radius` | `8px` | All buttons | +| `--cookie-button-border-color` | `#ccc` | All buttons (overridden by the three below) | +| `--cookie-button-font-size` | `13px` | All buttons | +| `--cookie-accept-bg` | `#4A5E52` | Accept button background | +| `--cookie-accept-color` | `#fff` | Accept button text | +| `--cookie-accept-border-color` | `#1a1a1a` | Accept button border | +| `--cookie-decline-bg` | `#2D3748` | Decline button background | +| `--cookie-decline-color` | `#fff` | Decline button text | +| `--cookie-decline-border-color` | `#1a1a1a` | Decline button border | +| `--cookie-settings-bg` | `#272b2e` | Settings-shortcode button background | +| `--cookie-settings-color` | `#fff` | Settings-shortcode button text | +| `--cookie-settings-border-color` | `#1a1a1a` | Settings-shortcode button border | + [anthropic claude]: https://claude.ai +[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties [gdpr]: https://en.wikipedia.org/wiki/GDPR [matomo]: https://matomo.org [mod-doc]: https://gohugo.io/hugo-modules/use-modules/#import -[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0 \ No newline at end of file +[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0 diff --git a/assets/scss/hugo_cookie_consent.scss b/assets/scss/hugo_cookie_consent.scss index 8c0fd9c..e92ee85 100644 --- a/assets/scss/hugo_cookie_consent.scss +++ b/assets/scss/hugo_cookie_consent.scss @@ -1,20 +1,20 @@ #cookie-banner { - color: #E2E8F0; - background-color: #4A5568; + color: var(--cookie-banner-color, #E2E8F0); + background-color: var(--cookie-banner-bg, #4A5568); position: fixed; - top: 2.5rem; + top: var(--cookie-banner-top, 2.5rem); left: 50%; transform: translateX(-50%); width: calc(100vw - 2rem); - max-width: 480px; - border: 1px solid #e2e2e2; - border-radius: 12px; - padding: 1rem 1.25rem; - box-shadow: 0 0 36px #111; + max-width: var(--cookie-banner-max-width, 480px); + border: 1px solid var(--cookie-banner-border-color, #e2e2e2); + border-radius: var(--cookie-banner-border-radius, 12px); + padding: var(--cookie-banner-padding, 1rem 1.25rem); + box-shadow: var(--cookie-banner-shadow, 0 0 36px #111); display: flex; align-items: center; gap: 1rem; - z-index: 9999; + z-index: var(--cookie-banner-z-index, 9999); transition: opacity 0.5s ease; @media (max-width: 420px) { @@ -31,7 +31,7 @@ #cookie-banner p { margin: 0; - font-size: 14px; + font-size: var(--cookie-banner-font-size, 14px); flex: 1; } @@ -51,22 +51,28 @@ #cookie-banner button { margin: 0.1rem 0; - padding: .45rem 1rem; - border-radius: 8px; - border: 1px solid #ccc; + padding: var(--cookie-button-padding, .45rem 1rem); + border-radius: var(--cookie-button-border-radius, 8px); + border: 1px solid var(--cookie-button-border-color, #ccc); cursor: pointer; - font-size: 13px; + font-size: var(--cookie-button-font-size, 13px); white-space: nowrap; } #cookie-accept { - background: #4A5E52; color: #fff; border-color: #1a1a1a; + background: var(--cookie-accept-bg, #4A5E52); + color: var(--cookie-accept-color, #fff); + border-color: var(--cookie-accept-border-color, #1a1a1a); } #cookie-decline { - background: #2D3748; color: #fff; border-color: #1a1a1a; + background: var(--cookie-decline-bg, #2D3748); + color: var(--cookie-decline-color, #fff); + border-color: var(--cookie-decline-border-color, #1a1a1a); } #cookie-settings-button { - background: #272b2e; color: #fff; border-color: #1a1a1a; + background: var(--cookie-settings-bg, #272b2e); + color: var(--cookie-settings-color, #fff); + border-color: var(--cookie-settings-border-color, #1a1a1a); }