1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
@import "tailwindcss";
/* Syntax-highlight theme for fenced code blocks in rendered Markdown. */
@import "highlight.js/styles/atom-one-dark.min.css";
/* Custom monokai theme — must be imported BEFORE the @plugin block. */
@import "./themes/monokai.css";
/* DaisyUI v5 — enable the plugin AND bundle the monokai theme (set as default,
applied via <html data-theme="monokai">). Themes not listed here are NOT
bundled, so monokai must be named explicitly, not merely referenced. */
@plugin "daisyui" {
themes: monokai --default;
}
/* Inset "well" — the Artix wiki's code blocks (darkstrap `pre`): a panel that
reads as pressed INTO the page — the page colour darkened, a dark inner
shadow under the top edge, a faint light catch-line under the bottom edge.
Shared by the chat's thinking/tool blocks (LazyCollapse) and the sidebar
views (TilePanels). darkstrap: background rgba(0,0,0,.3); box-shadow
rgba(255,255,255,.1) 0 1px 0, rgba(0,0,0,.8) 0 1px 7px 0 inset; radius 4px.
Ported onto the active daisyUI theme so it always matches, and toned down a
step: the fill is the theme's page colour (base-100 — both the chat and the
sidebar sit on it) darkened 18% (darkstrap: 30%), computed OPAQUE and exposed
as --inset-well-bg so sticky children can paint the same colour; the inner
shadow is 0.6 (darkstrap: 0.8); the catch-line is the theme's text colour at
10% instead of plain white. In @layer components so utilities can override. */
@layer components {
.inset-well {
--inset-well-bg: color-mix(in srgb, var(--color-base-100) 82%, black);
background-color: var(--inset-well-bg);
border: 0;
border-radius: var(--radius-box);
box-shadow:
0 1px 0 color-mix(in srgb, var(--color-base-content) 10%, transparent),
inset 0 1px 7px 0 rgb(0 0 0 / 0.6);
}
}
/* Rendered-Markdown (assistant messages) typography — scoped to .markdown-body
so it never leaks into the rest of the app. */
.markdown-body {
& p {
margin-block: 0.5em;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
& h1,
& h2,
& h3,
& h4,
& h5,
& h6 {
font-weight: 600;
line-height: 1.25;
margin-block: 0.75em 0.25em;
&:first-child {
margin-block-start: 0;
}
}
& h1 {
font-size: 1.4em;
}
& h2 {
font-size: 1.2em;
}
& h3 {
font-size: 1.1em;
}
& ul,
& ol {
padding-inline-start: 1.5em;
margin-block: 0.5em;
}
& ul {
list-style-type: disc;
}
& ol {
list-style-type: decimal;
}
& li {
margin-block: 0.15em;
}
& pre {
overflow-x: auto;
border-radius: var(--radius-box);
margin-block: 0.5em;
}
& pre code {
display: block;
padding: 0.75em 1em;
font-size: 0.8125em;
line-height: 1.5;
}
& :not(pre) > code {
font-size: 0.875em;
padding: 0.15em 0.4em;
border-radius: var(--radius-selector);
background-color: oklch(var(--color-base-content) / 0.1);
}
& blockquote {
border-inline-start: 3px solid oklch(var(--color-base-content) / 0.2);
padding-inline-start: 0.75em;
margin-block: 0.5em;
opacity: 0.8;
}
& a {
color: oklch(var(--color-primary));
text-decoration: underline;
&:hover {
opacity: 0.8;
}
}
& strong {
font-weight: 600;
}
& table {
width: 100%;
border-collapse: collapse;
margin-block: 0.5em;
font-size: 0.875em;
}
& th,
& td {
border: 1px solid oklch(var(--color-base-content) / 0.15);
padding: 0.4em 0.75em;
text-align: start;
}
& th {
font-weight: 600;
background-color: oklch(var(--color-base-200));
}
& hr {
border: none;
border-top: 1px solid oklch(var(--color-base-content) / 0.2);
margin-block: 0.75em;
}
}
/* App shell fills the viewport and never scrolls/overflows at the page level —
the inner regions (tab strip, chat transcript) own their own scrolling. */
html,
body,
#app {
height: 100%;
}
body {
overflow: hidden;
}
/* Transcript rows: skip layout + paint for rows scrolled out of view. A long
turn has hundreds of rows; without this every one is laid out on first
paint (and on every resize). `contain-intrinsic-size: auto <h>` makes the
browser remember each row's last rendered height, so scrolling back up
doesn't jump; the 64px is only the estimate for never-rendered rows. */
.chat-row {
content-visibility: auto;
contain-intrinsic-size: auto 64px;
}
|
