da9a481f1c
Supposedly, this had been done in an earlier commit for all styles. Apparently, I forgot to open styles references that were one level deeper in the directory, so the pages about grid, links, and scrollbar colors still included the css types values directly in their reference pages.
3.0 KiB
Links
Textual supports the concept of inline "links" embedded in text which trigger an action when pressed. There are a number of styles which influence the appearance of these links within a widget.
!!! note
These CSS rules only target Textual action links. Internet hyperlinks are not affected by these CSS rules.
| Property | Description |
|---|---|
link-background |
The background color of the link text. |
link-color |
The color of the link text. |
link-hover-background |
The background color of the link text when the cursor is over it. |
link-hover-color |
The color of the link text when the cursor is over it. |
link-hover-style |
The style of the link text when the cursor is over it. |
link-style |
The style of the link text (e.g. underline). |
Syntax
--8<-- "docs/snippets/syntax_block_start.md" link-background: <color> [<percentage>];
link-color: <color> [<percentage>];
link-hover-background: <color> [<percentage>];
link-hover-color: <color> [<percentage>];
link-hover-style: <text-style>; --8<-- "docs/snippets/syntax_block_end.md"
Visit each style's reference page to learn more about how the values are used.
Example
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"
```{.textual path="docs/examples/styles/links.py"}
```
=== "links.py"
```python
--8<-- "docs/examples/styles/links.py"
```
=== "links.css"
```sass
--8<-- "docs/examples/styles/links.css"
```
Additional Notes
- Inline links are not widgets, and thus cannot be focused.
See Also
- An introduction to links in the Actions guide.