mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00

Files

Rodrigo Girão Serrão 196d430582 Style all Textual CSS as 'sass'

Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.

2023-01-09 11:20:04 +00:00

2.1 KiB

Raw Blame History

Link-background

The link-background sets the background color of the link.

!!! note

`link-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.

Syntax

--8<-- "docs/snippets/syntax_block_start.md" link-background: <color> [<percentage>]; --8<-- "docs/snippets/syntax_block_end.md"

link-background accepts a <color> (with an optional transparency level defined by a <percentage>) that is used to define the background color of text enclosed in Textual action links.

Values

<color>

--8<-- "docs/snippets/type_syntax/color.md"

<percentage>

--8<-- "docs/snippets/type_syntax/percentage.md"

Example

The example below shows some links with their background color changed. It also shows that link-background does not affect hyperlinks.

=== "Output"

```{.textual path="docs/examples/styles/link_background.py" lines=6}
```

=== "link_background.py"

```py hl_lines="8-9 12-13 16-17 20-21"
--8<-- "docs/examples/styles/link_background.py"
```

1. This label has an hyperlink so it won't be affected by the `link-background` rule.
2. This label has an "action link" that can be styled with `link-background`.
3. This label has an "action link" that can be styled with `link-background`.
4. This label has an "action link" that can be styled with `link-background`.

=== "link_background.css"

```sass hl_lines="2 6 10"
--8<-- "docs/examples/styles/link_background.css"
```

1. This will only affect one of the labels because action links are the only links that this rule affects.

CSS

link-background: red 70%;
link-background: $accent;

Python

widget.styles.link_background = "red 70%"
widget.styles.link_background = "$accent"

# You can also use a `Color` object directly:
widget.styles.link_background = Color(100, 30, 173)

2.1 KiB Raw Blame History