RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 16:57:34 +00:00
Code Issues Activity Actions

LibWeb: Re-implement checkbox painting using the UA stylesheet

Browse source 
The checkbox provided by ClassicStylePainter is not scaling-aware and
generally unflexible, instead use the UA default stylesheet with a
handful of properties, the same way we already style buttons and text
inputs.

Thanks to Xexxa for the nice checkmark image!

Co-Authored-By: Xexxa <93391300+Xexxa@users.noreply.github.com>
This commit is contained in:
Linus Groh 2023-02-11 21:45:53 +00:00
parent a8bf2f8e4c
commit 2ad9c1fd6c
3 changed files with 19 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -64,6 +64,25 @@ button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=res
background-color: -libweb-palette-hover-highlight;
}
input[type=checkbox] {
display: inline-block;
width: 12px;
height: 12px;
margin: 2px;
border: 1px solid -libweb-palette-threed-shadow1;
}
input[type=checkbox]:checked {
/*
This roughly resembles ClassicStylePainter's paint_check_box() while uncoupling the styling from LibGfx, similar to
<button> above. This is a simple checkmark that still looks ok at 2x scale.
Eventually we should respect the `accent-color` property here, which may require going back to an implementation via
CheckBoxPaintable::paint().
*/
image-rendering: pixelated;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAEhJREFUKFNjYBgs4D/MIYxEuAiuGKiWkZAGFMUgw5mQbECWBAljKAYJwmxAl0Tnw81FdhK6DcgGYtWA0xlw1TgY2GzCoZQWwgCU1woFwvnCFQAAAABJRU5ErkJggg==);
}
option {
display: none;
}