css docs: fix some formatting inconsistencies along the way

Mostly spaces.

Signed-off-by: Arnaud Rebillout <elboulangero@gmail.com>

https://bugzilla.gnome.org/show_bug.cgi?id=791710

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? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈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">