[gtk+] Redo the CSS docs
- From: Matthias Clasen <matthiasc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Redo the CSS docs
- Date: Sat, 26 Dec 2015 04:01:33 +0000 (UTC)
commit 26d8688cb4992bed6c17213d8832f3137fa24c22
Author: Matthias Clasen <mclasen redhat com>
Date: Thu Dec 24 18:10:04 2015 -0500
Redo the CSS docs
Split the CSS docs off from the GtkCssProvider docs and
give them their own chapter. Among other things, this commit
introduces more or less complete definitions of the syntax for
the supported selectors, a complete list of all supported
properties, and definitions for their values. This includes
documentation for GTK+-specific properties such as -gtk-icon-source.
docs/reference/gtk/css.xml | 2196 ++++++++++++++++++++++++++++++++++++++
docs/reference/gtk/gtk-docs.sgml | 2 +-
gtk/gtkcssprovider.c | 1093 +-------------------
3 files changed, 2211 insertions(+), 1080 deletions(-)
---
diff --git a/docs/reference/gtk/css.xml b/docs/reference/gtk/css.xml
new file mode 100644
index 0000000..8d27bb4
--- /dev/null
+++ b/docs/reference/gtk/css.xml
@@ -0,0 +1,2196 @@
+<?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">
+<refmeta>
+<refentrytitle>GTK+ CSS</refentrytitle>
+<manvolnum>3</manvolnum>
+<refmiscinfo>GTK Library</refmiscinfo>
+</refmeta>
+
+<refnamediv>
+<refname>GTK+ CSS</refname>
+<refpurpose>
+Overview of CSS in GTK+
+</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.
+-->
+
+<refsect1 id="css-overview">
+ <title>Overview of CSS in GTK+</title>
+
+ <para>
+ This chapter describes in detail how GTK+ uses CSS for styling
+ and layout.
+ </para>
+
+ <para>
+ We loosely follow the CSS
+ <ulink url="http://www.w3.org/TR/css-values/#value-defs";>value definition</ulink>
+ specification in the formatting of syntax productions.
+ <simplelist>
+ <member>Nonterminals are enclosed in angle backets (〈〉), all other strings that are not listed here
are literals</member>
+ <member>Juxtaposition means all components must occur, in the given order</member>
+ <member>A double ampersand (&&) means all components must occur, in any order</member>
+ <member>A double bar (||) means one or more of the components must occur, in any order</member>
+ <member>A single bar (|) indicates an alternative; exactly one of the components must occur</member>
+ <member>Brackets ([]) are used for grouping</member>
+ <member>A question mark (?) means that the preceding component is optional</member>
+ <member>An asterisk (*) means zero or more copies of the preceding component</member>
+ <member>A plus (+) means one or more copies of the preceding component</member>
+ <member>A number in curly braces ({n}) means that the preceding component occurs exactly n
times</member>
+ <member>Two numbers in curly braces ({m,n}) mean that the preceding component occurs at least m times
and at most n times</member>
+ </simplelist>
+ </para>
+
+ <refsect2>
+ <title>CSS nodes</title>
+
+ <para>
+ GTK+ applies the style information found in style sheets by matching
+ the selectors against a tree of nodes. Each node in the tree has a
+ name, a state and possibly style classes. The children of each node
+ are linearly ordered.
+ </para>
+
+ <para>
+ Every widget has one or more of these CSS nodes, and determines their
+ name, state, style classes and how they are layed out as children and
+ siblings in the overall node tree. The documentation for each widget
+ explains what CSS nodes it has.
+ </para>
+
+ <example>
+ <title>The CSS nodes of a GtkScale</title>
+ <programlisting><![CDATA[
+scale[.fine-tune]
+├── marks.top
+│ ├── mark
+┊ ┊
+│ ╰── mark
+├── trough
+│ ├── slider
+│ ├── [highlight]
+│ ╰── [fill]
+╰── marks.bottom
+ ├── mark
+ ┊
+ ╰── mark
+]]></programlisting>
+ </example>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Style sheets</title>
+
+ <para>
+ The basic structure of the style sheets understood by GTK+ is
+ a series of statements, which are either rule sets or “ -rules”,
+ separated by whitespace.
+ </para>
+
+ <para>
+ A rule set consists of a selector and a declaration block, which is
+ a series of declarations enclosed in curly braces. The declarations
+ are separated by semicolons. Multiple selectors can share the same
+ declaration block, by putting all the separators in front of the block,
+ separated by commas.
+ </para>
+
+ <example>
+ <title>A rule set with two selectors</title>
+ <programlisting><![CDATA[
+button, entry {
+ color: #ff00ea;
+ font: Comic Sans 12
+}
+]]></programlisting>
+ </example>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Importing style sheets</title>
+
+ <para>
+ GTK+ supports the CSS @import rule, in order to load another
+ style sheet in addition to the currently parsed one.
+ </para>
+
+ <para>
+ The syntax for @import rules is as follows:
+ </para>
+
+ <literallayout>
+〈import rule〉 = @import [ 〈url〉 | 〈string〉] ;
+〈url〉 = url( 〈string〉)
+ </literallayout>
+
+ <example><title>An example for using the @import rule</title>
+ <programlisting><![CDATA[
+ import url("path/to/common.css");
+]]></programlisting>
+ </example>
+
+ <para>
+ To learn more about the @import rule, you can read the
+ <ulink url="http://www.w3.org/TR/css3-cascade/#at-import";>Cascading</ulink>
+ module of the CSS specification.
+ </para>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Selectors</title>
+
+ <para>
+ Selectors work very similar to the way they do in CSS.
+ </para>
+
+ <para>
+ Typically widgets have one or more CSS nodes with element names (GTK+ falls
+ back to using the widget type if a widget has no element name) and style
+ classes. When style classes are used in selectors, they have to be prefixed
+ with a period. Widget names can be used in selectors like IDs. When used
+ in a selector, widget names must be prefixed with a # character.
+ </para>
+
+ <para>
+ In more complicated situations, selectors can be combined in various ways.
+ To require that a node satisfies several conditions, combine several selectors
+ into one by concatenating them. To only match a node when it occurs inside some
+ other node, write the two selectors after each other, separated by whitespace.
+ To restrict the match to direct children of the parent node, insert a >
+ character between the two selectors.
+ </para>
+
+ <example>
+ <title>Theme labels that are descendants of a window</title>
+ <programlisting><![CDATA[
+window label {
+ background-color: #898989
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme notebooks, and anything within</title>
+ <programlisting><![CDATA[
+notebook {
+ background-color: #a939f0
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme combo boxes, and entries that are direct children of a notebook</title>
+ <programlisting><![CDATA[
+combobox,
+notebook > entry {
+ color: @fg_color;
+ background-color: #1209a2
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme any widget within a GtkBin</title>
+ <programlisting><![CDATA[
+GtkBin * {
+ font: Sans 20
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme a label named title-label</title>
+ <programlisting><![CDATA[
+label#title-label {
+ font: Sans 15
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme any widget named main-entry</title>
+ <programlisting><![CDATA[
+#main-entry {
+ background-color: #f0a810
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme all widgets with the style class entry</title>
+ <programlisting><![CDATA[
+.entry {
+ color: #39f1f9;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme the entry of a GtkSpinButton</title>
+ <programlisting><![CDATA[
+spinbutton.entry {
+ color: 900185;
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ It is possible to select CSS nodes depending on their position amongst
+ their siblings by applying pseudo-classes to the selector, like :first-child,
+ :last-child or :nth-child(even). When used in selectors, pseudo-classes
+ must be prefixed with a : character.
+ </para>
+
+ <example>
+ <title>Theme labels in the first notebook tab</title>
+ <programlisting><![CDATA[
+notebook tab:first-child label {
+ color: #89d012;
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ Another use of pseudo-classes is to match widgets depending on their
+ state. The available pseudo-classes for widget states are :active, :hover
+ :disabled, :selected, :focus, :indeterminate, :checked and :backdrop.
+ In addition, the following pseudo-classes don't have a direct equivalent
+ as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and
+ :visited (for links) and :drop(active) (for highlighting drop targets).
+ Widget state pseudo-classes may only apply to the last element in a selector.
+ </para>
+
+ <example>
+ <title>Theme pressed buttons</title>
+ <programlisting><![CDATA[
+button:active {
+ background-color: #0274d9;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme buttons with the mouse pointer over it</title>
+ <programlisting><![CDATA[
+button:hover {
+ background-color: #3085a9;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme insensitive widgets</title>
+ <programlisting><![CDATA[
+*:disabled {
+ background-color: #320a91;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme checkbuttons that are checked</title>
+ <programlisting><![CDATA[
+checkbutton:checked {
+ background-color: #56f9a0;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme focused labels</title>
+ <programlisting><![CDATA[
+label:focus {
+ background-color: #b4940f;
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Theme inconsistent checkbuttons</title>
+ <programlisting><![CDATA[
+checkbutton:indeterminate {
+ background-color: #20395a;
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ To determine the effective style for a widget, all the matching rule
+ sets are merged. As in CSS, rules apply by specificity, so the rules
+ whose selectors more closely match a node will take precedence
+ over the others.
+ </para>
+
+ <para>
+ The full syntax for selectors understood by GTK+ can be found in the
+ table below. The main difference to CSS is that GTK+ does not currently
+ support attribute selectors.
+ </para>
+
+ <table>
+ <title>Selector syntax</title>
+ <tgroup cols="4">
+ <thead>
+ <row><entry>Pattern</entry><entry>Matches</entry><entry>Reference</entry><entry>Notes</entry></row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>*</entry>
+ <entry>any node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#universal-selector";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E</entry>
+ <entry>any node with name E</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#type-selectors";>CSS</ulink></entry>
+ <entry>GTK+ uses the type name of the widget if no CSS name has been set</entry>
+ </row>
+ <row>
+ <entry>E.class</entry>
+ <entry>any E node with the given style class</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#class-html";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E#id</entry>
+ <entry>any E node with the given ID</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#id-selectors";>CSS</ulink></entry>
+ <entry>GTK+ uses the widget name as ID</entry>
+ </row>
+ <row>
+ <entry>E:nth‑child(〈nth‑child〉)</entry>
+ <entry>any E node which is the n-th child of its parent node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:nth‑last‑child(〈nth‑child〉)</entry>
+ <entry>any E node which is the n-th child of its parent node, counting from the end</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:first‑child</entry>
+ <entry>any E node which is the first child of its parent node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:last‑child</entry>
+ <entry>any E node which is the last child of its parent node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:only‑child</entry>
+ <entry>any E node which is the only child of its parent node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#structural-pseudos";>CSS</ulink></entry>
+ <entry>Equivalent to E:first-child:last-child</entry>
+ </row>
+ <row>
+ <entry>E:link, E:visited</entry>
+ <entry>any E node which represents a hyperlink, not yet visited (:link) or already visited
(:visited)</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#link";>CSS</ulink></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED</entry>
+ </row>
+ <row>
+ <entry>E:active, E:hover, E:focus</entry>
+ <entry>any E node which is part of a widget with the corresponding state</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#useraction-pseudos";>CSS</ulink></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT and
GTK_STATE_FLAGS_FOCUSED; GTK+ also allows E:prelight and E:focused</entry>
+ </row>
+ <row>
+ <entry>E:disabled</entry>
+ <entry>any E node which is part of a widget with is disabled</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates";>CSS</ulink></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_INSENSITIVE; GTK+ also allows E:insensitive</entry>
+ </row>
+ <row>
+ <entry>E:checked</entry>
+ <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is
checked</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#UIstates";>CSS</ulink></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_CHECKED</entry>
+ </row>
+ <row>
+ <entry>E:indeterminate</entry>
+ <entry>any E node which is part of a widget (e.g. radio- or checkbuttons) which is in an
inconsistent state</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#indeterminate";>CSS3</ulink>,
+ <ulink url="https://drafts.csswg.org/selectors/#indeterminate";>CSS4</ulink></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_INCONSISTENT; GTK+ also allows E:inconsistent</entry>
+ </row>
+ <row>
+ <entry>E:backdrop, E:selected</entry>
+ <entry>any E node which is part of a widget with the corresponding state</entry>
+ <entry></entry>
+ <entry>Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED</entry>
+ </row>
+ <row>
+ <entry>E:not(〈selector〉)</entry>
+ <entry>any E node which does not match the simple selector 〈selector〉</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#negation";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:dir(ltr), E:dir(rtl)</entry>
+ <entry>any E node that has the corresponding text direction</entry>
+ <entry><ulink url="https://drafts.csswg.org/selectors/#the-dir-pseudo";>CSS4</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E:drop(active)</entry>
+ <entry>any E node that is an active drop target for a current DND operation</entry>
+ <entry><ulink url="https://drafts.csswg.org/selectors/#drag-pseudos";>CSS4</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E F</entry>
+ <entry>any F node which is a descendent of an E node</entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-selectors/#descendent-combinators";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E > F</entry>
+ <entry>any F node which is a child of an E node</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-selectors/#child-combinators";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E ~ F</entry>
+ <entry>any F node which is preceded by an E node</entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>E + F</entry>
+ <entry>any F node which is immediately preceded by an E node</entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators";>CSS</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈nth-child〉 = even | odd | 〈integer〉 | 〈integer〉n | 〈integer〉n [ + | - ] 〈integer〉
+ </literallayout>
+
+ <para>
+ To learn more about selectors in CSS, read the
+ <ulink url="http://www.w3.org/TR/css3-selectors/";>Selectors</ulink>
+ module of the CSS specification.
+ </para>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Colors</title>
+
+ <para>
+ CSS allows to specify colors in various ways, using numeric
+ values or names from a predefined list of colors.
+ </para>
+
+ <literallayout>
+〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉
+〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )
+〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉,
〈percentage〉, 〈alpha value〉 )
+〈hex color〉 = #〈hex digits〉
+〈alpha value〉 = 〈number〉, clamped to values between 0 and 1.
+ </literallayout>
+
+ <para>
+ The keyword currentColor resolves to the current value of the
+ color property when used in another property, and to the inherited value
+ of the color property when used in the color property itself.
+ </para>
+
+ <para>
+ The keyword transparent can be considered a shorthand for rgba(0,0,0,0).
+ </para>
+
+ <para>
+ For a list of valid color names and for more background on colors in
+ CSS, see the <ulink url="http://www.w3.org/TR/css3-color/#svg-color";>Color</ulink>
+ module of the CSS specification.
+ </para>
+
+ <example>
+ <title>Specifying colors in various ways</title>
+ <programlisting><![CDATA[
+ color: transparent;
+ background-color: red;
+ border-top-color: rgb(128,57,0);
+ border-left-color: rgba(10%,20%,30%,0.5);
+ border-right-color: #ff00cc;
+ border-bottom-color: #ffff0000cccc;
+]]></programlisting>
+ </example>
+
+ <para>
+ GTK+ adds several additional ways to specify colors.
+ </para>
+
+ <literallayout>
+〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉
+ </literallayout>
+
+ <para>
+ The first is a reference to a color defined via a @define-color rule.
+ The syntax for @define-color rules is as follows:
+ </para>
+
+ <literallayout>
+〈define color rule〉 = @define-color 〈name〉 〈color〉
+ </literallayout>
+
+ <para>
+ To refer to the color defined by a @define-color rule,
+ use the name from the rule, prefixed with @.
+ </para>
+
+ <literallayout>
+〈symbolic color〉 = @〈name〉
+ </literallayout>
+
+ <example><title>An example for defining colors</title>
+ <programlisting><![CDATA[
+ define-color bg_color #f9a039;
+
+* {
+background-color: @bg_color;
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ GTK+ also allows to form color expressions, which can be nested and
+ provide a rich language to define colors which are derived from a
+ set of base colors.
+ </para>
+
+ <literallayout>
+〈color expression〉 = ligher(〈color〉) | darker(〈color〉) | shade(〈number〉,〈color〉) | alpha(〈number〉,〈color〉) |
mix(〈number〉,〈color〉,〈color〉)
+ </literallayout>
+
+ <para>
+ On Windows, GTK+ allows to refer to system colors, as follows:
+ </para>
+
+ <literallayout>
+〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉)
+ </literallayout>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Images</title>
+
+ <para>
+ CSS allows to specify images in various ways, for backgrounds
+ and borders.
+ </para>
+
+ <literallayout>
+〈image〉 = 〈url〉 | 〈crossfade〉 | 〈gradient〉 | 〈gtk image〉
+〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉)
+〈gradient〉 = [ linear-gradient | repeating-linear-gradient ] ( [ [ 〈angle〉 | to 〈side or corner〉 ] , ]?
〈color stop〉 [ , 〈color stop〉]+ )
+〈side or corner〉 = [ left | right ] || [ top | bottom ]
+〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]?
+ </literallayout>
+
+ <para>
+ The simplest way to specify an image in CSS is to load an image
+ file from a URL. CSS does not specify anything about supported file
+ formats; within GTK+, you can expect at least PNG, JPEG and SVG to
+ work. The full list of supported image formats is determined by the
+ available gdk-pixbuf image loaders and may vary between systems.
+ </para>
+
+ <example>
+ <title>Loading an image file</title>
+ <programlisting><![CDATA[
+button {
+ background-image: url("water-lily.png");
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ A crossfade lets you specify an image as an intermediate between two
+ images. Crossfades are specified in the draft of the level 4
+ <ulink url="http://www.w3.org/TR/css4-images";>Image</ulink>
+ module of the CSS specification.
+ </para>
+
+ <para>
+ </para>
+
+ <example>
+ <title>Crossfading two images</title>
+ <programlisting><![CDATA[
+button {
+ background-image: cross-fade(50%, url("water-lily.png"), url("buffalo.jpg"));
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ Gradients are images that smoothly fades from one color to another. CSS
+ provides ways to specify repeating and non-repeating linear and radial
+ gradients. GTK+ currently only supports linear gradients in the CSS syntax,
+ but see the -gtk-gradient extension below, which does allow to specify
+ radial gradients as well.
+ </para>
+
+ <para>
+ A linear gradient is created by specifying a gradient line and then several
+ colors placed along that line. The gradient line may be specified using
+ an angle, or by using direction keywords.
+ </para>
+
+ <example>
+ <title>Linear gradients</title>
+ <programlisting><![CDATA[
+button {
+ background-image: linear-gradient(45deg, yellow, blue);
+}
+label {
+ background-image: linear-gradient(to top right, blue 20%, #f0f 80%);
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ To learn more about gradients in CSS, including details of how color stops
+ are placed on the gradient line, you can read the
+ <ulink url="http://www.w3.org/TR/css3-images/#gradients";>Image</ulink>
+ module of the CSS specification.
+ </para>
+
+ <para>
+ GTK+ extends the CSS syntax for images and also uses it for specifying icons.
+ </para>
+
+ <literallayout>
+〈gtk image〉 = 〈gtk gradient〉 | 〈themed icon〉 | 〈scaled image〉 | 〈win32 theme part〉
+ </literallayout>
+
+ <para>
+ GTK+ supports an alternative syntax for linear and radial gradients (which
+ was implemented before CSS gradients were supported).
+ </para>
+
+ <literallayout>
+〈gtk gradient〉 = 〈gtk linear gradient〉 | 〈gtk radial gradient〉
+〈gtk linear gradient〉 = -gtk-gradient(linear, [ 〈x position〉 〈y position〉 , ]{2}
+ 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+ )
+〈gtk radial gradient〉 = -gtk-gradient(radial, [ 〈x position〉 〈y position〉 , 〈radius〉 , ]{2}
+ 〈gtk color stop〉 [ , 〈gtk color stop〉 ]+ )
+〈x position〉 = left | right | center | 〈number〉
+〈y position〉 = top | bottom | center | 〈number〉
+〈radius 〉 = 〈number〉
+〈gtk color stop〉 = color-stop( 〈number〉 , 〈color〉 ) | from( 〈color〉 ) | to( 〈color〉 )
+ </literallayout>
+
+ <para>
+ The numbers used to specify x and y positions, radii, as well as the
+ positions of color stops, must be between 0 and 1. The keywords for for
+ x and y positions (left, right, top, bottom, center), map to numeric
+ values of 0, 1 and 0.5 in the obvious way. Color stops using the from() and
+ to() syntax are abbreviations for color-stop with numeric positions of
+ 0 and 1, respectively.
+ </para>
+
+ <example>
+ <title>Linear gradients</title>
+ <programlisting><![CDATA[
+button {
+ background-image: -gtk-gradient (linear,
+ left top, right bottom,
+ from(@yellow), to(@blue));
+}
+label {
+ background-image: -gtk-gradient (linear,
+ 0 0, 0 1,
+ color-stop(0, @yellow),
+ color-stop(0.2, @blue),
+ color-stop(1, #0f0));
+}
+]]></programlisting>
+ </example>
+
+ <example>
+ <title>Radial gradients</title>
+ <programlisting><![CDATA[
+button {
+ background-image: -gtk-gradient (radial,
+ center center, 0,
+ center center, 1,
+ from(@yellow), to(@green));
+}
+label {
+ background-image: -gtk-gradient (radial,
+ 0.4 0.4, 0.1,
+ 0.6 0.6, 0.7,
+ color-stop(0, #f00),
+ color-stop(0.1, $a0f),
+ color-stop(0.2, @yellow),
+ color-stop(1, @green));
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ GTK+ has extensive support for loading icons from icon themes. It is
+ accessible from CSS with the -gtk-icontheme syntax.
+ </para>
+
+ <literallayout>
+〈themed icon〉 = -gtk-icontheme( 〈icon name〉 )
+ </literallayout>
+
+ <para>
+ The specified icon name is used to look up a themed icon, while taking
+ the values of the -gtk-icon-style and -gtk-icon-theme properties. This
+ kind of image is mainly used as value of the -gtk-icon-source property.
+ </para>
+
+ <example>
+ <title>Using themed icons in CSS</title>
+ <programlisting><![CDATA[
+spinner {
+ -gtk-icon-source: -gtk-icontheme('process-working');
+ -gtk-icon-style: symbolic;
+}
+arrow.fancy {
+ -gtk-icon-source: -gtk-icontheme('pan-down');
+ -gtk-icon-theme: 'Oxygen';
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ GTK+ supports scaled rendering on hi-resolution displays. This works
+ best if images can be specify normal and hi-resolution variants. From
+ CSS, this can be done with the -gtk-scaled syntax.
+ </para>
+
+ <literallayout>
+〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* )
+ </literallayout>
+
+ <para>
+ While -gtk-scaled accepts multiple higher-resolution variants, in
+ practice, it will mostly be used to specify a regular image and one
+ variant for scale 2.
+ </para>
+
+ <example>
+ <title>Scaled images in CSS</title>
+ <programlisting><![CDATA[
+arrow {
+ -gtk-icon-source: -gtk-scaled(url('my-arrow.png'),
+ url('my-arrow 2 png'));
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ On Windows, GTK+ allows to refer to system theme parts as images, as follows:
+ </para>
+
+ <literallayout>
+〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉
+ [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) |
margins( 〈integer〉{1,4} ) ] ]* )
+ </literallayout>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Transitions</title>
+
+ <para>
+ CSS defines a mechanism by which changes in CSS property values can
+ be made to take effect gradually, instead of all at once. GTK+ supports
+ these transitions as well.
+ </para>
+
+ <para>
+ To enable a transition for a property when a rule set takes effect, it
+ needs to be listed in the transition-property property in that rule set.
+ Only animatable properties can be listed in the transition-property.
+ </para>
+
+ <para>
+ The details of a transition can modified with the transition-duration,
+ transition-timing-function and transition-delay properties.
+ </para>
+
+ <para>
+ To learn more about transitions, you can read the
+ <ulink url="www.w3.org/TR/css3-transitions/">Transitions</ulink>
+ module of the CSS specification.
+ </para>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Animations</title>
+
+ <para>
+ In addition to transitions, which are triggered by changes of the underlying
+ node tree, CSS also supports defined animations. While transitions specify how
+ property values change from one value to a new value, animations explicitly
+ define intermediate property values in keyframes.
+ </para>
+
+ <para>
+ Keyframes are defined with an @-rule which contains one or more of rule sets
+ with special selectors. Property declarations for nonanimatable properties
+ are ignored in these rule sets (with the exception of animation properties).
+ </para>
+
+ <literallayout>
+〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 }
+〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* }
+〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector ]*
+〈single animation selector〉 = from | to | 〈percentage〉
+ </literallayout>
+
+ <para>
+ To enable an animation, the name of the keyframes must be set as the value
+ of the animation-name property. The details of the animation can modified
+ with the animation-time, animation-timing-function, animation-iteration-count
+ and other animation properties.
+ </para>
+
+ <example>
+ <title>A CSS animation</title>
+ <programlisting><![CDATA[
+ keyrframes spin {
+ to { -gtk-icon-transform: rotate(1turn); }
+}
+
+spinner {
+ animation-name: spin;
+ animation-time: 1s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+]]></programlisting>
+ </example>
+
+ <para>
+ To learn more about animations, you can read the
+ <ulink url="www.w3.org/TR/css3-animations/">Animations</ulink>
+ module of the CSS specification.
+ </para>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Key bindings</title>
+
+ <para>
+ In order to extend key bindings affecting different widgets,
+ GTK+ supports the @binding-set rule to parse a set of bind/unbind
+ directives. Note that in order to take effect, the binding sets
+ defined in this way must be associated with rule sets by setting
+ the -gtk-key-bindings property.
+ </para>
+
+ <para>
+ The syntax for @binding-set rules is as follows:
+ <literallayout>
+〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* }
+〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }
+〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? }
+〈unbinding〉 = unbind "〈accelerator〉" ;
+ </literallayout>
+ where 〈accelerator〉 is a string that can be parsed by gtk_accelerator_parse(),
+ 〈signal name〉 is the name of a keybinding signal of the widget in question,
+ and the 〈argument〉 list must be according to the signals declaration.
+ </para>
+
+ <example>
+ <title>An example for using the @binding-set rule</title>
+ <programlisting><![CDATA[
+ binding-set binding-set1 {
+ bind "<alt>Left" { "move-cursor" (visual-positions, -3, 0) };
+ unbind "End";
+};
+
+ binding-set binding-set2 {
+ bind "<alt>Right" { "move-cursor" (visual-positions, 3, 0) };
+ bind "<alt>KP_space" { "delete-from-cursor" (whitespace, 1)
+ "insert-at-cursor" (" ") };
+};
+
+entry {
+ -gtk-key-bindings: binding-set1, binding-set2;
+}
+]]></programlisting>
+ </example>
+
+ </refsect2>
+
+ <refsect2>
+ <title>Supported Properties</title>
+
+ <para>
+ GTK+ supports CSS properties and shorthands as far as they can be applied
+ in the context of widgets, and only 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.
+ </para>
+
+ <para>
+ The following basic datatypes are used throughout:
+ </para>
+
+ <literallayout>
+〈length〉 = 〈number〉 [ px | pt | em | ex | pc | in | cm | mm ]
+〈percentage〉 = 〈number〉 %
+〈angle〉 = 〈number〉 [ deg | grad | turn ]
+〈time〉 = 〈number〉 [ s | ms ]
+ </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>
+ 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 left</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 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>〈color〉</entry>
+ <entry>rgba(1,1,1,1)</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-color/#foreground";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>opacity</entry>
+ <entry>〈alpha value〉</entry>
+ <entry>1</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-color/#opacity";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <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.
+ </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>〈family name〉 [ , 〈family name〉 ]*</entry>
+ <entry>gtk-font-name setting</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-fonts/#font-family-prop";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>font‑size</entry>
+ <entry>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</entry>
+ <entry>gtk-font-name setting</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-size-props";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-fonts/#font-size-prop";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>font‑style</entry>
+ <entry>normal | oblique | italic</entry>
+ <entry>normal</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-fonts/#font-style-prop";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>font‑variant</entry>
+ <entry>normal | small-caps</entry>
+ <entry>normal</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant";>CSS2</ulink>,
+ <ulink url="http://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>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900</entry>
+ <entry>normal</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight";>CSS2</ulink>,
+ <ulink url="http://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>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded
| expanded | extra-expanded | ultra-expanded</entry>
+ <entry>normal</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-fonts/#font-stretch-prop";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑dpi</entry>
+ <entry>〈number〉</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>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉
〈font-family〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand";>CSS2</ulink>,
+<ulink url="http://www.w3.org/TR/css3-fonts/#font-prop";>CSS3</ulink></entry>
+ <entry>CSS allows line-height, etc</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large
+〈relative size〉 = larger | smaller
+ </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 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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-text/#letter-spacing";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>text‑decoration‑line</entry>
+ <entry>none | underline | line-through</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration";>CSS2</ulink>,
+ <ulink
url="http://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>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://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>solid | double | wavy</entry>
+ <entry>solid</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://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>none | 〈shadow〉</entry>
+ <entry>none</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://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>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/css-text-decor-3/#text-decoration-property";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈shadow〉 = 〈length〉 〈length〉 〈color〉?
+ </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>builtin | 〈image〉 | none</entry>
+ <entry>builtin</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑transform</entry>
+ <entry>none | 〈transform〉+</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑style</entry>
+ <entry>requested | regular | symbolic</entry>
+ <entry>requested</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑theme</entry>
+ <entry>〈name〉</entry>
+ <entry>current icon theme</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry>Since 3.20</entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑palette</entry>
+ <entry>default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</entry>
+ <entry>default</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry>Since 3.20</entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑shadow</entry>
+ <entry>none | 〈shadow〉</entry>
+ <entry>none</entry>
+ <entry>✓</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑icon‑effect</entry>
+ <entry>none | highlight | dim</entry>
+ <entry>none</entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉
) | translateY( 〈length〉 ) |
+ scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉
) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |
+ skewX( 〈angle〉 ) | skewY( 〈angle〉 )
+ </literallayout>
+
+ <para>
+ The icon properties are used by widgets that are rendering 'icons', such
+ as arrows, expanders, spinners, checks or radios. -gtk-icon-style and
+ -gtk-icon-theme are used when resolving images using the -gtk-icontheme
+ syntax. -gtk-icon-palette defines a color palette for recoloring symbolic
+ icons. The recognized names for colors in symbolic icons are "error",
+ "warning" and "success".
+ </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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#min-width";>CSS3</ulink></entry>
+ <entry>CSS allows percentages</entry>
+ </row>
+ <row>
+ <entry>min‑height</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#min-height";>CSS3</ulink></entry>
+ <entry>CSS allows percentages</entry>
+ </row>
+ <row>
+ <entry>margin‑top</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#padding-top";>CSS3</ulink></entry>
+ <entry>CSS allows percentages</entry>
+ </row>
+ <row>
+ <entry>padding‑right</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#padding-right";>CSS3</ulink></entry>
+ <entry>CSS allows percentages</entry>
+ </row>
+ <row>
+ <entry>padding‑bottom</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#padding-bottom";>CSS3</ulink></entry>
+ <entry>CSS allows percentages</entry>
+ </row>
+ <row>
+ <entry>padding‑left</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉{1,4}</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-box/#margin";>CSS3</ulink></entry>
+ <entry>a 'four sides' shorthand</entry>
+ </row>
+ <row>
+ <entry>padding</entry>
+ <entry>〈length〉{1,4}</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width";>CSS2</ulink>,
+ <ulink url="http://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>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width";>CSS2</ulink>,
+ <ulink url="http://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>〈border style〉</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-style";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑right‑style</entry>
+ <entry>〈border style〉</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-style";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑bottom‑style</entry>
+ <entry>〈border style〉</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-style";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑left‑style</entry>
+ <entry>〈border style〉</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-style";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑top‑right‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#the-border-radius";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑bottom‑right‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#the-border-radius";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑bottom‑left‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#the-border-radius";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑top‑left‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#the-border-radius";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑top‑color</entry>
+ <entry>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑right‑color</entry>
+ <entry>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑bottom‑color</entry>
+ <entry>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑left‑color</entry>
+ <entry>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#the-border-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑image‑source</entry>
+ <entry>〈image〉 | none</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-background/#the-border-image-source";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑image‑repeat</entry>
+ <entry>〈border repeat〉{1,2}</entry>
+ <entry>stretch</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR//css3-background/#the-border-image-repeat";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑image‑slice</entry>
+ <entry>[ 〈number〉 | 〈percentage〉 ]{1,4} && fill?</entry>
+ <entry>100%</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://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>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</entry>
+ <entry>1</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://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>〈length〉{1,4}</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width";>CSS2</ulink>,
+ <ulink url="http://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>〈border style〉{1,4}</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style";>CSS2</ulink>,
+ <ulink url="http://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>〈color〉{1,4}</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-background/#border-color";>CSS3</ulink></entry>
+ <entry>a 'four sides' shorthand</entry>
+ </row>
+ <row>
+ <entry>border‑top</entry>
+ <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#border-top";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑left</entry>
+ <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#border-left";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑bottom</entry>
+ <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#border-bottom";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑right</entry>
+ <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#border-right";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border</entry>
+ <entry>〈length〉 || 〈border style〉 || 〈color〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#border";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑radius</entry>
+ <entry>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]?</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-background/#border-radius";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>border‑image</entry>
+ <entry></entry>
+ <entry>see individual properties</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-background/#border-image";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge
+〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}
+ </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>none | solid | inset | outset | hidden | dotted | dashed | double | groove |
ridge</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-ui/#outline-style";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>outline‑width</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-ui/#outline-width";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>outline‑color</entry>
+ <entry>〈color〉</entry>
+ <entry>currentColor</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-ui/#outline-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>outline‑offset</entry>
+ <entry>〈length〉</entry>
+ <entry>0px</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-ui/#outline-offset";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑outline‑top‑left‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑outline‑top‑right‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑outline‑bottom‑right‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑outline‑bottom‑left‑radius</entry>
+ <entry>〈corner radius〉</entry>
+ <entry>0</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>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-ui/#propdef-outline";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>‑gtk‑outline‑radius</entry>
+ <entry>[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]?</entry>
+ <entry>see individual properties</entry>
+ <entry></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <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>〈color〉</entry>
+ <entry>rgba(0,0,0,0)</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#background-color";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑clip</entry>
+ <entry>〈box〉 [ , 〈box〉 ]*</entry>
+ <entry>border-box</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-background/#background-clip";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑origin</entry>
+ <entry>〈box〉 [ , 〈box〉 ]*</entry>
+ <entry>padding-box</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-background/#background-origin";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑size</entry>
+ <entry>〈bg-size〉 [ , 〈bg-size〉 ]*</entry>
+ <entry>auto</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-background/#background-size";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑position</entry>
+ <entry>〈position〉 [ , 〈position〉 ]*</entry>
+ <entry>0</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#background-position";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑repeat</entry>
+ <entry>〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</entry>
+ <entry>repeat</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat";>CSS2</ulink>,
+ <ulink
url="http://www.w3.org/TR/css3-background/#background-repeat";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>background‑image</entry>
+ <entry>〈bg-image〉[ , 〈bg-image〉 ]*</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#background-image";>CSS3</ulink></entry>
+ <entry>not supported: urls without quotes, CSS radial gradients, colors in crossfades</entry>
+ </row>
+ <row>
+ <entry>box‑shadow</entry>
+ <entry>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry>✓</entry>
+ <entry><ulink url="http://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>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink
url="http://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background";>CSS2</ulink>,
+ <ulink url="http://www.w3.org/TR/css3-background/#background";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈box〉 = border-box | padding-box | content-box
+〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain
+〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}
+〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}
+〈bg-image〉 = 〈image〉 | none
+〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉
+〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉
+〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉?
+ </literallayout>
+
+
+ <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>none | all | 〈property name〉 [ , 〈property name〉 ]*</entry>
+ <entry>all</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-transitions/#transition-property";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>transition‑duration</entry>
+ <entry>〈time〉 [ , 〈time〉 ]*</entry>
+ <entry>0s</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-transitions/#transition-duration";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>transition‑timing‑function</entry>
+ <entry>〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]*</entry>
+ <entry>ease</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-transitions/#transition-timing-function";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>transition‑delay</entry>
+ <entry>〈time〉 [ , 〈time〉 ]*</entry>
+ <entry>0s</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://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>〈single-transition〉 [ , 〈single-transition〉 ]*</entry>
+ <entry>see individual properties</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-transitions/#transition";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |
+ step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |
cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )
+〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉
+ </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>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-name";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑duration</entry>
+ <entry>〈time〉 [ , 〈time〉 ]*</entry>
+ <entry>0s</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-animations/#animation-duration";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑timing‑function</entry>
+ <entry>〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]*</entry>
+ <entry>ease</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-animations/#animation-timing-function";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑iteration-count</entry>
+ <entry>〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]*</entry>
+ <entry>1</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-animations/#animation-iteration-count";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑direction</entry>
+ <entry>〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]*</entry>
+ <entry>normal</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-animations/#animation-direction";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑play‑state</entry>
+ <entry>〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]*</entry>
+ <entry>running</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://www.w3.org/TR/css3-animations/#animation-play-state";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑delay</entry>
+ <entry>〈time〉 [ , 〈time〉 ]*</entry>
+ <entry>0s</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation-delay";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ <row>
+ <entry>animation‑fill‑mode</entry>
+ <entry>〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]*</entry>
+ <entry>none</entry>
+ <entry></entry>
+ <entry></entry>
+ <entry><ulink
url="http://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>〈single‑animation〉 [ , 〈single‑animation〉]*</entry>
+ <entry><ulink url="http://www.w3.org/TR/css3-animations/#animation";>CSS3</ulink></entry>
+ <entry></entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <literallayout>
+〈single-animation-name〉 = none | 〈property name〉
+〈single-animation-iteration-count〉 = infinite | 〈number〉
+〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse
+〈single-animation-play-state〉 = running | paused
+〈single-animation-fill-mode〉 = none | forwards | backwards | both
+〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||
+ 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 ||
〈single-animation-play-state〉 || 〈single-animation-fill-mode〉
+ </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>none | 〈binding name〉 [ , 〈binding name〉 ]*</entry>
+ <entry>none</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>
+ </refsect2>
+
+</refsect1>
+</refentry>
diff --git a/docs/reference/gtk/gtk-docs.sgml b/docs/reference/gtk/gtk-docs.sgml
index 761c722..7cae512 100644
--- a/docs/reference/gtk/gtk-docs.sgml
+++ b/docs/reference/gtk/gtk-docs.sgml
@@ -28,7 +28,6 @@
<xi:include href="xml/input-handling.xml" />
</part>
-
<part id="gtkobjects">
<title>GTK+ Widgets and Objects</title>
@@ -376,6 +375,7 @@
<part id="theming">
<title>Theming in GTK+</title>
+ <xi:include href="css.xml" />
<xi:include href="xml/gtkstylecontext.xml" />
<xi:include href="xml/gtkcssprovider.xml" />
<xi:include href="xml/gtkstyleprovider.xml" />
diff --git a/gtk/gtkcssprovider.c b/gtk/gtkcssprovider.c
index 6d561b4..fcca226 100644
--- a/gtk/gtkcssprovider.c
+++ b/gtk/gtkcssprovider.c
@@ -53,1093 +53,28 @@
* @See_also: #GtkStyleContext, #GtkStyleProvider
*
* GtkCssProvider is an object implementing the #GtkStyleProvider interface.
- * It is able to parse [CSS-like](http://www.w3.org/TR/CSS2)
- * input in order to style widgets.
- *
- * ## Default files
- *
- * An application can cause GTK+ to parse a specific CSS style sheet by
- * calling gtk_css_provider_load_from_file() and adding the provider with
- * gtk_style_context_add_provider() or gtk_style_context_add_provider_for_screen().
- * In addition, certain files will be read when GTK+ is initialized. First,
- * the file `$XDG_CONFIG_HOME/gtk-3.0/gtk.css`
- * is loaded if it exists. Then, GTK+ tries to load
- * `$HOME/.themes/theme-name/gtk-3.0/gtk.css`,
- * falling back to
- * `DATADIR/share/themes/THEME/gtk-VERSION/gtk.css`,
- * where THEME is the name of the current theme
- * (see the #GtkSettings:gtk-theme-name setting), DATADIR
+ * It is able to parse [CSS-like][css-overview] input in order to style widgets.
+ *
+ * An application can make GTK+ parse a specific CSS style sheet by calling
+ * gtk_css_provider_load_from_file() or gtk_css_provider_load_from_resouce()
+ * and adding the provider with gtk_style_context_add_provider() or
+ * gtk_style_context_add_provider_for_screen().
+
+ * In addition, certain files will be read when GTK+ is initialized. First, the
+ * file $XDG_CONFIG_HOME/gtk-3.0/gtk.css` is loaded if it exists. Then, GTK+ tries
+ * to load `$HOME/.themes/theme-name/gtk-3.0/gtk.css`, falling back to
+ * `DATADIR/share/themes/THEME/gtk-VERSION/gtk.css`, where THEME is the name of
+ * the current theme (see the #GtkSettings:gtk-theme-name setting), DATADIR
* is the prefix configured when GTK+ was compiled, unless overridden by the
* `GTK_DATA_PREFIX` environment variable, and VERSION is the GTK+ version number.
* If no file is found for the current version, GTK+ tries older versions all the
* way back to 3.0.
*
- * # Style sheets
- *
- * The basic structure of the style sheets understood by this provider is
- * a series of statements, which are either rule sets or “ -rules”, separated
- * by whitespace.
- *
- * A rule set consists of a selector and a declaration block, which is
- * a series of declarations enclosed in curly braces ({ and }). The
- * declarations are separated by semicolons (;). Multiple selectors can
- * share the same declaration block, by putting all the separators in
- * front of the block, separated by commas.
- *
- * An example of a rule set with two selectors:
- * |[
- * button, entry {
- * color: #ff00ea;
- * font: Comic Sans 12
- * }
- * ]|
- *
- * # Selectors # {#gtkcssprovider-selectors}
- *
- * Selectors work very similar to the way they do in CSS. Typically widgets
- * have one or more CSS nodes with element names (GTK+ falls back to using the
- * widget class name if a widget has no element name). Widget names can be
- * used in selectors like IDs. When used in a selector, widget names must be
- * prefixed with a '#' character. The “*” character represents the so-called
- * universal selector, which matches any widget.
- *
- * To express more complicated situations, selectors can be combined in
- * various ways:
- * - To require that a widget satisfies several conditions,
- * combine several selectors into one by concatenating them. E.g.
- * `button#button1` matches a widget with element name button and
- * name button1.
- * - To only match a widget when it occurs inside some other
- * widget, write the two selectors after each other, separated by whitespace.
- * E.g. `toolbar button` matches button widgets that occur inside a toolbar.
- * - In the previous example, the button is matched even if it occurs deeply
- * nested inside the toolbar. To restrict the match to direct children of the
- * parent widget, insert a “>” character between the two selectors. E.g.
- * `notebook > label` only matches label widgets that are direct children
- * of a notebook.
- *
- * ## Examples of element and widget names in selectors
- *
- * Theme labels that are descendants of a window:
- * |[
- * window label {
- * background-color: #898989
- * }
- * ]|
- *
- * Theme notebooks, and anything that’s within these:
- * |[
- * notebook {
- * background-color: #a939f0
- * }
- * ]|
- *
- * Theme combo boxes, and entries that are direct children of a notebook:
- * |[
- * combobox,
- * notebook > entry {
- * color: @fg_color;
- * background-color: #1209a2
- * }
- * ]|
- *
- * Theme any widget within a GtkBin:
- * |[
- * GtkBin * {
- * font: Sans 20
- * }
- * ]|
- *
- * Theme a label named title-label:
- * |[
- * label#title-label {
- * font: Sans 15
- * }
- * ]|
- *
- * Theme any widget named main-entry:
- * |[
- * #main-entry {
- * background-color: #f0a810
- * }
- * ]|
- *
- * Widgets may also define style classes, which can be used for matching.
- * When used in a selector, style classes must be prefixed with a “.”
- * character.
- *
- * Refer to the documentation of individual widgets to learn which
- * element names and style classes they define.
- *
- * ## Examples for style classes in selectors
- *
- * Theme all widgets defining the class entry:
- * |[
- * .entry {
- * color: #39f1f9;
- * }
- * ]|
- *
- * Theme spinbuttons’ entry:
- * |[
- * spinbutton.entry {
- * color: #900185
- * }
- * ]|
- *
- * In complicated widgets like e.g. a GtkNotebook, it may be desirable
- * to style different parts of the widget differently. To make this
- * possible widgets can define multiple element names (also known as
- * CSS nodes) which may be used for matching in selectors. Refer to
- * the documentation of individual widgets to learn which CSS nodes
- * they define.
- *
- * The CSS nodes of a widget (more generally, of all widgets) form a
- * tree, in which the child nodes of any node are linearly ordered.
- * It is possible to select CSS nodes depending on their position
- * amongst their siblings by applying pseudo-classes to the selector,
- * like :first-child, :last-child or :nth-child(even). When used in
- * selectors, pseudo-classes must be prefixed with a ':' character.
- *
- * Theme any label within a notebook:
- * |[
- * notebook label {
- * color: #f90192;
- * }
- * ]|
- *
- * Theme labels within notebook tabs:
- * |[
- * notebook tab label {
- * color: #703910;
- * }
- * ]|
- *
- * Theme labels in the any first notebook tab, both selectors are
- * equivalent:
- * |[
- * notebook tab:nth-child(first) label,
- * notebook tab:first-child label {
- * color: #89d012;
- * }
- * ]|
- *
- * Another use of pseudo-classes is to match widgets depending on their
- * state. This is conceptually similar to the :hover, :active or :focus
- * pseudo-classes in CSS. The available pseudo-classes for widget states
- * are :active, :hover (or :prelight), :insensitive, :selected, :focus
- * (or :focused), :inconsistent, :checked and :backdrop. In addition,
- * the following pseudo-classes don't have a direct equivalent as a widget
- * state: :dir(ltr) and :dir(rtl) (for text direction), :link and :visited
- * (for links) and :dnd (for highlighting drop targets).
- *
- * ## Examples for styling specific widget states
- *
- * Theme active (pressed) buttons:
- * |[
- * button:active {
- * background-color: #0274d9;
- * }
- * ]|
- *
- * Theme buttons with the mouse pointer on it, both are equivalent:
- * |[
- * button:prelight,
- * button:hover {
- * background-color: #3085a9;
- * }
- * ]|
- *
- * Theme insensitive widgets, both are equivalent:
- * |[
- * :insensitive,
- * *:insensitive {
- * background-color: #320a91;
- * }
- * ]|
- *
- * Theme checkbuttons that are checked:
- * |[
- * checkbutton:checked {
- * background-color: #56f9a0;
- * }
- * ]|
- *
- * Theme focused labels:
- * |[
- * label:focused {
- * background-color: #b4940f;
- * }
- * ]|
- *
- * Theme inconsistent checkbuttons:
- * |[
- * checkbutton:inconsistent {
- * background-color: #20395a;
- * }
- * ]|
- *
- * Widget state pseudoclasses may only apply to the last element
- * in a selector.
- *
- * To determine the effective style for a widget, all the matching rule
- * sets are merged. As in CSS, rules apply by specificity, so the rules
- * whose selectors more closely match a widget path will take precedence
- * over the others.
- *
- * # @ Rules
- *
- * GTK+’s CSS supports the \ import rule, in order to load another
- * CSS style sheet in addition to the currently parsed one.
- *
- * An example for using the \ import rule:
- * |[
- * @import url ("path/to/common.css");
- * ]|
- *
- * In order to extend key bindings affecting different widgets, GTK+
- * supports the \ binding-set rule to parse a set of bind/unbind
- * directives, see #GtkBindingSet for the supported syntax. Note that
- * the binding sets defined in this way must be associated with rule sets
- * by setting the gtk-key-bindings style property.
- *
- * Customized key bindings are typically defined in a separate
- * `gtk-keys.css` CSS file and GTK+ loads this file
- * according to the current key theme, which is defined by the
- * #GtkSettings:gtk-key-theme-name setting.
- *
- * An example for using the \ binding rule:
- * |[
- * @binding-set binding-set1 {
- * bind "<alt>Left" { "move-cursor" (visual-positions, -3, 0) };
- * unbind "End";
- * };
- *
- * @binding-set binding-set2 {
- * bind "<alt>Right" { "move-cursor" (visual-positions, 3, 0) };
- * bind "<alt>KP_space" { "delete-from-cursor" (whitespace, 1)
- * "insert-at-cursor" (" ") };
- * };
- *
- * entry {
- * gtk-key-bindings: binding-set1, binding-set2;
- * }
- * ]|
- *
- * GTK+ also supports an additional \ define-color rule, in order
- * to define a color name which may be used instead of color numeric
- * representations.
- *
- * An example for defining colors:
- * |[
- * @define-color bg_color #f9a039;
- *
- * * {
- * background-color: @bg_color;
- * }
- * ]|
- *
- * # Symbolic colors
- *
- * Besides being able to define color names, the CSS parser is also able
- * to read different color expressions, which can also be nested, providing
- * a rich language to define colors which are derived from a set of base
- * colors.
- *
- * An example for using symbolic colors:
- * |[
- * @define-color entry-color shade (@bg_color, 0.7);
- *
- * entry {
- * background-color: @entry-color;
- * }
- *
- * entry:focused {
- * background-color: mix (@entry-color,
- * shade (#fff, 0.5),
- * 0.8);
- * }
- * ]|
- *
- * # Specifying Colors # {#specifying-colors}
- * There are various ways to express colors in GTK+ CSS.
- *
- * ## name
- *
- * A named color. See the list of [CSS colors](https://drafts.csswg.org/css-color/#named-colors).
- *
- * |[
- * color: red;
- * background-color: aquamarine;
- * ]|
- *
- * ## rgb(r, g, b)
- *
- * An opaque color.
- *
- * - `r`, `g`, `b` can be either integers between 0 and 255, or percentages.
- *
- * |[
- * color: rgb(128, 10, 54);
- * background-color: rgb(20%, 30%, 0%);
- * ]|
- *
- * ## rgba(r, g, b, a)
- *
- * A translucent color.
- *
- * - `r`, `g`, `b` can be either integers between 0 and 255, or percentages.
- * - `a` is a floating point number between 0 and 1.
- *
- * |[
- * color: rgba(128, 10, 54, 0.5);
- * ]|
- *
- * ## \#xxyyzz
- *
- * An opaque color.
- *
- * - `xx`, `yy`, `zz` are hexadecimal numbers specifying `r`, `g`, `b`
- * variants with between 1 and 4 hexadecimal digits per component.
- *
- * |[
- * color: #f0c;
- * background-color: #ff00cc;
- * border-color: #ffff0000cccc;
- * ]|
- *
- * ## \ name
- *
- * Reference to a color that has been defined with \ define-color
- *
- * |[
- * color: @bg_color;
- * ]|
- *
- * ## mix(color1, color2, factor)
- *
- * A linear combination of `color1` and `color2`.
- *
- * - `factor` is a floating point number between 0 and 1.
- *
- * |[
- * color: mix(#ff1e0a, @bg_color, 0.8);
- * ]|
- *
- * ## shade(color, factor)
- *
- * A lighter or darker variant of `color`.
- *
- * - `factor` is a floating point number.
- *
- * |[
- * color: shade(@fg_color, 0.5);
- * ]|
- *
- * ## lighter(color)
- *
- * A lighter variant of `color`.
- *
- * |[
- * color: lighter(@fg_color);
- * ]|
- *
- * ## darker(color)
- *
- * A darker variant of `color`.
- *
- * |[
- * color: darker(@bg_color);
- * ]|
- *
- * ## alpha(color, factor)
- *
- * Modifies passed color’s alpha by a factor.
- *
- * - `factor` is a floating point number. `factor` < 1.0 results in a more
- * transparent color while `factor` > 1.0 results in a more opaque color.
- *
- * |[
- * color: alpha(@fg_color, 0.5);
- * ]|
- *
- *
- * # Gradients
- *
- * Linear or radial gradients can be used as background images.
- *
- * ## Linear Gradients
- *
- * A linear gradient along the line from (`start_x`, `start_y`) to
- * (`end_x`, `end_y`) is specified using the following syntax:
- *
- * > `-gtk-gradient (linear, start_x start_y, end_x end_y, color-stop (position, color), ...)`
- *
- * - `start_x` and `end_x` can be either a floating point number between
- * 0 and 1, or one of the special values: “left”, “right”, or “center”.
- * - `start_y` and `end_y` can be either a floating point number between 0 and 1, or one
- * of the special values: “top”, “bottom” or “center”.
- * - `position` is a floating point number between 0 and 1.
- * - `color` is a color expression (see above).
- *
- * The color-stop can be repeated multiple times to add more than one color
- * stop. “from (color)” and “to (color)” can be used as abbreviations for
- * color stops with position 0 and 1, respectively.
- *
- * ## Example: Linear Gradient
- * 
- * |[
- * -gtk-gradient (linear,
- * left top, right bottom,
- * from(@yellow), to(@blue));
- * ]|
- *
- * ## Example: Linear Gradient 2
- * 
- * |[
- * -gtk-gradient (linear,
- * 0 0, 0 1,
- * color-stop(0, @yellow),
- * color-stop(0.2, @blue),
- * color-stop(1, #0f0))
- * ]|
- *
- * ## Radial Gradients
- *
- * A radial gradient along the two circles defined by (`start_x`,
- * `start_y`, `start_radius`) and (`end_x`, `end_y`, `end_radius`) is
- * specified using the following syntax:
- *
- * > `-gtk-gradient (radial, start_x start_y, start_radius, end_x end_y, end_radius, color-stop (position,
color), ...)`
- *
- * where `start_radius` and `end_radius` are floating point numbers
- * and the other parameters are as before.
- *
- * ## Example: Radial Gradient
- * 
- * |[
- * -gtk-gradient (radial,
- * center center, 0,
- * center center, 1,
- * from(@yellow), to(@green))
- * ]|
- *
- * ## Example: Radial Gradient 2
- * 
- * |[
- * -gtk-gradient (radial,
- * 0.4 0.4, 0.1,
- * 0.6 0.6, 0.7,
- * color-stop (0, #f00),
- * color-stop (0.1, #a0f),
- * color-stop (0.2, @yellow),
- * color-stop (1, @green))
- * ]|
- *
- * # Border images # {#border-images}
- *
- * Images and gradients can also be used in slices for the purpose of creating
- * scalable borders.
- * For more information, see the [CSS3 documentation for the border-image
property](http://www.w3.org/TR/css3-background/#border-images).
- *
- * 
- *
- * The parameters of the slicing process are controlled by four
- * separate properties.
- *
- * - Image Source
- * - Image Slice
- * - Image Width
- * - Image Repeat
- *
- * Note that you can use the `border-image` shorthand property to set
- * values for the properties at the same time.
- *
- * ## Image Source
- *
- * The border image source can be specified either as a
- * URL or a gradient:
- * |[
- * border-image-source: url(path);
- * ]|
- * or
- * |[
- * border-image-source: -gtk-gradient(...);
- * ]|
- *
- * ## Image Slice
- *
- * |[
- * border-image-slice: top right bottom left;
- * ]|
- *
- * The sizes specified by the `top`, `right`, `bottom`, and `left` parameters
- * are the offsets (in pixels) from the relevant edge where the image
- * should be “cut off” to build the slices used for the rendering
- * of the border.
- *
- * ## Image Width
- *
- * |[
- * border-image-width: top right bottom left;
- * ]|
- *
- * The sizes specified by the @top, @right, @bottom and @left parameters
- * are inward distances from the border box edge, used to specify the
- * rendered size of each slice determined by border-image-slice.
- * If this property is not specified, the values of border-width will
- * be used as a fallback.
- *
- * ## Image Repeat
- *
- * Specifies how the image slices should be rendered in the area
- * outlined by border-width.
- *
- * |[
- * border-image-repeat: [stretch|repeat|round|space];
- * ]|
- * or
- * |[
- * border-image-repeat: [stretch|repeat|round|space] [stretch|repeat|round|space];
- * ]|
- *
- * - The default (stretch) is to resize the slice to fill in the
- * whole allocated area.
- *
- * - If the value of this property is “repeat”, the image slice will
- * be tiled to fill the area.
- *
- * - If the value of this property is “round”, the image slice will be
- * tiled to fill the area, and scaled to fit it exactly a whole number
- * of times.
- *
- * - If the value of this property is “space”, the image slice will be
- * tiled to fill the area, and if it doesn’t fit it exactly a whole
- * number of times, the extra space is distributed as padding around
- * the slices.
- *
- * - If two options are specified, the first one affects the
- * horizontal behaviour and the second one the vertical behaviour. If
- * only one option is specified, it affects both.
- *
- *
- * ## Example: Border Image
- * 
- * |[
- * border-image: url("gradient1.png") 10 10 10 10;
- * ]|
- *
- * ## Example: Repeating Border Image
- * 
- * |[
- * border-image: url("gradient1.png") 10 10 10 10 repeat;
- * ]|
- *
- * ## Example: Stetched Border Image
- * 
- * |[
- * border-image: url("gradient1.png") 10 10 10 10 stretch;
- * ]|
- *
- *
- * # Supported Properties
- *
- * Properties are the part that differ the most to common CSS, not all
- * properties are supported (some are planned to be supported
- * eventually, some others are meaningless or don't map intuitively in
- * a widget based environment).
- *
- * The currently supported properties are:
- *
- * ## background-color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * background-color: shade (@color1, 0.5);
- * ]|
- *
- * ## color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * color: #fff;
- * ]|
- *
- * ## border-color: [color|transparent]{1,4};
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * - Four values used to specify: top right bottom left
- * - Three values used to specify: top vertical bottom
- * - Two values used to specify: horizontal vertical
- * - One value used to specify: color
- * |[
- * border-color: red green blue;
- * ]|
- *
- * ## border-top-color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * border-top-color: @borders;
- * ]|
- *
- * ## border-right-color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * border-right-color: @borders;
- * ]|
- *
- * ## border-bottom-color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * border-bottom-color: @borders;
- * ]|
- *
- * ## border-left-color: [color|transparent];
- *
- * - `color`: See [Specifying Colors][specifying-colors]
- * |[
- * border-left-color: @borders;
- * ]|
- *
- * ## font-family: name;
- *
- * The name of the font family or font name to use.
- *
- * - Note: unlike the CSS2 Specification this does not support using a
- * prioritized list of font family names and/or generic family
- * names.
- *
- * |[
- * font-family: Sans, Cantarell;
- * ]|
- *
- * ## font-style: [normal|oblique|italic];
- *
- * Selects between normal, italic and oblique faces within a font family.
- *
- * |[
- * font-style: italic;
- * ]|
- *
- * ## font-variant: [normal|small-caps];
- *
- * In a small-caps font the lower case letters look similar to the
- * uppercase ones, but in a smaller size and with slightly different
- * proportions.
- *
- * |[
- * font-variant: normal;
- * ]|
- *
- * ## font-weight: [normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900];
- *
- * Selects the weight of the font. The values '100' to '900' form an
- * ordered sequence, where each number indicates a weight that is at
- * least as dark as its predecessor. The keyword 'normal' is
- * synonymous with '400', and 'bold' is synonymous with
- * '700'. Keywords other than 'normal' and 'bold' have been shown to
- * be often confused with font names and a numerical scale was
- * therefore chosen for the 9-value list.
- * - Maps to #PANGO_TYPE_WEIGHT
- * |[
- * font-weight: bold;
- * ]|
- *
- * ## font-size: [absolute-size|relative-size|percentage];
- *
- * - `absolute-size`: The size in normal size units like `px`, `pt`,
- * and `em`. Or symbolic sizes like `xx-small`, `x-small`, `small`,
- * `medium`, `large`, `x-large`, `xx-large`.
- * - `relative-size`: `larger` or `smaller` relative to the parent.
- * - `percentage`: A percentage difference from the nominal size.
- * |[
- * font-size: 12px;
- * ]|
- *
- * ## font-stretch: [face]
- *
- * Selects a normal, condensed, or expanded face from a font family.
- *
- * Absolute keyword values have the following ordering, from narrowest to widest:
- *
- * - ultra-condensed
- * - extra-condensed
- * - condensed
- * - semi-condensed
- * - normal
- * - semi-expanded
- * - expanded
- * - extra-expanded
- * - ultra-expanded
- *
- * ## font: [family] [style] [variant] [stretch] [size];
- *
- * A shorthand for setting a few font properties at once.
- * - Supports any format accepted by pango_font_description_from_string()
- * - Note: this is somewhat different from the CSS2 Specification for this property.
- * |[
- * font: Bold 11;
- * ]|
- *
- * ## margin: [length|percentage]{1,4};
- *
- * A shorthand for setting the margin space required on all sides of
- * an element.
- * - Four values used to specify: top right bottom left
- * - Three values used to specify: top horizontal bottom
- * - Two values used to specify: vertical horizontal
- * - One value used to specify: margin
- * |[
- * margin: 1em 2em 4em;
- * ]|
- *
- * ## margin-top: [length|percentage];
- *
- * Sets the margin space required on the top of an element.
- * |[
- * margin-top: 10px;
- * ]|
- *
- * ## margin-right: [length|percentage];
- *
- * Sets the margin space required on the right of an element.
- * |[
- * margin-right: 0px;
- * ]|
- *
- * ## margin-bottom: [length|percentage];
- *
- * Sets the margin space required on the bottom of an element.
- * |[
- * margin-bottom: 10px;
- * ]|
- *
- * ## margin-left: [length|percentage];
- *
- * Sets the margin space required on the left of an element.
- * |[
- * margin-left: 1em;
- * ]|
- *
- * ## padding: [length|percentage]{1,4};
- *
- * A shorthand for setting the padding space required on all sides of
- * an element. The padding area is the space between the content of
- * the element and its border.
- * - Four values used to specify: top right bottom left
- * - Three values used to specify: top horizontal bottom
- * - Two values used to specify: vertical horizontal
- * - One value used to specify: padding
- * |[
- * padding: 1em 2em 4em;
- * ]|
- *
- * ## padding-top: [length|percentage];
- *
- * Sets the padding space required on the top of an element.
- * |[
- * padding-top: 10px;
- * ]|
- *
- * ## padding-right: [length|percentage];
- *
- * Sets the padding space required on the right of an element.
- * |[
- * padding-right: 0px;
- * ]|
- *
- * ## padding-bottom: [length|percentage];
- *
- * Sets the padding space required on the bottom of an element.
- * |[
- * padding-bottom: 10px;
- * ]|
- *
- * ## padding-left: [length|percentage];
- *
- * Sets the padding space required on the left of an element.
- * |[
- * padding-left: 1em;
- * ]|
- *
- * ## border-width: [width]{1,4};
- *
- * A shorthand for setting the border width on all sides of
- * an element.
- * - Four values used to specify: top right bottom left
- * - Three values used to specify: top vertical bottom
- * - Two values used to specify: horizontal vertical
- * - One value used to specify: width
- * |[
- * border-width: 1px 2px 4px;
- * ]|
- *
- * ## border-top-width: [width];
- *
- * Sets the border width required on the top of an element.
- * |[
- * border-top: 10px;
- * ]|
- *
- * ## border-right-width: [width];
- *
- * Sets the border width required on the right of an element.
- * |[
- * border-right: 0px;
- * ]|
- *
- * ## border-bottom-width: [width];
- *
- * Sets the border width required on the bottom of an element.
- * |[
- * border-bottom: 10px;
- * ]|
- *
- * ## border-left-width: [width];
- *
- * Sets the border width required on the left of an element.
- * |[
- * border-left: 1em;
- * ]|
- *
- * ## border-radius: [length|percentage]{1,4};
- *
- * Allows setting how rounded all border corners are.
- * - Four values used to specify: top-left top-right bottom-right bottom-left
- * - Three values used to specify: top-left top-right-and-bottom-left bottom-right
- * - Two values used to specify: top-left-and-bottom-right top-right-and-bottom-left
- * - One value used to specify: radius on all sides
- * |[
- * border-radius: 8px
- * ]|
- *
- * ## border-style: [none|solid|inset|outset]{1,4};
- *
- * A shorthand property for setting the line style for all four sides
- * of the elements border.
- * - Four values used to specify: top right bottom left;
- * - Three values used to specify: top horizontal bottom
- * - Two values used to specify: vertical horizontal
- * - One value used to specify: style
- * |[
- * border-style: solid;
- * ]|
- *
- * ## border-image: [source] [slice] [ / width ] [repeat]; A shorthand
- * for setting an image on the borders of elements. See [Border
- * Images][border-images].
- * |[
- * border-image: url("/path/to/image.png") 3 4 4 3 repeat stretch;
- * ]|
- *
- * ## border-image-source: [none|url|linear-gradient]{1,4};
- *
- * Defines the image to use instead of the style of the border. If
- * this property is set to none, the style defined by border-style is
- * used instead.
- * |[
- * border-image-source: url("/path/to/image.png");
- * ]|
- *
- * ## border-image-slice: [number|percentage]{1,4};
- *
- * Divides the image specified by border-image-source in nine regions:
- * the four corners, the four edges and the middle. It does this by
- * specifying 4 inwards offsets.
- * - Four values used to specify: top right bottom left;
- * - Three values used to specify: top vertical bottom
- * - Two values used to specify: horizontal vertical
- * - One value used to specify: slice
- * |[
- * border-image-slice: 3 3 4 3;
- * ]|
- *
- * ## border-image-width: [length|percentage]{1,4};
- *
- * Defines the offset to use for dividing the border image in nine
- * parts, the top-left corner, central top edge, top-right-corner,
- * central right edge, bottom-right corner, central bottom edge,
- * bottom-left corner, and central right edge. They represent inward
- * distance from the top, right, bottom, and left edges.
- * - Four values used to specify: top right bottom left;
- * - Three values used to specify: top horizontal bottom
- * - Two values used to specify: vertical horizontal
- * - One value used to specify: width
- * |[
- * border-image-width: 4px 0 4px 0;
- * ]|
- *
- * ## border-image-repeat: [none|url|linear-gradient]{1,4};
- *
- * Defines how the middle part of a border image is handled to match
- * the size of the border. It has a one-value syntax which describes
- * the behavior for all sides, and a two-value syntax that sets a
- * different value for the horizontal and vertical behavior.
- * - Two values used to specify: horizontal vertical
- * - One value used to specify: repeat
- * |[
- * border-image-repeat: stretch;
- * ]|
- *
- * ## background-image: [none|url|linear-gradient], ...
- * Sets one or several background images for an element. The images
- * are drawn on successive stacking context layers, with the first
- * specified being drawn as if it is the closest to the user. The
- * borders of the element are then drawn on top of them, and the
- * background-color is drawn beneath them.
- * - There can be several sources listed, separated by commas.
- * |[
- * background-image: gtk-gradient (linear,
- * left top, right top,
- * from (#fff), to (#000));
- * ]|
- *
- * ## background-repeat: [repeat|no-repeat|space|round|repeat-x|repeat-y];
- *
- * Defines how background images are repeated. A background image can
- * be repeated along the horizontal axis, the vertical axis, both, or
- * not repeated at all.
- * - `repeat`: The image is repeated in the given direction as much as
- * needed to cover the whole background image painting area. The
- * last image may be clipped if the whole thing won't fit in the
- * remaining area.
- * - `space`: The image is repeated in the given direction as much as
- * needed to cover most of the background image painting area,
- * without clipping an image. The remaining non-covered space is
- * spaced out evenly between the images. The first and last images
- * touches the edge of the element. The value of the
- * background-position CSS property is ignored for the concerned
- * direction, except if one single image is greater than the
- * background image painting area, which is the only case where an
- * image can be clipped when the space value is used.
- * - `round`: The image is repeated in the given direction as much as
- * needed to cover most of the background image painting area,
- * without clipping an image. If it doesn't cover exactly the area,
- * the tiles are resized in that direction in order to match it.
- * - `no-repeat`: The image is not repeated (and hence the background
- * image painting area will not necessarily been entirely
- * covered). The position of the non-repeated background image is
- * defined by the background-position CSS property.
- * - Note if not specified, the style doesn’t respect the CSS3
- * specification, since the background will be stretched to fill
- * the area.
- * |[
- * background-repeat: no-repeat;
- * ]|
- *
- * ## text-shadow: horizontal_offset vertical_offset [ blur_radius ] color;
- *
- * A shadow list can be applied to text or symbolic icons, using the CSS3
- * text-shadow syntax, as defined in the
- * [CSS3 Specification](http://www.w3.org/TR/css3-text/#text-shadow).
- *
- * - The offset of the shadow is specified with the
- * `horizontal_offset` and `vertical_offset` parameters.
- * - The optional blur radius is parsed, but it is currently not
- * rendered by the GTK+ theming engine.
- *
- * To set a shadow on an icon, use the `-gtk-icon-shadow` property instead,
- * with the same syntax.
- *
- * To set multiple shadows on an element, you can specify a comma-separated list
- * of shadow elements in the `text-shadow` or `-gtk-icon-shadow` property. Shadows are
- * always rendered front to back (i.e. the first shadow specified is on top of the
- * others). Shadows can thus overlay each other, but they can never overlay the
- * text or icon itself, which is always rendered on top of the shadow layer.
- *
- * |[
- * text-shadow: 1 1 0 blue, -4 -4 red;
- * ]|
-
- * ## box-shadow: [ inset ] horizontal_offset vertical_offset [ blur_radius ] [ spread ] color;
- *
- * Themes can apply shadows on framed elements using the CSS3 box-shadow syntax,
- * as defined in the
- * [CSS3 Specification](http://www.w3.org/TR/css3-background/#the-box-shadow).
- *
- * - A positive offset will draw a shadow that is offset to the right (down) of the box,
- * - A negative offset to the left (top).
- * - The optional spread parameter defines an additional distance to
- * expand the shadow shape in all directions, by the specified radius.
- * - The optional blur radius parameter is parsed, but it is currently not rendered by
- * the GTK+ theming engine.
- * - The inset parameter defines whether the drop shadow should be rendered inside or outside
- * the box canvas.
- *
- * To set multiple box-shadows on an element, you can specify a comma-separated list
- * of shadow elements in the `box-shadow` property. Shadows are always rendered
- * front to back (i.e. the first shadow specified is on top of the others) so they may
- * overlap other boxes or other shadows.
- *
- * |[
- * box-shadow: inset 0 1px 1px alpha(black, 0.1);
- * ]|
- *
- * ## transition: duration [s|ms] [linear|ease|ease-in|ease-out|ease-in-out] [loop];
- *
- * Styles can specify transitions that will be used to create a
- * gradual change in the appearance when a widget state changes.
- * - The `duration` is the amount of time that the animation will take
- * for a complete cycle from start to end.
- * - If the loop option is given, the animation will be repated until
- * the state changes again.
- * - The option after the duration determines the transition function
- * from a small set of predefined functions.
- *
- * - Linear
- *
- * 
- *
- * - Ease transition
- *
- * 
- *
- * - Ease-in-out transition
- *
- * 
- *
- * - Ease-in transition
- *
- * 
- *
- * - Ease-out transition
- *
- * 
- *
- * |[
- * transition: 150ms ease-in-out;
- * ]|
- *
- *
- * ## gtk-key-bindings: binding1, binding2, ...;
- *
- * Key binding set name list.
- *
- * ## Other Properties
- *
- * GtkThemingEngines can register their own, engine-specific style properties
- * with the function gtk_theming_engine_register_property(). These properties
- * can be set in CSS like other properties, using a name of the form
- * `-namespace-name`, where namespace is typically
- * the name of the theming engine, and name is the
- * name of the property. Style properties that have been registered by widgets
- * using gtk_widget_class_install_style_property() can also be set in this
- * way, using the widget class name for namespace.
- *
- * An example for using engine-specific style properties:
- * |[
- * * {
- * engine: clearlooks;
- * border-radius: 4;
- * -GtkPaned-handle-size: 6;
- * -clearlooks-colorize-scrollbar: false;
- * }
- * ]|
+ * In the same way, GTK+ tries to load a gtk-keys.css file for the current
+ * key theme, as defined by #GtkSettings:gtk-key-theme-name.
*/
+
typedef struct GtkCssRuleset GtkCssRuleset;
typedef struct _GtkCssScanner GtkCssScanner;
typedef struct _PropertyValue PropertyValue;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
