Skip to content

Commit 547a196

Browse files
repletereplete
committed
Make themable
- change hide selector - rename css variables - update README
1 parent be838eb commit 547a196

15 files changed

Lines changed: 192 additions & 151 deletions

‎README.md‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# biscuitman.js 🍪 Lightweight Consent Manager
22

3-
![screenshot of main UI](media/readmebanner.webp)
3+
![screenshot of main UI](media/ui.webp)
44

55
#### [View demo](https://replete.github.io/biscuitman)
66

@@ -12,6 +12,7 @@
1212
- Cookies/localstorage items removed on rejection/invalidation, if cookie details added
1313
- Fully customizable strings so you can serve localized strings if you want
1414
- Overridable localStorage key, consent global
15+
- Basic color theming via CSS variables
1516
- Simple flat configuration object
1617
- Injects scripts when granular consent is granted (`<script data-consent="analytics" type="text/plain" src="..."></script>`)
1718
- Injects embedded 'after' `<script>` from script tags with `src` properties on onload (= less markup)
@@ -32,11 +33,9 @@
3233
- allows easier event setting with `.on('revoke', (sec) => { if (sec === 'analytics') window.reload() )})`
3334
- `import biscuitman from '/dist/esm/biscuitman.withcss.mjs'; let bm = biscuitman.create(options);`
3435
- experimental stage, only worth maintaining if the codebase remains pretty much the same, consider this another packaging option
35-
- see [ESM Module version demo](https://replete.github.io/biscuitman/index-esm.htmls) to see how to use it
36+
- see [ESM version demo](https://replete.github.io/biscuitman/index-esm.htmls) to see how to use it
3637
- preliminary e2e tests ![tests](https://github.com/replete/biscuitman/actions/workflows/node.js.yml/badge.svg)
3738

38-
![screenshot of main UI](media/ui.webp)
39-
4039
## How to use
4140
[View demo](https://replete.github.io/biscuitman) for a more detailed example
4241

@@ -131,9 +130,31 @@ While you have the option to enable or disable some or all of these cookies, not
131130
<link rel="stylesheet" href="biscuitman.min.css"/>
132131
```
133132

133+
## Theme CSS
134+
135+
```
136+
/* hacker mode */
137+
.biscuitman {
138+
--c: limegreen;
139+
--bg: #000;
140+
--tx: #fff;
141+
--ui: 255,255,255;
142+
font-family: monospace;
143+
}
144+
/* Dark mode */
145+
@media (prefers-color-scheme: dark) {
146+
.biscuitman {
147+
--c: #1586c6;
148+
--bg: #000;
149+
--tx: #fff;
150+
--ui: 255,255,255;
151+
}
152+
}
153+
```
154+
134155
If you want to make sure website content obscured underneath the banner, add these styles to your website CSS:
135156
```css
136-
html:not(:has(.bm-hide))::after {
157+
html:not(.bm-hide)::after {
137158
content:'';
138159
min-height:300px;
139160
display:block;
@@ -142,8 +163,8 @@ html:not(:has(.bm-hide))::after {
142163
```
143164

144165
## Globals
145-
- `biscuitman` – configuration object, must be `window.biscuitman`
146-
- `Consent` – object for accessing consents (override: `global` in `window.biscuitman`)
166+
- `biscuitman` – configuration object, must be `window.biscuitman` (`biscuitman.create(options)` for ESM version)
167+
- `Consent` – object for accessing consents (override: `global` in config)
147168
```
148169
{
149170
"consentTime": 1717846660979,
@@ -161,8 +182,8 @@ html:not(:has(.bm-hide))::after {
161182

162183
## CSS Classes
163184

164-
- `biscuitman`, `bm-hide` on UI container
165-
- `bm-{sectionName}`, `bm-no-{sectionName}` on `<html>` for consent state
185+
- `biscuitman` on UI container
186+
- `bm-{sectionName}`, `bm-no-{sectionName}`, `bm-hide` on `<html>`
166187

167188
## Events
168189

@@ -208,6 +229,7 @@ Visiting `https://localhost:3000` should now work without warnings.
208229
Jest is set up with puppeteer to run some integration tests. We're using `@swc/jest`'s rust implementation of jest to speed things up. This is only chromium for now, but at some point it would be good to implement browserStack selenium tests to automate browser compatibility checks.
209230

210231
`npm run test` - Launches pupeeter integration tests in a browser (in http mode only)
232+
211233
`npm run coverage` - run jest tests with coverage saved to `/coverage/`
212234

213235

‎dist/biscuitman.css‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
/*! biscuitman.js 0.3.14 */
1+
/*! biscuitman.js 0.3.15 */
22
.biscuitman {
3-
--t: #444;
4-
--b: #fff;
3+
--ui: 0, 0, 0;
4+
--tx: #444;
5+
--bg: #fff;
56
--c: #105d89;
6-
background: var(--b);
7+
background: var(--bg);
78
box-sizing: border-box;
89
z-index: 3;
910
width: 100%;
@@ -16,8 +17,10 @@
1617

1718
.biscuitman * {
1819
box-sizing: border-box;
20+
color: var(--tx);
1921
margin: 0;
2022
padding: 0;
23+
font-family: inherit;
2124
font-size: 16px;
2225
line-height: 1.4em;
2326
}
@@ -26,14 +29,6 @@
2629
transform: translateY(100%);
2730
}
2831

29-
.biscuitman.bm-hide {
30-
padding: 0;
31-
}
32-
33-
.biscuitman.bm-hide article {
34-
display: none;
35-
}
36-
3732
.biscuitman article {
3833
position: relative;
3934
}
@@ -54,7 +49,7 @@
5449
}
5550

5651
.biscuitman article p {
57-
color: var(--t);
52+
color: var(--tx);
5853
margin: 10px 0;
5954
font-size: 13px;
6055
}
@@ -66,7 +61,7 @@
6661
}
6762

6863
.biscuitman button {
69-
background: var(--b);
64+
background: var(--bg);
7065
border: 2px solid var(--c);
7166
color: var(--c);
7267
cursor: pointer;
@@ -79,11 +74,11 @@
7974

8075
.biscuitman button[data-id="accept"] {
8176
background: var(--c);
82-
color: var(--b) !important;
77+
color: var(--bg) !important;
8378
}
8479

8580
.biscuitman button[data-id="close"] {
86-
color: #000;
81+
color: rgba(var(--ui), .5);
8782
opacity: .6;
8883
-webkit-user-select: none;
8984
user-select: none;
@@ -130,6 +125,7 @@
130125
}
131126

132127
.biscuitman dialog {
128+
background: var(--bg);
133129
border: 0;
134130
width: 100%;
135131
max-width: 100%;
@@ -173,7 +169,7 @@
173169

174170
.biscuitman .bm-dialog > b:after {
175171
content: "";
176-
background: linear-gradient(180deg, var(--b) 20%, transparent);
172+
background: linear-gradient(180deg, var(--bg) 20%, transparent);
177173
pointer-events: none;
178174
z-index: 1;
179175
width: 100%;
@@ -186,7 +182,7 @@
186182

187183
.biscuitman .bm-dialog nav:after {
188184
content: "";
189-
background: linear-gradient(0deg, var(--b) 20%, transparent);
185+
background: linear-gradient(0deg, var(--bg) 20%, transparent);
190186
pointer-events: none;
191187
width: 100%;
192188
height: 25px;
@@ -196,7 +192,7 @@
196192
}
197193

198194
.biscuitman .bm-sections {
199-
scrollbar-color: #ddd var(--b);
195+
scrollbar-color: rgba(var(--ui), .2) var(--bg);
200196
flex-shrink: 1;
201197
height: 100%;
202198
padding: 15px 0;
@@ -255,7 +251,7 @@
255251
}
256252

257253
.biscuitman details {
258-
border: 1px solid #ccc;
254+
border: 1px solid rgba(var(--ui), .2);
259255
border-radius: 5px;
260256
padding: 10px;
261257
list-style: none;
@@ -283,8 +279,9 @@
283279

284280
.biscuitman summary b:after {
285281
content: "";
286-
border: 5px solid #777;
287-
border-color: #0000 #777 #777 #0000;
282+
border: 5px solid rgba(var(--ui), .4);
283+
border-top-color: #0000;
284+
border-left-color: #0000;
288285
border-radius: 2px;
289286
width: 1em;
290287
height: 1em;
@@ -294,7 +291,7 @@
294291
}
295292

296293
.biscuitman summary p {
297-
color: var(--t);
294+
color: var(--tx);
298295
font-size: 14px;
299296
}
300297

@@ -311,15 +308,15 @@
311308
}
312309

313310
.biscuitman dl {
314-
background: #eee;
311+
background: rgba(var(--ui), .08);
315312
margin: 10px;
316313
padding: 10px;
317314
display: flex;
318315
}
319316

320317
.biscuitman dl dt, .biscuitman dl dd {
321-
color: var(--t);
322-
font-size: 13px;
318+
color: var(--tx);
319+
font-size: 12px;
323320
}
324321

325322
.biscuitman dl dt {
@@ -334,8 +331,8 @@
334331
--gap: 2px;
335332
height: var(--height);
336333
width: var(--width);
334+
background-color: rgba(var(--ui), .3);
337335
border-radius: var(--height);
338-
background-color: #999;
339336
margin-top: -2px;
340337
display: block;
341338
position: absolute;
@@ -347,7 +344,7 @@
347344

348345
.biscuitman label:before {
349346
content: "";
350-
background: var(--b);
347+
background: var(--bg);
351348
height: calc(var(--height) - calc(var(--gap) * 2));
352349
width: calc(var(--height) - calc(var(--gap) * 2));
353350
height: var(--height);
@@ -376,9 +373,17 @@
376373
}
377374

378375
.biscuitman label.disabled.checked {
379-
opacity: .6;
376+
opacity: .5;
380377
}
381378

382379
.biscuitman label input {
383380
opacity: 0;
384381
}
382+
383+
html.bm-hide .biscuitman {
384+
padding: 0;
385+
}
386+
387+
html.bm-hide .biscuitman article {
388+
display: none;
389+
}

‎dist/biscuitman.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! biscuitman.js 0.3.14 */
1+
/*! biscuitman.js 0.3.15 */
22
((d, w, O, h, bm)=>{
33
const defaults = {
44
key: 'myconsent',
@@ -91,7 +91,7 @@
9191
}));
9292
d.body.appendChild(ui);
9393
}
94-
const displayUI = (show)=>ui.classList.toggle('bm-hide', !show);
94+
const displayUI = (show)=>h.classList.toggle('bm-hide', !show);
9595
const applyCssClasses = ()=>{
9696
let { consentTime, ...consents } = getConsents();
9797
// if (!consentTime) h.className = h.className.replace(/\bbm-[^\s]+(\s+|$)/g, '').trim();

‎dist/biscuitman.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)