diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/docs/user/page_inspector/how_to/inspect_and_select_colors | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/docs/user/page_inspector/how_to/inspect_and_select_colors')
-rw-r--r-- | devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png | bin | 0 -> 42608 bytes | |||
-rw-r--r-- | devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png | bin | 0 -> 43229 bytes | |||
-rw-r--r-- | devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png | bin | 0 -> 6916 bytes | |||
-rw-r--r-- | devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/index.rst | 31 | ||||
-rw-r--r-- | devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png | bin | 0 -> 8467 bytes |
5 files changed, 31 insertions, 0 deletions
diff --git a/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png Binary files differnew file mode 100644 index 0000000000..237cedfd2f --- /dev/null +++ b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-bad-contrast.png diff --git a/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png Binary files differnew file mode 100644 index 0000000000..56f47743ca --- /dev/null +++ b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/color-picker-good-contrast.png diff --git a/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png Binary files differnew file mode 100644 index 0000000000..49701dd100 --- /dev/null +++ b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/css_color_vars.png diff --git a/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/index.rst b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/index.rst new file mode 100644 index 0000000000..e521ef3947 --- /dev/null +++ b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/index.rst @@ -0,0 +1,31 @@ +========================= +Inspect and select colors +========================= + +In the CSS Pane's :ref:`Rules view <page_inspector_ui_tour_rules_view>`, if a rule contains a color value, you'll see a sample of the color next to the value: + +.. image:: inspector-css-color-swatch.png + +A color sample is also shown for CSS custom properties (variables) that represent colors. + +.. image:: css_color_vars.png + :alt: CSS in the Rules pane showing a color swatch on a CSS variable + :class: border + +If you click on the color sample, you'll see a color picker popup, enabling you to change the color: + +.. image:: color-picker-good-contrast.png + :alt: Color picker showing a case of good contrast with the background + +.. image:: color-picker-bad-contrast.png + :alt: Color picker showing a case of poor contrast" src="color-picker-bad-contrast.png + +If the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines. Hovering the mouse over the contrast message gives a more detailed explanation. + +The color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: + +.. raw:: html + + <iframe width="560" height="315" src="https://www.youtube.com/embed/0Zx1TN21QOo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> + <br/> + <br/> diff --git a/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png Binary files differnew file mode 100644 index 0000000000..742a25678d --- /dev/null +++ b/devtools/docs/user/page_inspector/how_to/inspect_and_select_colors/inspector-css-color-swatch.png |