Monorepo for Tangled
appview: pages/templates/repo: clean up spacing and borders
Anirudh Oppiliappan
(Apr 30, 2025, 5:22 PM +0300)
907a66ce
673c6f83
+779
-210
+92
-47
appview/pages/templates/repo/branches.html
+92
-47
appview/pages/templates/repo/branches.html
···
3
3
{{ end }}
4
4
5
5
{{ define "repoContent" }}
6
-
<section>
7
-
<header class="font-bold text-sm mb-4 uppercase dark:text-white">
8
-
Branches
9
-
</header>
6
+
<section id="branches-table" class="overflow-x-auto">
7
+
<h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
8
+
Branches
9
+
</h2>
10
10
11
-
<div class="overflow-x-auto">
12
-
<table class="min-w-full table-auto">
13
-
<tbody>
14
-
{{ range .Branches }}
15
-
<tr>
16
-
<td class="whitespace-nowrap">
17
-
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
18
-
<span>
19
-
{{ .Name }}
20
-
</span>
21
-
{{ if .IsDefault }}
22
-
<span class="
23
-
text-sm rounded
24
-
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
25
-
font-mono
26
-
px-2 mx-1/2
27
-
inline-flex items-center
28
-
">
29
-
default
30
-
</span>
31
-
{{ end }}
32
-
</a>
33
-
</td>
34
-
<td class="whitespace-nowrap hidden md:table-cell">
35
-
{{ if .Commit }}
36
-
<a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="font-mono">{{ slice .Commit.Hash.String 0 8 }}</a>
37
-
{{ end }}
38
-
</td>
39
-
<td class="whitespace-nowrap hidden md:table-cell">
40
-
{{ if .Commit }}
41
-
{{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
42
-
{{ index $messageParts 0 }}
43
-
{{ end }}
44
-
</td>
45
-
<td class="whitespace-nowrap">
46
-
{{ if .Commit }}
47
-
{{ .Commit.Author.When | timeFmt }}
48
-
{{ end }}
49
-
</td>
50
-
</tr>
11
+
<!-- desktop view (hidden on small screens) -->
12
+
<table class="w-full border-collapse hidden md:table">
13
+
<thead>
14
+
<tr>
15
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Name</th>
16
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
17
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
18
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
19
+
</tr>
20
+
</thead>
21
+
<tbody>
22
+
{{ range $index, $branch := .Branches }}
23
+
<tr class="{{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
24
+
<td class="py-3 whitespace-nowrap">
25
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
26
+
<span class="dark:text-white">
27
+
{{ .Name }}
28
+
</span>
29
+
{{ if .IsDefault }}
30
+
<span class="
31
+
text-sm rounded
32
+
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
33
+
font-mono
34
+
px-2 mx-1/2
35
+
inline-flex items-center
36
+
">
37
+
default
38
+
</span>
39
+
{{ end }}
40
+
</a>
41
+
</td>
42
+
<td class="py-3 whitespace-nowrap">
43
+
{{ if .Commit }}
44
+
<a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="font-mono text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ slice .Commit.Hash.String 0 8 }}</a>
45
+
{{ end }}
46
+
</td>
47
+
<td class="py-3 whitespace-nowrap">
48
+
{{ if .Commit }}
49
+
{{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
50
+
<span class="text-gray-700 dark:text-gray-300">{{ index $messageParts 0 }}</span>
51
+
{{ end }}
52
+
</td>
53
+
<td class="py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">
54
+
{{ if .Commit }}
55
+
{{ .Commit.Author.When | timeFmt }}
56
+
{{ end }}
57
+
</td>
58
+
</tr>
59
+
{{ end }}
60
+
</tbody>
61
+
</table>
62
+
63
+
<!-- mobile view (visible only on small screens) -->
64
+
<div class="md:hidden">
65
+
{{ range $index, $branch := .Branches }}
66
+
<div class="relative p-2 {{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
67
+
<div class="flex items-center justify-between">
68
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
69
+
<span class="dark:text-white font-medium">
70
+
{{ .Name }}
71
+
</span>
72
+
{{ if .IsDefault }}
73
+
<span class="
74
+
text-xs rounded
75
+
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
76
+
font-mono
77
+
px-2
78
+
inline-flex items-center
79
+
">
80
+
default
81
+
</span>
51
82
{{ end }}
52
-
</tbody>
53
-
</table>
83
+
</a>
84
+
</div>
85
+
86
+
{{ if .Commit }}
87
+
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center">
88
+
<span class="font-mono">
89
+
<a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="text-gray-500 dark:text-gray-400 no-underline hover:underline">
90
+
{{ slice .Commit.Hash.String 0 8 }}
91
+
</a>
92
+
</span>
93
+
<div class="inline-block px-1 select-none after:content-['·']"></div>
94
+
<span>{{ .Commit.Author.When | timeFmt }}</span>
95
+
</div>
96
+
{{ end }}
54
97
</div>
55
-
</section>
98
+
{{ end }}
99
+
</div>
100
+
</section>
56
101
{{ end }}
+15
-12
appview/pages/templates/repo/log.html
+15
-12
appview/pages/templates/repo/log.html
···
2
2
3
3
{{ define "repoContent" }}
4
4
<section id="commit-table" class="overflow-x-auto">
5
+
<h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
6
+
commits
7
+
</h2>
8
+
5
9
<!-- desktop view (hidden on small screens) -->
6
10
<table class="w-full border-collapse hidden md:table">
7
11
<thead>
8
12
<tr>
9
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
10
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
11
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
12
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
13
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
14
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
15
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
16
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
13
17
</tr>
14
18
</thead>
15
19
<tbody>
16
20
{{ range $index, $commit := .Commits }}
17
21
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
18
-
<tr class="border-b border-gray-200 dark:border-gray-700">
19
-
<td class="px-4 py-3 align-top">
22
+
<tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
23
+
<td class=" py-3 align-top">
20
24
{{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
21
25
{{ if $didOrHandle }}
22
26
<a href="/{{ $didOrHandle }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $didOrHandle }}</a>
···
24
28
<a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
25
29
{{ end }}
26
30
</td>
27
-
<td class="px-4 py-3 align-top font-mono flex items-end">
31
+
<td class=" py-3 align-top font-mono flex items-end">
28
32
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ slice $commit.Hash.String 0 8 }}</a>
29
33
<div class="inline-flex">
30
34
<button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
···
37
41
</a>
38
42
</div>
39
43
</td>
40
-
<td class="px-4 py-3 align-top">
44
+
<td class=" py-3 align-top">
41
45
<div>
42
46
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
43
47
{{ if gt (len $messageParts) 1 }}
···
46
50
{{ end }}
47
51
</div>
48
52
</td>
49
-
<td class="px-4 py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
53
+
<td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
50
54
</tr>
51
55
{{ end }}
52
56
</tbody>
···
54
58
55
59
<!-- mobile view (visible only on small screens) -->
56
60
<div class="md:hidden">
57
-
<h2 class="p-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">commits</h2>
58
-
{{ range $commit := .Commits }}
59
-
<div class="relative p-2 border-b border-gray-200 dark:border-gray-700">
61
+
{{ range $index, $commit := .Commits }}
62
+
<div class="relative p-2 {{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
60
63
<div id="commit-message">
61
64
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
62
65
<div class="text-base cursor-pointer">
+671
-151
input.css
+671
-151
input.css
···
96
96
}
97
97
}
98
98
99
-
/* Background */ .bg { color: #4c4f69; background-color: #eff1f5; }
100
-
/* PreWrapper */ .chroma { color: #4c4f69; background-color: #eff1f5; }
101
-
/* Error */ .chroma .err { color: #d20f39 }
102
-
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
103
-
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
104
-
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
105
-
/* LineHighlight */ .chroma .hl { background-color: #bcc0cc }
106
-
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8c8fa1 }
107
-
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8c8fa1 }
108
-
/* Line */ .chroma .line { display: flex; }
109
-
/* Keyword */ .chroma .k { color: #8839ef }
110
-
/* KeywordConstant */ .chroma .kc { color: #fe640b }
111
-
/* KeywordDeclaration */ .chroma .kd { color: #d20f39 }
112
-
/* KeywordNamespace */ .chroma .kn { color: #179299 }
113
-
/* KeywordPseudo */ .chroma .kp { color: #8839ef }
114
-
/* KeywordReserved */ .chroma .kr { color: #8839ef }
115
-
/* KeywordType */ .chroma .kt { color: #d20f39 }
116
-
/* NameAttribute */ .chroma .na { color: #1e66f5 }
117
-
/* NameBuiltin */ .chroma .nb { color: #04a5e5 }
118
-
/* NameBuiltinPseudo */ .chroma .bp { color: #04a5e5 }
119
-
/* NameClass */ .chroma .nc { color: #df8e1d }
120
-
/* NameConstant */ .chroma .no { color: #df8e1d }
121
-
/* NameDecorator */ .chroma .nd { color: #1e66f5; font-weight: bold }
122
-
/* NameEntity */ .chroma .ni { color: #179299 }
123
-
/* NameException */ .chroma .ne { color: #fe640b }
124
-
/* NameFunction */ .chroma .nf { color: #1e66f5 }
125
-
/* NameFunctionMagic */ .chroma .fm { color: #1e66f5 }
126
-
/* NameLabel */ .chroma .nl { color: #04a5e5 }
127
-
/* NameNamespace */ .chroma .nn { color: #fe640b }
128
-
/* NameProperty */ .chroma .py { color: #fe640b }
129
-
/* NameTag */ .chroma .nt { color: #8839ef }
130
-
/* NameVariable */ .chroma .nv { color: #dc8a78 }
131
-
/* NameVariableClass */ .chroma .vc { color: #dc8a78 }
132
-
/* NameVariableGlobal */ .chroma .vg { color: #dc8a78 }
133
-
/* NameVariableInstance */ .chroma .vi { color: #dc8a78 }
134
-
/* NameVariableMagic */ .chroma .vm { color: #dc8a78 }
135
-
/* LiteralString */ .chroma .s { color: #40a02b }
136
-
/* LiteralStringAffix */ .chroma .sa { color: #d20f39 }
137
-
/* LiteralStringBacktick */ .chroma .sb { color: #40a02b }
138
-
/* LiteralStringChar */ .chroma .sc { color: #40a02b }
139
-
/* LiteralStringDelimiter */ .chroma .dl { color: #1e66f5 }
140
-
/* LiteralStringDoc */ .chroma .sd { color: #9ca0b0 }
141
-
/* LiteralStringDouble */ .chroma .s2 { color: #40a02b }
142
-
/* LiteralStringEscape */ .chroma .se { color: #1e66f5 }
143
-
/* LiteralStringHeredoc */ .chroma .sh { color: #9ca0b0 }
144
-
/* LiteralStringInterpol */ .chroma .si { color: #40a02b }
145
-
/* LiteralStringOther */ .chroma .sx { color: #40a02b }
146
-
/* LiteralStringRegex */ .chroma .sr { color: #179299 }
147
-
/* LiteralStringSingle */ .chroma .s1 { color: #40a02b }
148
-
/* LiteralStringSymbol */ .chroma .ss { color: #40a02b }
149
-
/* LiteralNumber */ .chroma .m { color: #fe640b }
150
-
/* LiteralNumberBin */ .chroma .mb { color: #fe640b }
151
-
/* LiteralNumberFloat */ .chroma .mf { color: #fe640b }
152
-
/* LiteralNumberHex */ .chroma .mh { color: #fe640b }
153
-
/* LiteralNumberInteger */ .chroma .mi { color: #fe640b }
154
-
/* LiteralNumberIntegerLong */ .chroma .il { color: #fe640b }
155
-
/* LiteralNumberOct */ .chroma .mo { color: #fe640b }
156
-
/* Operator */ .chroma .o { color: #04a5e5; font-weight: bold }
157
-
/* OperatorWord */ .chroma .ow { color: #04a5e5; font-weight: bold }
158
-
/* Comment */ .chroma .c { color: #9ca0b0; font-style: italic }
159
-
/* CommentHashbang */ .chroma .ch { color: #9ca0b0; font-style: italic }
160
-
/* CommentMultiline */ .chroma .cm { color: #9ca0b0; font-style: italic }
161
-
/* CommentSingle */ .chroma .c1 { color: #9ca0b0; font-style: italic }
162
-
/* CommentSpecial */ .chroma .cs { color: #9ca0b0; font-style: italic }
163
-
/* CommentPreproc */ .chroma .cp { color: #9ca0b0; font-style: italic }
164
-
/* CommentPreprocFile */ .chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic }
165
-
/* GenericDeleted */ .chroma .gd { color: #d20f39; background-color: oklch(93.6% 0.032 17.717) }
166
-
/* GenericEmph */ .chroma .ge { font-style: italic }
167
-
/* GenericError */ .chroma .gr { color: #d20f39 }
168
-
/* GenericHeading */ .chroma .gh { color: #fe640b; font-weight: bold }
169
-
/* GenericInserted */ .chroma .gi { color: #40a02b; background-color: oklch(96.2% 0.044 156.743) }
170
-
/* GenericStrong */ .chroma .gs { font-weight: bold }
171
-
/* GenericSubheading */ .chroma .gu { color: #fe640b; font-weight: bold }
172
-
/* GenericTraceback */ .chroma .gt { color: #d20f39 }
173
-
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
99
+
/* Background */
100
+
.bg {
101
+
color: #4c4f69;
102
+
background-color: #eff1f5;
103
+
}
104
+
/* PreWrapper */
105
+
.chroma {
106
+
color: #4c4f69;
107
+
background-color: #eff1f5;
108
+
}
109
+
/* Error */
110
+
.chroma .err {
111
+
color: #d20f39;
112
+
}
113
+
/* LineLink */
114
+
.chroma .lnlinks {
115
+
outline: none;
116
+
text-decoration: none;
117
+
color: inherit;
118
+
}
119
+
/* LineTableTD */
120
+
.chroma .lntd {
121
+
vertical-align: top;
122
+
padding: 0;
123
+
margin: 0;
124
+
border: 0;
125
+
}
126
+
/* LineTable */
127
+
.chroma .lntable {
128
+
border-spacing: 0;
129
+
padding: 0;
130
+
margin: 0;
131
+
border: 0;
132
+
}
133
+
/* LineHighlight */
134
+
.chroma .hl {
135
+
background-color: #bcc0cc;
136
+
}
137
+
/* LineNumbersTable */
138
+
.chroma .lnt {
139
+
white-space: pre;
140
+
-webkit-user-select: none;
141
+
user-select: none;
142
+
margin-right: 0.4em;
143
+
padding: 0 0.4em 0 0.4em;
144
+
color: #8c8fa1;
145
+
}
146
+
/* LineNumbers */
147
+
.chroma .ln {
148
+
white-space: pre;
149
+
-webkit-user-select: none;
150
+
user-select: none;
151
+
margin-right: 0.4em;
152
+
padding: 0 0.4em 0 0.4em;
153
+
color: #8c8fa1;
154
+
}
155
+
/* Line */
156
+
.chroma .line {
157
+
display: flex;
158
+
}
159
+
/* Keyword */
160
+
.chroma .k {
161
+
color: #8839ef;
162
+
}
163
+
/* KeywordConstant */
164
+
.chroma .kc {
165
+
color: #fe640b;
166
+
}
167
+
/* KeywordDeclaration */
168
+
.chroma .kd {
169
+
color: #d20f39;
170
+
}
171
+
/* KeywordNamespace */
172
+
.chroma .kn {
173
+
color: #179299;
174
+
}
175
+
/* KeywordPseudo */
176
+
.chroma .kp {
177
+
color: #8839ef;
178
+
}
179
+
/* KeywordReserved */
180
+
.chroma .kr {
181
+
color: #8839ef;
182
+
}
183
+
/* KeywordType */
184
+
.chroma .kt {
185
+
color: #d20f39;
186
+
}
187
+
/* NameAttribute */
188
+
.chroma .na {
189
+
color: #1e66f5;
190
+
}
191
+
/* NameBuiltin */
192
+
.chroma .nb {
193
+
color: #04a5e5;
194
+
}
195
+
/* NameBuiltinPseudo */
196
+
.chroma .bp {
197
+
color: #04a5e5;
198
+
}
199
+
/* NameClass */
200
+
.chroma .nc {
201
+
color: #df8e1d;
202
+
}
203
+
/* NameConstant */
204
+
.chroma .no {
205
+
color: #df8e1d;
206
+
}
207
+
/* NameDecorator */
208
+
.chroma .nd {
209
+
color: #1e66f5;
210
+
font-weight: bold;
211
+
}
212
+
/* NameEntity */
213
+
.chroma .ni {
214
+
color: #179299;
215
+
}
216
+
/* NameException */
217
+
.chroma .ne {
218
+
color: #fe640b;
219
+
}
220
+
/* NameFunction */
221
+
.chroma .nf {
222
+
color: #1e66f5;
223
+
}
224
+
/* NameFunctionMagic */
225
+
.chroma .fm {
226
+
color: #1e66f5;
227
+
}
228
+
/* NameLabel */
229
+
.chroma .nl {
230
+
color: #04a5e5;
231
+
}
232
+
/* NameNamespace */
233
+
.chroma .nn {
234
+
color: #fe640b;
235
+
}
236
+
/* NameProperty */
237
+
.chroma .py {
238
+
color: #fe640b;
239
+
}
240
+
/* NameTag */
241
+
.chroma .nt {
242
+
color: #8839ef;
243
+
}
244
+
/* NameVariable */
245
+
.chroma .nv {
246
+
color: #dc8a78;
247
+
}
248
+
/* NameVariableClass */
249
+
.chroma .vc {
250
+
color: #dc8a78;
251
+
}
252
+
/* NameVariableGlobal */
253
+
.chroma .vg {
254
+
color: #dc8a78;
255
+
}
256
+
/* NameVariableInstance */
257
+
.chroma .vi {
258
+
color: #dc8a78;
259
+
}
260
+
/* NameVariableMagic */
261
+
.chroma .vm {
262
+
color: #dc8a78;
263
+
}
264
+
/* LiteralString */
265
+
.chroma .s {
266
+
color: #40a02b;
267
+
}
268
+
/* LiteralStringAffix */
269
+
.chroma .sa {
270
+
color: #d20f39;
271
+
}
272
+
/* LiteralStringBacktick */
273
+
.chroma .sb {
274
+
color: #40a02b;
275
+
}
276
+
/* LiteralStringChar */
277
+
.chroma .sc {
278
+
color: #40a02b;
279
+
}
280
+
/* LiteralStringDelimiter */
281
+
.chroma .dl {
282
+
color: #1e66f5;
283
+
}
284
+
/* LiteralStringDoc */
285
+
.chroma .sd {
286
+
color: #9ca0b0;
287
+
}
288
+
/* LiteralStringDouble */
289
+
.chroma .s2 {
290
+
color: #40a02b;
291
+
}
292
+
/* LiteralStringEscape */
293
+
.chroma .se {
294
+
color: #1e66f5;
295
+
}
296
+
/* LiteralStringHeredoc */
297
+
.chroma .sh {
298
+
color: #9ca0b0;
299
+
}
300
+
/* LiteralStringInterpol */
301
+
.chroma .si {
302
+
color: #40a02b;
303
+
}
304
+
/* LiteralStringOther */
305
+
.chroma .sx {
306
+
color: #40a02b;
307
+
}
308
+
/* LiteralStringRegex */
309
+
.chroma .sr {
310
+
color: #179299;
311
+
}
312
+
/* LiteralStringSingle */
313
+
.chroma .s1 {
314
+
color: #40a02b;
315
+
}
316
+
/* LiteralStringSymbol */
317
+
.chroma .ss {
318
+
color: #40a02b;
319
+
}
320
+
/* LiteralNumber */
321
+
.chroma .m {
322
+
color: #fe640b;
323
+
}
324
+
/* LiteralNumberBin */
325
+
.chroma .mb {
326
+
color: #fe640b;
327
+
}
328
+
/* LiteralNumberFloat */
329
+
.chroma .mf {
330
+
color: #fe640b;
331
+
}
332
+
/* LiteralNumberHex */
333
+
.chroma .mh {
334
+
color: #fe640b;
335
+
}
336
+
/* LiteralNumberInteger */
337
+
.chroma .mi {
338
+
color: #fe640b;
339
+
}
340
+
/* LiteralNumberIntegerLong */
341
+
.chroma .il {
342
+
color: #fe640b;
343
+
}
344
+
/* LiteralNumberOct */
345
+
.chroma .mo {
346
+
color: #fe640b;
347
+
}
348
+
/* Operator */
349
+
.chroma .o {
350
+
color: #04a5e5;
351
+
font-weight: bold;
352
+
}
353
+
/* OperatorWord */
354
+
.chroma .ow {
355
+
color: #04a5e5;
356
+
font-weight: bold;
357
+
}
358
+
/* Comment */
359
+
.chroma .c {
360
+
color: #9ca0b0;
361
+
font-style: italic;
362
+
}
363
+
/* CommentHashbang */
364
+
.chroma .ch {
365
+
color: #9ca0b0;
366
+
font-style: italic;
367
+
}
368
+
/* CommentMultiline */
369
+
.chroma .cm {
370
+
color: #9ca0b0;
371
+
font-style: italic;
372
+
}
373
+
/* CommentSingle */
374
+
.chroma .c1 {
375
+
color: #9ca0b0;
376
+
font-style: italic;
377
+
}
378
+
/* CommentSpecial */
379
+
.chroma .cs {
380
+
color: #9ca0b0;
381
+
font-style: italic;
382
+
}
383
+
/* CommentPreproc */
384
+
.chroma .cp {
385
+
color: #9ca0b0;
386
+
font-style: italic;
387
+
}
388
+
/* CommentPreprocFile */
389
+
.chroma .cpf {
390
+
color: #9ca0b0;
391
+
font-weight: bold;
392
+
font-style: italic;
393
+
}
394
+
/* GenericDeleted */
395
+
.chroma .gd {
396
+
color: #d20f39;
397
+
background-color: oklch(93.6% 0.032 17.717);
398
+
}
399
+
/* GenericEmph */
400
+
.chroma .ge {
401
+
font-style: italic;
402
+
}
403
+
/* GenericError */
404
+
.chroma .gr {
405
+
color: #d20f39;
406
+
}
407
+
/* GenericHeading */
408
+
.chroma .gh {
409
+
color: #fe640b;
410
+
font-weight: bold;
411
+
}
412
+
/* GenericInserted */
413
+
.chroma .gi {
414
+
color: #40a02b;
415
+
background-color: oklch(96.2% 0.044 156.743);
416
+
}
417
+
/* GenericStrong */
418
+
.chroma .gs {
419
+
font-weight: bold;
420
+
}
421
+
/* GenericSubheading */
422
+
.chroma .gu {
423
+
color: #fe640b;
424
+
font-weight: bold;
425
+
}
426
+
/* GenericTraceback */
427
+
.chroma .gt {
428
+
color: #d20f39;
429
+
}
430
+
/* GenericUnderline */
431
+
.chroma .gl {
432
+
text-decoration: underline;
433
+
}
174
434
175
435
@media (prefers-color-scheme: dark) {
176
-
/* Background */ .bg { color: #cad3f5; background-color: #24273a; }
177
-
/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; }
178
-
/* Error */ .chroma .err { color: #ed8796 }
179
-
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
180
-
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
181
-
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
182
-
/* LineHighlight */ .chroma .hl { background-color: #494d64 }
183
-
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
184
-
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #8087a2 }
185
-
/* Line */ .chroma .line { display: flex; }
186
-
/* Keyword */ .chroma .k { color: #c6a0f6 }
187
-
/* KeywordConstant */ .chroma .kc { color: #f5a97f }
188
-
/* KeywordDeclaration */ .chroma .kd { color: #ed8796 }
189
-
/* KeywordNamespace */ .chroma .kn { color: #8bd5ca }
190
-
/* KeywordPseudo */ .chroma .kp { color: #c6a0f6 }
191
-
/* KeywordReserved */ .chroma .kr { color: #c6a0f6 }
192
-
/* KeywordType */ .chroma .kt { color: #ed8796 }
193
-
/* NameAttribute */ .chroma .na { color: #8aadf4 }
194
-
/* NameBuiltin */ .chroma .nb { color: #91d7e3 }
195
-
/* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3 }
196
-
/* NameClass */ .chroma .nc { color: #eed49f }
197
-
/* NameConstant */ .chroma .no { color: #eed49f }
198
-
/* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold }
199
-
/* NameEntity */ .chroma .ni { color: #8bd5ca }
200
-
/* NameException */ .chroma .ne { color: #f5a97f }
201
-
/* NameFunction */ .chroma .nf { color: #8aadf4 }
202
-
/* NameFunctionMagic */ .chroma .fm { color: #8aadf4 }
203
-
/* NameLabel */ .chroma .nl { color: #91d7e3 }
204
-
/* NameNamespace */ .chroma .nn { color: #f5a97f }
205
-
/* NameProperty */ .chroma .py { color: #f5a97f }
206
-
/* NameTag */ .chroma .nt { color: #c6a0f6 }
207
-
/* NameVariable */ .chroma .nv { color: #f4dbd6 }
208
-
/* NameVariableClass */ .chroma .vc { color: #f4dbd6 }
209
-
/* NameVariableGlobal */ .chroma .vg { color: #f4dbd6 }
210
-
/* NameVariableInstance */ .chroma .vi { color: #f4dbd6 }
211
-
/* NameVariableMagic */ .chroma .vm { color: #f4dbd6 }
212
-
/* LiteralString */ .chroma .s { color: #a6da95 }
213
-
/* LiteralStringAffix */ .chroma .sa { color: #ed8796 }
214
-
/* LiteralStringBacktick */ .chroma .sb { color: #a6da95 }
215
-
/* LiteralStringChar */ .chroma .sc { color: #a6da95 }
216
-
/* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4 }
217
-
/* LiteralStringDoc */ .chroma .sd { color: #6e738d }
218
-
/* LiteralStringDouble */ .chroma .s2 { color: #a6da95 }
219
-
/* LiteralStringEscape */ .chroma .se { color: #8aadf4 }
220
-
/* LiteralStringHeredoc */ .chroma .sh { color: #6e738d }
221
-
/* LiteralStringInterpol */ .chroma .si { color: #a6da95 }
222
-
/* LiteralStringOther */ .chroma .sx { color: #a6da95 }
223
-
/* LiteralStringRegex */ .chroma .sr { color: #8bd5ca }
224
-
/* LiteralStringSingle */ .chroma .s1 { color: #a6da95 }
225
-
/* LiteralStringSymbol */ .chroma .ss { color: #a6da95 }
226
-
/* LiteralNumber */ .chroma .m { color: #f5a97f }
227
-
/* LiteralNumberBin */ .chroma .mb { color: #f5a97f }
228
-
/* LiteralNumberFloat */ .chroma .mf { color: #f5a97f }
229
-
/* LiteralNumberHex */ .chroma .mh { color: #f5a97f }
230
-
/* LiteralNumberInteger */ .chroma .mi { color: #f5a97f }
231
-
/* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f }
232
-
/* LiteralNumberOct */ .chroma .mo { color: #f5a97f }
233
-
/* Operator */ .chroma .o { color: #91d7e3; font-weight: bold }
234
-
/* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold }
235
-
/* Comment */ .chroma .c { color: #6e738d; font-style: italic }
236
-
/* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic }
237
-
/* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic }
238
-
/* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic }
239
-
/* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic }
240
-
/* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic }
241
-
/* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic }
242
-
/* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: oklch(44.4% 0.177 26.899 / 0.5) }
243
-
/* GenericEmph */ .chroma .ge { font-style: italic }
244
-
/* GenericError */ .chroma .gr { color: #ed8796 }
245
-
/* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold }
246
-
/* GenericInserted */ .chroma .gi { color: #a6da95; background-color: oklch(44.8% 0.119 151.328 / 0.5) }
247
-
/* GenericStrong */ .chroma .gs { font-weight: bold }
248
-
/* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold }
249
-
/* GenericTraceback */ .chroma .gt { color: #ed8796 }
250
-
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
436
+
/* Background */
437
+
.bg {
438
+
color: #cad3f5;
439
+
background-color: #24273a;
440
+
}
441
+
/* PreWrapper */
442
+
.chroma {
443
+
color: #cad3f5;
444
+
background-color: #24273a;
445
+
}
446
+
/* Error */
447
+
.chroma .err {
448
+
color: #ed8796;
449
+
}
450
+
/* LineLink */
451
+
.chroma .lnlinks {
452
+
outline: none;
453
+
text-decoration: none;
454
+
color: inherit;
455
+
}
456
+
/* LineTableTD */
457
+
.chroma .lntd {
458
+
vertical-align: top;
459
+
padding: 0;
460
+
margin: 0;
461
+
border: 0;
462
+
}
463
+
/* LineTable */
464
+
.chroma .lntable {
465
+
border-spacing: 0;
466
+
padding: 0;
467
+
margin: 0;
468
+
border: 0;
469
+
}
470
+
/* LineHighlight */
471
+
.chroma .hl {
472
+
background-color: #494d64;
473
+
}
474
+
/* LineNumbersTable */
475
+
.chroma .lnt {
476
+
white-space: pre;
477
+
-webkit-user-select: none;
478
+
user-select: none;
479
+
margin-right: 0.4em;
480
+
padding: 0 0.4em 0 0.4em;
481
+
color: #8087a2;
482
+
}
483
+
/* LineNumbers */
484
+
.chroma .ln {
485
+
white-space: pre;
486
+
-webkit-user-select: none;
487
+
user-select: none;
488
+
margin-right: 0.4em;
489
+
padding: 0 0.4em 0 0.4em;
490
+
color: #8087a2;
491
+
}
492
+
/* Line */
493
+
.chroma .line {
494
+
display: flex;
495
+
}
496
+
/* Keyword */
497
+
.chroma .k {
498
+
color: #c6a0f6;
499
+
}
500
+
/* KeywordConstant */
501
+
.chroma .kc {
502
+
color: #f5a97f;
503
+
}
504
+
/* KeywordDeclaration */
505
+
.chroma .kd {
506
+
color: #ed8796;
507
+
}
508
+
/* KeywordNamespace */
509
+
.chroma .kn {
510
+
color: #8bd5ca;
511
+
}
512
+
/* KeywordPseudo */
513
+
.chroma .kp {
514
+
color: #c6a0f6;
515
+
}
516
+
/* KeywordReserved */
517
+
.chroma .kr {
518
+
color: #c6a0f6;
519
+
}
520
+
/* KeywordType */
521
+
.chroma .kt {
522
+
color: #ed8796;
523
+
}
524
+
/* NameAttribute */
525
+
.chroma .na {
526
+
color: #8aadf4;
527
+
}
528
+
/* NameBuiltin */
529
+
.chroma .nb {
530
+
color: #91d7e3;
531
+
}
532
+
/* NameBuiltinPseudo */
533
+
.chroma .bp {
534
+
color: #91d7e3;
535
+
}
536
+
/* NameClass */
537
+
.chroma .nc {
538
+
color: #eed49f;
539
+
}
540
+
/* NameConstant */
541
+
.chroma .no {
542
+
color: #eed49f;
543
+
}
544
+
/* NameDecorator */
545
+
.chroma .nd {
546
+
color: #8aadf4;
547
+
font-weight: bold;
548
+
}
549
+
/* NameEntity */
550
+
.chroma .ni {
551
+
color: #8bd5ca;
552
+
}
553
+
/* NameException */
554
+
.chroma .ne {
555
+
color: #f5a97f;
556
+
}
557
+
/* NameFunction */
558
+
.chroma .nf {
559
+
color: #8aadf4;
560
+
}
561
+
/* NameFunctionMagic */
562
+
.chroma .fm {
563
+
color: #8aadf4;
564
+
}
565
+
/* NameLabel */
566
+
.chroma .nl {
567
+
color: #91d7e3;
568
+
}
569
+
/* NameNamespace */
570
+
.chroma .nn {
571
+
color: #f5a97f;
572
+
}
573
+
/* NameProperty */
574
+
.chroma .py {
575
+
color: #f5a97f;
576
+
}
577
+
/* NameTag */
578
+
.chroma .nt {
579
+
color: #c6a0f6;
580
+
}
581
+
/* NameVariable */
582
+
.chroma .nv {
583
+
color: #f4dbd6;
584
+
}
585
+
/* NameVariableClass */
586
+
.chroma .vc {
587
+
color: #f4dbd6;
588
+
}
589
+
/* NameVariableGlobal */
590
+
.chroma .vg {
591
+
color: #f4dbd6;
592
+
}
593
+
/* NameVariableInstance */
594
+
.chroma .vi {
595
+
color: #f4dbd6;
596
+
}
597
+
/* NameVariableMagic */
598
+
.chroma .vm {
599
+
color: #f4dbd6;
600
+
}
601
+
/* LiteralString */
602
+
.chroma .s {
603
+
color: #a6da95;
604
+
}
605
+
/* LiteralStringAffix */
606
+
.chroma .sa {
607
+
color: #ed8796;
608
+
}
609
+
/* LiteralStringBacktick */
610
+
.chroma .sb {
611
+
color: #a6da95;
612
+
}
613
+
/* LiteralStringChar */
614
+
.chroma .sc {
615
+
color: #a6da95;
616
+
}
617
+
/* LiteralStringDelimiter */
618
+
.chroma .dl {
619
+
color: #8aadf4;
620
+
}
621
+
/* LiteralStringDoc */
622
+
.chroma .sd {
623
+
color: #6e738d;
624
+
}
625
+
/* LiteralStringDouble */
626
+
.chroma .s2 {
627
+
color: #a6da95;
628
+
}
629
+
/* LiteralStringEscape */
630
+
.chroma .se {
631
+
color: #8aadf4;
632
+
}
633
+
/* LiteralStringHeredoc */
634
+
.chroma .sh {
635
+
color: #6e738d;
636
+
}
637
+
/* LiteralStringInterpol */
638
+
.chroma .si {
639
+
color: #a6da95;
640
+
}
641
+
/* LiteralStringOther */
642
+
.chroma .sx {
643
+
color: #a6da95;
644
+
}
645
+
/* LiteralStringRegex */
646
+
.chroma .sr {
647
+
color: #8bd5ca;
648
+
}
649
+
/* LiteralStringSingle */
650
+
.chroma .s1 {
651
+
color: #a6da95;
652
+
}
653
+
/* LiteralStringSymbol */
654
+
.chroma .ss {
655
+
color: #a6da95;
656
+
}
657
+
/* LiteralNumber */
658
+
.chroma .m {
659
+
color: #f5a97f;
660
+
}
661
+
/* LiteralNumberBin */
662
+
.chroma .mb {
663
+
color: #f5a97f;
664
+
}
665
+
/* LiteralNumberFloat */
666
+
.chroma .mf {
667
+
color: #f5a97f;
668
+
}
669
+
/* LiteralNumberHex */
670
+
.chroma .mh {
671
+
color: #f5a97f;
672
+
}
673
+
/* LiteralNumberInteger */
674
+
.chroma .mi {
675
+
color: #f5a97f;
676
+
}
677
+
/* LiteralNumberIntegerLong */
678
+
.chroma .il {
679
+
color: #f5a97f;
680
+
}
681
+
/* LiteralNumberOct */
682
+
.chroma .mo {
683
+
color: #f5a97f;
684
+
}
685
+
/* Operator */
686
+
.chroma .o {
687
+
color: #91d7e3;
688
+
font-weight: bold;
689
+
}
690
+
/* OperatorWord */
691
+
.chroma .ow {
692
+
color: #91d7e3;
693
+
font-weight: bold;
694
+
}
695
+
/* Comment */
696
+
.chroma .c {
697
+
color: #6e738d;
698
+
font-style: italic;
699
+
}
700
+
/* CommentHashbang */
701
+
.chroma .ch {
702
+
color: #6e738d;
703
+
font-style: italic;
704
+
}
705
+
/* CommentMultiline */
706
+
.chroma .cm {
707
+
color: #6e738d;
708
+
font-style: italic;
709
+
}
710
+
/* CommentSingle */
711
+
.chroma .c1 {
712
+
color: #6e738d;
713
+
font-style: italic;
714
+
}
715
+
/* CommentSpecial */
716
+
.chroma .cs {
717
+
color: #6e738d;
718
+
font-style: italic;
719
+
}
720
+
/* CommentPreproc */
721
+
.chroma .cp {
722
+
color: #6e738d;
723
+
font-style: italic;
724
+
}
725
+
/* CommentPreprocFile */
726
+
.chroma .cpf {
727
+
color: #6e738d;
728
+
font-weight: bold;
729
+
font-style: italic;
730
+
}
731
+
/* GenericDeleted */
732
+
.chroma .gd {
733
+
color: #ed8796;
734
+
background-color: oklch(44.4% 0.177 26.899 / 0.5);
735
+
}
736
+
/* GenericEmph */
737
+
.chroma .ge {
738
+
font-style: italic;
739
+
}
740
+
/* GenericError */
741
+
.chroma .gr {
742
+
color: #ed8796;
743
+
}
744
+
/* GenericHeading */
745
+
.chroma .gh {
746
+
color: #f5a97f;
747
+
font-weight: bold;
748
+
}
749
+
/* GenericInserted */
750
+
.chroma .gi {
751
+
color: #a6da95;
752
+
background-color: oklch(44.8% 0.119 151.328 / 0.5);
753
+
}
754
+
/* GenericStrong */
755
+
.chroma .gs {
756
+
font-weight: bold;
757
+
}
758
+
/* GenericSubheading */
759
+
.chroma .gu {
760
+
color: #f5a97f;
761
+
font-weight: bold;
762
+
}
763
+
/* GenericTraceback */
764
+
.chroma .gt {
765
+
color: #ed8796;
766
+
}
767
+
/* GenericUnderline */
768
+
.chroma .gl {
769
+
text-decoration: underline;
770
+
}
251
771
}
252
772
253
773
.chroma .line:has(.ln:target) {
254
-
@apply bg-amber-400/30 dark:bg-amber-500/20
774
+
@apply bg-amber-400/30 dark:bg-amber-500/20;
255
775
}