Gradients: update man page

doc/manual.html

@@ -291,11 +291,13 @@ clock_background_id = 0
 <p>Identifier 0 refers to a special background which is fully transparent, identifier 1 applies the first background defined in the config file etc.</p><h3 id="gradients">Gradients<a name="gradients" href="#gradients" class="md2man-permalink" title="permalink"></a></h3><p>(Available since 0.13.0)</p><p>Backgrounds also allow specifying gradient layers
 that are drawn on top of the solid color background.</p><p>First the user must define one or more gradients in the config file,
 each starting with <code>gradient = TYPE</code>. These must be added before backgrounds.</p><p>Then gradients can be added by index to backgrounds,
-using the <code>gradient_id = INDEX</code>, <code>hover_gradient_id = INDEX</code> and
+using the <code>gradient_id = INDEX</code>, <code>gradient_id_hover = INDEX</code> and
-<code>pressed_gradient_id = INDEX</code>, where <code>INDEX</code> is
+<code>gradient_id_pressed = INDEX</code>, where <code>INDEX</code> is
-the gradient index, starting from 1.</p><h4 id="simple-gradients">Simple gradients<a name="simple-gradients" href="#simple-gradients" class="md2man-permalink" title="permalink"></a></h4><p>These are gradients that vary from fixed control points (top-to-bottom, left-to-right
+the gradient index, starting from 1.</p><h4 id="gradient-types">Gradient types<a name="gradient-types" href="#gradient-types" class="md2man-permalink" title="permalink"></a></h4><p>Gradients vary the color between fixed control points:
-or center-to-corners). The user must specify the start and end colors,
+* vertical gradients: top-to-bottom;
-and can optionally add extra color stops in between.</p><h5 id="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors">Vertical gradient, with color varying from the top edge to the bottom edge, two colors<a name="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" href="#vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = vertical
+* horizontal gradients: left-to-right;
+* radial gradients: center-to-corners.</p><p>The user must specify the start and end colors, and can optionally add extra color stops in between
+using the <code>color_stop</code> option, as explained below.</p><h5 id="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors">Vertical gradient, with color varying from the top edge to the bottom edge, two colors<a name="vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" href="#vertical-gradient-with-color-varying-from-the-top-edge-to-the-bottom-edge-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = vertical
 start_color = #rrggbb opacity
 end_color = #rrggbb opacity
 </code></pre>
@@ -303,103 +305,29 @@ end_color = #rrggbb opacity
 start_color = #rrggbb opacity
 end_color = #rrggbb opacity
 </code></pre>
-<h5 id="centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors">Centered radial gradient, with color varying from the center to the corner, two colors:<a name="centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" href="#centered-radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = centered
+<h5 id="radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors">Radial gradient, with color varying from the center to the corner, two colors:<a name="radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" href="#radial-gradient-with-color-varying-from-the-center-to-the-corner-two-colors" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = radial
 start_color = #rrggbb opacity
 end_color = #rrggbb opacity
 </code></pre>
 <h5 id="adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points">Adding extra color stops (0% and 100% remain fixed, more colors at x% between the start and end control points)<a name="adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points" href="#adding-extra-color-stops-0-and-100-remain-fixed-more-colors-at-x-between-the-start-and-end-control-points" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>color_stop = percentage #rrggbb opacity
 </code></pre>
-<h4 id="advanced-gradients">Advanced gradients<a name="advanced-gradients" href="#advanced-gradients" class="md2man-permalink" title="permalink"></a></h4><p>These gradient types allow specifying the control points. This permits, for example,
+<h4 id="gradient-examples">Gradient examples<a name="gradient-examples" href="#gradient-examples" class="md2man-permalink" title="permalink"></a></h4><pre class="highlight plaintext"><code># Gradient 1: thin film effect
-adding off-center radial glow effects, linear gradients with arbitrary angles,
-or using another element&#39;s edge as a control point.</p><p>Note: updates are currently a little buggy for task buttons.</p><h5 id="linear-or-radial-gradients-with-arbitrary-control-points-and-orientation">Linear or radial gradients, with arbitrary control points (and orientation)<a name="linear-or-radial-gradients-with-arbitrary-control-points-and-orientation" href="#linear-or-radial-gradients-with-arbitrary-control-points-and-orientation" class="md2man-permalink" title="permalink"></a></h5><pre class="highlight plaintext"><code>gradient = linear | radial
-# Geometry
-from_offset_x = SIZE_EXPRESSION
-from_offset_y = SIZE_EXPRESSION
-# from_offset_r for radial only
-from_offset_r = SIZE_EXPRESSION
-to_offset_x = SIZE_EXPRESSION
-to_offset_y = SIZE_EXPRESSION
-# to_offset_r for radial only
-to_offset_r = SIZE_EXPRESSION
-# Colors
-start_color = #rrggbb opacity
-end_color = #rrggbb opacity
-# Optional: more color stops
-color_stop = percentage #rrggbb opacity
-color_stop = percentage #rrggbb opacity
-</code></pre>
-<p><code>SIZE_EXPRESSION</code> is an expression that encodes an offset,
-following the grammar:</p><pre class="highlight plaintext"><code>SIZE_EXPRESSION = number |
-                  SIZE |
-                  SIZE * number |
-                  SIZE * number%
-SIZE = width | height | radius | left | right | top | bottom | centerx | centery |
-       ELEMENT width | ELEMENT height | ELEMENT radius | ELEMENT left | ELEMENT right | ELEMENT top | ELEMENT bottom | ELEMENT centerx | ELEMENT centery
-ELEMENT = self | parent | panel
-</code></pre>
-<p>All coordinates are computed in the drawn element&#39;s coordinate system,
-with origin in the top-left corner and the vertical axis growing down.</p><p>Numbers are any real numbers. Negative numbers must not have spaces between
-the minus sign and the first digit, for example <code>-1.234</code> is correct,
-while <code>- 1.234</code> is not.</p><p>Multiple <code>*_offset_*</code> can be given, in which case they are added together.</p><h4 id="gradient-examples">Gradient examples<a name="gradient-examples" href="#gradient-examples" class="md2man-permalink" title="permalink"></a></h4><pre class="highlight plaintext"><code># Gradient 1: thin film effect
 gradient = horizontal
 start_color = #111122 30
 end_color = #112211 30
 color_stop = 60 #221111 30
 
-# Gradient 2: center glow
+# Gradient 2: radial glow
-gradient = centered
-start_color = #ffffff 20
-end_color = #ffffff 0
-
-# Gradient 3: glow
 gradient = radial
 start_color = #ffffff 20
 end_color = #ffffff 0
-from_offset_x = width * 0.28
-from_offset_y = height * 0.28
-from_offset_r = 0
-to_offset_x = width * 0.28
-to_offset_y = height * 0.28
-to_offset_r = radius * 2
 
-# Gradient 4: aurora
+# Gradient 3: elegant black
-gradient = linear
-start_color = #ffffff 0
-end_color = #ffffff 0
-from_offset_x = panel left
-from_offset_y = panel top
-to_offset_x = panel width * 3
-to_offset_x = panel height * 3
-to_offset_y = panel width
-to_offset_y = panel height
-color_stop = 0.1 #ffffff 30
-color_stop = 0.8 #ffffff 30
-color_stop = 2.1 #7777aa 30
-color_stop = 3.1 #7777aa 30
-color_stop = 4.0 #ffffaa 30
-color_stop = 4.8 #aa7733 30
-color_stop = 5.1 #ff7733 30
-color_stop = 6.5 #337788 30
-color_stop = 9.2 #ffffaa 30
-color_stop = 10.1 #777777 30
-color_stop = 12.1 #aaaaff 30
-color_stop = 14.0 #77ff77 30
-color_stop = 18.0 #ffff77 30
-color_stop = 19.8 #77ffaa 30
-color_stop = 21.1 #ffffaa 20
-color_stop = 23.5 #337733 30
-color_stop = 25.5 #337733 30
-color_stop = 29.2 #77ffff 30
-color_stop = 30.1 #77ffaa 30
-color_stop = 31.0 #ffffaa 30
-color_stop = 34.8 #aa7733 30
-
-# Gradient 5: elegant black
 gradient = vertical
 start_color = #444444 100
 end_color = #222222 100
 
-# Gradient 6: elegant black
+# Gradient 4: elegant black
 gradient = horizontal
 start_color = #111111 100
 end_color = #222222 100
@@ -415,8 +343,8 @@ border_color_hover = #ffffff 60
 background_color_pressed = #555555 10
 border_color_pressed = #ffffff 60
 gradient_id = 3
-hover_gradient_id = 4
+gradient_id_hover = 4
-pressed_gradient_id = 2
+gradient_id_pressed = 2
 
 [...]
 </code></pre>

doc/tint2.1

@@ -186,14 +186,18 @@ First the user must define one or more gradients in the config file,
 each starting with \fB\fCgradient = TYPE\fR\&. These must be added before backgrounds.
 .PP
 Then gradients can be added by index to backgrounds,
-using the \fB\fCgradient_id = INDEX\fR, \fB\fChover_gradient_id = INDEX\fR and
+using the \fB\fCgradient_id = INDEX\fR, \fB\fCgradient_id_hover = INDEX\fR and
-\fB\fCpressed_gradient_id = INDEX\fR, where \fB\fCINDEX\fR is
+\fB\fCgradient_id_pressed = INDEX\fR, where \fB\fCINDEX\fR is
 the gradient index, starting from 1.
-.SS Simple gradients
+.SS Gradient types
 .PP
-These are gradients that vary from fixed control points (top\-to\-bottom, left\-to\-right
+Gradients vary the color between fixed control points:
-or center\-to\-corners). The user must specify the start and end colors,
+* vertical gradients: top\-to\-bottom;
-and can optionally add extra color stops in between.
+* horizontal gradients: left\-to\-right;
+* radial gradients: center\-to\-corners.
+.PP
+The user must specify the start and end colors, and can optionally add extra color stops in between
+using the \fB\fCcolor_stop\fR option, as explained below.
 .SS Vertical gradient, with color varying from the top edge to the bottom edge, two colors
 .PP
 .RS
@@ -212,11 +216,11 @@ start_color = #rrggbb opacity
 end_color = #rrggbb opacity
 .fi
 .RE
-.SS Centered radial gradient, with color varying from the center to the corner, two colors:
+.SS Radial gradient, with color varying from the center to the corner, two colors:
 .PP
 .RS
 .nf
-gradient = centered
+gradient = radial
 start_color = #rrggbb opacity
 end_color = #rrggbb opacity
 .fi
@@ -228,59 +232,6 @@ end_color = #rrggbb opacity
 color_stop = percentage #rrggbb opacity
 .fi
 .RE
-.SS Advanced gradients
-.PP
-These gradient types allow specifying the control points. This permits, for example,
-adding off\-center radial glow effects, linear gradients with arbitrary angles,
-or using another element's edge as a control point.
-.PP
-Note: updates are currently a little buggy for task buttons.
-.SS Linear or radial gradients, with arbitrary control points (and orientation)
-.PP
-.RS
-.nf
-gradient = linear | radial
-# Geometry
-from_offset_x = SIZE_EXPRESSION
-from_offset_y = SIZE_EXPRESSION
-# from_offset_r for radial only
-from_offset_r = SIZE_EXPRESSION
-to_offset_x = SIZE_EXPRESSION
-to_offset_y = SIZE_EXPRESSION
-# to_offset_r for radial only
-to_offset_r = SIZE_EXPRESSION
-# Colors
-start_color = #rrggbb opacity
-end_color = #rrggbb opacity
-# Optional: more color stops
-color_stop = percentage #rrggbb opacity
-color_stop = percentage #rrggbb opacity
-.fi
-.RE
-.PP
-\fB\fCSIZE_EXPRESSION\fR is an expression that encodes an offset,
-following the grammar:
-.PP
-.RS
-.nf
-SIZE_EXPRESSION = number |
-                  SIZE |
-                  SIZE * number |
-                  SIZE * number%
-SIZE = width | height | radius | left | right | top | bottom | centerx | centery |
-       ELEMENT width | ELEMENT height | ELEMENT radius | ELEMENT left | ELEMENT right | ELEMENT top | ELEMENT bottom | ELEMENT centerx | ELEMENT centery
-ELEMENT = self | parent | panel
-.fi
-.RE
-.PP
-All coordinates are computed in the drawn element's coordinate system,
-with origin in the top\-left corner and the vertical axis growing down.
-.PP
-Numbers are any real numbers. Negative numbers must not have spaces between
-the minus sign and the first digit, for example \fB\fC\-1.234\fR is correct,
-while \fB\fC\- 1.234\fR is not.
-.PP
-Multiple \fB\fC*_offset_*\fR can be given, in which case they are added together.
 .SS Gradient examples
 .PP
 .RS
@@ -291,60 +242,17 @@ start_color = #111122 30
 end_color = #112211 30
 color_stop = 60 #221111 30
 
-# Gradient 2: center glow
+# Gradient 2: radial glow
-gradient = centered
-start_color = #ffffff 20
-end_color = #ffffff 0
-
-# Gradient 3: glow
 gradient = radial
 start_color = #ffffff 20
 end_color = #ffffff 0
-from_offset_x = width * 0.28
-from_offset_y = height * 0.28
-from_offset_r = 0
-to_offset_x = width * 0.28
-to_offset_y = height * 0.28
-to_offset_r = radius * 2
 
-# Gradient 4: aurora
+# Gradient 3: elegant black
-gradient = linear
-start_color = #ffffff 0
-end_color = #ffffff 0
-from_offset_x = panel left
-from_offset_y = panel top
-to_offset_x = panel width * 3
-to_offset_x = panel height * 3
-to_offset_y = panel width
-to_offset_y = panel height
-color_stop = 0.1 #ffffff 30
-color_stop = 0.8 #ffffff 30
-color_stop = 2.1 #7777aa 30
-color_stop = 3.1 #7777aa 30
-color_stop = 4.0 #ffffaa 30
-color_stop = 4.8 #aa7733 30
-color_stop = 5.1 #ff7733 30
-color_stop = 6.5 #337788 30
-color_stop = 9.2 #ffffaa 30
-color_stop = 10.1 #777777 30
-color_stop = 12.1 #aaaaff 30
-color_stop = 14.0 #77ff77 30
-color_stop = 18.0 #ffff77 30
-color_stop = 19.8 #77ffaa 30
-color_stop = 21.1 #ffffaa 20
-color_stop = 23.5 #337733 30
-color_stop = 25.5 #337733 30
-color_stop = 29.2 #77ffff 30
-color_stop = 30.1 #77ffaa 30
-color_stop = 31.0 #ffffaa 30
-color_stop = 34.8 #aa7733 30
-
-# Gradient 5: elegant black
 gradient = vertical
 start_color = #444444 100
 end_color = #222222 100
 
-# Gradient 6: elegant black
+# Gradient 4: elegant black
 gradient = horizontal
 start_color = #111111 100
 end_color = #222222 100
@@ -360,8 +268,8 @@ border_color_hover = #ffffff 60
 background_color_pressed = #555555 10
 border_color_pressed = #ffffff 60
 gradient_id = 3
-hover_gradient_id = 4
+gradient_id_hover = 4
-pressed_gradient_id = 2
+gradient_id_pressed = 2
 
 [...]
 .fi