A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Style the record JSON viewer trigger + modal
author
Jeremy Herve
date
(Jun 11, 2026, 2:50 PM +0200)
commit
d2194ab4
d2194ab46d9c41dbbf8a18dd04821ec85b9fba53
parent
d824e91d
d824e91da1b6dd27a9b0bbc64cb091a78b57ef85
+97
+97
src/styles/record-json.css
+97
src/styles/record-json.css
···
1
+
/**
2
+
* Reader "view record JSON" control + modal (`RecordJsonViewer`). A client:only React
3
+
* island, so Astro's component-scoped styles never reach its DOM — these rules are
4
+
* global (imported from `[rkey].astro`). The JSON `<pre>` reuses the dark code chrome,
5
+
* so the hljs token palette below mirrors the article's, scoped to `.record-json__code`.
6
+
*/
7
+
.record-json__trigger {
8
+
display: inline-flex;
9
+
align-items: center;
10
+
vertical-align: middle;
11
+
margin-left: 0.5rem;
12
+
padding: 0;
13
+
border: 0;
14
+
background: transparent;
15
+
color: var(--muted);
16
+
cursor: pointer;
17
+
line-height: 0;
18
+
}
19
+
.record-json__trigger:hover {
20
+
color: var(--sun);
21
+
}
22
+
.record-json__backdrop {
23
+
position: fixed;
24
+
inset: 0;
25
+
display: flex;
26
+
align-items: center;
27
+
justify-content: center;
28
+
padding: 1.5rem;
29
+
background: rgba( 0, 0, 0, 0.55 );
30
+
z-index: 1000;
31
+
}
32
+
.record-json__dialog {
33
+
position: relative;
34
+
display: flex;
35
+
width: min( 92vw, 48rem );
36
+
max-height: 82vh;
37
+
border-radius: var(--radius);
38
+
box-shadow: var(--shadow);
39
+
overflow: hidden;
40
+
}
41
+
.record-json__close {
42
+
position: absolute;
43
+
top: 0.5rem;
44
+
right: 0.5rem;
45
+
display: inline-flex;
46
+
align-items: center;
47
+
justify-content: center;
48
+
width: 2rem;
49
+
height: 2rem;
50
+
border: 0;
51
+
border-radius: 50%;
52
+
background: rgba( 0, 0, 0, 0.35 );
53
+
color: var(--paper);
54
+
font-size: 1.4rem;
55
+
line-height: 1;
56
+
cursor: pointer;
57
+
}
58
+
.record-json__close:hover {
59
+
background: rgba( 0, 0, 0, 0.55 );
60
+
}
61
+
.record-json__code {
62
+
flex: 1;
63
+
margin: 0;
64
+
overflow: auto;
65
+
padding: 1.5rem;
66
+
background: var(--ink);
67
+
color: var(--paper);
68
+
font-family: var(--font-mono);
69
+
font-size: 0.85rem;
70
+
line-height: 1.5;
71
+
white-space: pre;
72
+
tab-size: 2;
73
+
}
74
+
/* hljs token palette — mirrors the article's (see [rkey].astro), scoped here so the
75
+
modal is self-contained and doesn't depend on .reader__article being an ancestor. */
76
+
.record-json__code .hljs-comment,
77
+
.record-json__code .hljs-quote {
78
+
color: var(--muted);
79
+
font-style: italic;
80
+
}
81
+
.record-json__code .hljs-keyword,
82
+
.record-json__code .hljs-literal,
83
+
.record-json__code .hljs-selector-tag {
84
+
color: var(--sun);
85
+
}
86
+
.record-json__code .hljs-string,
87
+
.record-json__code .hljs-attr,
88
+
.record-json__code .hljs-symbol {
89
+
color: var(--sun-strong);
90
+
}
91
+
.record-json__code .hljs-number,
92
+
.record-json__code .hljs-built_in {
93
+
color: #7fb2c9;
94
+
}
95
+
.record-json__code .hljs-punctuation {
96
+
color: var(--ink-soft);
97
+
}