Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/css/render.css

4.4 KiB, 1 run

created by r2519314175:1123, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1/* ============================================================
2 Daimond — rich rendering styles
3 ------------------------------------------------------------
4 Code-block container, syntax-token colours, copy button, and
5 markdown tables. Themed via the existing custom properties in
6 variables.css so both dark and light render correctly. Loaded
7 after app.css so ties in specificity resolve here.
8 ============================================================ */
9
10/* ── Token palette (dark default) ── */
11:root {
12 --tok-comment: #8b949e;
13 --tok-keyword: #ff7b72;
14 --tok-string: #a5d6ff;
15 --tok-number: #79c0ff;
16 --tok-type: #ffa657;
17 --tok-literal: #79c0ff;
18}
19
20/* ── Token palette (light) ──
21 Keyed on the INK and not on any palette's name. Lollypop was once missing
22 from the list here, so a code block in the candy theme kept the dark tokens:
23 pale blue strings on a pale pink card at 1.3:1, which is not text, it is a
24 stain. Every palette that takes dark lettering gets these, including the ones
25 added after this line was written. */
26:root[data-ink="dark"] {
27 --tok-comment: #6e7781;
28 --tok-keyword: #cf222e;
29 --tok-string: #0a3069;
30 --tok-number: #0550ae;
31 --tok-type: #953800;
32 --tok-literal: #0550ae;
33}
34
35/* ── Code block container ── */
36.code-block {
37 position: relative;
38 margin: 8px 0;
39 border: 1px solid var(--border);
40 border-radius: var(--radius-sm);
41 background: var(--bg-tertiary);
42 overflow: hidden;
43}
44
45.code-block-head {
46 display: flex;
47 align-items: center;
48 justify-content: space-between;
49 gap: 8px;
50 padding: 4px 10px;
51 background: var(--bg-secondary);
52 border-bottom: 1px solid var(--border);
53 font-family: var(--font);
54}
55
56.code-block-lang {
57 font-size: var(--fs-2xs);
58 letter-spacing: 0.03em;
59 text-transform: uppercase;
60 color: var(--text-secondary);
61 user-select: none;
62}
63
64.code-copy-btn {
65 background: transparent;
66 border: 1px solid var(--border-strong);
67 color: var(--text-secondary);
68 border-radius: var(--radius-sm);
69 font-family: var(--font);
70 font-size: var(--fs-2xs);
71 padding: 2px 10px;
72 cursor: pointer;
73 transition: background 0.1s, color 0.1s, border-color 0.1s;
74}
75.code-copy-btn:hover {
76 background: var(--bg-hover);
77 color: var(--text-primary);
78}
79.code-copy-btn.copied {
80 color: var(--success);
81 border-color: var(--success);
82}
83
84/* Code body: the container supplies the background, so the inner
85 <pre> is transparent with its own scroll. */
86.code-block pre {
87 margin: 0;
88 padding: 12px;
89 background: transparent;
90 border-radius: 0;
91 overflow-x: auto;
92}
93.code-block pre code {
94 display: block;
95 font-family: var(--font-mono);
96 font-size: var(--fs-sm);
97 line-height: 1.5;
98 background: none;
99 padding: 0;
100 white-space: pre;
101 color: var(--text-primary);
102}
103
104/* ── Syntax tokens ── */
105.tok-comment { color: var(--tok-comment); font-style: italic; }
106.tok-keyword { color: var(--tok-keyword); }
107.tok-string { color: var(--tok-string); }
108.tok-number { color: var(--tok-number); }
109.tok-type { color: var(--tok-type); }
110.tok-literal { color: var(--tok-literal); }
111
112/* ── Markdown tables ── */
113.chat-msg-content table {
114 display: block;
115 max-width: 100%;
116 overflow-x: auto;
117 border-collapse: collapse;
118 margin: 10px 0;
119 font-family: var(--font);
120 font-size: var(--fs-sm);
121}
122.chat-msg-content th,
123.chat-msg-content td {
124 border: 1px solid var(--border);
125 padding: 6px 10px;
126 text-align: left;
127 white-space: nowrap;
128}
129.chat-msg-content th {
130 background: var(--bg-secondary);
131 color: var(--text-primary);
132 font-weight: 600;
133}
134.chat-msg-content tbody tr:nth-child(even) td {
135 background: var(--bg-secondary);
136}
137
138
139/* ── Links in rendered content ────────────────────────────────────────────
140 Nothing styled a link inside a model's answer, so one arrived as the user
141 agent's own #0000EE: navy on black at 1.38 on Dusk, and under 1.9 on every
142 dark palette. A reply is mostly prose and links, which made this the one
143 defect in the sweep that stopped content being readable rather than merely
144 looking wrong. On the light palettes it was legible and still belonged to no
145 palette in the set. */
146.chat-msg-content a,
147.crystal-body a,
148.md-body a {
149 color: var(--accent-text);
150 text-decoration: underline;
151 text-underline-offset: 2px;
152}
153.chat-msg-content a:visited,
154.crystal-body a:visited,
155.md-body a:visited { color: var(--accent-text); opacity: 0.82; }