Skip to content

Commit 5d9ed39

Browse files
ibnesayeedibnesayeed
authored
Merge pull request #10 from internetarchive/cssvar
Style customization with CSS variables
2 parents 817ee06 + 8ae23eb commit 5d9ed39

File tree

4 files changed

+261
-85
lines changed

4 files changed

+261
-85
lines changed

‎webcomponent/README.md‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,58 @@ The code below illustrates the usage of these attributes.
3535
</cdx-summary>
3636
```
3737

38-
Override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
38+
Customize the style of various parts using any of the following CSS custom properties (variables).
39+
For example, override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
3940

4041
```css
41-
:root {
42-
--cdxsummary-thumb-scale: 0.25;
42+
cdx-summary {
43+
--cdxsummary-main-txt-color: initial;
44+
--cdxsummary-main-bg-color: initial;
45+
--cdxsummary-main-font-family: sans-serif;
46+
--cdxsummary-main-font-size: initial;
47+
--cdxsummary-main-margin: 0;
48+
--cdxsummary-main-padding: 5px;
49+
--cdxsummary-mono-font-family: monospace;
50+
--cdxsummary-link-txt-color: blue;
51+
--cdxsummary-link-txt-decoration: underline;
52+
--cdxsummary-link-bg-color: inherit;
53+
--cdxsummary-info-txt-color: inherit;
54+
--cdxsummary-info-bg-color: inherit;
55+
--cdxsummary-info-font-family: inherit;
56+
--cdxsummary-info-font-size: inherit;
57+
--cdxsummary-info-font-style: italic;
58+
--cdxsummary-info-border: initial;
59+
--cdxsummary-info-border-radius: initial;
60+
--cdxsummary-info-margin: 5px;
61+
--cdxsummary-info-padding: 5px;
62+
--cdxsummary-h2-txt-color: inherit;
63+
--cdxsummary-h2-bg-color: inherit;
64+
--cdxsummary-h2-font-family: inherit;
65+
--cdxsummary-h2-font-size: 1.5em;
66+
--cdxsummary-h2-margin: 1em 0 0.7em;
67+
--cdxsummary-h2-padding: initial;
68+
--cdxsummary-tbl-txt-color: inherit;
69+
--cdxsummary-tbl-bg-color: inherit;
70+
--cdxsummary-tbl-hdr-txt-color: white;
71+
--cdxsummary-tbl-hdr-bg-color: gray;
72+
--cdxsummary-tbl-alt-txt-color: inherit;
73+
--cdxsummary-tbl-alt-bg-color: inherit;
74+
--cdxsummary-tbl-border: 1px solid gray;
75+
--cdxsummary-tbl-font-family: inherit;
76+
--cdxsummary-tbl-font-size: inherit;
77+
--cdxsummary-tbl-margin: initial;
78+
--cdxsummary-btn-txt-color: white;
79+
--cdxsummary-btn-bg-color: gray;
80+
--cdxsummary-btn-font-family: inherit;
81+
--cdxsummary-btn-font-size: inherit;
82+
--cdxsummary-btn-border: tbl-border;
83+
--cdxsummary-btn-border-radius: 5px;
84+
--cdxsummary-btn-margin: 0 0 10px;
85+
--cdxsummary-btn-padding: 5px 10px;
86+
--cdxsummary-thumb-border: tbl-border;
87+
--cdxsummary-thumb-border-radius: 5px;
88+
--cdxsummary-thumb-scale: 0.3;
4389
}
4490
```
4591

46-
An [interactive test interface](https://internetarchive.github.io/cdx-summary/webcomponent/) is available for the Web Component that renders the JSON summary.
92+
Alternatively, use the [interactive tester interface](https://internetarchive.github.io/cdx-summary/webcomponent/) to customize the style and copy the generated code for integration.

‎webcomponent/cdxsummary.js‎

Lines changed: 96 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ ${this.data.samples.map(s => s.concat(s[1].replace(/^(https?:\/\/)?(www\.)?/i, '
191191
renderSummary() {
192192
const container = this.shadow.getElementById('container');
193193
if(this.data['msg']) {
194-
container.innerHTML = `<p class="msg">${this.data['msg']}</p>`;
194+
container.innerHTML = `<p class="info"> ${this.data['msg']}</p>`;
195195
return;
196196
}
197197

@@ -246,7 +246,7 @@ ${this.topHostsTable()}
246246
247247
<h2>Random HTML Capture Samples</h2>
248248
${this.thumbs ? `
249-
<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a Sample' : `${this.thumbs} Samples`}</button>
249+
<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a sample' : `${this.thumbs} samples`}</button>
250250
<div id="sample-thumbs">
251251
${this.fold.includes('thumbs') ? '' : this.sampleThumbs()}
252252
</div>` : ''
@@ -301,18 +301,67 @@ ${this.sampleCapturesList()}
301301
this.shadow.innerHTML = `
302302
<style>
303303
#container {
304-
padding: 5px;
305-
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
304+
color: var(--cdxsummary-main-txt-color);
305+
background: var(--cdxsummary-main-bg-color);
306+
font-family: var(--cdxsummary-main-font-family, sans-serif);
307+
font-size: var(--cdxsummary-main-font-size);
308+
margin: var(--cdxsummary-main-margin);
309+
padding: var(--cdxsummary-main-padding, 5px);
310+
}
311+
pre, code {
312+
font-family: var(--cdxsummary-mono-font-family, monospace);
313+
}
314+
a {
315+
color: var(--cdxsummary-link-txt-color, blue);
316+
background: var(--cdxsummary-link-bg-color);
317+
text-decoration: var(--cdxsummary-link-txt-decoration, underline);
318+
}
319+
a:hover, a:focus {
320+
text-decoration: underline;
321+
}
322+
.info {
323+
color: var(--cdxsummary-info-txt-color);
324+
background: var(--cdxsummary-info-bg-color);
325+
font-family: var(--cdxsummary-info-font-family, var(--cdxsummary-main-font-family, sans-serif));
326+
font-size: var(--cdxsummary-info-font-size);
327+
font-style: var(--cdxsummary-info-font-style, italic);
328+
border: var(--cdxsummary-info-border);
329+
border-radius: var(--cdxsummary-info-border-radius);
330+
margin: var(--cdxsummary-info-margin, 5px);
331+
padding: var(--cdxsummary-info-padding, 5px);
332+
}
333+
.info::before {
334+
content: "i";
335+
border: 1px solid;
336+
border-radius: 0.6em;
337+
line-height: 1em;
338+
width: 1em;
339+
display: inline-block;
340+
text-align: center;
341+
}
342+
h2 {
343+
color: var(--cdxsummary-h2-txt-color);
344+
background: var(--cdxsummary-h2-bg-color);
345+
font-family: var(--cdxsummary-h2-font-family);
346+
font-size: var(--cdxsummary-h2-font-size, 1.5em);
347+
margin: var(--cdxsummary-h2-margin, 1em 0 0.7em);
348+
padding: var(--cdxsummary-h2-padding);
306349
}
307350
table {
308351
border-collapse: collapse;
309352
display: block;
310353
max-width: fit-content;
311354
overflow-x: auto;
312355
white-space: nowrap;
356+
color: var(--cdxsummary-tbl-txt-color);
357+
background: var(--cdxsummary-tbl-bg-color);
358+
font-family: var(--cdxsummary-tbl-font-family);
359+
font-size: var(--cdxsummary-tbl-font-size);
360+
margin: var(--cdxsummary-tbl-margin);
313361
}
314362
tr:nth-child(even), li:nth-child(even) {
315-
background-color: #eee;
363+
color: var(--cdxsummary-tbl-alt-txt-color);
364+
background: var(--cdxsummary-tbl-alt-bg-color);
316365
}
317366
th, td {
318367
text-align: right;
@@ -322,43 +371,25 @@ ${this.sampleCapturesList()}
322371
text-align: left;
323372
padding: 2px 10px 2px 2px;
324373
}
325-
table, thead, tfoot {
326-
border-bottom: 1px solid #333;
327-
border-top: 1px solid #333;
328-
}
329-
thead, tfoot {
330-
background: #777;
331-
color: #eee;
332-
}
333-
ul {
334-
word-break: break-all;
335-
list-style-position: inside;
336-
padding-inline-start: 0;
337-
}
338-
li a {
339-
text-decoration: none;
340-
}
341-
.msg {
342-
margin: 5px;
343-
padding: 5px;
344-
}
345-
.msg, .info {
346-
font-style: italic;
347-
}
348-
.info::before {
349-
content: "🛈 ";
350-
}
351-
summary {
352-
cursor: pointer;
374+
table, thead {
375+
border-bottom: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
353376
}
354-
details {
355-
margin-bottom: 20px;
377+
table, tfoot {
378+
border-top: var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray));
356379
}
357-
details.samples[open] summary::after {
358-
content: attr(data-open);
380+
thead, tfoot {
381+
color: var(--cdxsummary-tbl-hdr-txt-color, white);
382+
background: var(--cdxsummary-tbl-hdr-bg-color, gray);
359383
}
360-
details.samples:not([open]) summary::after {
361-
content: attr(data-close);
384+
button {
385+
color: var(--cdxsummary-btn-txt-color, var(--cdxsummary-tbl-hdr-txt-color, white));
386+
background: var(--cdxsummary-btn-bg-color, var(--cdxsummary-tbl-hdr-bg-color, gray));
387+
font-family: var(--cdxsummary-btn-font-family);
388+
font-size: var(--cdxsummary-btn-font-size);
389+
border: var(--cdxsummary-btn-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
390+
border-radius: var(--cdxsummary-btn-border-radius, 5px);
391+
margin: var(--cdxsummary-btn-margin, 0 0 10px);
392+
padding: var(--cdxsummary-btn-padding, 5px 10px);
362393
}
363394
.thumb-container {
364395
display: inline-block;
@@ -369,23 +400,15 @@ ${this.sampleCapturesList()}
369400
width: calc(960px * var(--cdxsummary-thumb-scale, 0.3));
370401
aspect-ratio: 16 / 10;
371402
overflow: hidden;
372-
border: 1px solid #333;
373-
border-radius: 4px;
403+
border: var(--cdxsummary-thumb-border, var(--cdxsummary-tbl-border, 1px solid var(--cdxsummary-tbl-hdr-bg-color, gray)));
404+
border-radius: var(--cdxsummary-thumb-border-radius, 5px);
374405
padding: 2px;
375406
background: linear-gradient(45deg, #eee, #333, #eee);
376407
background-position: center 2px;
377408
background-size: 50% 2px;
378409
background-repeat: no-repeat;
379410
animation: loader 10s ease infinite;
380411
}
381-
@keyframes loader {
382-
0%, 100% {
383-
background-position: left 10px top 2px;
384-
}
385-
50% {
386-
background-position: right 10px top 2px;
387-
}
388-
}
389412
.thumb a {
390413
display: block;
391414
position: absolute;
@@ -404,9 +427,30 @@ ${this.sampleCapturesList()}
404427
transform-origin: 0 0;
405428
transform: scale(var(--cdxsummary-thumb-scale, 0.3));
406429
}
407-
button {
408-
margin-bottom: 10px;
409-
padding: 5px 15px;
430+
@keyframes loader {
431+
0%, 100% {
432+
background-position: left 10px top 2px;
433+
}
434+
50% {
435+
background-position: right 10px top 2px;
436+
}
437+
}
438+
summary {
439+
cursor: pointer;
440+
}
441+
details {
442+
margin-bottom: 20px;
443+
}
444+
details.samples[open] summary::after {
445+
content: attr(data-open);
446+
}
447+
details.samples:not([open]) summary::after {
448+
content: attr(data-close);
449+
}
450+
ul {
451+
word-break: break-all;
452+
list-style-position: inside;
453+
padding-inline-start: 0;
410454
}
411455
.compact {
412456
overflow: hidden;

0 commit comments

Comments
 (0)