alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix links to CSS types.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-22 18:13:36 +00:00
parent 9d8e4c53dc
commit 8c0f1dc83c
29 changed files with 95 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/styles/_template.md
View File

@@ -8,7 +8,10 @@ One or two sentences is typically enough. -->
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
<!-- Formal syntax description of the rule -->
<!--
Formal syntax description of the rule
rule-name: <a href="../../css_types/type_one">&lt;type-one&gt;</a>;
-->
--8<-- "docs/snippets/syntax_block_end.md"
<!-- Description of what the rule uses the types/values for. -->

12
docs/styles/align.md
View File

@@ -6,20 +6,20 @@ Not to be confused with [`content-align`](../content_align).
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
align: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a> <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
align-horizontal: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a>;
align-vertical: <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
The style `align` takes a [`<horizontal>`](../../css_types/horizontal) followed by a [`<vertical>`](../../css_types/vertical).
You can specify the alignment of children on both the horizontal and vertical axes at the same time,
or on each of the axis separately.
To specify alignment on a single axis, use the respective style and type:
- `align-horizontal` takes a [`<horizontal>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
- `align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
- `align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- `align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
### Values

4
docs/styles/background.md
View File

@@ -5,10 +5,10 @@ The `background` rule sets the background color of a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
The style `background` needs a [`<color>`](../css_types/color.md) followed by an optional [`<percentage>`](../css_types/percentage.md) to specify the color transparency.
The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
### Values

12
docs/styles/border.md
View File

@@ -5,15 +5,15 @@ The `border` rule enables the drawing of a box around a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
border: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-top: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-right: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-bottom: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-left: [<a href="../css_types/border.md">&lt;border&gt;</a>] [<a href="../css_types/color.md">&lt;color&gt;</a>];
border-top: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-right: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-bottom: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-left: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
The style `border` accepts an optional [`<border>`](../css_types/border.md) that sets the visual style of the widget border and an optional [`<color>`](../css_types/color.md) to set the color of the border.
The style `border` accepts an optional [`<border>`](../../css_types/border) that sets the visual style of the widget border and an optional [`<color>`](../../css_types/color) to set the color of the border.
Borders may also be set individually for the four edges of a widget with the `border-top`, `border-right`, `border-bottom` and `border-left` rules.

6
docs/styles/color.md
View File

@@ -5,12 +5,12 @@ The `color` rule sets the text color of a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
color: (<a href="../css_types/color.md">&lt;color&gt;</a> | auto) [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
color: (<a href="../../css_types/color">&lt;color&gt;</a> | auto) [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
The style `color` needs a [`<color>`](../css_types/color.md) followed by an optional [`<percentage>`](../css_types/percentage.md) to specify the color transparency.
The style `color` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
Instead of a [`<color>`](../css_types/color.md), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
Instead of a [`<color>`](../../css_types/color), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
### Values

12
docs/styles/content_align.md
View File

@@ -7,20 +7,20 @@ Not to be confused with [`align`](../align).
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
content-align: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a> <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
content-align: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a> <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
content-align-horizontal: <a href="../css_types/horizontal.md">&lt;horizontal&gt;</a>;
content-align-vertical: <a href="../css_types/vertical.md">&lt;vertical&gt;</a>;
content-align-horizontal: <a href="../../css_types/horizontal">&lt;horizontal&gt;</a>;
content-align-vertical: <a href="../../css_types/vertical">&lt;vertical&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `content-align` takes a [`<horizontal>`](../css_types/horizontal.md) followed by a [`<vertical>`](../css_types/vertical.md).
The style `content-align` takes a [`<horizontal>`](../../css_types/horizontal) followed by a [`<vertical>`](../../css_types/vertical).
You can specify the alignment of content on both the horizontal and vertical axes at the same time,
or on each of the axis separately.
To specify content alignment on a single axis, use the respective style and type:
- `content-align-horizontal` takes a [`<horizontal>`](../css_types/horizontal.md) and does alignment along the horizontal axis; and
- `content-align-vertical` takes a [`<vertical>`](../css_types/vertical.md) and does alignment along the vertical axis.
- `content-align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- `content-align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
### Values

4
docs/styles/grid/column_span.md
View File

@@ -9,10 +9,10 @@ The `column-span` style specifies how many rows a widget will span in a grid lay
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
column-span: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
column-span: <a href="../../css_types/integer">&lt;integer&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `column-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many columns the given widget spans.
The style `column-span` accepts a single non-negative [`<integer>`](../../../css_types/integer) that quantifies how many columns the given widget spans.
### Values

6
docs/styles/grid/grid_columns.md
View File

@@ -9,13 +9,13 @@ The `grid-columns` style allows to define the width of the columns of the grid.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
grid-columns: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
grid-columns: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
--8<-- "docs/snippets/syntax_block_end.md"
The style `grid-columns` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the columns of the grid.
The style `grid-columns` takes one or more [`<scalar>`](../../../css_types/scalar) that specify the length of the columns of the grid.
If there are more columns in the grid than scalars specified in `grid-columns`, they are reused cyclically.
If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
If the number of [`<scalar>`](../../../css_types/scalar) is in excess, the excess is ignored.
### Values

6
docs/styles/grid/grid_gutter.md
View File

@@ -13,11 +13,11 @@ No spacing is added between the edges of cells and the edges of the container.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
grid-gutter: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> [<a href="../css_types/scalar.md">&lt;scalar&gt;</a>];
grid-gutter: <a href="../../css_types/scalar">&lt;scalar&gt;</a> [<a href="../../css_types/scalar">&lt;scalar&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
The style `grid-gutter` takes one or two [`<scalar>`](../../css_types/scalar.md) that set the length of the gutter along the vertical and horizontal axes.
If only one [`<scalar>`](../../css_types/scalar.md) is supplied, it sets the vertical and horizontal gutters.
The style `grid-gutter` takes one or two [`<scalar>`](../../../css_types/scalar) that set the length of the gutter along the vertical and horizontal axes.
If only one [`<scalar>`](../../../css_types/scalar) is supplied, it sets the vertical and horizontal gutters.
If two are supplied, they set the vertical and horizontal gutters, respectively.
### Values

6
docs/styles/grid/grid_rows.md
View File

@@ -9,13 +9,13 @@ The `grid-rows` style allows to define the height of the rows of the grid.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
grid-rows: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
grid-rows: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
--8<-- "docs/snippets/syntax_block_end.md"
The style `grid-rows` takes one or more [`<scalar>`](../../css_types/scalar.md) that specify the length of the rows of the grid.
The style `grid-rows` takes one or more [`<scalar>`](../../../css_types/scalar) that specify the length of the rows of the grid.
If there are more rows in the grid than scalars specified in `grid-rows`, they are reused cyclically.
If the number of [`<scalar>`](../../css_types/scalar.md) is in excess, the excess is ignored.
If the number of [`<scalar>`](../../../css_types/scalar) is in excess, the excess is ignored.
### Values

4
docs/styles/grid/grid_size.md
View File

@@ -11,10 +11,10 @@ The number of rows can be left unspecified and it will be computed automatically
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
grid-size: <a href="../css_types/integer.md">&lt;integer&gt;</a> [<a href="../css_types/integer.md">&lt;integer&gt;</a>];
grid-size: <a href="../../css_types/integer">&lt;integer&gt;</a> [<a href="../../css_types/integer">&lt;integer&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
The style `grid-size` takes one or two non-negative [`<integer>`](../../css_types/integer.md).
The style `grid-size` takes one or two non-negative [`<integer>`](../../../css_types/integer).
The first defines how many columns there are in the grid.
If present, the second one sets the number of rows – regardless of the number of children of the grid –, otherwise the number of rows is computed automatically.

12
docs/styles/grid/index.md
View File

@@ -16,17 +16,17 @@ For an in-depth look at the grid layout, visit the grid [guide](../guide/layout.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
<a href="./column_span.md">column-span</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
<a href="./column_span.md">column-span</a>: <a href="../../css_types/integer">&lt;integer&gt;</a>;
<a href="./grid_columns.md">grid-columns</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
<a href="./grid_columns.md">grid-columns</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
<a href="./grid_gutter.md">grid-gutter</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> [<a href="../css_types/scalar.md">&lt;scalar&gt;</a>];
<a href="./grid_gutter.md">grid-gutter</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a> [<a href="../../css_types/scalar">&lt;scalar&gt;</a>];
<a href="./grid_rows.md">grid-rows</a>: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>+;
<a href="./grid_rows.md">grid-rows</a>: <a href="../../css_types/scalar">&lt;scalar&gt;</a>+;
<a href="./grid_size.md">grid-size</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a> [<a href="../css_types/integer.md">&lt;integer&gt;</a>];
<a href="./grid_size.md">grid-size</a>: <a href="../../css_types/integer">&lt;integer&gt;</a> [<a href="../../css_types/integer">&lt;integer&gt;</a>];
<a href="./row_span.md">row-span</a>: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
<a href="./row_span.md">row-span</a>: <a href="../../css_types/integer">&lt;integer&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
Visit each style's reference page to learn more about how the values are used.

4
docs/styles/grid/row_span.md
View File

@@ -9,10 +9,10 @@ The `row-span` style specifies how many rows a widget will span in a grid layout
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
row-span: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
row-span: <a href="../../css_types/integer">&lt;integer&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `row-span` accepts a single non-negative [`<integer>`](../../css_types/integer.md) that quantifies how many rows the given widget spans.
The style `row-span` accepts a single non-negative [`<integer>`](../../../css_types/integer) that quantifies how many rows the given widget spans.
### Values

4
docs/styles/height.md
View File

@@ -5,10 +5,10 @@ The `height` rule sets a widget's height.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The style `height` needs a [`<scalar>`](../css_types/scalar.md) to determine the vertical length of the widget.
The style `height` needs a [`<scalar>`](../../css_types/scalar) to determine the vertical length of the widget.
By default, it sets the height of the content area, but if [`box-sizing`](./box_sizing) is set to `border-box` it sets the height of the border area.
### Values

6
docs/styles/layer.md
View File

@@ -5,11 +5,11 @@ The `layer` property defines the layer a widget belongs to.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
layer: <a href="../css_types/name.md">&lt;name&gt;</a>;
layer: <a href="../../css_types/name">&lt;name&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `layer` rule accepts a [`<name>`](../css_types/name.md) that defines the layer this widget belongs to.
This [`<name>`](../css_types/name.md) must correspond to a [`<name>`](../css_types/name.md) that has been defined in a [`layers`](./layers.md) rule by an ancestor of this widget.
The `layer` rule accepts a [`<name>`](../../css_types/name) that defines the layer this widget belongs to.
This [`<name>`](../../css_types/name) must correspond to a [`<name>`](../../css_types/name) that has been defined in a [`layers`](./layers) rule by an ancestor of this widget.
More information on layers can be found in the [guide](../guide/layout.md#layers).

4
docs/styles/layers.md
View File

@@ -5,10 +5,10 @@ The `layers` property allows you to define an ordered set of layers.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
layers: <a href="../css_types/name.md">&lt;name&gt;</a>+;
layers: <a href="../../css_types/name">&lt;name&gt;</a>+;
--8<-- "docs/snippets/syntax_block_end.md"
The `layers` rule accepts one or more [`<name>`](../css_types/name.md) that define the layers that the widget is aware of, and the order in which they will be painted on the screen.
The `layers` rule accepts one or more [`<name>`](../../css_types/name) that define the layers that the widget is aware of, and the order in which they will be painted on the screen.
The values used here can later be referenced using the [`layer`](../layer) property.
The layers defined first in the list are drawn under the layers that are defined later in the list.

12
docs/styles/links/index.md
View File

@@ -19,17 +19,17 @@ There are a number of styles which influence the appearance of these links withi
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
<a href="./link_background.md">link-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_background.md">link-background</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
<a href="./link_color.md">link-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_color.md">link-color</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
<a href="./link_style.md">link-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
<a href="./link_style.md">link-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
<a href="./link_hover_background.md">link-hover-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_hover_background.md">link-hover-background</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
<a href="./link_hover_color.md">link-hover-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_hover_color.md">link-hover-color</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
<a href="./link_hover_style.md">link-hover-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
<a href="./link_hover_style.md">link-hover-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
Visit each style's reference page to learn more about how the values are used.

4
docs/styles/links/link_background.md
View File

@@ -9,10 +9,10 @@ The `link-background` sets the background color of the link.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
`link-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links.
`link-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 text enclosed in Textual action links.
### Values

4
docs/styles/links/link_color.md
View File

@@ -9,10 +9,10 @@ The `link-color` sets the color of the link text.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-color: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
`link-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links.
`link-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 text enclosed in Textual action links.
### Values

4
docs/styles/links/link_hover_background.md
View File

@@ -9,10 +9,10 @@ The `link-hover-background` sets the background color of the link when the mouse
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-hover-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-hover-background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency 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-hover-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 text enclosed in Textual action links when the mouse pointer is over it.
### Values

4
docs/styles/links/link_hover_color.md
View File

@@ -9,10 +9,10 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-hover-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-hover-color: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
--8<-- "docs/snippets/syntax_block_end.md"
`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency 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-hover-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 text enclosed in Textual action links when the mouse pointer is over it.
### Values

4
docs/styles/links/link_hover_style.md
View File

@@ -9,10 +9,10 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-hover-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
link-hover-style: <a href="../../css_types/text_style">&lt;text-style&gt;</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-hover-style` applies its [`<text-style>`](../../../css_types/text_style) to the text of Textual action links when the mouse pointer is over them.
### Values

2
docs/styles/links/link_style.md
View File

@@ -9,7 +9,7 @@ The `link-style` sets the text style for the link text.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
link-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
link-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
`link-style` will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.

22
docs/styles/margin.md
View File

@@ -5,25 +5,25 @@ The `margin` rule specifies spacing around a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
margin: <a href="../css_types/integer.md">&lt;integer&gt;</a>
margin: <a href="../../css_types/integer">&lt;integer&gt;</a>
# one value for all edges
| <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a>
| <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a>
# top/bot left/right
| <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a> <a href="../css_types/integer.md">&lt;integer&gt;</a>;
| <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a> <a href="../../css_types/integer">&lt;integer&gt;</a>;
# top right bot left
margin-top: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
margin-right: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
margin-bottom: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
margin-left: <a href="../css_types/integer.md">&lt;integer&gt;</a>;
margin-top: <a href="../../css_types/integer">&lt;integer&gt;</a>;
margin-right: <a href="../../css_types/integer">&lt;integer&gt;</a>;
margin-bottom: <a href="../../css_types/integer">&lt;integer&gt;</a>;
margin-left: <a href="../../css_types/integer">&lt;integer&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `margin` specifies spacing around the four edges of the widget equal to the [`<integer>`](../css_types/integer.md) specified.
The `margin` specifies spacing around the four edges of the widget equal to the [`<integer>`](../../css_types/integer) specified.
The number of values given defines what edges get what margin:
- 1 [`<integer>`](../css_types/integer.md) sets the same margin for the four edges of the widget;
- 2 [`<integer>`](../css_types/integer.md) set margin for top/bottom and left/right edges, respectively.
- 4 [`<integer>`](../css_types/integer.md) set margin for the top, right, bottom, and left edges, respectively.
- 1 [`<integer>`](../../css_types/integer) sets the same margin for the four edges of the widget;
- 2 [`<integer>`](../../css_types/integer) set margin for top/bottom and left/right edges, respectively.
- 4 [`<integer>`](../../css_types/integer) set margin for the top, right, bottom, and left edges, respectively.
!!! tip

4
docs/styles/max_height.md
View File

@@ -5,10 +5,10 @@ The `max-height` rule sets a maximum height for a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
max-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
max-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `max-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`height`](./height.md) of a widget.
The `max-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`height`](./height) of a widget.
That is, the height of a widget is never allowed to exceed `max-height`.
### Values

4
docs/styles/max_width.md
View File

@@ -5,10 +5,10 @@ The `max-width` rule sets a maximum width for a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
max-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
max-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `max-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines an upper bound for the [`width`](./width.md) of a widget.
The `max-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`width`](./width) of a widget.
That is, the width of a widget is never allowed to exceed `max-width`.
### Values

4
docs/styles/min_height.md
View File

@@ -5,10 +5,10 @@ The `min-height` rule sets a minimum height for a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
min-height: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
min-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `min-height` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`height`](./height.md) of a widget.
The `min-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`height`](./height) of a widget.
That is, the height of a widget is never allowed to be under `min-height`.
### Values

4
docs/styles/min_width.md
View File

@@ -5,10 +5,10 @@ The `min-width` rule sets a minimum width for a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
min-width: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
min-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
The `min-width` rule accepts a [`<scalar>`](../css_types/scalar.md) that defines a lower bound for the [`width`](./width.md) of a widget.
The `min-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`width`](./width) of a widget.
That is, the width of a widget is never allowed to be under `min-width`.
### Values

8
docs/styles/offset.md
View File

@@ -5,13 +5,13 @@ The `offset` rule defines an offset for the position of the widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
offset: <a href="../css_types/scalar.md">&lt;scalar&gt;</a> <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
offset: <a href="../../css_types/scalar">&lt;scalar&gt;</a> <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
offset-x: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>;
offset-y: <a href="../css_types/scalar.md">&lt;scalar&gt;</a>
offset-x: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
offset-y: <a href="../../css_types/scalar">&lt;scalar&gt;</a>
--8<-- "docs/snippets/syntax_block_end.md"
The two [`<scalar>`](../css_types/scalar.md) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget.
The two [`<scalar>`](../../css_types/scalar) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget.
To specify an offset along a single axis, you can use `offset-x` and `offset-y`.