0
0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-04 05:45:23 +02:00
gitea/web_src/css/modules/charescape.css
silverwind 1e96a85f1b
Use Unicode Control Pictures for control character display
Render ASCII control characters (0x00-0x1F, 0x7F) as Unicode Control
Pictures (U+2400-U+2421) instead of text abbreviations like [DEL] or
[U+001E]. This applies to both the file view and diff view paths.
Also style control char badges in red without background, matching
the style of other escaped code points.

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
2026-04-03 10:04:20 +02:00

49 lines
1.3 KiB
CSS

/*
Show the escaped and hide the real char:
<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]) {
border-radius: 4px;
padding: 0 2px;
color: var(--color-body);
background: var(--color-text-light-1);
}
.broken-code-point[data-escaped]::before {
visibility: visible;
content: attr(data-escaped);
color: var(--color-red);
}
.broken-code-point[data-escaped] .char {
/* make it copyable by selecting the text (AI suggestion, no other solution) */
position: absolute;
opacity: 0;
pointer-events: none;
}
/*
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>
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>
*/
.unicode-escaped .escaped-code-point[data-escaped]::before {
visibility: visible;
content: attr(data-escaped);
color: var(--color-red);
}
.unicode-escaped .escaped-code-point .char {
display: none;
}
.unicode-escaped .ambiguous-code-point {
border: 1px var(--color-yellow) solid;
}