diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/reference/gtk/css-overview.xml | 53 | ||||
| -rw-r--r-- | docs/reference/gtk/css-properties.xml | 32 |
2 files changed, 45 insertions, 40 deletions
diff --git a/docs/reference/gtk/css-overview.xml b/docs/reference/gtk/css-overview.xml index c3e29af6f4..21c622c05f 100644 --- a/docs/reference/gtk/css-overview.xml +++ b/docs/reference/gtk/css-overview.xml @@ -117,7 +117,7 @@ scale[.fine-tune] <programlisting><![CDATA[ button, entry { color: #ff00ea; - font: 12px "Comic Sans" + font: 12px "Comic Sans"; } ]]></programlisting> </example> @@ -136,8 +136,8 @@ button, entry { The syntax for @import rules is as follows: </para> -<literallayout><code>〈import rule〉 = @import [ 〈url〉 | 〈string〉] ;</code> -<code>〈url〉 = url( 〈string〉)</code> +<literallayout><code>〈import rule〉 = @import [ 〈url〉 | 〈string〉 ]</code> +<code>〈url〉 = url( 〈string〉 )</code> </literallayout> <example><title>An example for using the @import rule</title> @@ -181,7 +181,7 @@ button, entry { <title>Theme labels that are descendants of a window</title> <programlisting><![CDATA[ window label { - background-color: #898989 + background-color: #898989; } ]]></programlisting> </example> @@ -190,7 +190,7 @@ window label { <title>Theme notebooks, and anything within</title> <programlisting><![CDATA[ notebook { - background-color: #a939f0 + background-color: #a939f0; } ]]></programlisting> </example> @@ -201,7 +201,7 @@ notebook { combobox, notebook > entry { color: @fg_color; - background-color: #1209a2 + background-color: #1209a2; } ]]></programlisting> </example> @@ -210,7 +210,7 @@ notebook > entry { <title>Theme any widget within a GtkBox</title> <programlisting><![CDATA[ box * { - font: 20px Sans + font: 20px Sans; } ]]></programlisting> </example> @@ -219,7 +219,7 @@ box * { <title>Theme a label named title-label</title> <programlisting><![CDATA[ label#title-label { - font: 15px Sans + font: 15px Sans; } ]]></programlisting> </example> @@ -228,7 +228,7 @@ label#title-label { <title>Theme any widget named main-entry</title> <programlisting><![CDATA[ #main-entry { - background-color: #f0a810 + background-color: #f0a810; } ]]></programlisting> </example> @@ -246,7 +246,7 @@ label#title-label { <title>Theme the entry of a GtkSpinButton</title> <programlisting><![CDATA[ spinbutton entry { - color: 900185; + color: #900185; } ]]></programlisting> </example> @@ -508,8 +508,8 @@ checkbutton:indeterminate { </para> <literallayout><code>〈color〉 = currentColor | transparent | 〈color name〉 | 〈rgb color〉 | 〈rgba color〉 | 〈hex color〉 | 〈gtk color〉</code> -<code>〈rgb color 〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )</code> -<code>〈rgba color 〉 = rgba(〈number〉, 〈number〉, 〈number〉, 〈alpha value〉) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 )</code> +<code>〈rgb color〉 = rgb( 〈number〉, 〈number〉, 〈number〉 ) | rgb( 〈percentage〉, 〈percentage〉, 〈percentage〉 )</code> +<code>〈rgba color〉 = rgba( 〈number〉, 〈number〉, 〈number〉, 〈alpha value〉 ) | rgba( 〈percentage〉, 〈percentage〉, 〈percentage〉, 〈alpha value〉 )</code> <code>〈hex color〉 = #〈hex digits〉</code> <code>〈alpha value〉 = 〈number〉</code>, clamped to values between 0 and 1 </literallayout> @@ -546,7 +546,7 @@ checkbutton:indeterminate { GTK+ adds several additional ways to specify colors. </para> -<literallayout><code>〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉| 〈win32 color〉</code> +<literallayout><code>〈gtk color〉 = 〈symbolic color〉 | 〈color expression〉 | 〈win32 color〉</code> </literallayout> <para> @@ -570,7 +570,7 @@ checkbutton:indeterminate { @define-color bg_color #f9a039; * { -background-color: @bg_color; + background-color: @bg_color; } ]]></programlisting> </example> @@ -590,14 +590,15 @@ background-color: @bg_color; number from 0 to 1 and applies that as the opacity of the supplied color. </para> -<literallayout><code>〈color expression〉 = lighter(〈color〉) | darker(〈color〉) | shade(〈color〉,〈number〉) | alpha(〈color〉,〈number〉) | mix(〈color〉,〈color〉,〈number〉)</code> +<literallayout><code>〈color expression〉 = lighter( 〈color〉 ) | darker( 〈color〉 ) | shade( 〈color〉, 〈number〉 ) |</code> +<code> alpha( 〈color〉, 〈number〉 ) | mix( 〈color〉, 〈color〉, 〈number〉 )</code> </literallayout> <para> On Windows, GTK+ allows to refer to system colors, as follows: </para> -<literallayout><code>〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉)</code> +<literallayout><code>〈win32 color〉 = -gtk-win32-color( 〈name〉, 〈integer〉 )</code> </literallayout> </refsect2> @@ -611,8 +612,8 @@ background-color: @bg_color; </para> <literallayout><code>〈image〉 = 〈url〉 | 〈crossfade〉 | 〈alternatives〉 | 〈gradient〉 | 〈gtk image〉</code> -<code>〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉)</code> -<code>〈alternatives〉 = image([ 〈image〉, ]* [ 〈image〉 | 〈color〉 ])</code> +<code>〈crossfade〉 = cross-fade( 〈percentage〉, 〈image〉, 〈image〉 )</code> +<code>〈alternatives〉 = image([ 〈image〉, ]* [ 〈image〉 | 〈color〉 ] )</code> <code>〈gradient〉 = 〈linear gradient〉 | 〈radial gradient〉</code> <code>〈linear gradient〉 = [ linear-gradient | repeating-linear-gradient ] (</code> <code> [ [ 〈angle〉 | to 〈side or corner〉 ] , ]?</code> @@ -621,7 +622,7 @@ background-color: @bg_color; <code> [ [ 〈shape〉 || 〈size〉 ] [ at 〈position〉 ]? , | at 〈position〉, ]?</code> <code> 〈color stops〉 )</code> <code>〈side or corner〉 = [ left | right ] || [ top | bottom ]</code> -<code>〈color stops〉 = 〈color stop〉 [ , 〈color stop〉]+</code> +<code>〈color stops〉 = 〈color stop〉 [ , 〈color stop〉 ]+</code> <code>〈color stop〉 = 〈color〉 [ 〈percentage〉 | 〈length〉 ]?</code> <code>〈shape〉 = circle | ellipse</code> <code>〈size〉 = 〈extent keyword〉 | 〈length〉 | [ 〈length〉 | 〈percentage〉 ]{1,2}</code> @@ -842,7 +843,7 @@ arrow.fancy { CSS, this can be done with the -gtk-scaled syntax. </para> -<literallayout><code>〈scaled image〉 = -gtk-scaled( 〈image〉[, 〈image〉]* )</code> +<literallayout><code>〈scaled image〉 = -gtk-scaled( 〈image〉[ , 〈image〉 ]* )</code> </literallayout> <para> @@ -861,7 +862,7 @@ arrow { ]]></programlisting> </example> -<literallayout><code>〈recolored image〉 = -gtk-recolored( 〈url〉[, 〈color palette〉] )</code> +<literallayout><code>〈recolored image〉 = -gtk-recolor( 〈url〉 [ , 〈color palette〉 ] )</code> </literallayout> <para> @@ -887,7 +888,7 @@ arrow { </para> <literallayout><code>〈win32 theme part〉 = -gtk-win32-theme-part( 〈name〉, 〈integer〉 〈integer〉</code> -<code> [, [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉]? ) | margins( 〈integer〉{1,4} ) ] ]* )</code> +<code> [ , [ over( 〈integer〉 〈integer〉 [ , 〈alpha value〉 ]? ) | margins( 〈integer〉{1,4} ) ] ]* )</code> </literallayout> </refsect2> @@ -938,7 +939,7 @@ arrow { <literallayout><code>〈keyframe rule〉 = @keyframes 〈name〉 { 〈animation rule〉 }</code> <code>〈animation rule〉 = 〈animation selector〉 { 〈declaration〉* }</code> -<code>〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector ]*</code> +<code>〈animation selector〉 = 〈single animation selector〉 [ , 〈single animation selector〉 ]*</code> <code>〈single animation selector〉 = from | to | 〈percentage〉</code> </literallayout> @@ -988,10 +989,10 @@ spinner { The syntax for @binding-set rules is as follows: </para> -<literallayout><code>〈binding set rule〉 = @binding-set 〈binding name〉{ [ [ 〈binding〉 | 〈unbinding〉] ; ]* }</code> +<literallayout><code>〈binding set rule〉 = @binding-set 〈binding name〉 { [ [ 〈binding〉 | 〈unbinding〉 ] ; ]* }</code> <code>〈binding〉 = bind "〈accelerator〉" { 〈signal emission〉* }</code> -<code>〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉[ , 〈argument〉]* ]? }</code> -<code>〈unbinding〉 = unbind "〈accelerator〉" ;</code> +<code>〈signal emission〉 = "〈signal name〉" ( [ 〈argument〉 [ , 〈argument〉 ]* ]? }</code> +<code>〈unbinding〉 = unbind "〈accelerator〉"</code> </literallayout> <para> diff --git a/docs/reference/gtk/css-properties.xml b/docs/reference/gtk/css-properties.xml index 3fdf550a79..310cc6bac3 100644 --- a/docs/reference/gtk/css-properties.xml +++ b/docs/reference/gtk/css-properties.xml @@ -71,11 +71,12 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </para> <literallayout> -<code>〈win32 theme size〉 = 〈win32 size〉| 〈win32 part size〉</code> +<code>〈win32 theme size〉 = 〈win32 size〉 | 〈win32 part size〉</code> <code>〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )</code> <code>〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |</code> -<code> -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code> -<code> -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code> +<code> -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code> +<code> -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ]</code> +<code> ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code> </literallayout> <literallayout><code>〈calc expression〉 = calc( 〈calc sum〉 )</code> @@ -451,7 +452,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </table> <literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |</code> -<code> scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code> +<code> scale( 〈number〉 [ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code> <code> skewX( 〈angle〉 ) | skewY( 〈angle〉 )</code> <code>〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code> </literallayout> @@ -1014,7 +1015,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </row> <row> <entry><phrase role="nowrap">-gtk-outline-radius</phrase></entry> - <entry><code>[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry> + <entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage〉 ]{1,4} ]?</code></entry> <entry>see individual properties</entry> <entry></entry> <entry></entry> @@ -1085,7 +1086,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </row> <row> <entry><phrase role="nowrap">background-repeat</phrase></entry> - <entry><code>〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</code></entry> + <entry><code>〈bg-repeat〉 [ , 〈bg-repeat〉 ]*</code></entry> <entry><code>repeat</code></entry> <entry></entry> <entry></entry> @@ -1095,7 +1096,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </row> <row> <entry><phrase role="nowrap">background-image</phrase></entry> - <entry><code>〈bg-image〉[ , 〈bg-image〉 ]*</code></entry> + <entry><code>〈bg-image〉 [ , 〈bg-image〉 ]*</code></entry> <entry><code>none</code></entry> <entry></entry> <entry>✓</entry> @@ -1146,8 +1147,10 @@ We use <literallayout> for syntax productions, and each line is put in a <code> <code>〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code> <code>〈bg-image〉 = 〈image〉 | none</code> <code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code> -<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉</code> -<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || hard-light || hue || lighten || luminosity || multiply || normal || overlay || saturate || screen || soft-light</code> +<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉 || 〈color〉</code> +<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion ||</code> +<code> hard-light || hue || lighten || luminosity || multiply || normal || overlay ||</code> +<code> saturate || screen || soft-light</code> <code>〈box shadow〉 = inset? && 〈length〉{2,4}? && 〈color〉?</code> </literallayout> @@ -1189,7 +1192,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </row> <row> <entry><phrase role="nowrap">transition-timing-function</phrase></entry> - <entry><code>〈single-timing-function〉[ , 〈single-timing-function〉 ]*</code></entry> + <entry><code>〈single-timing-function〉 [ , 〈single-timing-function〉 ]*</code></entry> <entry><code>ease</code></entry> <entry></entry> <entry></entry> @@ -1224,8 +1227,8 @@ We use <literallayout> for syntax productions, and each line is put in a <code> </table> <literallayout><code>〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code> -<code> step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code> -<code> cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code> +<code> step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code> +<code> cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code> <code>〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code> </literallayout> @@ -1319,7 +1322,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code> <tbody> <row> <entry><phrase role="nowrap">animation</phrase></entry> - <entry><code>〈single-animation〉 [ , 〈single-animation〉]*</code></entry> + <entry><code>〈single-animation〉 [ , 〈single-animation〉 ]*</code></entry> <entry>see individual properties</entry> <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS3</ulink></entry> <entry></entry> @@ -1334,7 +1337,8 @@ We use <literallayout> for syntax productions, and each line is put in a <code> <code>〈single-animation-play-state〉 = running | paused</code> <code>〈single-animation-fill-mode〉 = none | forwards | backwards | both</code> <code>〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code> -<code> 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code> +<code> 〈single-animation-iteration-count〉 || 〈single-animation-direction〉 ||</code> +<code> 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code> </literallayout> <table pgwide="1"> |