Styles » History » Version 32
« Previous -
Version 32/47
(diff) -
Next » -
Current version
Anonymous, 07/20/2011 09:04 PM
Styles\015\012\015\012{{>toc}}\015\012\015\012Styles are used to define various properties of styleable items in a CSS-like syntax.\015\012\015\012h2. Box model\015\012\015\012Every 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\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
\015\012\015\012The various properties of a style have different meanings for each box:\015\012\015\012|_. Property |_. Meaning |\015\012| foreground | Sets the foreground color of the content box |\015\012| background | Sets the background color of the content and the padding box |\015\012| 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 syntax, styles in subtle support simple cascading. That means that properties set for All and Views are inherited by other styleable items.\015\012\015\012h3. All\015\012\015\012Defines properties for most of the styleable elements.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012Example:\015\012\015\012{{hide}}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
\015\012\015\012h3. Views\015\012\015\012Defines properties for view-related styleable elements.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012Example:\015\012\015\012{{hide}}style :views do\015\012 background "#202020"\015\012end
\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*: Margin, Active, Inactive, Width\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 active "#303030", 2\015\012 inactive "#202020", 2\015\012 margin 0\015\012 width 50\015\012end
\015\012\015\012h3. Focus\015\012\015\012Defines properties for current active view.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: Views, All\015\012\015\012Example:\015\012\015\012{{hide}}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
\015\012\015\012h3. Occupied\015\012\015\012Defines properties for views with at least one client.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: Views, All\015\012\015\012Example:\015\012\015\012{{hide}}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
\015\012\015\012h3. Separator\015\012\015\012Defines properties for the panel separator.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}style :separator do\015\012 padding 0, 0, 0, 0\015\012 border 0\015\012 background "#202020"\015\012 foreground "#757575"\015\012end
\015\012\015\012h3. Sublets\015\012\015\012Defines properties for sublets in the panel.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}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
\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*: Background, Padding, Panel, Stipple\015\012\015\012Example:\015\012\015\012{{hide}}style :subtle do\015\012 margin 0, 0, 0, 0\015\012 panel "#202020"\015\012 background "#3d3d3d"\015\012 stipple "#757575"\015\012end
\015\012\015\012h3. Title\015\012\015\012Defines properties for the title of current client.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}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
\015\012\015\012h3. Unoccupied\015\012\015\012Defines properties for unoccupied views in the view button list.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: Views, All\015\012\015\012Example:\015\012\015\012{{hide}}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
\015\012\015\012h3. Urgent\015\012\015\012Defines properties for views with urgent clients.\015\012\015\012*Supported properties*: Foreground, Background, Margin, Border, Padding, Min_width\015\012\015\012*Inherits from*: All\015\012\015\012Example:\015\012\015\012{{hide}}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
\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*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 foreground "#fecf35"\015\012end
\015\012\015\012h3. Background\015\012\015\012This property sets the background color.\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}\015\012style :title do\015\012 background "#202020"\015\012end
\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| margin 2
| Set space for all four directions |\015\012| margin 2, 2
| Set space for top/bottom and left/right |\015\012| margin 2, 2, 2
| Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| margin 2, 2, 2, 2
| Set space for all four directions |\015\012| margin_top 2
| Set space for top side |\015\012| margin_right 2
| Set space for right side |\015\012| margin_bottom 2
| Set space for bottom side |\015\012| margin_left 2
| Set space for left side |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}\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
\015\012\015\012h3. Border\015\012\015\012This property sets the border color and size. Following notations are supported:\015\012\015\012| border "#303030", 0
| Set border color and size of all four borders |\015\012| border_top "#303030", 0
| Set border color and size of top border |\015\012| border_right "#303030", 0
| Set border color and size of right border |\015\012| border_bottom "#303030", 0
| Set border color and size of bottom border |\015\012| border_left "#303030", 0
| Set border color and size of left border |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}\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
\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| padding 2
| Set space for all four directions |\015\012| padding 2, 2
| Set space for top/bottom and left/right |\015\012| padding 2, 2, 2
| Set space for top, left/right and bottom (top, right, bottom, left) |\015\012| padding 2, 2, 2, 2
| Set space for all four directions |\015\012| padding_top 2
| Set space for top side |\015\012| padding_right 2
| Set space for right side |\015\012| padding_bottom 2
| Set space for bottom side |\015\012| padding_left 2
| Set space for left side |\015\012\015\012*Applicable to*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}\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
\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*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 active "#303030", 2\015\012end
\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*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 inactive "#202020", 2\015\012end
\015\012\015\012h3. Panel\015\012\015\012This property sets the panel color. Following notations are supported:\015\012\015\012| panel "#000000"
| Set color of both panels |\015\012| panel_top "#000000"
| Set color of top panel |\015\012| panel_bottom "#000000"
| Set color of bottom panel |\015\012\015\012*Applicable to*: Subtle\015\012\015\012Example:\015\012\015\012style :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
\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*: Subtle\015\012\015\012Example:\015\012\015\012{{hide}}style :subtle do\015\012 stipple "#757575"\015\012end
\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*: Clients\015\012\015\012Example:\015\012\015\012{{hide}}style :clients do\015\012 width 50\015\012end
\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*: All, Title, Focus, Urgent, Occupied, Views, Sublets, Separator\015\012\015\012Example:\015\012\015\012{{hide}}style :title do\015\012 min_width 50\015\012end
¶
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
style :views do\015\012 background "#202020"\015\012end
style :clients do\015\012 active "#303030", 2\015\012 inactive "#202020", 2\015\012 margin 0\015\012 width 50\015\012end
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
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
style :separator do\015\012 padding 0, 0, 0, 0\015\012 border 0\015\012 background "#202020"\015\012 foreground "#757575"\015\012end
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
style :subtle do\015\012 margin 0, 0, 0, 0\015\012 panel "#202020"\015\012 background "#3d3d3d"\015\012 stipple "#757575"\015\012end
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
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
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
\015\012style :title do\015\012 foreground "#fecf35"\015\012end
\015\012style :title do\015\012 background "#202020"\015\012end
\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
\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
\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
style :clients do\015\012 active "#303030", 2\015\012end
style :clients do\015\012 inactive "#202020", 2\015\012end
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
style :subtle do\015\012 stipple "#757575"\015\012end
style :clients do\015\012 width 50\015\012end
style :title do\015\012 min_width 50\015\012end