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 <noreply@anthropic.com>

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,7 +85,50 @@ 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

assets/js/hugo_cookie_consent/cookie_consent.js

@@ -1,7 +1,14 @@
 (function () {
   var KEY = 'cookie_consent';
   var banner = document.getElementById('cookie-banner');
-  if (!banner) return;
+  if (!banner) {
+    console.error(
+      '[hugo_cookie_consent] #cookie-banner not found in the DOM. ' +
+      'Did you include the hugo_cookie_consent/banner.html partial in your site\'s layout? ' +
+      'See the module README ("Installation in your Hugo site").'
+    );
+    return;
+  }
   updateStatus();
 
   var consent = localStorage.getItem(KEY);

assets/js/hugo_cookie_consent/tracker_code.js

@@ -1,6 +1,6 @@
 (function () {
   function trackVisit() {
-    var banner = document.getElementById('cookie_banner');
+    var banner = document.getElementById('cookie-banner');
     if (!banner) return;
     var matomoUrl = banner.dataset.matomoUrl;
     var siteId = banner.dataset.matomoSiteId;

assets/scss/hugo_cookie_consent.scss

@@ -0,0 +1,78 @@
+#cookie-banner {
+  color: var(--cookie-banner-color, #E2E8F0);
+  background-color: var(--cookie-banner-bg, #4A5568);
+  position: fixed;
+  top: var(--cookie-banner-top, 2.5rem);
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100vw - 2rem);
+  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: var(--cookie-banner-z-index, 9999);
+  transition: opacity 0.5s ease;
+
+  @media (max-width: 420px) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+}
+
+#cookie-banner.fade-out {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#cookie-banner p {
+  margin: 0;
+  font-size: var(--cookie-banner-font-size, 14px);
+  flex: 1;
+}
+
+#cookie-banner .cookie-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+
+  @media (max-width: 420px) {
+    width: 100%;
+
+    button {
+      flex: 1;
+    }
+  }
+}
+
+#cookie-banner button {
+  margin: 0.1rem 0;
+  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: var(--cookie-button-font-size, 13px);
+  white-space: nowrap;
+}
+
+#cookie-accept {
+  background: var(--cookie-accept-bg, #4A5E52);
+  color: var(--cookie-accept-color, #fff);
+  border-color: var(--cookie-accept-border-color, #1a1a1a);
+}
+
+#cookie-decline {
+  background: var(--cookie-decline-bg, #2D3748);
+  color: var(--cookie-decline-color, #fff);
+  border-color: var(--cookie-decline-border-color, #1a1a1a);
+}
+
+#cookie-settings-button {
+  background: var(--cookie-settings-bg, #272b2e);
+  color: var(--cookie-settings-color, #fff);
+  border-color: var(--cookie-settings-border-color, #1a1a1a);
+}

assets/scss/hugo_cookie_consent/style.scss

@@ -1,42 +0,0 @@
-#cookie-banner {
-  position: fixed;
-  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 4px 24px rgba(0,0,0,.08);
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  z-index: 9999;
-  transition: opacity 0.5s ease;
-}
-
-#cookie-banner.fade-out {
-  opacity: 0;
-  pointer-events: none;
-}
-
-#cookie-banner p { margin: 0; font-size: 14px; flex: 1; }
-
-#cookie-banner button {
-  margin: 0.1rem 0;
-  padding: .45rem 1rem;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-#cookie-accept {
-  background: #0b913a; color: #fff; border-color: #1a1a1a;
-}
-
-#cookie-decline {
-  background: #272b2e; color: #fff; border-color: #1a1a1a;
-}

layouts/_partials/hugo_cookie_consent/banner.html

@@ -1,14 +1,14 @@
 <div id="cookie-banner" style="display:none" role="dialog"
   aria-label="Cookie consent" aria-live="polite"
   data-matomo-url="{{ .Site.Params.hugo_cookie_consent.matomo_host }}"
-  data-matomo-site-id="{{ .Site.Params.hugo_cookie_consent_matomo_site_id }}" >
+  data-matomo-site-id="{{ .Site.Params.hugo_cookie_consent.matomo_site_id }}" >
   <p>
     {{ i18n "site_wants_cookie" }}
     <a href="{{ .Site.Params.hugo_cookie_consent.privacy_policy_url }}">
       {{ i18n "cookie_more_info" }}
     </a>
   </p>
-  <div>
+  <div class="cookie-buttons">
     <button id="cookie-accept">
       {{ i18n "cookie_button_accept" }}
     </button>

layouts/_partials/hugo_cookie_consent/scripts.html

@@ -4,3 +4,4 @@
   {{- $js := resources.Get "js/hugo_cookie_consent/tracker_code.js" | minify -}}
   <script src="{{ $js.RelPermalink }}" defer></script>
 {{- end -}}
+

layouts/_shortcodes/hugo_cookie_consent/settings.html

@@ -1,12 +1,12 @@
 <p>
   {{ i18n "cookie_status" }}:
-  <strong id="cookie_status"
+  <strong id="cookie-status"
     data-accepted="{{ i18n "cookie_accepted" }}"
     data-declined="{{ i18n "cookie_declined" }}"
     data-none="{{ i18n "cookie_none" }}">
     &mdash;
   </strong>
 </p>
-<button onclick="reopenCookieBanner()">
+<button id="cookie-settings-button" onclick="reopenCookieBanner()">
   {{ i18n "cookie_change" }}
 </button>