RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 10:17:35 +00:00
Code Issues Activity Actions

LibWeb: Add scaleable checkboxes (with theme/accent-color support)

Browse source 
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:
MacDue 2023-03-19 23:55:03 +00:00 • committed by Sam Atkins
parent 77456d1d0b
commit cfc9966654
3 changed files with 129 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}