diff --git a/docs/styles/links/demos/link_hover_style_demo.gif b/docs/styles/links/demos/link_hover_style_demo.gif index 901a5af39..cc0a699c1 100644 Binary files a/docs/styles/links/demos/link_hover_style_demo.gif and b/docs/styles/links/demos/link_hover_style_demo.gif differ diff --git a/docs/styles/links/index.md b/docs/styles/links/index.md index 475686cbd..855e391ce 100644 --- a/docs/styles/links/index.md +++ b/docs/styles/links/index.md @@ -8,24 +8,24 @@ Textual supports the concept of inline "links" embedded in text which trigger an There are a number of styles which influence the appearance of these links within a widget. -| Property | Description | -|-------------------------|-------------------------------------------------------------| -| [`link-color`](./link_color.md) | The color of link text. | -| [`link-background`](./link_background.md) | The background color of link text. | -| [`link-style`](./link_style.md) | The style of link text (e.g. underline). | -| [`link-hover-color`](./link_hover_color.md) | The color of link text with the cursor above it. | -| [`link-hover-background`](./link_hover_background.md) | The background color of link text with the cursor above it. | -| [`link-hover-style`](./link_hover_style.md) | The style of link text with the cursor above it. | +| Property | Description | +|-------------------------------------------------------|-------------------------------------------------------------------| +| [`link-color`](./link_color.md) | The color of the link text. | +| [`link-background`](./link_background.md) | The background color of the link text. | +| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). | +| [`link-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. | +| [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. | +| [`link-hover-style`](./link_hover_style.md) | The style of the link text when the cursor is over it. | ## Syntax ```scss -link-color: ; -link-background: ; -link-style: ...; -link-hover-color: ; -link-hover-background: ; -link-hover-style: ...; +link-color: []; +link-background: []; +link-style: ; +link-hover-color: []; +link-hover-background: []; +link-hover-style: ; ``` --8<-- "docs/styles/snippets/color_css_syntax.md" @@ -34,8 +34,8 @@ link-hover-style: ...; ## Example -In the example below, the first `Static` illustrates default link styling. -The second `Static` uses CSS to customize the link color, background, and style. +In the example below, the first label illustrates default link styling. +The second label uses CSS to customize the link color, background, and style. === "Output" diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md index 6f067499e..9f69c06f1 100644 --- a/docs/styles/links/link_background.md +++ b/docs/styles/links/link_background.md @@ -4,7 +4,7 @@ The `link-background` sets the background color of the link. !!! note - `link-background` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax @@ -18,7 +18,7 @@ link-background: ; ## Example -The example below shows some links with their color changed. +The example below shows some links with their background color changed. It also shows that `link-background` does not affect hyperlinks. === "Output" diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md index 468ce4182..8e9fa0e57 100644 --- a/docs/styles/links/link_color.md +++ b/docs/styles/links/link_color.md @@ -4,7 +4,7 @@ The `link-color` sets the color of the link text. !!! note - `link-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md index 89e1661c1..1e6cf8659 100644 --- a/docs/styles/links/link_hover_background.md +++ b/docs/styles/links/link_hover_background.md @@ -1,10 +1,10 @@ # Link-hover-background -The `link-hover-background` sets the background color of the link. +The `link-hover-background` sets the background color of the link when the mouse cursor is over the link. !!! note - `link-hover-background` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-hover-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax diff --git a/docs/styles/links/link_hover_color.md b/docs/styles/links/link_hover_color.md index da8ce5f8e..0e19ce95e 100644 --- a/docs/styles/links/link_hover_color.md +++ b/docs/styles/links/link_hover_color.md @@ -4,7 +4,7 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is !!! note - `link-hover-color` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-hover-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax diff --git a/docs/styles/links/link_hover_style.md b/docs/styles/links/link_hover_style.md index 9a054f1e8..45479ea7c 100644 --- a/docs/styles/links/link_hover_style.md +++ b/docs/styles/links/link_hover_style.md @@ -4,7 +4,7 @@ The `link-hover-style` sets the text style for the link text when the mouse curs !!! note - `link-hover-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-hover-style` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md index 9fb1c47d8..2dff30b3a 100644 --- a/docs/styles/links/link_style.md +++ b/docs/styles/links/link_style.md @@ -4,7 +4,7 @@ The `link-style` sets the text style for the link text. !!! note - `link-style` only applies to "action links" as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. + `link-style` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. ## Syntax