1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-09 17:44:56 +09:00

LibWeb: Avoid changing button border color on disable/hover

This commit is contained in:
Psychpsyo 2025-04-30 18:49:59 +02:00 committed by Sam Atkins
parent 81b6a1100e
commit 82387e2127
Notes: github-actions[bot] 2025-04-30 19:14:19 +00:00
6 changed files with 34 additions and 9 deletions

View file

@ -53,22 +53,21 @@ button, input[type=submit], input[type=button], input[type=reset], select, ::fil
border: 1px solid ButtonBorder;
color: ButtonText;
cursor: default;
/* FIXME: For some reason this filter is required for the :hover style to work */
filter: contrast(100%);
&:hover {
background-color: -libweb-ButtonFaceHover;
}
button:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, select:disabled {
filter: contrast(70%);
&:disabled {
background-color: -libweb-ButtonFaceDisabled;
color: GrayText;
}
}
input[type=image] {
cursor: pointer;
}
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
filter: contrast(70%);
}
option {
display: none;
}

View file

@ -1,5 +1,7 @@
[
"-infinity",
"-libweb-buttonfacedisabled",
"-libweb-buttonfacehover",
"-libweb-center",
"-libweb-left",
"-libweb-link",

View file

@ -50,6 +50,8 @@ bool CSSKeywordValue::is_color(Keyword keyword)
case Keyword::Inactivecaptiontext:
case Keyword::Infobackground:
case Keyword::Infotext:
case Keyword::LibwebButtonfacedisabled:
case Keyword::LibwebButtonfacehover:
case Keyword::LibwebLink:
case Keyword::LibwebPaletteActiveLink:
case Keyword::LibwebPaletteActiveWindowBorder1:
@ -205,6 +207,10 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
return SystemColor::selected_item(scheme);
case Keyword::Selecteditemtext:
return SystemColor::selected_item_text(scheme);
case Keyword::LibwebButtonfacedisabled:
return SystemColor::button_face(scheme).with_alpha(128);
case Keyword::LibwebButtonfacehover:
return SystemColor::button_face(scheme).darkened(0.8f);
default:
break;
}

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>
div {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<div></div>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="match" href="../expected/disabled-button-border-color-ref.html" />
<style>
button {
padding: 0;
border: 50px solid green;
}
</style>
<button disabled></button>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After