forked from tangled.org/core
Monorepo for Tangled

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
··· 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
··· 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">
+1
appview/pages/templates/repo/tags.html
··· 4 4 5 5 {{ define "repoContent" }} 6 6 <section> 7 + <h2 class="mb-4 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">tags</h2> 7 8 <div class="flex flex-col py-2 gap-12 md:gap-0"> 8 9 {{ range .Tags }} 9 10 <div class="md:grid md:grid-cols-12 md:items-start flex flex-col">
+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 }