mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 05:37:35 +00:00
LibWeb: Re-implement checkbox painting using the UA stylesheet
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:
parent
a8bf2f8e4c
commit
2ad9c1fd6c
3 changed files with 19 additions and 15 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue