forked from tangled.org/core
this repo has no description

appview: pages/templates/repo: clean up spacing and borders

anirudh.fi 907a66ce 673c6f83

verified
Changed files
+779 -210
appview
pages
+92 -47
appview/pages/templates/repo/branches.html
···
{{ end }}
{{ define "repoContent" }}
-
<section>
-
<header class="font-bold text-sm mb-4 uppercase dark:text-white">
-
Branches
-
</header>
+
<section id="branches-table" class="overflow-x-auto">
+
<h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
+
Branches
+
</h2>
-
<div class="overflow-x-auto">
-
<table class="min-w-full table-auto">
-
<tbody>
-
{{ range .Branches }}
-
<tr>
-
<td class="whitespace-nowrap">
-
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
-
<span>
-
{{ .Name }}
-
</span>
-
{{ if .IsDefault }}
-
<span class="
-
text-sm rounded
-
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
-
font-mono
-
px-2 mx-1/2
-
inline-flex items-center
-
">
-
default
-
</span>
-
{{ end }}
-
</a>
-
</td>
-
<td class="whitespace-nowrap hidden md:table-cell">
-
{{ if .Commit }}
-
<a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="font-mono">{{ slice .Commit.Hash.String 0 8 }}</a>
-
{{ end }}
-
</td>
-
<td class="whitespace-nowrap hidden md:table-cell">
-
{{ if .Commit }}
-
{{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
-
{{ index $messageParts 0 }}
-
{{ end }}
-
</td>
-
<td class="whitespace-nowrap">
-
{{ if .Commit }}
-
{{ .Commit.Author.When | timeFmt }}
-
{{ end }}
-
</td>
-
</tr>
+
<!-- desktop view (hidden on small screens) -->
+
<table class="w-full border-collapse hidden md:table">
+
<thead>
+
<tr>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Name</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
+
</tr>
+
</thead>
+
<tbody>
+
{{ range $index, $branch := .Branches }}
+
<tr class="{{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+
<td class="py-3 whitespace-nowrap">
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
+
<span class="dark:text-white">
+
{{ .Name }}
+
</span>
+
{{ if .IsDefault }}
+
<span class="
+
text-sm rounded
+
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
+
font-mono
+
px-2 mx-1/2
+
inline-flex items-center
+
">
+
default
+
</span>
+
{{ end }}
+
</a>
+
</td>
+
<td class="py-3 whitespace-nowrap">
+
{{ if .Commit }}
+
<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>
+
{{ end }}
+
</td>
+
<td class="py-3 whitespace-nowrap">
+
{{ if .Commit }}
+
{{ $messageParts := splitN .Commit.Message "\n\n" 2 }}
+
<span class="text-gray-700 dark:text-gray-300">{{ index $messageParts 0 }}</span>
+
{{ end }}
+
</td>
+
<td class="py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">
+
{{ if .Commit }}
+
{{ .Commit.Author.When | timeFmt }}
+
{{ end }}
+
</td>
+
</tr>
+
{{ end }}
+
</tbody>
+
</table>
+
+
<!-- mobile view (visible only on small screens) -->
+
<div class="md:hidden">
+
{{ range $index, $branch := .Branches }}
+
<div class="relative p-2 {{ if ne $index (sub (len $.Branches) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+
<div class="flex items-center justify-between">
+
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Name | urlquery }}" class="no-underline hover:underline flex items-center gap-2">
+
<span class="dark:text-white font-medium">
+
{{ .Name }}
+
</span>
+
{{ if .IsDefault }}
+
<span class="
+
text-xs rounded
+
bg-gray-100 dark:bg-gray-700 text-black dark:text-white
+
font-mono
+
px-2
+
inline-flex items-center
+
">
+
default
+
</span>
{{ end }}
-
</tbody>
-
</table>
+
</a>
+
</div>
+
+
{{ if .Commit }}
+
<div class="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center">
+
<span class="font-mono">
+
<a href="/{{ $.RepoInfo.FullName }}/commits/{{ .Name | urlquery }}" class="text-gray-500 dark:text-gray-400 no-underline hover:underline">
+
{{ slice .Commit.Hash.String 0 8 }}
+
</a>
+
</span>
+
<div class="inline-block px-1 select-none after:content-['·']"></div>
+
<span>{{ .Commit.Author.When | timeFmt }}</span>
+
</div>
+
{{ end }}
</div>
-
</section>
+
{{ end }}
+
</div>
+
</section>
{{ end }}
+15 -12
appview/pages/templates/repo/log.html
···
{{ define "repoContent" }}
<section id="commit-table" class="overflow-x-auto">
+
<h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
+
commits
+
</h2>
+
<!-- desktop view (hidden on small screens) -->
<table class="w-full border-collapse hidden md:table">
<thead>
<tr>
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
-
<th class="px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
+
<th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
</tr>
</thead>
<tbody>
{{ range $index, $commit := .Commits }}
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
-
<tr class="border-b border-gray-200 dark:border-gray-700">
-
<td class="px-4 py-3 align-top">
+
<tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
+
<td class=" py-3 align-top">
{{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
{{ if $didOrHandle }}
<a href="/{{ $didOrHandle }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $didOrHandle }}</a>
···
<a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
{{ end }}
</td>
-
<td class="px-4 py-3 align-top font-mono flex items-end">
+
<td class=" py-3 align-top font-mono flex items-end">
<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>
<div class="inline-flex">
<button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
···
</a>
</div>
</td>
-
<td class="px-4 py-3 align-top">
+
<td class=" py-3 align-top">
<div>
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
{{ if gt (len $messageParts) 1 }}
···
{{ end }}
</div>
</td>
-
<td class="px-4 py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
+
<td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Author.When }}</td>
</tr>
{{ end }}
</tbody>
···
<!-- mobile view (visible only on small screens) -->
<div class="md:hidden">
-
<h2 class="p-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">commits</h2>
-
{{ range $commit := .Commits }}
-
<div class="relative p-2 border-b border-gray-200 dark:border-gray-700">
+
{{ range $index, $commit := .Commits }}
+
<div class="relative p-2 {{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
<div id="commit-message">
{{ $messageParts := splitN $commit.Message "\n\n" 2 }}
<div class="text-base cursor-pointer">
+1
appview/pages/templates/repo/tags.html
···
{{ define "repoContent" }}
<section>
+
<h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2>
<div class="flex flex-col py-2 gap-12 md:gap-0">
{{ range .Tags }}
<div class="md:grid md:grid-cols-12 md:items-start flex flex-col">
+671 -151
input.css
···
}
}
-
/* Background */ .bg { color: #4c4f69; background-color: #eff1f5; }
-
/* PreWrapper */ .chroma { color: #4c4f69; background-color: #eff1f5; }
-
/* Error */ .chroma .err { color: #d20f39 }
-
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-
/* LineHighlight */ .chroma .hl { background-color: #bcc0cc }
-
/* 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 }
-
/* 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 }
-
/* Line */ .chroma .line { display: flex; }
-
/* Keyword */ .chroma .k { color: #8839ef }
-
/* KeywordConstant */ .chroma .kc { color: #fe640b }
-
/* KeywordDeclaration */ .chroma .kd { color: #d20f39 }
-
/* KeywordNamespace */ .chroma .kn { color: #179299 }
-
/* KeywordPseudo */ .chroma .kp { color: #8839ef }
-
/* KeywordReserved */ .chroma .kr { color: #8839ef }
-
/* KeywordType */ .chroma .kt { color: #d20f39 }
-
/* NameAttribute */ .chroma .na { color: #1e66f5 }
-
/* NameBuiltin */ .chroma .nb { color: #04a5e5 }
-
/* NameBuiltinPseudo */ .chroma .bp { color: #04a5e5 }
-
/* NameClass */ .chroma .nc { color: #df8e1d }
-
/* NameConstant */ .chroma .no { color: #df8e1d }
-
/* NameDecorator */ .chroma .nd { color: #1e66f5; font-weight: bold }
-
/* NameEntity */ .chroma .ni { color: #179299 }
-
/* NameException */ .chroma .ne { color: #fe640b }
-
/* NameFunction */ .chroma .nf { color: #1e66f5 }
-
/* NameFunctionMagic */ .chroma .fm { color: #1e66f5 }
-
/* NameLabel */ .chroma .nl { color: #04a5e5 }
-
/* NameNamespace */ .chroma .nn { color: #fe640b }
-
/* NameProperty */ .chroma .py { color: #fe640b }
-
/* NameTag */ .chroma .nt { color: #8839ef }
-
/* NameVariable */ .chroma .nv { color: #dc8a78 }
-
/* NameVariableClass */ .chroma .vc { color: #dc8a78 }
-
/* NameVariableGlobal */ .chroma .vg { color: #dc8a78 }
-
/* NameVariableInstance */ .chroma .vi { color: #dc8a78 }
-
/* NameVariableMagic */ .chroma .vm { color: #dc8a78 }
-
/* LiteralString */ .chroma .s { color: #40a02b }
-
/* LiteralStringAffix */ .chroma .sa { color: #d20f39 }
-
/* LiteralStringBacktick */ .chroma .sb { color: #40a02b }
-
/* LiteralStringChar */ .chroma .sc { color: #40a02b }
-
/* LiteralStringDelimiter */ .chroma .dl { color: #1e66f5 }
-
/* LiteralStringDoc */ .chroma .sd { color: #9ca0b0 }
-
/* LiteralStringDouble */ .chroma .s2 { color: #40a02b }
-
/* LiteralStringEscape */ .chroma .se { color: #1e66f5 }
-
/* LiteralStringHeredoc */ .chroma .sh { color: #9ca0b0 }
-
/* LiteralStringInterpol */ .chroma .si { color: #40a02b }
-
/* LiteralStringOther */ .chroma .sx { color: #40a02b }
-
/* LiteralStringRegex */ .chroma .sr { color: #179299 }
-
/* LiteralStringSingle */ .chroma .s1 { color: #40a02b }
-
/* LiteralStringSymbol */ .chroma .ss { color: #40a02b }
-
/* LiteralNumber */ .chroma .m { color: #fe640b }
-
/* LiteralNumberBin */ .chroma .mb { color: #fe640b }
-
/* LiteralNumberFloat */ .chroma .mf { color: #fe640b }
-
/* LiteralNumberHex */ .chroma .mh { color: #fe640b }
-
/* LiteralNumberInteger */ .chroma .mi { color: #fe640b }
-
/* LiteralNumberIntegerLong */ .chroma .il { color: #fe640b }
-
/* LiteralNumberOct */ .chroma .mo { color: #fe640b }
-
/* Operator */ .chroma .o { color: #04a5e5; font-weight: bold }
-
/* OperatorWord */ .chroma .ow { color: #04a5e5; font-weight: bold }
-
/* Comment */ .chroma .c { color: #9ca0b0; font-style: italic }
-
/* CommentHashbang */ .chroma .ch { color: #9ca0b0; font-style: italic }
-
/* CommentMultiline */ .chroma .cm { color: #9ca0b0; font-style: italic }
-
/* CommentSingle */ .chroma .c1 { color: #9ca0b0; font-style: italic }
-
/* CommentSpecial */ .chroma .cs { color: #9ca0b0; font-style: italic }
-
/* CommentPreproc */ .chroma .cp { color: #9ca0b0; font-style: italic }
-
/* CommentPreprocFile */ .chroma .cpf { color: #9ca0b0; font-weight: bold; font-style: italic }
-
/* GenericDeleted */ .chroma .gd { color: #d20f39; background-color: oklch(93.6% 0.032 17.717) }
-
/* GenericEmph */ .chroma .ge { font-style: italic }
-
/* GenericError */ .chroma .gr { color: #d20f39 }
-
/* GenericHeading */ .chroma .gh { color: #fe640b; font-weight: bold }
-
/* GenericInserted */ .chroma .gi { color: #40a02b; background-color: oklch(96.2% 0.044 156.743) }
-
/* GenericStrong */ .chroma .gs { font-weight: bold }
-
/* GenericSubheading */ .chroma .gu { color: #fe640b; font-weight: bold }
-
/* GenericTraceback */ .chroma .gt { color: #d20f39 }
-
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+
/* Background */
+
.bg {
+
color: #4c4f69;
+
background-color: #eff1f5;
+
}
+
/* PreWrapper */
+
.chroma {
+
color: #4c4f69;
+
background-color: #eff1f5;
+
}
+
/* Error */
+
.chroma .err {
+
color: #d20f39;
+
}
+
/* LineLink */
+
.chroma .lnlinks {
+
outline: none;
+
text-decoration: none;
+
color: inherit;
+
}
+
/* LineTableTD */
+
.chroma .lntd {
+
vertical-align: top;
+
padding: 0;
+
margin: 0;
+
border: 0;
+
}
+
/* LineTable */
+
.chroma .lntable {
+
border-spacing: 0;
+
padding: 0;
+
margin: 0;
+
border: 0;
+
}
+
/* LineHighlight */
+
.chroma .hl {
+
background-color: #bcc0cc;
+
}
+
/* 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;
+
}
+
/* 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;
+
}
+
/* Line */
+
.chroma .line {
+
display: flex;
+
}
+
/* Keyword */
+
.chroma .k {
+
color: #8839ef;
+
}
+
/* KeywordConstant */
+
.chroma .kc {
+
color: #fe640b;
+
}
+
/* KeywordDeclaration */
+
.chroma .kd {
+
color: #d20f39;
+
}
+
/* KeywordNamespace */
+
.chroma .kn {
+
color: #179299;
+
}
+
/* KeywordPseudo */
+
.chroma .kp {
+
color: #8839ef;
+
}
+
/* KeywordReserved */
+
.chroma .kr {
+
color: #8839ef;
+
}
+
/* KeywordType */
+
.chroma .kt {
+
color: #d20f39;
+
}
+
/* NameAttribute */
+
.chroma .na {
+
color: #1e66f5;
+
}
+
/* NameBuiltin */
+
.chroma .nb {
+
color: #04a5e5;
+
}
+
/* NameBuiltinPseudo */
+
.chroma .bp {
+
color: #04a5e5;
+
}
+
/* NameClass */
+
.chroma .nc {
+
color: #df8e1d;
+
}
+
/* NameConstant */
+
.chroma .no {
+
color: #df8e1d;
+
}
+
/* NameDecorator */
+
.chroma .nd {
+
color: #1e66f5;
+
font-weight: bold;
+
}
+
/* NameEntity */
+
.chroma .ni {
+
color: #179299;
+
}
+
/* NameException */
+
.chroma .ne {
+
color: #fe640b;
+
}
+
/* NameFunction */
+
.chroma .nf {
+
color: #1e66f5;
+
}
+
/* NameFunctionMagic */
+
.chroma .fm {
+
color: #1e66f5;
+
}
+
/* NameLabel */
+
.chroma .nl {
+
color: #04a5e5;
+
}
+
/* NameNamespace */
+
.chroma .nn {
+
color: #fe640b;
+
}
+
/* NameProperty */
+
.chroma .py {
+
color: #fe640b;
+
}
+
/* NameTag */
+
.chroma .nt {
+
color: #8839ef;
+
}
+
/* NameVariable */
+
.chroma .nv {
+
color: #dc8a78;
+
}
+
/* NameVariableClass */
+
.chroma .vc {
+
color: #dc8a78;
+
}
+
/* NameVariableGlobal */
+
.chroma .vg {
+
color: #dc8a78;
+
}
+
/* NameVariableInstance */
+
.chroma .vi {
+
color: #dc8a78;
+
}
+
/* NameVariableMagic */
+
.chroma .vm {
+
color: #dc8a78;
+
}
+
/* LiteralString */
+
.chroma .s {
+
color: #40a02b;
+
}
+
/* LiteralStringAffix */
+
.chroma .sa {
+
color: #d20f39;
+
}
+
/* LiteralStringBacktick */
+
.chroma .sb {
+
color: #40a02b;
+
}
+
/* LiteralStringChar */
+
.chroma .sc {
+
color: #40a02b;
+
}
+
/* LiteralStringDelimiter */
+
.chroma .dl {
+
color: #1e66f5;
+
}
+
/* LiteralStringDoc */
+
.chroma .sd {
+
color: #9ca0b0;
+
}
+
/* LiteralStringDouble */
+
.chroma .s2 {
+
color: #40a02b;
+
}
+
/* LiteralStringEscape */
+
.chroma .se {
+
color: #1e66f5;
+
}
+
/* LiteralStringHeredoc */
+
.chroma .sh {
+
color: #9ca0b0;
+
}
+
/* LiteralStringInterpol */
+
.chroma .si {
+
color: #40a02b;
+
}
+
/* LiteralStringOther */
+
.chroma .sx {
+
color: #40a02b;
+
}
+
/* LiteralStringRegex */
+
.chroma .sr {
+
color: #179299;
+
}
+
/* LiteralStringSingle */
+
.chroma .s1 {
+
color: #40a02b;
+
}
+
/* LiteralStringSymbol */
+
.chroma .ss {
+
color: #40a02b;
+
}
+
/* LiteralNumber */
+
.chroma .m {
+
color: #fe640b;
+
}
+
/* LiteralNumberBin */
+
.chroma .mb {
+
color: #fe640b;
+
}
+
/* LiteralNumberFloat */
+
.chroma .mf {
+
color: #fe640b;
+
}
+
/* LiteralNumberHex */
+
.chroma .mh {
+
color: #fe640b;
+
}
+
/* LiteralNumberInteger */
+
.chroma .mi {
+
color: #fe640b;
+
}
+
/* LiteralNumberIntegerLong */
+
.chroma .il {
+
color: #fe640b;
+
}
+
/* LiteralNumberOct */
+
.chroma .mo {
+
color: #fe640b;
+
}
+
/* Operator */
+
.chroma .o {
+
color: #04a5e5;
+
font-weight: bold;
+
}
+
/* OperatorWord */
+
.chroma .ow {
+
color: #04a5e5;
+
font-weight: bold;
+
}
+
/* Comment */
+
.chroma .c {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentHashbang */
+
.chroma .ch {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentMultiline */
+
.chroma .cm {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentSingle */
+
.chroma .c1 {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentSpecial */
+
.chroma .cs {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentPreproc */
+
.chroma .cp {
+
color: #9ca0b0;
+
font-style: italic;
+
}
+
/* CommentPreprocFile */
+
.chroma .cpf {
+
color: #9ca0b0;
+
font-weight: bold;
+
font-style: italic;
+
}
+
/* GenericDeleted */
+
.chroma .gd {
+
color: #d20f39;
+
background-color: oklch(93.6% 0.032 17.717);
+
}
+
/* GenericEmph */
+
.chroma .ge {
+
font-style: italic;
+
}
+
/* GenericError */
+
.chroma .gr {
+
color: #d20f39;
+
}
+
/* GenericHeading */
+
.chroma .gh {
+
color: #fe640b;
+
font-weight: bold;
+
}
+
/* GenericInserted */
+
.chroma .gi {
+
color: #40a02b;
+
background-color: oklch(96.2% 0.044 156.743);
+
}
+
/* GenericStrong */
+
.chroma .gs {
+
font-weight: bold;
+
}
+
/* GenericSubheading */
+
.chroma .gu {
+
color: #fe640b;
+
font-weight: bold;
+
}
+
/* GenericTraceback */
+
.chroma .gt {
+
color: #d20f39;
+
}
+
/* GenericUnderline */
+
.chroma .gl {
+
text-decoration: underline;
+
}
@media (prefers-color-scheme: dark) {
-
/* Background */ .bg { color: #cad3f5; background-color: #24273a; }
-
/* PreWrapper */ .chroma { color: #cad3f5; background-color: #24273a; }
-
/* Error */ .chroma .err { color: #ed8796 }
-
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-
/* LineHighlight */ .chroma .hl { background-color: #494d64 }
-
/* 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 }
-
/* 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 }
-
/* Line */ .chroma .line { display: flex; }
-
/* Keyword */ .chroma .k { color: #c6a0f6 }
-
/* KeywordConstant */ .chroma .kc { color: #f5a97f }
-
/* KeywordDeclaration */ .chroma .kd { color: #ed8796 }
-
/* KeywordNamespace */ .chroma .kn { color: #8bd5ca }
-
/* KeywordPseudo */ .chroma .kp { color: #c6a0f6 }
-
/* KeywordReserved */ .chroma .kr { color: #c6a0f6 }
-
/* KeywordType */ .chroma .kt { color: #ed8796 }
-
/* NameAttribute */ .chroma .na { color: #8aadf4 }
-
/* NameBuiltin */ .chroma .nb { color: #91d7e3 }
-
/* NameBuiltinPseudo */ .chroma .bp { color: #91d7e3 }
-
/* NameClass */ .chroma .nc { color: #eed49f }
-
/* NameConstant */ .chroma .no { color: #eed49f }
-
/* NameDecorator */ .chroma .nd { color: #8aadf4; font-weight: bold }
-
/* NameEntity */ .chroma .ni { color: #8bd5ca }
-
/* NameException */ .chroma .ne { color: #f5a97f }
-
/* NameFunction */ .chroma .nf { color: #8aadf4 }
-
/* NameFunctionMagic */ .chroma .fm { color: #8aadf4 }
-
/* NameLabel */ .chroma .nl { color: #91d7e3 }
-
/* NameNamespace */ .chroma .nn { color: #f5a97f }
-
/* NameProperty */ .chroma .py { color: #f5a97f }
-
/* NameTag */ .chroma .nt { color: #c6a0f6 }
-
/* NameVariable */ .chroma .nv { color: #f4dbd6 }
-
/* NameVariableClass */ .chroma .vc { color: #f4dbd6 }
-
/* NameVariableGlobal */ .chroma .vg { color: #f4dbd6 }
-
/* NameVariableInstance */ .chroma .vi { color: #f4dbd6 }
-
/* NameVariableMagic */ .chroma .vm { color: #f4dbd6 }
-
/* LiteralString */ .chroma .s { color: #a6da95 }
-
/* LiteralStringAffix */ .chroma .sa { color: #ed8796 }
-
/* LiteralStringBacktick */ .chroma .sb { color: #a6da95 }
-
/* LiteralStringChar */ .chroma .sc { color: #a6da95 }
-
/* LiteralStringDelimiter */ .chroma .dl { color: #8aadf4 }
-
/* LiteralStringDoc */ .chroma .sd { color: #6e738d }
-
/* LiteralStringDouble */ .chroma .s2 { color: #a6da95 }
-
/* LiteralStringEscape */ .chroma .se { color: #8aadf4 }
-
/* LiteralStringHeredoc */ .chroma .sh { color: #6e738d }
-
/* LiteralStringInterpol */ .chroma .si { color: #a6da95 }
-
/* LiteralStringOther */ .chroma .sx { color: #a6da95 }
-
/* LiteralStringRegex */ .chroma .sr { color: #8bd5ca }
-
/* LiteralStringSingle */ .chroma .s1 { color: #a6da95 }
-
/* LiteralStringSymbol */ .chroma .ss { color: #a6da95 }
-
/* LiteralNumber */ .chroma .m { color: #f5a97f }
-
/* LiteralNumberBin */ .chroma .mb { color: #f5a97f }
-
/* LiteralNumberFloat */ .chroma .mf { color: #f5a97f }
-
/* LiteralNumberHex */ .chroma .mh { color: #f5a97f }
-
/* LiteralNumberInteger */ .chroma .mi { color: #f5a97f }
-
/* LiteralNumberIntegerLong */ .chroma .il { color: #f5a97f }
-
/* LiteralNumberOct */ .chroma .mo { color: #f5a97f }
-
/* Operator */ .chroma .o { color: #91d7e3; font-weight: bold }
-
/* OperatorWord */ .chroma .ow { color: #91d7e3; font-weight: bold }
-
/* Comment */ .chroma .c { color: #6e738d; font-style: italic }
-
/* CommentHashbang */ .chroma .ch { color: #6e738d; font-style: italic }
-
/* CommentMultiline */ .chroma .cm { color: #6e738d; font-style: italic }
-
/* CommentSingle */ .chroma .c1 { color: #6e738d; font-style: italic }
-
/* CommentSpecial */ .chroma .cs { color: #6e738d; font-style: italic }
-
/* CommentPreproc */ .chroma .cp { color: #6e738d; font-style: italic }
-
/* CommentPreprocFile */ .chroma .cpf { color: #6e738d; font-weight: bold; font-style: italic }
-
/* GenericDeleted */ .chroma .gd { color: #ed8796; background-color: oklch(44.4% 0.177 26.899 / 0.5) }
-
/* GenericEmph */ .chroma .ge { font-style: italic }
-
/* GenericError */ .chroma .gr { color: #ed8796 }
-
/* GenericHeading */ .chroma .gh { color: #f5a97f; font-weight: bold }
-
/* GenericInserted */ .chroma .gi { color: #a6da95; background-color: oklch(44.8% 0.119 151.328 / 0.5) }
-
/* GenericStrong */ .chroma .gs { font-weight: bold }
-
/* GenericSubheading */ .chroma .gu { color: #f5a97f; font-weight: bold }
-
/* GenericTraceback */ .chroma .gt { color: #ed8796 }
-
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+
/* Background */
+
.bg {
+
color: #cad3f5;
+
background-color: #24273a;
+
}
+
/* PreWrapper */
+
.chroma {
+
color: #cad3f5;
+
background-color: #24273a;
+
}
+
/* Error */
+
.chroma .err {
+
color: #ed8796;
+
}
+
/* LineLink */
+
.chroma .lnlinks {
+
outline: none;
+
text-decoration: none;
+
color: inherit;
+
}
+
/* LineTableTD */
+
.chroma .lntd {
+
vertical-align: top;
+
padding: 0;
+
margin: 0;
+
border: 0;
+
}
+
/* LineTable */
+
.chroma .lntable {
+
border-spacing: 0;
+
padding: 0;
+
margin: 0;
+
border: 0;
+
}
+
/* LineHighlight */
+
.chroma .hl {
+
background-color: #494d64;
+
}
+
/* 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;
+
}
+
/* 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;
+
}
+
/* Line */
+
.chroma .line {
+
display: flex;
+
}
+
/* Keyword */
+
.chroma .k {
+
color: #c6a0f6;
+
}
+
/* KeywordConstant */
+
.chroma .kc {
+
color: #f5a97f;
+
}
+
/* KeywordDeclaration */
+
.chroma .kd {
+
color: #ed8796;
+
}
+
/* KeywordNamespace */
+
.chroma .kn {
+
color: #8bd5ca;
+
}
+
/* KeywordPseudo */
+
.chroma .kp {
+
color: #c6a0f6;
+
}
+
/* KeywordReserved */
+
.chroma .kr {
+
color: #c6a0f6;
+
}
+
/* KeywordType */
+
.chroma .kt {
+
color: #ed8796;
+
}
+
/* NameAttribute */
+
.chroma .na {
+
color: #8aadf4;
+
}
+
/* NameBuiltin */
+
.chroma .nb {
+
color: #91d7e3;
+
}
+
/* NameBuiltinPseudo */
+
.chroma .bp {
+
color: #91d7e3;
+
}
+
/* NameClass */
+
.chroma .nc {
+
color: #eed49f;
+
}
+
/* NameConstant */
+
.chroma .no {
+
color: #eed49f;
+
}
+
/* NameDecorator */
+
.chroma .nd {
+
color: #8aadf4;
+
font-weight: bold;
+
}
+
/* NameEntity */
+
.chroma .ni {
+
color: #8bd5ca;
+
}
+
/* NameException */
+
.chroma .ne {
+
color: #f5a97f;
+
}
+
/* NameFunction */
+
.chroma .nf {
+
color: #8aadf4;
+
}
+
/* NameFunctionMagic */
+
.chroma .fm {
+
color: #8aadf4;
+
}
+
/* NameLabel */
+
.chroma .nl {
+
color: #91d7e3;
+
}
+
/* NameNamespace */
+
.chroma .nn {
+
color: #f5a97f;
+
}
+
/* NameProperty */
+
.chroma .py {
+
color: #f5a97f;
+
}
+
/* NameTag */
+
.chroma .nt {
+
color: #c6a0f6;
+
}
+
/* NameVariable */
+
.chroma .nv {
+
color: #f4dbd6;
+
}
+
/* NameVariableClass */
+
.chroma .vc {
+
color: #f4dbd6;
+
}
+
/* NameVariableGlobal */
+
.chroma .vg {
+
color: #f4dbd6;
+
}
+
/* NameVariableInstance */
+
.chroma .vi {
+
color: #f4dbd6;
+
}
+
/* NameVariableMagic */
+
.chroma .vm {
+
color: #f4dbd6;
+
}
+
/* LiteralString */
+
.chroma .s {
+
color: #a6da95;
+
}
+
/* LiteralStringAffix */
+
.chroma .sa {
+
color: #ed8796;
+
}
+
/* LiteralStringBacktick */
+
.chroma .sb {
+
color: #a6da95;
+
}
+
/* LiteralStringChar */
+
.chroma .sc {
+
color: #a6da95;
+
}
+
/* LiteralStringDelimiter */
+
.chroma .dl {
+
color: #8aadf4;
+
}
+
/* LiteralStringDoc */
+
.chroma .sd {
+
color: #6e738d;
+
}
+
/* LiteralStringDouble */
+
.chroma .s2 {
+
color: #a6da95;
+
}
+
/* LiteralStringEscape */
+
.chroma .se {
+
color: #8aadf4;
+
}
+
/* LiteralStringHeredoc */
+
.chroma .sh {
+
color: #6e738d;
+
}
+
/* LiteralStringInterpol */
+
.chroma .si {
+
color: #a6da95;
+
}
+
/* LiteralStringOther */
+
.chroma .sx {
+
color: #a6da95;
+
}
+
/* LiteralStringRegex */
+
.chroma .sr {
+
color: #8bd5ca;
+
}
+
/* LiteralStringSingle */
+
.chroma .s1 {
+
color: #a6da95;
+
}
+
/* LiteralStringSymbol */
+
.chroma .ss {
+
color: #a6da95;
+
}
+
/* LiteralNumber */
+
.chroma .m {
+
color: #f5a97f;
+
}
+
/* LiteralNumberBin */
+
.chroma .mb {
+
color: #f5a97f;
+
}
+
/* LiteralNumberFloat */
+
.chroma .mf {
+
color: #f5a97f;
+
}
+
/* LiteralNumberHex */
+
.chroma .mh {
+
color: #f5a97f;
+
}
+
/* LiteralNumberInteger */
+
.chroma .mi {
+
color: #f5a97f;
+
}
+
/* LiteralNumberIntegerLong */
+
.chroma .il {
+
color: #f5a97f;
+
}
+
/* LiteralNumberOct */
+
.chroma .mo {
+
color: #f5a97f;
+
}
+
/* Operator */
+
.chroma .o {
+
color: #91d7e3;
+
font-weight: bold;
+
}
+
/* OperatorWord */
+
.chroma .ow {
+
color: #91d7e3;
+
font-weight: bold;
+
}
+
/* Comment */
+
.chroma .c {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentHashbang */
+
.chroma .ch {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentMultiline */
+
.chroma .cm {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentSingle */
+
.chroma .c1 {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentSpecial */
+
.chroma .cs {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentPreproc */
+
.chroma .cp {
+
color: #6e738d;
+
font-style: italic;
+
}
+
/* CommentPreprocFile */
+
.chroma .cpf {
+
color: #6e738d;
+
font-weight: bold;
+
font-style: italic;
+
}
+
/* GenericDeleted */
+
.chroma .gd {
+
color: #ed8796;
+
background-color: oklch(44.4% 0.177 26.899 / 0.5);
+
}
+
/* GenericEmph */
+
.chroma .ge {
+
font-style: italic;
+
}
+
/* GenericError */
+
.chroma .gr {
+
color: #ed8796;
+
}
+
/* GenericHeading */
+
.chroma .gh {
+
color: #f5a97f;
+
font-weight: bold;
+
}
+
/* GenericInserted */
+
.chroma .gi {
+
color: #a6da95;
+
background-color: oklch(44.8% 0.119 151.328 / 0.5);
+
}
+
/* GenericStrong */
+
.chroma .gs {
+
font-weight: bold;
+
}
+
/* GenericSubheading */
+
.chroma .gu {
+
color: #f5a97f;
+
font-weight: bold;
+
}
+
/* GenericTraceback */
+
.chroma .gt {
+
color: #ed8796;
+
}
+
/* GenericUnderline */
+
.chroma .gl {
+
text-decoration: underline;
+
}
}
.chroma .line:has(.ln:target) {
-
@apply bg-amber-400/30 dark:bg-amber-500/20
+
@apply bg-amber-400/30 dark:bg-amber-500/20;
}