clone

tiny dependency-free nostr libraries for plain html, each under 5kb and named for an element. public domain

main
nobel / cerium / cerium.js
cerium.js 2.8K
1(()=>{2 let g = window, d = document3 if (g.cerium) return4 // Zero-specificity rules in a layer: any page rule wins. Lanthanides style their [n??-part] hooks here.5 let css = `@layer nobel {6:where(:root) { --n-fg:#1c1c1f; --n-bg:#fff; --n-muted:#6d6d75; --n-accent:#5b4fc4; --n-line:#e2e2e7; --n-radius:.75rem; --n-avatar:3rem; }7@media (prefers-color-scheme:dark) { :where(:root) { --n-fg:#ececf1; --n-bg:#17171a; --n-muted:#9a9aa3; --n-accent:#a99cff; --n-line:#2e2e34; } }8:where([npr-card], [neu-note]) { font-family:var(--n-font); color:var(--n-fg); overflow-wrap:anywhere; }9:where([npr-card]) { display:grid; grid-template-columns:var(--n-avatar) 1fr; gap:.15rem .75rem; align-items:center; max-width:32rem; padding:1rem; background:var(--n-bg); border:1px solid var(--n-line); border-radius:var(--n-radius); }10:where([npr-card]:has(> [npr-part=nip05]:not(:empty)) > [npr-part=avatar]) { grid-row:span 2; }11:where([npr-card] > [npr-part=about], [npr-card] > [npr-part=copy]) { grid-column:1 / -1; }12:where(img[npr-avatar], [npr-part=avatar], [neu-part=avatar]) { width:var(--n-avatar); height:var(--n-avatar); border-radius:50%; object-fit:cover; background:var(--n-line); }13:where([npr-chip]) { display:inline-flex; align-items:center; gap:.35em; vertical-align:middle; }14:where([npr-chip] > [npr-part=avatar]) { width:1.4em; height:1.4em; }15:where([npr-part=name], [neu-part=name]) { font-weight:600; }16:where([npr-part=nip05], [npr-part=copy], [neu-part=time]) { color:var(--n-muted); font-size:.85em; }17:where([npr-part=nip05][nrn-verified])::after { content:" ✓"; color:var(--n-accent); }18:where([npr-part=nip05], [npr-part=about]):empty { display:none; }19:where([npr-part=about]) { margin:.5rem 0 0; white-space:pre-line; }20:where([npr-part=copy]) { justify-self:start; margin-top:.5rem; padding:.2em .7em; font:inherit; font-size:.8em; color:var(--n-muted); background:none; border:1px solid var(--n-line); border-radius:999px; }21:where([npr-copy]) { cursor:copy; }22:where([npr-copied]) { color:var(--n-accent); border-color:var(--n-accent); }23:where([neu-note]) { display:block; padding:.75rem 0; border-bottom:1px solid var(--n-line); }24:where([neu-part=author]) { display:flex; align-items:center; gap:.5rem; }25:where([neu-part=author] [neu-part=avatar]) { width:calc(var(--n-avatar) * .75); height:calc(var(--n-avatar) * .75); }26:where([neu-part=content]) { margin:.4rem 0 0; white-space:pre-wrap; }27:where([neu-part=content] img) { display:block; max-width:100%; border-radius:var(--n-radius); }28:where([neu-part=link], [neu-part=content] a) { color:var(--n-accent); }29}`30 let style = null31 if (!d.documentElement.hasAttribute("nce-bare") && !g.nceCfg?.bare){32 style = d.createElement("style")33 style.setAttribute("nce-style", "")34 style.textContent = css35 ;(d.head ?? d.documentElement).prepend(style)36 }37 g.cerium = {css, style}38})()