forked from AuroraMiddleware/gtk
1429 lines
66 KiB
XML
1429 lines
66 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</refentrytitle>
|
||
<manvolnum>3</manvolnum>
|
||
<refmiscinfo>GTK Library</refmiscinfo>
|
||
</refmeta>
|
||
|
||
<refnamediv>
|
||
<refname>GTK+ CSS</refname>
|
||
<refpurpose>
|
||
GTK+ CSS Properties
|
||
</refpurpose>
|
||
</refnamediv>
|
||
|
||
|
||
<!--
|
||
Formatting conventions:
|
||
We use
|
||
|
||
‑ U+2011 Non-breaking Hyphen
|
||
U+00A0 No-break Space
|
||
|
||
to control line breaks in the Name and Value columns.
|
||
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>
|
||
|
||
<para>
|
||
Whereever a number is allowed, GTK+ also accepts a Windows-specific
|
||
theme size:
|
||
</para>
|
||
|
||
<literallayout>
|
||
<code>〈win32 theme size〉 = 〈win32 size〉| 〈win32 part size〉</code>
|
||
<code>〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )</code>
|
||
<code>〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |</code>
|
||
<code> -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code>
|
||
<code> -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code>
|
||
</literallayout>
|
||
|
||
<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>color</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>opacity</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>filter</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>font‑family</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>font‑size</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>font‑style</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>font‑variant</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>font‑weight</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>font‑stretch</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>‑gtk‑dpi</entry>
|
||
<entry><code>〈number〉</code></entry>
|
||
<entry>screen resolution</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>font</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>
|
||
</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>
|
||
</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>caret-color</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>-gtk-secondary-caret-color</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>letter‑spacing</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>text‑decoration‑line</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>text‑decoration‑color</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>text‑decoration‑style</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>text‑shadow</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>text‑decoration</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>‑gtk‑icon‑source</entry>
|
||
<entry><code>builtin | 〈image〉 | none</code></entry>
|
||
<entry><code>builtin</code></entry>
|
||
<entry></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑icon‑transform</entry>
|
||
<entry><code>none | 〈transform〉+</code></entry>
|
||
<entry><code>none</code></entry>
|
||
<entry></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑icon‑style</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>‑gtk‑icon‑theme</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>‑gtk‑icon‑palette</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>‑gtk‑icon‑shadow</entry>
|
||
<entry><code>none | 〈shadow〉</code></entry>
|
||
<entry><code>none</code></entry>
|
||
<entry>✓</entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑icon‑filter</entry>
|
||
<entry><code>none | 〈filter-function-list〉</code></entry>
|
||
<entry><code>none</code></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
<entry><ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS3</ulink></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
|
||
@error_color.
|
||
</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>min‑width</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>min‑height</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>margin‑top</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>margin‑right</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>margin‑bottom</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>margin‑left</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>padding‑top</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>padding‑right</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>padding‑bottom</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>padding‑left</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>margin</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>padding</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>border‑top‑width</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>border‑right‑width</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>border‑bottom‑width</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>border‑right‑width</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/TR/css3-background/#the-border-width">CSS3</ulink></entry>
|
||
<entry>CSS allows other values</entry>
|
||
</row>
|
||
<row>
|
||
<entry>border‑top‑style</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>border‑right‑style</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>border‑bottom‑style</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>border‑left‑style</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>border‑top‑right‑radius</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>border‑bottom‑right‑radius</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>border‑bottom‑left‑radius</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>border‑top‑left‑radius</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>border‑top‑color</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>border‑right‑color</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>border‑bottom‑color</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>border‑left‑color</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>border‑image‑source</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>border‑image‑repeat</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>border‑image‑slice</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>border‑image‑width</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>border‑width</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>border‑style</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>border‑color</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>border‑top</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>border‑left</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>border‑bottom</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>border‑right</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>border</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>border‑radius</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>border‑image</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>outline‑style</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>outline‑width</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>outline‑color</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>outline‑offset</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>‑gtk‑outline‑top‑left‑radius</entry>
|
||
<entry><code>〈corner radius〉</code></entry>
|
||
<entry><code>0</code></entry>
|
||
<entry></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑outline‑top‑right‑radius</entry>
|
||
<entry><code>〈corner radius〉</code></entry>
|
||
<entry><code>0</code></entry>
|
||
<entry></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑outline‑bottom‑right‑radius</entry>
|
||
<entry><code>〈corner radius〉</code></entry>
|
||
<entry><code>0</code></entry>
|
||
<entry></entry>
|
||
<entry>✓</entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
<row>
|
||
<entry>‑gtk‑outline‑bottom‑left‑radius</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>outline</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>‑gtk‑outline‑radius</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>background‑color</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>background‑clip</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>background‑origin</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>background‑size</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>background‑position</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>background‑repeat</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>background‑image</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>background-blend-mode</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>box‑shadow</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><para>background</para></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 || hard-light || hue || lighten || luminosity || multiply || normal || overlay || 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>transition‑property</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>transition‑duration</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>transition‑timing‑function</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>transition‑delay</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>transition</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>animation‑name</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>animation‑duration</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>animation‑timing‑function</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>animation‑iteration-count</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>animation‑direction</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>animation‑play‑state</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>animation‑delay</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>animation‑fill‑mode</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>animation</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〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code>
|
||
</literallayout>
|
||
|
||
<table pgwide="1">
|
||
<title>Key binding 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>‑gtk‑key‑bindings</entry>
|
||
<entry><code>none | 〈binding name〉 [ , 〈binding name〉 ]*</code></entry>
|
||
<entry><code>none</code></entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
<entry></entry>
|
||
</row>
|
||
</tbody>
|
||
</tgroup>
|
||
</table>
|
||
|
||
<para>
|
||
〈binding name〉 must have been assigned to a binding set with a @binding-set rule.
|
||
</para>
|
||
|
||
<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>
|