mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Update reference for all scrollbar colors.
This commit is contained in:
Rodrigo Girão Serrão
@@ -3,31 +3,55 @@
|
||||
There are a number of rules to set the colors used in Textual scrollbars.
|
||||
You won't typically need to do this, as the default themes have carefully chosen colors, but you can if you want to.
|
||||
|
||||
| Rule | Color |
|
||||
|-------------------------------|---------------------------------------------------------|
|
||||
| `scrollbar-color` | Scrollbar "thumb" (movable part) |
|
||||
| `scrollbar-color-hover` | Scrollbar thumb when the mouse is hovering over it |
|
||||
| `scrollbar-color-active` | Scrollbar thumb when it is active (being dragged) |
|
||||
| `scrollbar-background` | Scrollbar background |
|
||||
| `scrollbar-background-hover` | Scrollbar background when the mouse is hovering over it |
|
||||
| `scrollbar-background-active` | Scrollbar background when the thumb is being dragged |
|
||||
| `scrollbar-corner-color` | The gap between the horizontal and vertical scrollbars |
|
||||
| Rule | Applies to |
|
||||
|-------------------------------------------------------------------|----------------------------------------------------------|
|
||||
| [`scrollbar-background`](./scrollbar_background.md) | Scrollbar background. |
|
||||
| [`scrollbar-background-active`](./scrollbar_background_active.md) | Scrollbar background when the thumb is being dragged. |
|
||||
| [`scrollbar-background-hover`](./scrollbar_background_hover.md) | Scrollbar background when the mouse is hovering over it. |
|
||||
| [`scrollbar-color`](./scrollbar_color.md) | Scrollbar "thumb" (movable part). |
|
||||
| [`scrollbar-color-active`](./scrollbar_color_active.md) | Scrollbar thumb when it is active (being dragged). |
|
||||
| [`scrollbar-color-hover`](./scrollbar_color_hover.md) | Scrollbar thumb when the mouse is hovering over it. |
|
||||
| [`scrollbar-corner-color`](./scrollbar_corner_color.md) | The gap between the horizontal and vertical scrollbars. |
|
||||
|
||||
## Syntax
|
||||
|
||||
```
|
||||
scrollbar-color: <COLOR>;
|
||||
scrollbar-color-hover: <COLOR>;
|
||||
scrollbar-color-active: <COLOR>;
|
||||
scrollbar-background: <COLOR>;
|
||||
scrollbar-background-hover: <COLOR>;
|
||||
scrollbar-background-active: <COLOR>;
|
||||
scrollbar-corner-color: <COLOR>;
|
||||
```
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_background">scrollbar-background</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_background_active">scrollbar-background-active</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_background_hover">scrollbar-background-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_color">scrollbar-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_color_active">scrollbar-color-active</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_color_hover">scrollbar-color-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
|
||||
<a href="./scrollbar_corner_color">scrollbar-corner-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
Visit each style's reference page to learn more about how the values are used.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
In this example we have two panels with different scrollbar colors set for each.
|
||||
This example shows two planels that contain oversized text.
|
||||
The right panel sets `scrollbar-background`, `scrollbar-color`, and `scrollbar-corner-color`, and the left panel shows the default colors for comparison.
|
||||
|
||||
=== "Output"
|
||||
|
||||
```{.textual path="docs/examples/styles/scrollbars.py"}
|
||||
```
|
||||
|
||||
=== "scrollbars.py"
|
||||
|
||||
@@ -40,24 +64,3 @@ In this example we have two panels with different scrollbar colors set for each.
|
||||
```css
|
||||
--8<-- "docs/examples/styles/scrollbars.css"
|
||||
```
|
||||
|
||||
=== "Output"
|
||||
|
||||
```{.textual path="docs/examples/styles/scrollbars.py"}
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```sass
|
||||
/* Set widget scrollbar color to yellow */
|
||||
Widget {
|
||||
scrollbar-color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```python
|
||||
# Set the scrollbar color to yellow
|
||||
widget.styles.scrollbar_color = "yellow"
|
||||
```
|
||||
|
||||
@@ -1 +1,50 @@
|
||||
# Scrollbar-background
|
||||
|
||||
The `scrollbar-background` sets the background color of the scrollbar.
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_background">scrollbar-background</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-background` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the background color of a scrollbar.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="2"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-backround: blue;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_background = "blue"
|
||||
```
|
||||
|
||||
@@ -1 +1,51 @@
|
||||
# Scrollbar-background-active
|
||||
|
||||
The `scrollbar-background-active` sets the background color of the scrollbar when the thumb is being dragged.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_background_active">scrollbar-background-active</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-background-active` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the background color of a scrollbar when its thumb is being dragged.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="3"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-backround-active: red;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_background_active = "red"
|
||||
```
|
||||
|
||||
@@ -1 +1,51 @@
|
||||
# Scrollbar-background-hover
|
||||
|
||||
The `scrollbar-background-hover` sets the background color of the scrollbar when the cursor is over it.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_background_hover">scrollbar-background-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-background-hover` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the background color of a scrollbar when the cursor is over it.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="4"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-background-hover: purple;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_background_hover = "purple"
|
||||
```
|
||||
|
||||
@@ -1 +1,51 @@
|
||||
# Scrollbar-color
|
||||
|
||||
The `scrollbar-color` sets the color of the scrollbar.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_color">scrollbar-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-color` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of a scrollbar.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="5"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-color: cyan;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_color = "cyan"
|
||||
```
|
||||
|
||||
@@ -1 +1,51 @@
|
||||
# Scrollbar-color-active
|
||||
|
||||
The `scrollbar-color-active` sets the color of the scrollbar when the thumb is being dragged.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_color_active">scrollbar-color-active</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-color-active` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of a scrollbar when its thumb is being dragged.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="6"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-color-active: yellow;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_color_active = "yellow"
|
||||
```
|
||||
|
||||
@@ -1 +1,51 @@
|
||||
# Scrollbar-color-hover
|
||||
|
||||
The `scrollbar-color-hover` sets the color of the scrollbar when the cursor is over it.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_color_hover">scrollbar-color-hover</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-color-hover` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of a scrollbar when the cursor is over it.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
=== "Output"
|
||||
|
||||
Awaits resolution of [issue 1479](https://github.com/textualize/textual/issues/1479).
|
||||
|
||||
=== "scrollbars2.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbars2.py"
|
||||
```
|
||||
|
||||
=== "scrollbars2.css"
|
||||
|
||||
```css hl_lines="7"
|
||||
--8<-- "docs/examples/styles/scrollbars2.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-color-hover: pink;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_color_hover = "pink"
|
||||
```
|
||||
|
||||
@@ -1 +1,54 @@
|
||||
# Scrollbar-corner-color
|
||||
|
||||
The `scrollbar-corner-color` sets the color of the gap between the horizontal and vertical scrollbars.
|
||||
|
||||
## Syntax
|
||||
|
||||
--8<-- "docs/snippets/syntax_block_start.md"
|
||||
<a href="./scrollbar_corner_color">scrollbar-corner-color</a>: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
||||
--8<-- "docs/snippets/syntax_block_end.md"
|
||||
|
||||
`scrollbar-corner-color` accepts a [`<color>`](../../../css_types/color) (with an optional transparency level defined by a [`<percentage>`](../../../css_types/percentage)) that is used to define the color of the gap between the horizontal and vertical scrollbars of a widget.
|
||||
|
||||
### Values
|
||||
|
||||
#### <color>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/color.md"
|
||||
|
||||
#### <percentage>
|
||||
|
||||
--8<-- "docs/snippets/type_syntax/percentage.md"
|
||||
|
||||
## Example
|
||||
|
||||
The example below sets the scrollbar corner (bottom-right of the screen) to white.
|
||||
|
||||
=== "Output"
|
||||
|
||||
```{.textual path="docs/examples/styles/scrollbar_corner_color.py"}
|
||||
```
|
||||
|
||||
=== "scrollbar_corner_color.py"
|
||||
|
||||
```py
|
||||
--8<-- "docs/examples/styles/scrollbar_corner_color.py"
|
||||
```
|
||||
|
||||
=== "scrollbar_corner_color.css"
|
||||
|
||||
```css hl_lines="3"
|
||||
--8<-- "docs/examples/styles/scrollbar_corner_color.css"
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
scrollbar-color: cyan;
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```py
|
||||
widget.styles.scrollbar_color = "cyan"
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user