unexist.dev

h1. Styles

{{>toc}}

[[Styles]] are used to define various properties of [[Styles#styleable-items|styleable items]] in a "CSS-like":http://en.wikipedia.org/wiki/Cascading_Style_Sheets syntax.

h2. Box model

Every [[Styles#styleable-items|styleable items]] item consists of different boxes, whereas each box includes the previous one. The size of a box is determined by the size required to include the previous one and a value for each side of the box: *top*, *right*, *bottom*, *left* (_The values are ordered clockwise_)

Here is a layout for better understanding:

<pre>

                                     Top

     +-----------------------------------------------------------------+

     |                              Margin                             |

     |        +-----------------------------------------------+        |

     |        |                     Border                    |        |

     |        |        +-----------------------------+        |        |

     |        |        |           Padding           |        |        |

     |        |        |         +---------+         |        |        |

Left | Margin | Border | Padding | Content | Padding | Border | Margin | Right

     |        |        |         +---------+         |        |        |

     |        |        |           Padding           |        |        |

     |        |        +-----------------------------+        |        |

     |        |                    Border                     |        |

     |        +-----------------------------------------------+        |

     |                             Margin                              |

     +-----------------------------------------------------------------+

                                   Bottom

</pre>

The various [[Styles#Properties|properties]] of a [[Styles|style]] have different meanings for each box:

|_. Property                       |_. Meaning                                                    |

| [[Styles#Foregorund|foreground]] | Sets the foreground color of the content box                 |

| [[Styles#Background|background]] | Sets the background color of the content and the padding box |

| [[Styles#Border|border]]         | Sets the background color of the border box (per side)       |

{{info(The margin box is always transparent.)}}

h2. Cascading

Like "CSS":http://en.wikipedia.org/wiki/Cascading_Style_Sheets syntax, [[styles]] in [[subtle]] support simple cascading. That means that properties set for [[Styles#All|All]] are inherited by other [[Styles#styleable-items|styleable items]].

h3. All

Defines properties for most of the styleable elements.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]]

Example:

<pre><code class="ruby">style :all do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#fecf35"

  background  "#202020"

end</code></pre>

{{needs(2979)}}

h2. Substyles

[[Styles]] can contain nested [[Styles|styles]], that inherit values from their parent. The default config uses this syntax to define styles for [[Styles#Focus|:focus]], [[Styles#Occupied|:occupied]], [[Styles#Unoccupied|:unoccupied]] and [[Styles#Urgent|:urgent]].

[[Sublets]] automatically check for a [[Styles#Substyles|substyle]] matching to their name and otherwise fallback to the [[Styles#Sublets|:sublets]] style.

h2. Styleable items

h3. Clients

Defines properties for active and inactive clients.

{{info(margin is the former :gap option)}}

*Supported properties*: [[Styles#Margin|Margin]], [[Styles#Active|Active]], [[Styles#Inactive|Inactive]], [[Styles#Width|Width]]

Example:

<pre><code class="ruby">style :clients do

  active      "#303030", 2

  inactive    "#202020", 2

  margin      0

  width       50

end</code></pre>

h3. Separator

Defines properties for the panel separator.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Font|Font]], [[Styles#Separator|Separator]]

*Inherits from*: [[Styles#All|All]]

Example:

<pre><code class="ruby">style :separator do

  padding     0, 0, 0, 0

  border      0

  background  "#202020"

  foreground  "#757575"

end</code></pre>

h3. Sublets

Defines properties for sublets in the panel.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Font|Font]]

*Inherits from*: [[Styles#All|All]]

Example:

<pre><code class="ruby">style :sublets do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#757575"

  background  "#202020"

end</code></pre>

{{needs(3097)}}

h4. Separator

Defines properties for the [[sublets|sublet]] separator.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Font|Font]], [[Styles#Separator|Separator]]

*Inherits from*: [[Styles#Sublets|Sublets]]

Example:

<pre><code class="ruby">style :separator do

  padding     0, 0, 0, 0

  border      0

  background  "#202020"

  foreground  "#757575"

end</code></pre>

h3. Subtle

Defines properties for [[subtle]].

{{info(padding is the former :strut option)}}

*Supported properties*: [[Styles#Background|Background]], [[Styles#Padding|Padding]], [[Styles#Panel|Panel]], [[Styles#Stipple|Stipple]]

Example:

<pre><code class="ruby">style :subtle do

  panel       "#202020"

  background  "#3d3d3d"

  stipple     "#757575"

end</code></pre>

h3. Title

Defines properties for the title of current [[Clients|client]].

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Font|Font]]

*Inherits from*: [[Styles#All|All]]

Example:

<pre><code class="ruby">style :title do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#fecf35"

  background  "#202020"

end</code></pre>

h3. Views

Defines properties for [[Views|view]]-related styleable elements.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]], [[Styles#Font|Font]]

*Inherits from*: [[Styles#All|All]]

Example:

<pre><code class="ruby">style :views do

  background  "#202020"

end</code></pre>

h4. Focus

Defines properties for current active [[Views|view]].

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]], [[Styles#Font|Font]]

*Inherits from*: [[Styles#Views|Views]]

Example:

<pre><code class="ruby">style :focus do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#fecf35"

  background  "#202020"

end</code></pre>

h4. Occupied

Defines properties for [[views]] with at least one [[Clients|client]].

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]], [[Styles#Font|Font]]

*Inherits from*: [[Styles#Views|Views]]

Example:

<pre><code cl<code class="ruby">style :occupied do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#b8b8b8"

  background  "#202020"

end</code></pre>

h4. Urgent

Defines properties for [[views]] with urgent [[clients]].

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]],  [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]], [[Styles#Font|Font]]

*Inherits from*: {{info(This [[Styles|style]] doesn't inherit values and is used additionally to other [[Views|view]] [[styles]] like occupied.)}}

Example:

<pre><code class="ruby">style :urgent do

  padding     0, 0, 0, 0

  border      "#303030", 0

  foreground  "#ff9800"

  background  "#202020"

end</code></pre>

{{needs(3023)}}

h4. Visible

Defines properties for [[views]] that are visible on any [[Multihead|screen]].

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]],  [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Icon|Icon]], [[Styles#Font|Font]]

*Inherits from*: {{info(This [[Styles|style]] doesn't inherit values and is used additionally to other [[Views|view]] [[styles]] like occupied.)}}

Example:

<pre><code class="ruby">style :visible do

  border-top "#303030", 2

end</code></pre>

{{needs(3097)}}

h4. Separator

Defines properties for the [[views]] separator.

*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]], [[Styles#Font|Font]], [[Styles#Separator|Separator]]

*Inherits from*: [[Styles#Views|Views]]

Example:

<pre><code class="ruby">style :separator do

  padding     0, 0, 0, 0

  border      0

  background  "#202020"

  foreground  "#757575"

end</code></pre>

h2. Properties

Following properties can be set for supported items:

h3. Foreground

This property sets the foreground/text color.

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">

style :title do

  foreground "#fecf35"

end</code></pre>

h3. Background

This property sets the background color.

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">

style :title do

  background "#202020"

end</code></pre>

{{needs(3066)}}

h3. Font

This property sets the font and expects a string. The font string can either be from "xfontsel":http://www.xfree86.org/4.2.0/xfontsel.1.html or a valid "XFT":http://en.wikipedia.org/wiki/Xft font description.

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">

style :all do

  font  "-*-*-*-*-*-*-14-*-*-*-*-*-*-*"

  #font "xft:sans-8"

end</code></pre>

h3. Margin

This property sets a transparent (no background) outer spacing in given directions. Following notations are supported:

| <code class="ruby">margin        2</code>          | Set space for all four directions                                   |

| <code class="ruby">margin        2, 2</code>       | Set space for top/bottom and left/right                             |

| <code class="ruby">margin        2, 2, 2</code>    | Set space for top, left/right and bottom (top, right, bottom, left) |

| <code class="ruby">margin        2, 2, 2, 2</code> | Set space for all four directions                                   |

| <code class="ruby">margin_top    2</code>          | Set space for top side                                              |

| <code class="ruby">margin_right  2</code>          | Set space for right side                                            |

| <code class="ruby">margin_bottom 2</code>          | Set space for bottom side                                           |

| <code class="ruby">margin_left   2</code>          | Set space for left side                                             |

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">

style :title do

  margin 2

end

style :title do

  margin 2, 2

end

style :title do

  margin_top 2

end</code></pre>

h3. Border

This property sets the border color and size. Following notations are supported:

| <code class="ruby">border        "#303030", 0</code> | Set border color and size of all four borders  |

| <code class="ruby">border_top    "#303030", 0</code> | Set border color and size of top border        |

| <code class="ruby">border_right  "#303030", 0</code> | Set border color and size of right border      |

| <code class="ruby">border_bottom "#303030", 0</code> | Set border color and size of bottom border     |

| <code class="ruby">border_left   "#303030", 0</code> | Set border color and size of left border       |

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">

style :title do

  border "#303030", 0

end

style :title do

  border_top    "#303030", 0

end</code></pre>

h3. Padding

This property sets an inner spacing between border and content in given directions. Following notations are supported:

| <code class="ruby">padding        2</code>          | Set space for all four directions                                   |

| <code class="ruby">padding        2, 2</code>       | Set space for top/bottom and left/right                             |

| <code class="ruby">padding        2, 2, 2</code>    | Set space for top, left/right and bottom (top, right, bottom, left) |

| <code class="ruby">padding        2, 2, 2, 2</code> | Set space for all four directions                                   |

| <code class="ruby">padding_top    2</code>          | Set space for top side                                              |

| <code class="ruby">padding_right  2</code>          | Set space for right side                                            |

| <code class="ruby">padding_bottom 2</code>          | Set space for bottom side                                           |

| <code class="ruby">padding_left   2</code>          | Set space for left side                                             |

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]], [[Styles#Subtle|Subtle]]

Example:

<pre><code class="ruby">

style :title do

  padding 2

end

style :title do

  padding 2, 2

end

style :title do

  padding_top 2

end</code></pre>

h3. Active

This property sets the border color and size of the current active client.

*Applicable to*: [[Styles#Clients|Clients]]

Example:

<pre><code class="ruby">style :clients do

  active "#303030", 2

end</code></pre>

{{needs(r2979)}}

h3. Icon

This property sets the color of any icons in this panel item.

*Applicable to*: [[Styles#All|All]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">style :views do

  icon "#303030"

end</code></pre>

h3. Inactive

This property sets the border color and size of all other clients.

{{info(The border size of inactive clients is ignored, because different sizes would require many size and position changes everytime the focus moves.)}}

*Applicable to*: [[Styles#Clients|Clients]]

Example:

<pre><code class="ruby">style :clients do

  inactive "#202020", 2

end</code></pre>

h3. Panel

This property sets the panel color. Following notations are supported:

| <code class="ruby">panel        "#000000"</code> | Set color of both panels  |

| <code class="ruby">panel_top    "#000000"</code> | Set color of top panel    |

| <code class="ruby">panel_bottom "#000000"</code> | Set color of bottom panel |

*Applicable to*: [[Styles#Subtle|Subtle]]

Example:

<pre><code class="ruby">style :subtle do

  panel "#202020"

end

style :subtle do

  panel_top    "#202020"

  panel_bottom "#202020"

end</code></pre>

{{needs(3097)}}

h3. Separator

This property sets the separator string.

*Applicable to*: [[Styles#Separator|Separator]]

Example:

<pre><code class="ruby">style :separator do

  separator "|"

end</code></pre>

h3. Stipple

This property sets the color of the panel stippling if any.

*Applicable to*: [[Styles#Subtle|Subtle]]

Example:

<pre><code class="ruby">style :subtle do

  stipple "#757575"

end</code></pre>

h3. Width

This property sets the string length in character, default is 50 characters.

*Applicable to*: [[Styles#Clients|Clients]]

Example:

<pre><code class="ruby">style :clients do

  width 50

end</code></pre>

h3. Min_width

This property sets the min. pixel width of a panel item.

*Applicable to*: [[Styles#All|All]], [[Styles#Title|Title]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]], [[Styles#Separator|Separator]], [[Styles#Visible|Visible]]

Example:

<pre><code class="ruby">style :title do

  min_width 50

end</code></pre>