mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-22 02:09:24 +00:00
LibWeb/CSS: Implement the color-scheme CSS property
This commit is contained in:
parent
89296b88a0
commit
ce5cd012b9
Notes:
github-actions[bot]
2025-01-08 11:19:41 +00:00
Author: https://github.com/Gingeh
Commit: ce5cd012b9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3146
Reviewed-by: https://github.com/AtkinsSJ ✅
36 changed files with 618 additions and 370 deletions
|
@ -5,7 +5,6 @@
|
|||
|
||||
html {
|
||||
font-family: serif;
|
||||
color: CanvasText;
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -54,15 +53,12 @@ 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%);
|
||||
}
|
||||
|
||||
button:disabled, input[type=submit]:disabled, input[type=button]:disabled, input[type=reset]:disabled, select:disabled {
|
||||
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
|
||||
* version of our light ButtonFace color. Once we support `color-scheme: dark`
|
||||
* we'll need to use a different color for that.
|
||||
*/
|
||||
background-color: #e5e0d7;
|
||||
color: GrayText;
|
||||
filter: contrast(70%);
|
||||
}
|
||||
|
||||
input[type=image] {
|
||||
|
@ -70,11 +66,7 @@ input[type=image] {
|
|||
}
|
||||
|
||||
button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, select:hover {
|
||||
/* FIXME: There isn't a <system-color> keyword for this, so this is a slightly lightened
|
||||
* version of our light ButtonFace color. Once we support `color-scheme: dark`
|
||||
* we'll need to use a different color for that.
|
||||
*/
|
||||
background-color: #e5e0d7;
|
||||
filter: contrast(70%);
|
||||
}
|
||||
|
||||
option {
|
||||
|
@ -95,7 +87,7 @@ input[type=range]::-webkit-slider-runnable-track {
|
|||
height: 4px;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
background-color: Background;
|
||||
background-color: AccentColorText;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
|
@ -143,7 +135,7 @@ progress::-webkit-progress-bar, progress::-webkit-progress-value {
|
|||
height: 100%;
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: Background;
|
||||
background-color: AccentColorText;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
@ -862,6 +854,8 @@ progress {
|
|||
/* https://github.com/whatwg/html/pull/9546
|
||||
*/
|
||||
input[type=checkbox][switch] {
|
||||
/* FIXME: Workaround until we can properly style dark switches */
|
||||
color-scheme: light;
|
||||
appearance: none;
|
||||
height: 1em;
|
||||
width: 1.8em;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue