forked from AuroraMiddleware/gtk
799cb39e08
It was unused through all of GTK 3, so it is not worth supporting. The best Windows themes do not make use of it at all.
1504 lines
74 KiB
XML
1504 lines
74 KiB
XML
<?xml version="1.0"?>
|
|
<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
|
|
"http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
|
|
]>
|
|
<refentry id="chap-css-properties">
|
|
<refmeta>
|
|
<refentrytitle>GTK CSS Properties</refentrytitle>
|
|
<manvolnum>3</manvolnum>
|
|
<refmiscinfo>GTK Library</refmiscinfo>
|
|
</refmeta>
|
|
|
|
<refnamediv>
|
|
<refname>GTK CSS Properties</refname>
|
|
<refpurpose>
|
|
CSS Properties in GTK
|
|
</refpurpose>
|
|
</refnamediv>
|
|
|
|
|
|
<!--
|
|
Formatting conventions:
|
|
We use
|
|
|
|
〈 U+2329 Left-pointing Angle Bracket
|
|
〉 U+232A Right-pointing Angle Bracket
|
|
|
|
for indicating non-terminals in syntax productions.
|
|
|
|
We use <literallayout> for syntax productions, and each line is put in a <code>
|
|
(the latter is a workaround for deficiences in the developer.gnome.org post-processing).
|
|
-->
|
|
|
|
<refsect1 id="css-properties">
|
|
<title>Supported CSS Properties</title>
|
|
|
|
<para>
|
|
GTK supports CSS properties and shorthands as far as they can be applied
|
|
in the context of widgets, and adds its own properties only when needed.
|
|
All GTK-specific properties have a -gtk prefix.
|
|
</para>
|
|
|
|
<para>
|
|
All properties support the following keywords: inherit, initial, unset, with
|
|
the same meaning as in <ulink url="https://www.w3.org/TR/css3-cascade/#defaulting-keywords">CSS</ulink>.
|
|
</para>
|
|
|
|
<para>
|
|
The following basic datatypes are used throughout:
|
|
</para>
|
|
|
|
<literallayout><code>〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉</code>
|
|
<code>〈percentage〉 = 〈number〉 % | 〈calc expression〉</code>
|
|
<code>〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉</code>
|
|
<code>〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
Length values with the em or ex units are resolved using the font
|
|
size value, unless they occur in setting the font-size itself, in
|
|
which case they are resolved using the inherited font size value.
|
|
</para>
|
|
|
|
<para>
|
|
The rem unit is resolved using the initial font size value, which is
|
|
not quite the same as the CSS definition of rem.
|
|
</para>
|
|
|
|
<literallayout><code>〈calc expression〉 = calc( 〈calc sum〉 )</code>
|
|
<code>〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]*</code>
|
|
<code>〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]*</code>
|
|
<code>〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 )</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
The calc() notation adds considerable expressive power. There are limits
|
|
on what types can be combined in such an expression (e.g. it does not make
|
|
sense to add a number and a time). For the full details, see the
|
|
<ulink url="https://www.w3.org/TR/css3-values/#calc-notation">CSS3 Values and
|
|
Units</ulink> spec.
|
|
</para>
|
|
|
|
<para>
|
|
A common pattern among shorthand properties (called 'four sides') is one
|
|
where one to four values can be specified, to determine a value for each
|
|
side of an area. In this case, the specified values are interpreted as
|
|
follows:
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term>4 values: </term><listitem>top right bottom left</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>3 values: </term><listitem>top horizontal bottom</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>2 values: </term><listitem>vertical horizontal</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>1 value: </term><listitem>all</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Color and Filter Properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>rgba(1,1,1,1)</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-color/#foreground">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">opacity</phrase></entry>
|
|
<entry><code>〈alpha value〉</code></entry>
|
|
<entry><code>1</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-color/#opacity">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">filter</phrase></entry>
|
|
<entry><code>none | 〈filter-function-list〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈filter-function-list〉 = [ 〈filter〉]+</code>
|
|
<code>〈filter〉 = brightness( 〈number〉 ) |</code>
|
|
<code> contrast( 〈number〉 ) |</code>
|
|
<code> grayscale( 〈number〉 ) |</code>
|
|
<code> hue-rotate( 〈number〉 ) |</code>
|
|
<code> invert( 〈number〉 ) |</code>
|
|
<code> opacity( 〈number〉 ) |</code>
|
|
<code> saturate( 〈number〉 ) |</code>
|
|
<code> sepia( 〈number〉 )</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
The color property specifies the color to use for text, icons and other
|
|
foreground rendering. The opacity property specifies the opacity that is
|
|
used to composite the widget onto its parent widget. The filter property
|
|
specifies filters to be applied to the rendering.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Font Properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-family</phrase></entry>
|
|
<entry><code>〈family name〉 [ , 〈family name〉 ]*</code></entry>
|
|
<entry>gtk-font-name setting</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#font-family-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-size</phrase></entry>
|
|
<entry><code>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</code></entry>
|
|
<entry>gtk-font-name setting</entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-size-props">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#font-size-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-style</phrase></entry>
|
|
<entry><code>normal | oblique | italic</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#font-style-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant</phrase></entry>
|
|
<entry><code>normal | small-caps</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#descdef-font-variant">CSS3</ulink></entry>
|
|
<entry>only CSS2 values supported</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-weight</phrase></entry>
|
|
<entry><code>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#font-weight-prop">CSS3</ulink></entry>
|
|
<entry>normal is synonymous with 400, bold with 700</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-stretch</phrase></entry>
|
|
<entry><code>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-dpi</phrase></entry>
|
|
<entry><code>〈number〉</code></entry>
|
|
<entry>screen resolution</entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-kerning</phrase></entry>
|
|
<entry><code>auto | normal | none </code></entry>
|
|
<entry>auto</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-kerning-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-ligatures</phrase></entry>
|
|
<entry><code>normal | none | [ 〈common-lig-values〉|| 〈discretionary-lig-values〉|| 〈historical-lig-values〉|| 〈contextual-alt-values〉]</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-ligatures-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-position</phrase></entry>
|
|
<entry><code>normal | sub | super</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-caps</phrase></entry>
|
|
<entry><code>normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-numeric</phrase></entry>
|
|
<entry><code>normal | [ 〈numeric-figure-values〉|| 〈numeric-spacing-values〉|| 〈numeric-fraction-values〉|| ordinal || slashed-zero ]</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-numeric-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-alternates</phrase></entry>
|
|
<entry><code>normal | [ stylistic(〈feature-value-name〉) || historical-forms || styleset(〈feature-value-name〉#) || character-variant(〈feature-value-name〉#) || swash(〈feature-value-name〉) || ornaments(〈feature-value-name〉) || annotation(〈feature-value-name〉) ]</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant-east-asian</phrase></entry>
|
|
<entry><code>normal | [ 〈east-asian-variant-values〉 || 〈east-asian-width-values〉 || ruby ]</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-east-asian-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-feature-settings</phrase></entry>
|
|
<entry><code>normal | 〈feature-tag-value〉# </code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry>></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-feature-settings-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variation-settings</phrase></entry>
|
|
<entry><code>normal | [ 〈string〉〈number〉]#</code></entry>
|
|
<entry>normal</entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def">CSS4</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">font</phrase></entry>
|
|
<entry><code>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-fonts/#font-prop">CSS3</ulink></entry>
|
|
<entry>CSS allows line-height, etc</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">font-variant</phrase></entry>
|
|
<entry><code>normal | none | [ 〈common-lig-values〉 || 〈discretionary-lig-values〉 || 〈historical-lig-values〉 || 〈contextual-alt-values〉 || stylistic(>〈feature-value-name〉) || historical-forms || styleset(〈feature-value-name〉 #) || character-variant(〈feature-value-name〉 #) || swash(〈feature-value-name〉) || ornaments(〈feature-value-name〉) || annotation(〈feature-value-name〉) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || 〈numeric-figure-values〉 || 〈numeric-spacing-values〉 || 〈numeric-fraction-values〉 || ordinal || slashed-zero || 〈east-asian-variant-values〉 || 〈east-asian-width-values〉 || ruby ]</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-prop">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large</code>
|
|
<code>〈relative size〉 = larger | smaller</code>
|
|
<code>〈common-lig-values〉 = [ common-ligatures| no-common-ligatures ]</code>
|
|
<code>〈discretionary-lig-values〉 = [ discretionary-ligatures | no-discretionary-ligatures ]</code>
|
|
<code>〈historical-lig-values〉 = [ historical-ligatures | no-historical-ligatures ]</code>
|
|
<code>〈contextual-alt-values〉 = [ contextual | no-contextual ]</code>
|
|
<code>〈numeric-figure-values〉 = [ lining-nums | oldstyle-nums ]</code>
|
|
<code>〈numeric-spacing-values〉 = [ proportional-nums | tabular-nums ]</code>
|
|
<code>〈numeric-fraction-values〉 = [ diagonal-fractions | stacked-fractions ]</code>
|
|
<code>〈east-asian-variant-values〉 = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]</code>
|
|
<code>〈east-asian-width-values〉 = [ full-width | proportional-width ]</code>
|
|
<code>〈feature-tag-value〉 = 〈string〉[ 〈integer〉| on | off ]?</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
The font properties determine the font to use for rendering text. Relative
|
|
font sizes and weights are resolved relative to the inherited value for
|
|
these properties.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Text caret properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">caret-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS3</ulink></entry>
|
|
<entry>CSS allows an auto value</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-secondary-caret-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry>Used for the secondary caret in bidirectional text</entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<para>
|
|
The caret properties provide a way to change the appearance of the insertion
|
|
caret in editable text.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Text decoration properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">letter-spacing</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-text/#letter-spacing">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">text-decoration-line</phrase></entry>
|
|
<entry><code>none | underline | line-through</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">CSS3</ulink></entry>
|
|
<entry>CSS allows overline</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">text-decoration-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">text-decoration-style</phrase></entry>
|
|
<entry><code>solid | double | wavy</code></entry>
|
|
<entry><code>solid</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS3</ulink></entry>
|
|
<entry>CSS allows dashed and dotted</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">text-shadow</phrase></entry>
|
|
<entry><code>none | 〈shadow〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">text-decoration</phrase></entry>
|
|
<entry><code>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈shadow〉 = 〈length〉 〈length〉 〈color〉?</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
The text decoration properties determine whether to apply extra decorations
|
|
when rendering text.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Icon Properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-source</phrase></entry>
|
|
<entry><code>builtin | 〈image〉 | none</code></entry>
|
|
<entry><code>builtin</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-transform</phrase></entry>
|
|
<entry><code>none | 〈transform〉+</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-style</phrase></entry>
|
|
<entry><code>requested | regular | symbolic</code></entry>
|
|
<entry><code>requested</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry>Determines the preferred style for application-loaded icons</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-theme</phrase></entry>
|
|
<entry><code>〈name〉</code></entry>
|
|
<entry>current icon theme</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry>The icon theme to use with -gtk-icontheme(). Since 3.20</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-palette</phrase></entry>
|
|
<entry><code>〈color palette〉</code></entry>
|
|
<entry><code>default</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry>Used to recolor symbolic icons (both application-loaded and from -gtk-icontheme()). Since 3.20</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-shadow</phrase></entry>
|
|
<entry><code>none | 〈shadow〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-filter</phrase></entry>
|
|
<entry><code>none | 〈filter-function-list〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-icon-size</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry>Determines the size at which icons are displayed. See GtkIconSize</entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) |</code>
|
|
<code> matrix3d( 〈number〉 [ , 〈number〉 ]{15} ) |</code>
|
|
<code> translate( 〈length〉, 〈length〉 ) | translate3d( 〈length〉, 〈length〉, 〈length〉 ) |</code>
|
|
<code> translateX( 〈length〉 ) | translateY( 〈length〉 ) | translateZ( 〈length〉 ) |</code>
|
|
<code> scale( 〈number〉 [ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉 ) |</code>
|
|
<code> scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | scaleZ( 〈number〉 ) |</code>
|
|
<code> rotate( 〈angle〉 ) | rotate3d( 〈number〉, 〈number〉, 〈number〉, 〈angle〉 ) |</code>
|
|
<code> rotateX( 〈angle〉 ) | rotateY( 〈angle〉 ) | rotateZ( 〈angle〉 ) |</code>
|
|
<code> skew( 〈angle〉 [ , 〈angle〉 ]? ) | skewX( 〈angle〉 ) | skewY( 〈angle〉 )</code>
|
|
<code>〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
The -gtk-icon-source property is used by widgets that are rendering 'built-in'
|
|
icons, such as arrows, expanders, spinners, checks or radios.
|
|
</para>
|
|
|
|
<para>
|
|
The -gtk-icon-style property determines the preferred style for
|
|
application-provided icons.
|
|
</para>
|
|
|
|
<para>
|
|
The -gtk-icon-transform and -gtk-icon-shadow properties affect the rendering
|
|
of both built-in and application-provided icons.
|
|
</para>
|
|
|
|
<para>
|
|
-gtk-icon-palette defines a color palette for recoloring symbolic
|
|
icons. The recognized names for colors in symbolic icons are error,
|
|
warning and success. The default palette maps these three names to
|
|
symbolic colors with the names @error_color, @warning_color and
|
|
@success_color respectively.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Box properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">transform</phrase></entry>
|
|
<entry><code>none | 〈transform〉+</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css-transforms-1/">CSS3</ulink>,
|
|
<ulink url="https://drafts.csswg.org/css-transforms-2/">3D</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">min-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#min-width">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">min-height</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#min-height">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">margin-top</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#margin-top">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages or auto</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">margin-right</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#margin-right">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages or auto</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">margin-bottom</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#margin-bottom">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages or auto</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">margin-left</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#margin-left">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages or auto</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">padding-top</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#padding-top">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">padding-right</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#padding-right">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">padding-bottom</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#padding-bottom">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">padding-left</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#padding-left">CSS3</ulink></entry>
|
|
<entry>CSS allows percentages</entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">margin</phrase></entry>
|
|
<entry><code>〈length〉{1,4}</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#margin">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">padding</phrase></entry>
|
|
<entry><code>〈length〉{1,4}</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-box/#padding">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<table pgwide="1">
|
|
<title>Border properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
|
|
<entry>CSS allows other values</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-right-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/css3-background/#the-border-width">CSS3</ulink></entry>
|
|
<entry>CSS allows other values</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
|
|
<entry>CSS allows other values</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-left-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
|
|
<entry>CSS allows other values</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top-style</phrase></entry>
|
|
<entry><code>〈border style〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-right-style</phrase></entry>
|
|
<entry><code>〈border style〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom-style</phrase></entry>
|
|
<entry><code>〈border style〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-left-style</phrase></entry>
|
|
<entry><code>〈border style〉</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top-right-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom-right-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom-left-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top-left-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-right-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-left-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-image-source</phrase></entry>
|
|
<entry><code>〈image〉 | none</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#the-border-image-source">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-image-repeat</phrase></entry>
|
|
<entry><code>〈border repeat〉{1,2}</code></entry>
|
|
<entry><code>stretch</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-repeat">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-image-slice</phrase></entry>
|
|
<entry><code>[ 〈number〉 | 〈percentage〉 ]{1,4} && fill?</code></entry>
|
|
<entry><code>100%</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-slice">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-image-width</phrase></entry>
|
|
<entry><code>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</code></entry>
|
|
<entry><code>1</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-width">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-width</phrase></entry>
|
|
<entry><code>〈length〉{1,4}</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-style</phrase></entry>
|
|
<entry><code>〈border style〉{1,4}</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-color</phrase></entry>
|
|
<entry><code>〈color〉{1,4}</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-color">CSS3</ulink></entry>
|
|
<entry>a 'four sides' shorthand</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-top</phrase></entry>
|
|
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#border-top">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-right</phrase></entry>
|
|
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#border-right">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-bottom</phrase></entry>
|
|
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#border-bottom">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-left</phrase></entry>
|
|
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#border-left">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border</phrase></entry>
|
|
<entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#border">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-radius</phrase></entry>
|
|
<entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-radius">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">border-image</phrase></entry>
|
|
<entry><code>〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#border-image">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code>
|
|
<code>〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}</code>
|
|
</literallayout>
|
|
|
|
<table pgwide="1">
|
|
<title>Outline properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">outline-style</phrase></entry>
|
|
<entry><code>none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-ui/#outline-style">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">outline-width</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-ui/#outline-width">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">outline-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>currentColor</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-ui/#outline-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">outline-offset</phrase></entry>
|
|
<entry><code>〈length〉</code></entry>
|
|
<entry><code>0px</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-outline-top-left-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-outline-top-right-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-outline-bottom-right-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-outline-bottom-left-radius</phrase></entry>
|
|
<entry><code>〈corner radius〉</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">outline</phrase></entry>
|
|
<entry><code>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">-gtk-outline-radius</phrase></entry>
|
|
<entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<para>
|
|
GTK uses the CSS outline properties to render the 'focus rectangle'.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Background properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-color</phrase></entry>
|
|
<entry><code>〈color〉</code></entry>
|
|
<entry><code>rgba(0,0,0,0)</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#background-color">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-clip</phrase></entry>
|
|
<entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
|
|
<entry><code>border-box</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-clip">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-origin</phrase></entry>
|
|
<entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
|
|
<entry><code>padding-box</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-origin">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-size</phrase></entry>
|
|
<entry><code>〈bg-size〉 [ , 〈bg-size〉 ]*</code></entry>
|
|
<entry><code>auto</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#background-size">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-position</phrase></entry>
|
|
<entry><code>〈position〉 [ , 〈position〉 ]*</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#background-position">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-repeat</phrase></entry>
|
|
<entry><code>〈bg-repeat〉 [ , 〈bg-repeat〉 ]*</code></entry>
|
|
<entry><code>repeat</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#background-repeat">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-image</phrase></entry>
|
|
<entry><code>〈bg-image〉 [ , 〈bg-image〉 ]*</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#background-image">CSS3</ulink></entry>
|
|
<entry>not supported: urls without quotes, colors in crossfades</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">background-blend-mode</phrase></entry>
|
|
<entry><code>〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry>only affects multiple backgrounds</entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">box-shadow</phrase></entry>
|
|
<entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-background/#box-shadow">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry>background</entry>
|
|
<entry><code>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/css3-background/#background">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈box〉 = border-box | padding-box | content-box</code>
|
|
<code>〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain</code>
|
|
<code>〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}</code>
|
|
<code>〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code>
|
|
<code>〈bg-image〉 = 〈image〉 | none</code>
|
|
<code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
|
|
<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 || 〈color〉</code>
|
|
<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion ||</code>
|
|
<code> hard-light || hue || lighten || luminosity || multiply || normal || overlay ||</code>
|
|
<code> saturate || screen || soft-light</code>
|
|
<code>〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉?</code>
|
|
</literallayout>
|
|
|
|
<para>
|
|
As in CSS, the background color is rendered underneath all the background image layers, so it will only be visible if
|
|
background images are absent or have transparency.
|
|
</para>
|
|
|
|
<para>
|
|
Alternatively, multiple backgrounds can be blended using the <code>background-blend-mode</code> property.
|
|
</para>
|
|
|
|
<table pgwide="1">
|
|
<title>Transition properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">transition-property</phrase></entry>
|
|
<entry><code>none | all | 〈property name〉 [ , 〈property name〉 ]*</code></entry>
|
|
<entry><code>all</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-property">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">transition-duration</phrase></entry>
|
|
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
|
|
<entry><code>0s</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-duration">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">transition-timing-function</phrase></entry>
|
|
<entry><code>〈single-timing-function〉 [ , 〈single-timing-function〉 ]*</code></entry>
|
|
<entry><code>ease</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">transition-delay</phrase></entry>
|
|
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
|
|
<entry><code>0s</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-delay">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">transition</phrase></entry>
|
|
<entry><code>〈single-transition〉 [ , 〈single-transition〉 ]*</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code>
|
|
<code> step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code>
|
|
<code> cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code>
|
|
<code>〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code>
|
|
</literallayout>
|
|
|
|
<table pgwide="1">
|
|
<title>Animation properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-name</phrase></entry>
|
|
<entry><code>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-name">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-duration</phrase></entry>
|
|
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
|
|
<entry><code>0s</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-duration">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-timing-function</phrase></entry>
|
|
<entry><code>〈single-timing-function〉 [ , 〈single-timing-function〉 ]*</code></entry>
|
|
<entry><code>ease</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-timing-function">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-iteration-count</phrase></entry>
|
|
<entry><code>〈single-animation-iteration-count〉 [ , 〈single-animation-iteration-count〉 ]*</code></entry>
|
|
<entry><code>1</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-direction</phrase></entry>
|
|
<entry><code>〈single-animation-direction〉 [ , 〈single-animation-direction〉 ]*</code></entry>
|
|
<entry><code>normal</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-direction">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-play-state</phrase></entry>
|
|
<entry><code>〈single-animation-play-state〉 [ , 〈single-animation-play-state〉 ]*</code></entry>
|
|
<entry><code>running</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-play-state">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-delay</phrase></entry>
|
|
<entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
|
|
<entry><code>0s</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-delay">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation-fill-mode</phrase></entry>
|
|
<entry><code>〈single-animation-fill-mode〉 [ , 〈single-animation-fill-mode〉 ]*</code></entry>
|
|
<entry><code>none</code></entry>
|
|
<entry></entry>
|
|
<entry></entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
<tgroup cols="5">
|
|
<thead>
|
|
<row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry><phrase role="nowrap">animation</phrase></entry>
|
|
<entry><code>〈single-animation〉 [ , 〈single-animation〉 ]*</code></entry>
|
|
<entry>see individual properties</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<literallayout><code>〈single-animation-name〉 = none | 〈property name〉</code>
|
|
<code>〈single-animation-iteration-count〉 = infinite | 〈number〉</code>
|
|
<code>〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse</code>
|
|
<code>〈single-animation-play-state〉 = running | paused</code>
|
|
<code>〈single-animation-fill-mode〉 = none | forwards | backwards | both</code>
|
|
<code>〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code>
|
|
<code> 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 ||</code>
|
|
<code> 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code>
|
|
</literallayout>
|
|
|
|
<table pgwide="1">
|
|
<title>Table-related properties</title>
|
|
<tgroup cols="7">
|
|
<colspec colnum="4" align="center"/>
|
|
<colspec colnum="5" align="center"/>
|
|
<thead>
|
|
<row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
|
|
</thead>
|
|
<tbody>
|
|
<row>
|
|
<entry>border-spacing</entry>
|
|
<entry><code>〈length〉{1,2}</code></entry>
|
|
<entry><code>0</code></entry>
|
|
<entry>✓</entry>
|
|
<entry>✓</entry>
|
|
<entry><ulink url="https://www.w3.org/TR/CSS2/tables.html#separated-borders">CSS2</ulink>,
|
|
<ulink url="https://www.w3.org/TR/2016/WD-css-tables-3-20161025/#border-spacing-property">CSS3</ulink></entry>
|
|
<entry></entry>
|
|
</row>
|
|
</tbody>
|
|
</tgroup>
|
|
</table>
|
|
|
|
<para>
|
|
The border-spacing property is respected by GtkBox and GtkGrid, and by box gadgets that
|
|
are used internally in complex widgets.
|
|
</para>
|
|
|
|
</refsect1>
|
|
</refentry>
|