Project

General

Profile

unexist.dev

subtle

Assorted tidbits and projects

Styles » History » Version 36

Anonymous, 08/02/2011 07:51 PM

1 36
h1. Styles\015\012\015\012{{>toc}}\015\012\015\012[[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.\015\012\015\012h2. Box model\015\012\015\012Every [[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_)\015\012\015\012Here is a layout for better understanding:\015\012\015\012<pre>\015\012                                     Top\015\012     +-----------------------------------------------------------------+\015\012     |                              Margin                             |\015\012     |        +-----------------------------------------------+        |\015\012     |        |                     Border                    |        |\015\012     |        |        +-----------------------------+        |        |\015\012     |        |        |           Padding           |        |        |\015\012     |        |        |         +---------+         |        |        |\015\012Left | Margin | Border | Padding | Content | Padding | Border | Margin | Right\015\012     |        |        |         +---------+         |        |        |\015\012     |        |        |           Padding           |        |        |\015\012     |        |        +-----------------------------+        |        |\015\012     |        |                    Border                     |        |\015\012     |        +-----------------------------------------------+        |\015\012     |                             Margin                              |\015\012     +-----------------------------------------------------------------+\015\012                                   Bottom\015\012</pre>\015\012\015\012The various [[Styles#Properties|properties]] of a [[Styles|style]] have different meanings for each box:\015\012\015\012|_. Property                       |_. Meaning                                                    |\015\012| [[Styles#Foregorund|foreground]] | Sets the foreground color of the content box                 |\015\012| [[Styles#Background|background]] | Sets the background color of the content and the padding box |\015\012| [[Styles#Border|border]]         | Sets the background color of the border box (per side)       |\015\012\015\012{{info(The margin box is always transparent.)}}\015\012\015\012h2. Cascading\015\012\015\012Like "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]].\015\012\015\012h3. All\015\012\015\012Defines properties for most of the styleable elements.\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :all do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#fecf35"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h2. Substyles\015\012\015\012Since r2979 [[Styles|styles]] can contain nested [[Styles|styles]] that inherit values from their parent. This syntax is used in the default config to define styles for [[Styles#Focus|:focus]], [[Styles#Occupied|:occupied]], [[Styles#Unoccupied|:unoccupied]] and [[Styles#Urgent|:urgent]].\015\012\015\012[[Sublets]] automatically check for a [[Styles#Substyles|substyle]] with their name and otherwise use the [[Style#Sublets|:sublets]] style.\015\012\015\012h2. Styleable items\015\012\015\012h3. Clients\015\012\015\012Defines properties for active and inactive clients.\015\012\015\012{{info(margin is the former :gap option)}}\015\012\015\012*Supported properties*: [[Styles#Margin|Margin]], [[Styles#Active|Active]], [[Styles#Inactive|Inactive]], [[Styles#Width|Width]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :clients do\015\012  active      "#303030", 2\015\012  inactive    "#202020", 2\015\012  margin      0\015\012  width       50\015\012end</code></pre>\015\012\015\012h3. Separator\015\012\015\012Defines properties for the panel separator.\015\012\015\012*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]]\015\012\015\012*Inherits from*: [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :separator do\015\012  padding     0, 0, 0, 0\015\012  border      0\015\012  background  "#202020"\015\012  foreground  "#757575"\015\012end</code></pre>\015\012\015\012h3. Sublets\015\012\015\012Defines properties for sublets in the panel.\015\012\015\012*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]]\015\012\015\012*Inherits from*: [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :sublets do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#757575"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h3. Subtle\015\012\015\012Defines properties for [[subtle]].\015\012\015\012{{info(padding is the former :strut option)}}\015\012\015\012*Supported properties*: [[Styles#Background|Background]], [[Styles#Padding|Padding]], [[Styles#Panel|Panel]], [[Styles#Stipple|Stipple]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :subtle do\015\012  panel       "#202020"\015\012  background  "#3d3d3d"\015\012  stipple     "#757575"\015\012end</code></pre>\015\012\015\012h3. Title\015\012\015\012Defines properties for the title of current client.\015\012\015\012*Supported properties*: [[Styles#Foreground|Foreground]], [[Styles#Background|Background]], [[Styles#Margin|Margin]], [[Styles#Border|Border]], [[Styles#Padding|Padding]], [[Styles#Min_width|Min_width]]\015\012\015\012*Inherits from*: [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :title do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#fecf35"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h3. Views\015\012\015\012Defines properties for view-related styleable elements.\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :views do\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h4. Focus\015\012\015\012Defines properties for current active view.\015\012\015\012*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]]\015\012\015\012*Inherits from*: [[Styles#Views|Views]], [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :focus do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#fecf35"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h4. Occupied\015\012\015\012Defines properties for views with at least one client.\015\012\015\012*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]]\015\012\015\012*Inherits from*: [[Styles#Views|Views]], [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code cl<code class="ruby">style :occupied do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#b8b8b8"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h4. Unoccupied\015\012\015\012Defines properties for unoccupied views in the view button list.\015\012\015\012*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]]\015\012\015\012*Inherits from*: [[Styles#Views|Views]], [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :views do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#757575"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h4. Urgent\015\012\015\012Defines properties for views with urgent clients.\015\012\015\012*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]]\015\012\015\012*Inherits from*: [[Styles#All|All]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :urgent do\015\012  padding     0, 0, 0, 0\015\012  border      "#303030", 0\015\012  foreground  "#ff9800"\015\012  background  "#202020"\015\012end</code></pre>\015\012\015\012h2. Properties\015\012\015\012Following properties can be set for supported items:\015\012\015\012h3. Foreground\015\012\015\012This property sets the foreground/text color.\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">\015\012style :title do\015\012  foreground "#fecf35"\015\012end</code></pre>\015\012\015\012h3. Background\015\012\015\012This property sets the background color.\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">\015\012style :title do\015\012  background "#202020"\015\012end</code></pre>\015\012\015\012h3. Margin\015\012\015\012This property sets a transparent (no background) outer spacing in given directions. Following notations are supported:\015\012\015\012| <code class="ruby">margin        2</code>          | Set space for all four directions                                   |\015\012| <code class="ruby">margin        2, 2</code>       | Set space for top/bottom and left/right                             |\015\012| <code class="ruby">margin        2, 2, 2</code>    | Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| <code class="ruby">margin        2, 2, 2, 2</code> | Set space for all four directions                                   |\015\012| <code class="ruby">margin_top    2</code>          | Set space for top side                                              |\015\012| <code class="ruby">margin_right  2</code>          | Set space for right side                                            |\015\012| <code class="ruby">margin_bottom 2</code>          | Set space for bottom side                                           |\015\012| <code class="ruby">margin_left   2</code>          | Set space for left side                                             |\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">\015\012style :title do\015\012  margin 2\015\012end\015\012\015\012style :title do\015\012  margin 2, 2\015\012end\015\012\015\012style :title do\015\012  margin_top 2\015\012end</code></pre>\015\012\015\012h3. Border\015\012\015\012This property sets the border color and size. Following notations are supported:\015\012\015\012| <code class="ruby">border        "#303030", 0</code> | Set border color and size of all four borders  |\015\012| <code class="ruby">border_top    "#303030", 0</code> | Set border color and size of top border        |\015\012| <code class="ruby">border_right  "#303030", 0</code> | Set border color and size of right border      |\015\012| <code class="ruby">border_bottom "#303030", 0</code> | Set border color and size of bottom border     |\015\012| <code class="ruby">border_left   "#303030", 0</code> | Set border color and size of left border       |\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">\015\012style :title do\015\012  border "#303030", 0\015\012end\015\012\015\012style :title do\015\012  border_top    "#303030", 0\015\012end</code></pre>\015\012\015\012h3. Padding\015\012\015\012This property sets an inner spacing between border and content in given directions. Following notations are supported:\015\012\015\012| <code class="ruby">padding        2</code>          | Set space for all four directions                                   |\015\012| <code class="ruby">padding        2, 2</code>       | Set space for top/bottom and left/right                             |\015\012| <code class="ruby">padding        2, 2, 2</code>    | Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| <code class="ruby">padding        2, 2, 2, 2</code> | Set space for all four directions                                   |\015\012| <code class="ruby">padding_top    2</code>          | Set space for top side                                              |\015\012| <code class="ruby">padding_right  2</code>          | Set space for right side                                            |\015\012| <code class="ruby">padding_bottom 2</code>          | Set space for bottom side                                           |\015\012| <code class="ruby">padding_left   2</code>          | Set space for left side                                             |\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">\015\012style :title do\015\012  padding 2\015\012end\015\012\015\012style :title do\015\012  padding 2, 2\015\012end\015\012\015\012style :title do\015\012  padding_top 2\015\012end</code></pre>\015\012\015\012h3. Active\015\012\015\012This property sets the border color and size of the current active client.\015\012\015\012*Applicable to*: [[Styles#Clients|Clients]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :clients do\015\012  active "#303030", 2\015\012end</code></pre>\015\012\015\012{{needs(r2979)}}\015\012\015\012h3. Icon\015\012\015\012This property sets the color of any icons in this panel item.\015\012\015\012*Applicable to*: [[Styles#All|All]], [[Styles#Focus|Focus]], [[Styles#Urgent|Urgent]], [[Styles#Occupied|Occupied]], [[Styles#Views|Views]], [[Styles#Sublets|Sublets]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :clients do\015\012  active "#303030", 2\015\012end</code></pre>\015\012\015\012h3. Inactive\015\012\015\012This property sets the border color and size of all other clients.\015\012\015\012{{info(The border size of inactive clients is ignored, because different sizes would require many size and position changes everytime the focus moves.)}}\015\012\015\012*Applicable to*: [[Styles#Clients|Clients]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :clients do\015\012  inactive "#202020", 2\015\012end</code></pre>\015\012\015\012h3. Panel\015\012\015\012This property sets the panel color. Following notations are supported:\015\012\015\012| <code class="ruby">panel        "#000000"</code> | Set color of both panels  |\015\012| <code class="ruby">panel_top    "#000000"</code> | Set color of top panel    |\015\012| <code class="ruby">panel_bottom "#000000"</code> | Set color of bottom panel |\015\012\015\012*Applicable to*: [[Styles#Subtle|Subtle]]\015\012\015\012Example:\015\012\015\012<pre><code class="ruby">style :subtle do\015\012  panel "#202020"\015\012end\015\012\015\012style :subtle do\015\012  panel_top    "#202020"\015\012  panel_bottom "#202020"\015\012end</code></pre>\015\012\015\012h3. Stipple\015\012\015\012This property sets the color of the panel stippling if any.\015\012\015\012*Applicable to*: [[Styles#Subtle|Subtle]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :subtle do\015\012  stipple "#757575"\015\012end</code></pre>\015\012\015\012h3. Width\015\012\015\012This property sets the string length in character, default is 50 characters.\015\012\015\012*Applicable to*: [[Styles#Clients|Clients]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :clients do\015\012  width 50\015\012end</code></pre>\015\012\015\012h3. Min_width\015\012\015\012This property sets the min. pixel width of a panel item.\015\012\015\012*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]]\015\012\015\012Example:\015\012\015\012<pre>{{hide}}<code class="ruby">style :title do\015\012  min_width 50\015\012end</code></pre>