daniel/hugo_cookie_consent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make banner and button styling configurable via CSS custom properties

Browse Source 
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>
This commit is contained in:
daniel
2026-08-08 21:01:18 +02:00
co-authored by Claude Sonnet 5
parent 3f511f5e6f
commit 1ea70c6d26
2 changed files with 69 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/hugo_cookie_consent.scss
+23 -17
View File
@@ -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);
}