public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-06 21:57:51 +09:00
Code Issues Packages Projects Releases Wiki Activity

Improve control char rendering and escape button styling (#37094)

Browse Source 
Follow-up to #37078.

- Use Unicode Control Pictures](U+2400-U+2421) to render C0 control characters
- Make it work in diff view too
- Replace escape warning emoji with SVG
- Align escape warning button with code lines

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-04-06 13:07:33 +02:00
committed by GitHub
parent e47c6135dd
commit 423cdd4d94
37 changed files with 1561 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web_src/css/modules/charescape.css
View File

@@ -1,24 +1,31 @@
/*
Show the escaped and hide the real char:
<span class="broken-code-point" data-escaped="DEL"><span class="char">{real-char}</span></span>
<span class="broken-code-point" data-escaped="␡"><span class="char">{real-char}</span></span>
Only show the real-char:
<span class="broken-code-point">{real-char}</span>
*/
.broken-code-point:not([data-escaped]),
.broken-code-point[data-escaped]::before {
.broken-code-point:not([data-escaped]) {
border-radius: 4px;
padding: 0 2px;
color: var(--color-body);
background: var(--color-text-light-1);
border: 1px var(--color-yellow) solid;
}
.broken-code-point[data-escaped] {
position: relative;
}
.broken-code-point[data-escaped]::before {
visibility: visible;
content: attr(data-escaped);
border-radius: 2px;
padding: 0 1px;
border: 1px var(--color-yellow) solid;
}
.broken-code-point[data-escaped] .char {
/* make it copyable by selecting the text (AI suggestion, no other solution) */
/* keep the original character selectable/copyable while showing the escaped label via ::before */
position: absolute;
left: 0;
opacity: 0;
pointer-events: none;
}
@@ -26,11 +33,11 @@ Only show the real-char:
/*
Show the escaped and hide the real-char:
<span class="unicode-escaped">
<span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
</span>
Hide the escaped and show the real-char:
<span>
<span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
<span class="escaped-code-point" data-escaped="[U+1F600]"><span class="char">{real-char}</span></span>
</span>
*/
.unicode-escaped .escaped-code-point[data-escaped]::before {