mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Rename link-hover-* rules to link-*-hover. (#3736)
Co-authored-by: Will McGugan <willmcgugan@gmail.com>
This commit is contained in:
Rodrigo Girão Serrão
committed by
GitHub
GitHub
parent
5603a4da2b
commit
d993cce505
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Changed
|
||||
|
||||
- Breaking changes https://github.com/Textualize/textual/issues/1530
|
||||
- `link-hover-background` renamed to `link-background-hover`
|
||||
- `link-hover-color` renamed to `link-color-hover`
|
||||
- `link-hover-style` renamed to `link-style-hover`
|
||||
|
||||
### Added
|
||||
|
||||
- Added support for Ctrl+Fn and Ctrl+Shift+Fn keys in urxvt https://github.com/Textualize/textual/pull/3737
|
||||
|
||||
@@ -3,7 +3,7 @@ from textual.widgets import Label
|
||||
|
||||
|
||||
class LinkHoverBackgroundApp(App):
|
||||
CSS_PATH = "link_hover_background.tcss"
|
||||
CSS_PATH = "link_background_hover.tcss"
|
||||
|
||||
def compose(self):
|
||||
yield Label(
|
||||
@@ -1,9 +1,9 @@
|
||||
#lbl1, #lbl2 {
|
||||
link-hover-background: red; /* (1)! */
|
||||
link-background-hover: red; /* (1)! */
|
||||
}
|
||||
|
||||
#lbl3 {
|
||||
link-hover-background: hsl(60,100%,50%) 50%;
|
||||
link-background-hover: hsl(60,100%,50%) 50%;
|
||||
}
|
||||
|
||||
#lbl4 {
|
||||
@@ -3,7 +3,7 @@ from textual.widgets import Label
|
||||
|
||||
|
||||
class LinkHoverColorApp(App):
|
||||
CSS_PATH = "link_hover_color.tcss"
|
||||
CSS_PATH = "link_color_hover.tcss"
|
||||
|
||||
def compose(self):
|
||||
yield Label(
|
||||
11
docs/examples/styles/link_color_hover.tcss
Normal file
11
docs/examples/styles/link_color_hover.tcss
Normal file
@@ -0,0 +1,11 @@
|
||||
#lbl1, #lbl2 {
|
||||
link-color-hover: red; /* (1)! */
|
||||
}
|
||||
|
||||
#lbl3 {
|
||||
link-color-hover: hsl(60,100%,50%) 50%;
|
||||
}
|
||||
|
||||
#lbl4 {
|
||||
link-color-hover: black;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
#lbl1, #lbl2 {
|
||||
link-hover-color: red; /* (1)! */
|
||||
}
|
||||
|
||||
#lbl3 {
|
||||
link-hover-color: hsl(60,100%,50%) 50%;
|
||||
}
|
||||
|
||||
#lbl4 {
|
||||
link-hover-color: black;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
#lbl1, #lbl2 {
|
||||
link-hover-style: bold italic; /* (1)! */
|
||||
}
|
||||
|
||||
#lbl3 {
|
||||
link-hover-style: reverse strike;
|
||||
}
|
||||
|
||||
#lbl4 {
|
||||
link-hover-style: bold;
|
||||
}
|
||||
@@ -3,7 +3,7 @@ from textual.widgets import Label
|
||||
|
||||
|
||||
class LinkHoverStyleApp(App):
|
||||
CSS_PATH = "link_hover_style.tcss"
|
||||
CSS_PATH = "link_style_hover.tcss"
|
||||
|
||||
def compose(self):
|
||||
yield Label(
|
||||
11
docs/examples/styles/link_style_hover.tcss
Normal file
11
docs/examples/styles/link_style_hover.tcss
Normal file
@@ -0,0 +1,11 @@
|
||||
#lbl1, #lbl2 {
|
||||
link-style-hover: bold italic; /* (1)! */
|
||||
}
|
||||
|
||||
#lbl3 {
|
||||
link-style-hover: reverse strike;
|
||||
}
|
||||
|
||||
#lbl4 {
|
||||
link-style-hover: bold;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 233 KiB |
@@ -10,11 +10,11 @@ There are a number of styles which influence the appearance of these links withi
|
||||
| Property | Description |
|
||||
|-------------------------------------------------------|-------------------------------------------------------------------|
|
||||
| [`link-background`](./link_background.md) | The background color of the link text. |
|
||||
| [`link-background-hover`](./link_background_hover.md) | The background color of the link text when the cursor is over it. |
|
||||
| [`link-color`](./link_color.md) | The color of the link text. |
|
||||
| [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. |
|
||||
| [`link-hover-color`](./link_hover_color.md) | The 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. |
|
||||
| [`link-color-hover`](./link_color_hover.md) | The color of the link text when the cursor is over it. |
|
||||
| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). |
|
||||
| [`link-style-hover`](./link_style_hover.md) | The style of the link text when the cursor is over it. |
|
||||
|
||||
## Syntax
|
||||
|
||||
@@ -25,11 +25,11 @@ There are a number of styles which influence the appearance of these links withi
|
||||
|
||||
<a href="./link_style">link-style</a>: <a href="../../css_types/text_style"><text-style></a>;
|
||||
|
||||
<a href="./link_hover_background">link-hover-background</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
<a href="./link_background_hover">link-background-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./link_hover_color">link-hover-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
<a href="./link_color_hover">link-color-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./link_hover_style">link-hover-style</a>: <a href="../../css_types/text_style"><text-style></a>;
|
||||
<a href="./link_style_hover">link-style-hover</a>: <a href="../../css_types/text_style"><text-style></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
Visit each style's reference page to learn more about how the values are used.
|
||||
|
||||
@@ -63,4 +63,4 @@ widget.styles.link_background = Color(100, 30, 173)
|
||||
## See also
|
||||
|
||||
- [`link-color`](./link_color.md) to set the color of link text.
|
||||
- [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
|
||||
- [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it.
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
# Link-hover-background
|
||||
# Link-background-hover
|
||||
|
||||
The `link-hover-background` style sets the background color of the link when the mouse cursor is over the link.
|
||||
The `link-background-hover` style sets the background color of the link when the mouse cursor is over the link.
|
||||
|
||||
!!! note
|
||||
|
||||
`link-hover-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
|
||||
`link-background-hover` 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-hover-background: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
link-background-hover: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
`link-background-hover` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-background` set to `$accent`.
|
||||
If not provided, a Textual action link will have `link-background-hover` set to `$accent`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`.
|
||||
The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-background-hover`.
|
||||
|
||||
It also shows that `link-hover-background` does not affect hyperlinks.
|
||||
It also shows that `link-background-hover` does not affect hyperlinks.
|
||||
|
||||
=== "Output"
|
||||
|
||||
|
||||
|
||||
|
||||
!!! note
|
||||
|
||||
The GIF has reduced quality to make it easier to load in the documentation.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_hover_background.py`.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_background_hover.py`.
|
||||
|
||||
=== "link_hover_background.py"
|
||||
=== "link_background_hover.py"
|
||||
|
||||
```py hl_lines="10-11 14-15 18-19 22-23"
|
||||
--8<-- "docs/examples/styles/link_hover_background.py"
|
||||
--8<-- "docs/examples/styles/link_background_hover.py"
|
||||
```
|
||||
|
||||
1. This label has a hyperlink so it won't be affected by the `link-hover-background` rule.
|
||||
2. This label has an "action link" that can be styled with `link-hover-background`.
|
||||
3. This label has an "action link" that can be styled with `link-hover-background`.
|
||||
4. This label has an "action link" that can be styled with `link-hover-background`.
|
||||
1. This label has a hyperlink so it won't be affected by the `link-background-hover` rule.
|
||||
2. This label has an "action link" that can be styled with `link-background-hover`.
|
||||
3. This label has an "action link" that can be styled with `link-background-hover`.
|
||||
4. This label has an "action link" that can be styled with `link-background-hover`.
|
||||
|
||||
=== "link_hover_background.tcss"
|
||||
=== "link_background_hover.tcss"
|
||||
|
||||
```sass hl_lines="2 6 10"
|
||||
--8<-- "docs/examples/styles/link_hover_background.tcss"
|
||||
--8<-- "docs/examples/styles/link_background_hover.tcss"
|
||||
```
|
||||
|
||||
1. This will only affect one of the labels because action links are the only links that this rule affects.
|
||||
@@ -56,22 +56,22 @@ It also shows that `link-hover-background` does not affect hyperlinks.
|
||||
## CSS
|
||||
|
||||
```sass
|
||||
link-hover-background: red 70%;
|
||||
link-hover-background: $accent;
|
||||
link-background-hover: red 70%;
|
||||
link-background-hover: $accent;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.link_hover_background = "red 70%"
|
||||
widget.styles.link_hover_background = "$accent"
|
||||
widget.styles.link_background_hover = "red 70%"
|
||||
widget.styles.link_background_hover = "$accent"
|
||||
|
||||
# You can also use a `Color` object directly:
|
||||
widget.styles.link_hover_background = Color(100, 30, 173)
|
||||
widget.styles.link_background_hover = Color(100, 30, 173)
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [`link-background`](./link_background.md) to set the background color of link text.
|
||||
- [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
|
||||
- [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
|
||||
- [`link-color-hover](./link_color_hover.md) to set the color of link text when the mouse pointer is over it.
|
||||
- [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.
|
||||
@@ -63,4 +63,4 @@ widget.styles.link_color = Color(100, 30, 173)
|
||||
## See also
|
||||
|
||||
- [`link-background`](./link_background.md) to set the background color of link text.
|
||||
- [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
|
||||
- [`link-color-hover](./link_color_hover.md) to set the color of link text when the mouse pointer is over it.
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
# Link-hover-color
|
||||
# Link-color-hover
|
||||
|
||||
The `link-hover-color` style sets the color of the link text when the mouse cursor is over the link.
|
||||
The `link-color-hover` style sets the color of the link text when the mouse cursor is over the link.
|
||||
|
||||
!!! note
|
||||
|
||||
`link-hover-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
|
||||
`link-color-hover` 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-hover-color: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
link-color-hover: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
`link-color-hover` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-color` set to `white`.
|
||||
If not provided, a Textual action link will have `link-color-hover` set to `white`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links that have their colour changed when the mouse moves over it.
|
||||
It also shows that `link-hover-color` does not affect hyperlinks.
|
||||
It also shows that `link-color-hover` does not affect hyperlinks.
|
||||
|
||||
=== "Output"
|
||||
|
||||
|
||||
|
||||
|
||||
!!! note
|
||||
|
||||
The background color also changes when the mouse moves over the links because that is the default behavior.
|
||||
That can be customised by setting [`link-hover-background`](./link_hover_background.md) but we haven't done so in this example.
|
||||
That can be customised by setting [`link-background-hover`](./link_background_hover.md) but we haven't done so in this example.
|
||||
|
||||
!!! note
|
||||
|
||||
The GIF has reduced quality to make it easier to load in the documentation.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_hover_color.py`.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_color_hover.py`.
|
||||
|
||||
=== "link_hover_color.py"
|
||||
=== "link_color_hover.py"
|
||||
|
||||
```py hl_lines="10-11 14-15 18-19 22-23"
|
||||
--8<-- "docs/examples/styles/link_hover_color.py"
|
||||
--8<-- "docs/examples/styles/link_color_hover.py"
|
||||
```
|
||||
|
||||
1. This label has a hyperlink so it won't be affected by the `link-hover-color` rule.
|
||||
2. This label has an "action link" that can be styled with `link-hover-color`.
|
||||
3. This label has an "action link" that can be styled with `link-hover-color`.
|
||||
4. This label has an "action link" that can be styled with `link-hover-color`.
|
||||
1. This label has a hyperlink so it won't be affected by the `link-color-hover` rule.
|
||||
2. This label has an "action link" that can be styled with `link-color-hover`.
|
||||
3. This label has an "action link" that can be styled with `link-color-hover`.
|
||||
4. This label has an "action link" that can be styled with `link-color-hover`.
|
||||
|
||||
=== "link_hover_color.tcss"
|
||||
=== "link_color_hover.tcss"
|
||||
|
||||
```sass hl_lines="2 6 10"
|
||||
--8<-- "docs/examples/styles/link_hover_color.tcss"
|
||||
--8<-- "docs/examples/styles/link_color_hover.tcss"
|
||||
```
|
||||
|
||||
1. This will only affect one of the labels because action links are the only links that this rule affects.
|
||||
@@ -59,22 +59,22 @@ It also shows that `link-hover-color` does not affect hyperlinks.
|
||||
## CSS
|
||||
|
||||
```sass
|
||||
link-hover-color: red 70%;
|
||||
link-hover-color: black;
|
||||
link-color-hover: red 70%;
|
||||
link-color-hover: black;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.link_hover_color = "red 70%"
|
||||
widget.styles.link_hover_color = "black"
|
||||
widget.styles.link_color_hover = "red 70%"
|
||||
widget.styles.link_color_hover = "black"
|
||||
|
||||
# You can also use a `Color` object directly:
|
||||
widget.styles.link_hover_color = Color(100, 30, 173)
|
||||
widget.styles.link_color_hover = Color(100, 30, 173)
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [`link-color`](./link_color.md) to set the color of link text.
|
||||
- [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
|
||||
- [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
|
||||
- [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it.
|
||||
- [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.
|
||||
@@ -63,5 +63,5 @@ widget.styles.link_style = "bold italic reverse"
|
||||
|
||||
## See also
|
||||
|
||||
- [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
|
||||
- [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.
|
||||
- [`text-style`](../text_style.md) to set the style of text in a widget.
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
# Link-hover-style
|
||||
# Link-style-hover
|
||||
|
||||
The `link-hover-style` style sets the text style for the link text when the mouse cursor is over the link.
|
||||
The `link-style-hover` style sets the text style for the link text when the mouse cursor is over the link.
|
||||
|
||||
!!! note
|
||||
|
||||
`link-hover-style` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
|
||||
`link-style-hover` 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-hover-style: <a href="../../css_types/text_style"><text-style></a>;
|
||||
link-style-hover: <a href="../../css_types/text_style"><text-style></a>;
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`link-hover-style` applies its [`<text-style>`](../../css_types/text_style.md) to the text of Textual action links when the mouse pointer is over them.
|
||||
`link-style-hover` applies its [`<text-style>`](../../css_types/text_style.md) to the text of Textual action links when the mouse pointer is over them.
|
||||
|
||||
### Defaults
|
||||
|
||||
If not provided, a Textual action link will have `link-hover-style` set to `bold`.
|
||||
If not provided, a Textual action link will have `link-style-hover` set to `bold`.
|
||||
|
||||
## Example
|
||||
|
||||
The example below shows some links that have their colour changed when the mouse moves over it.
|
||||
It also shows that `link-hover-style` does not affect hyperlinks.
|
||||
It also shows that `link-style-hover` does not affect hyperlinks.
|
||||
|
||||
=== "Output"
|
||||
|
||||
|
||||
|
||||
|
||||
!!! note
|
||||
|
||||
The background color also changes when the mouse moves over the links because that is the default behavior.
|
||||
That can be customised by setting [`link-hover-background`](./link_hover_background.md) but we haven't done so in this example.
|
||||
That can be customised by setting [`link-background-hover`](./link_background_hover.md) but we haven't done so in this example.
|
||||
|
||||
!!! note
|
||||
|
||||
The GIF has reduced quality to make it easier to load in the documentation.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_hover_style.py`.
|
||||
Try running the example yourself with `textual run docs/examples/styles/link_style_hover.py`.
|
||||
|
||||
=== "link_hover_style.py"
|
||||
=== "link_style_hover.py"
|
||||
|
||||
```py hl_lines="10-11 14-15 18-19 22-23"
|
||||
--8<-- "docs/examples/styles/link_hover_style.py"
|
||||
--8<-- "docs/examples/styles/link_style_hover.py"
|
||||
```
|
||||
|
||||
1. This label has a hyperlink so it won't be affected by the `link-hover-style` rule.
|
||||
2. This label has an "action link" that can be styled with `link-hover-style`.
|
||||
3. This label has an "action link" that can be styled with `link-hover-style`.
|
||||
4. This label has an "action link" that can be styled with `link-hover-style`.
|
||||
1. This label has a hyperlink so it won't be affected by the `link-style-hover` rule.
|
||||
2. This label has an "action link" that can be styled with `link-style-hover`.
|
||||
3. This label has an "action link" that can be styled with `link-style-hover`.
|
||||
4. This label has an "action link" that can be styled with `link-style-hover`.
|
||||
|
||||
=== "link_hover_style.tcss"
|
||||
=== "link_style_hover.tcss"
|
||||
|
||||
```sass hl_lines="2 6 10"
|
||||
--8<-- "docs/examples/styles/link_hover_style.tcss"
|
||||
--8<-- "docs/examples/styles/link_style_hover.tcss"
|
||||
```
|
||||
|
||||
1. This will only affect one of the labels because action links are the only links that this rule affects.
|
||||
@@ -60,20 +60,20 @@ It also shows that `link-hover-style` does not affect hyperlinks.
|
||||
## CSS
|
||||
|
||||
```sass
|
||||
link-hover-style: bold;
|
||||
link-hover-style: bold italic reverse;
|
||||
link-style-hover: bold;
|
||||
link-style-hover: bold italic reverse;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.link_hover_style = "bold"
|
||||
widget.styles.link_hover_style = "bold italic reverse"
|
||||
widget.styles.link_style_hover = "bold"
|
||||
widget.styles.link_style_hover = "bold italic reverse"
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
|
||||
- [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
|
||||
- [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it.
|
||||
- [`link-color-hover](./link_color_hover.md) to set the color of link text when the mouse pointer is over it.
|
||||
- [`link-style`](./link_style.md) to set the style of link text.
|
||||
- [`text-style`](../text_style.md) to set the style of text in a widget.
|
||||
@@ -100,11 +100,11 @@ nav:
|
||||
- Links:
|
||||
- "styles/links/index.md"
|
||||
- "styles/links/link_background.md"
|
||||
- "styles/links/link_background_hover.md"
|
||||
- "styles/links/link_color.md"
|
||||
- "styles/links/link_hover_background.md"
|
||||
- "styles/links/link_hover_color.md"
|
||||
- "styles/links/link_hover_style.md"
|
||||
- "styles/links/link_color_hover.md"
|
||||
- "styles/links/link_style.md"
|
||||
- "styles/links/link_style_hover.md"
|
||||
- "styles/margin.md"
|
||||
- "styles/max_height.md"
|
||||
- "styles/max_width.md"
|
||||
|
||||
@@ -150,10 +150,10 @@ class StylesCache:
|
||||
and hover_style._meta
|
||||
and "@click" in hover_style.meta
|
||||
):
|
||||
link_hover_style = widget.link_hover_style
|
||||
if link_hover_style:
|
||||
link_style_hover = widget.link_style_hover
|
||||
if link_style_hover:
|
||||
strips = [
|
||||
strip.style_links(hover_style.link_id, link_hover_style)
|
||||
strip.style_links(hover_style.link_id, link_style_hover)
|
||||
for strip in strips
|
||||
]
|
||||
|
||||
|
||||
@@ -690,8 +690,8 @@ class StylesBuilder:
|
||||
|
||||
process_link_color = process_color
|
||||
process_link_background = process_color
|
||||
process_link_hover_color = process_color
|
||||
process_link_hover_background = process_color
|
||||
process_link_color_hover = process_color
|
||||
process_link_background_hover = process_color
|
||||
|
||||
process_border_title_color = process_color
|
||||
process_border_title_background = process_color
|
||||
@@ -712,7 +712,7 @@ class StylesBuilder:
|
||||
self.styles._rules[name.replace("-", "_")] = style_definition # type: ignore
|
||||
|
||||
process_link_style = process_text_style
|
||||
process_link_hover_style = process_text_style
|
||||
process_link_style_hover = process_text_style
|
||||
|
||||
process_border_title_style = process_text_style
|
||||
process_border_subtitle_style = process_text_style
|
||||
|
||||
@@ -170,10 +170,10 @@ class RulesMap(TypedDict, total=False):
|
||||
link_background: Color
|
||||
link_style: Style
|
||||
|
||||
link_hover_color: Color
|
||||
auto_link_hover_color: bool
|
||||
link_hover_background: Color
|
||||
link_hover_style: Style
|
||||
link_color_hover: Color
|
||||
auto_link_color_hover: bool
|
||||
link_background_hover: Color
|
||||
link_style_hover: Style
|
||||
|
||||
auto_border_title_color: bool
|
||||
border_title_color: Color
|
||||
@@ -227,8 +227,8 @@ class StylesBase(ABC):
|
||||
"scrollbar_background_active",
|
||||
"link_color",
|
||||
"link_background",
|
||||
"link_hover_color",
|
||||
"link_hover_background",
|
||||
"link_color_hover",
|
||||
"link_background_hover",
|
||||
}
|
||||
|
||||
node: DOMNode | None = None
|
||||
@@ -339,10 +339,10 @@ class StylesBase(ABC):
|
||||
link_background = ColorProperty("transparent")
|
||||
link_style = StyleFlagsProperty()
|
||||
|
||||
link_hover_color = ColorProperty("transparent")
|
||||
auto_link_hover_color = BooleanProperty(False)
|
||||
link_hover_background = ColorProperty("transparent")
|
||||
link_hover_style = StyleFlagsProperty()
|
||||
link_color_hover = ColorProperty("transparent")
|
||||
auto_link_color_hover = BooleanProperty(False)
|
||||
link_background_hover = ColorProperty("transparent")
|
||||
link_style_hover = StyleFlagsProperty()
|
||||
|
||||
auto_border_title_color = BooleanProperty(default=False)
|
||||
border_title_color = ColorProperty(Color(255, 255, 255, 0))
|
||||
@@ -1024,12 +1024,12 @@ class Styles(StylesBase):
|
||||
if "link_style" in rules:
|
||||
append_declaration("link-style", str(self.link_style))
|
||||
|
||||
if "link_hover_color" in rules:
|
||||
append_declaration("link-hover-color", self.link_hover_color.css)
|
||||
if "link_hover_background" in rules:
|
||||
append_declaration("link-hover-background", self.link_hover_background.css)
|
||||
if "link_hover_style" in rules:
|
||||
append_declaration("link-hover-style", str(self.link_hover_style))
|
||||
if "link_color_hover" in rules:
|
||||
append_declaration("link-color-hover", self.link_color_hover.css)
|
||||
if "link_background_hover" in rules:
|
||||
append_declaration("link-background-hover", self.link_background_hover.css)
|
||||
if "link_style_hover" in rules:
|
||||
append_declaration("link-style-hover", str(self.link_style_hover))
|
||||
|
||||
if "border_title_color" in rules:
|
||||
append_declaration("title-color", self.border_title_color.css)
|
||||
|
||||
@@ -228,7 +228,6 @@ class Key(InputEvent):
|
||||
Args:
|
||||
key: The key that was pressed.
|
||||
character: A printable character or ``None`` if it is not printable.
|
||||
|
||||
Attributes:
|
||||
aliases: The aliases for the key, including the key itself.
|
||||
"""
|
||||
|
||||
@@ -221,9 +221,9 @@ class ScrollBar(Widget):
|
||||
|
||||
DEFAULT_CSS = """
|
||||
ScrollBar {
|
||||
link-hover-color: ;
|
||||
link-hover-background:;
|
||||
link-hover-style: ;
|
||||
link-color-hover: ;
|
||||
link-background-hover:;
|
||||
link-style-hover: ;
|
||||
link-color: transparent;
|
||||
link-background: transparent;
|
||||
}
|
||||
|
||||
@@ -254,9 +254,9 @@ class Widget(DOMNode):
|
||||
link-background: initial;
|
||||
link-color: $text;
|
||||
link-style: underline;
|
||||
link-hover-background: $accent;
|
||||
link-hover-color: $text;
|
||||
link-hover-style: bold not underline;
|
||||
link-background-hover: $accent;
|
||||
link-color-hover: $text;
|
||||
link-style-hover: bold not underline;
|
||||
}
|
||||
"""
|
||||
COMPONENT_CLASSES: ClassVar[set[str]] = set()
|
||||
@@ -1752,7 +1752,7 @@ class Widget(DOMNode):
|
||||
return style
|
||||
|
||||
@property
|
||||
def link_hover_style(self) -> Style:
|
||||
def link_style_hover(self) -> Style:
|
||||
"""Style of links underneath the mouse cursor.
|
||||
|
||||
Returns:
|
||||
@@ -1760,13 +1760,13 @@ class Widget(DOMNode):
|
||||
"""
|
||||
styles = self.styles
|
||||
_, background = self.background_colors
|
||||
hover_background = background + styles.link_hover_background
|
||||
hover_background = background + styles.link_background_hover
|
||||
hover_color = hover_background + (
|
||||
hover_background.get_contrast_text(styles.link_hover_color.a)
|
||||
if styles.auto_link_hover_color
|
||||
else styles.link_hover_color
|
||||
hover_background.get_contrast_text(styles.link_color_hover.a)
|
||||
if styles.auto_link_color_hover
|
||||
else styles.link_color_hover
|
||||
)
|
||||
style = styles.link_hover_style + Style.from_color(
|
||||
style = styles.link_style_hover + Style.from_color(
|
||||
hover_color.rich_color,
|
||||
hover_background.rich_color,
|
||||
)
|
||||
|
||||
@@ -48,9 +48,9 @@ class Toast(Static, inherit_css=False):
|
||||
link-background: initial;
|
||||
link-color: $text;
|
||||
link-style: underline;
|
||||
link-hover-background: $accent;
|
||||
link-hover-color: $text;
|
||||
link-hover-style: bold not underline;
|
||||
link-background-hover: $accent;
|
||||
link-color-hover: $text;
|
||||
link-style-hover: bold not underline;
|
||||
}
|
||||
|
||||
.toast--title {
|
||||
|
||||
@@ -8771,7 +8771,7 @@
|
||||
|
||||
'''
|
||||
# ---
|
||||
# name: test_css_property[link_hover_background.py]
|
||||
# name: test_css_property[link_background_hover.py]
|
||||
'''
|
||||
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Generated with Rich https://www.textualize.io -->
|
||||
@@ -8927,7 +8927,7 @@
|
||||
|
||||
'''
|
||||
# ---
|
||||
# name: test_css_property[link_hover_color.py]
|
||||
# name: test_css_property[link_color_hover.py]
|
||||
'''
|
||||
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Generated with Rich https://www.textualize.io -->
|
||||
@@ -9083,7 +9083,7 @@
|
||||
|
||||
'''
|
||||
# ---
|
||||
# name: test_css_property[link_hover_style.py]
|
||||
# name: test_css_property[link_style_hover.py]
|
||||
'''
|
||||
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Generated with Rich https://www.textualize.io -->
|
||||
|
||||
Reference in New Issue
Block a user