-
Notifications
You must be signed in to change notification settings - Fork 814
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* background tint style * changelog * hlines * doc fix * added tint * missing snapshots
- Loading branch information
1 parent
4182ad4
commit 4a822bc
Showing
12 changed files
with
470 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
from textual.app import App, ComposeResult | ||
from textual.containers import Vertical | ||
from textual.widgets import Label | ||
|
||
|
||
class BackgroundTintApp(App): | ||
CSS_PATH = "background_tint.tcss" | ||
|
||
def compose(self) -> ComposeResult: | ||
with Vertical(id="tint1"): | ||
yield Label("0%") | ||
with Vertical(id="tint2"): | ||
yield Label("25%") | ||
with Vertical(id="tint3"): | ||
yield Label("50%") | ||
with Vertical(id="tint4"): | ||
yield Label("75%") | ||
with Vertical(id="tint5"): | ||
yield Label("100%") | ||
|
||
|
||
if __name__ == "__main__": | ||
app = BackgroundTintApp() | ||
app.run() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
Vertical { | ||
background: $panel; | ||
color: auto 90%; | ||
} | ||
#tint1 { background-tint: $foreground 0%; } | ||
#tint2 { background-tint: $foreground 25%; } | ||
#tint3 { background-tint: $foreground 50%; } | ||
#tint4 { background-tint: $foreground 75% } | ||
#tint5 { background-tint: $foreground 100% } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
# Background-tint | ||
|
||
The `background-tint` style modifies the background color by tinting (blending) it with a new color. | ||
|
||
This style is typically used to subtly change the background of a widget for emphasis. | ||
For instance the following would make a focused widget have a slightly lighter background. | ||
|
||
```css | ||
MyWidget:focus { | ||
background-tint: white 10% | ||
} | ||
``` | ||
|
||
The background tint color should typically have less than 100% alpha, in order to modify the background color. | ||
If the alpha component is 100% then the tint color will replace the background color entirely. | ||
|
||
## Syntax | ||
|
||
--8<-- "docs/snippets/syntax_block_start.md" | ||
background-tint: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]; | ||
--8<-- "docs/snippets/syntax_block_end.md" | ||
|
||
The `background-tint` style requires a [`<color>`](../css_types/color.md) optionally followed by [`<percentage>`](../css_types/percentage.md) to specify the color's opacity (clamped between `0%` and `100%`). | ||
|
||
## Examples | ||
|
||
### Basic usage | ||
|
||
This example shows background tint applied with alpha from 0 to 100%. | ||
|
||
=== "Output" | ||
|
||
```{.textual path="docs/examples/styles/background_tint.py"} | ||
``` | ||
|
||
=== "background_tint.py" | ||
|
||
```python | ||
--8<-- "docs/examples/styles/background_tint.py" | ||
``` | ||
|
||
=== "background.tcss" | ||
|
||
```css hl_lines="5-9" | ||
--8<-- "docs/examples/styles/background_tint.tcss" | ||
``` | ||
|
||
|
||
## CSS | ||
|
||
```css | ||
/* 10% backgrouhnd tint */ | ||
background-tint: blue 10%; | ||
|
||
|
||
/* 20% RGB color */ | ||
background-tint: rgb(100, 120, 200, 0.2); | ||
|
||
``` | ||
|
||
## Python | ||
|
||
You can use the same syntax as CSS, or explicitly set a `Color` object for finer-grained control. | ||
|
||
```python | ||
# Set 20% blue background tint | ||
widget.styles.background_tint = "blue 20%" | ||
|
||
from textual.color import Color | ||
# Set with a color object | ||
widget.styles.background_tint = Color(120, 60, 100, 0.5) | ||
``` | ||
|
||
## See also | ||
|
||
- [`background`](./background.md) to set the background color of a widget. | ||
- [`color`](./color.md) to set the color of text in a widget. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.