Fix blurry button text rendering across browsers
- Add subpixel antialiasing for form controls - Remove CSS filters that cause text blur - Use native browser font smoothing - Disable font ligatures for consistency This fixes the issue where some button text appears blurry in certain browsers (especially transcript toggle buttons). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
bada8bdcea
commit
06c830607f
@ -1,5 +1,27 @@
|
|||||||
/* Custom styles for XP.css integration */
|
/* Custom styles for XP.css integration */
|
||||||
|
|
||||||
|
/* Fix blurry text rendering - use native subpixel rendering */
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
label {
|
||||||
|
-webkit-font-smoothing: subpixel-antialiased;
|
||||||
|
-moz-osx-font-smoothing: auto;
|
||||||
|
font-smooth: never;
|
||||||
|
-webkit-font-feature-settings: "liga" 0;
|
||||||
|
font-feature-settings: "liga" 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure buttons don't have filters or transforms that cause blur */
|
||||||
|
button {
|
||||||
|
filter: none !important;
|
||||||
|
will-change: auto;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
image-rendering: -moz-crisp-edges;
|
||||||
|
image-rendering: -webkit-optimize-contrast;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: teal;
|
background: teal;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user