Skip to content

Commit

Permalink
css docs: fix some formatting inconsistencies along the way
Browse files Browse the repository at this point in the history 
Mostly spaces.

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

https://bugzilla.gnome.org/show_bug.cgi?id=791710
  • Loading branch information
@elboulangero
elboulangero authored and Matthias Clasen committed Dec 29, 2017
1 parent c1ce599 commit ed5f07e
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 40 deletions.
53 changes: 27 additions & 26 deletions docs/reference/gtk/css-overview.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ scale[.fine-tune]
<programlisting><![CDATA[
button, entry {
color: #ff00ea;
font: 12px "Comic Sans"
font: 12px "Comic Sans";
}
]]></programlisting>
</example>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -190,7 +190,7 @@ window label {
<title>Theme notebooks, and anything within</title>
<programlisting><![CDATA[
notebook {
background-color: #a939f0
background-color: #a939f0;
}
]]></programlisting>
</example>
Expand All @@ -201,7 +201,7 @@ notebook {
combobox,
notebook > entry {
color: @fg_color;
background-color: #1209a2
background-color: #1209a2;
}
]]></programlisting>
</example>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -570,7 +570,7 @@ checkbutton:indeterminate {
@define-color bg_color #f9a039;
* {
background-color: @bg_color;
background-color: @bg_color;
}
]]></programlisting>
</example>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -774,7 +775,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>
Expand All @@ -793,7 +794,7 @@ arrow {
]]></programlisting>
</example>

<literallayout><code>〈recolored image〉 = -gtk-recolor( 〈url〉[, 〈color palette〉] )</code>
<literallayout><code>〈recolored image〉 = -gtk-recolor( 〈url〉 [ , 〈color palette〉 ] )</code>
</literallayout>

<para>
Expand All @@ -819,7 +820,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>
Expand Down Expand Up @@ -870,7 +871,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>

Expand Down Expand Up @@ -920,10 +921,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>
Expand Down
32 changes: 18 additions & 14 deletions docs/reference/gtk/css-properties.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -573,7 +574,7 @@ We use <literallayout> for syntax productions, and each line is put in a <code>
<code> matrix3d( 〈number〉 [ , 〈number〉 ]{15} ) |</code>
<code> translate( 〈length〉, 〈length〉 ) | translate3d( 〈length〉, 〈length〉, 〈length〉 ) |</code>
<code> translateX( 〈length〉 ) | translateY( 〈length〉 ) | translateZ( 〈length〉 ) |</code>
<code> scale( 〈number〉[ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉) |</code>
<code> scale( 〈number〉 [ , 〈number〉 ]? ) | scale3d( 〈number〉, 〈number〉, 〈number〉 ) |</code>
<code> scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | scaleZ( 〈number〉 ) |</code>
<code> rotate( 〈angle〉 ) | rotate3d( 〈number〉, 〈number〉, 〈number〉, 〈angle〉 ) |</code>
<code> rotateX( 〈angle〉 ) | rotateY( 〈angle〉 ) | rotateZ( 〈angle〉 ) |</code>
Expand Down Expand Up @@ -1139,7 +1140,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>
Expand Down Expand Up @@ -1210,7 +1211,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>
Expand All @@ -1220,7 +1221,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>
Expand Down Expand Up @@ -1271,8 +1272,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>

Expand Down Expand Up @@ -1314,7 +1317,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>
Expand Down Expand Up @@ -1349,8 +1352,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>

Expand Down Expand Up @@ -1444,7 +1447,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>
Expand All @@ -1459,7 +1462,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">
Expand Down

0 comments on commit ed5f07e

Please sign in to comment.