mirror of
https://github.com/go-gitea/gitea.git
synced 2026-04-03 19:03:05 +02:00
f80593bb23
Extract charset.ControlCharPicture() shared between highlight and charset escape paths. Add controlCharHTML helper to deduplicate HTML template. Style control char badges with body color on gray background matching the original styling. Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>
58 lines
1.5 KiB
CSS
58 lines
1.5 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] {
|
|
position: relative;
|
|
}
|
|
|
|
.broken-code-point[data-escaped]::before {
|
|
visibility: visible;
|
|
content: attr(data-escaped);
|
|
border-radius: 2px;
|
|
padding: 0 1px;
|
|
color: var(--color-body);
|
|
background: var(--color-text-light-1);
|
|
}
|
|
|
|
.broken-code-point[data-escaped] .char {
|
|
/* keep the original character selectable/copyable while showing the escaped label via ::before */
|
|
position: absolute;
|
|
left: 0;
|
|
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;
|
|
}
|