mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 10:17:35 +00:00
LibWeb: Add scaleable checkboxes (with theme/accent-color support)
This reworks checkboxes to use a tiny 16x16 SDF for the tick icon along with an antialiased background/border. The checkbox now works well at any scale, shows the various checkbox state (enabled, disabled, being pressed), and supports using the colors from the active system theme and/or the accent-color property.
This commit is contained in:
parent
77456d1d0b
commit
cfc9966654
3 changed files with 129 additions and 28 deletions
|
@ -64,33 +64,6 @@ 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;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
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==);
|
||||
}
|
||||
|
||||
input[type=checkbox]:indeterminate {
|
||||
image-rendering: pixelated;
|
||||
/* FIXME: Eventually respect the `accent-color` property here. */
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAACZJREFUKFNjZCARMJKonmGQa/hPwD9g5yP7gWQNRAXYIA8lovwAAHYYAg3vRihbAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
option {
|
||||
display: none;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue