Update themer.doc with latest theme changes.

This commit is contained in:
Dave Davenport 2017-01-05 09:40:10 +01:00
parent 580bcc138e
commit 50479057bc
1 changed files with 49 additions and 76 deletions

View File

@ -2,55 +2,38 @@
Each widget has:
## Class
Class: Type of widget.
Example: textbox, scrollbar, separator
Class are prefixed with a `@`
List of classes in **rofi**:
* @textbox
* @scrollbar
* @window
* @separator
* @listview
* @box
## Name
Name: Internal name of the widget.
Sub-widgets are {Parent}.{Child}.
Example: listview, listview.element, listview.scrollbar
Example: window, window.mainbox.listview, window.mainbox.listview.element
Names are prefixed with a `#`
List of names in **rofi**:
* `#window`
* `#mainbox`
* `#mainbox.box`: The main vertical @box
* `#inputbar`
* `#inputbar.box`: The horizontal @box packing the widgets.
* `#inputbar.separator`: The separator under/above the inputbar.
* `#inputbar.case-indicator`: The case/sort indicator @textbox
* `#inputbar.prompt`: The prompt @textbox
* `#inputbar.entry`: The main entry @textbox
* `#listview`
* `#listview.scrollbar`: The listview scrollbar
* `#listview.element`: The entries in the listview
* `#sidebar`
* `#sidebar.box`: The main horizontal @box packing the buttons.
* `#sidebar.button`: The buttons @textbox for each mode.
* `#sidebar.separator`: The separator under/above the sidebar.
* `#message`
* `#message.textbox`: The message textbox.
* `#message.separator`: The separator under/above the sidebar.
* `#window.overlay`: The overlay widget.
* `#window.mainbox`
* `#window.mainbox.box`: The main vertical @box
* `#window.mainbox.inputbar`
* `#window.mainbox.inputbar.box`: The horizontal @box packing the widgets.
* `#window.mainbox.inputbar.separator`: The separator under/above the inputbar.
* `#window.mainbox.inputbar.case-indicator`: The case/sort indicator @textbox
* `#window.mainbox.inputbar.prompt`: The prompt @textbox
* `#window.mainbox.inputbar.entry`: The main entry @textbox
* `#window.mainbox.listview`
* `#window.mainbox.listview.scrollbar`: The listview scrollbar
* `#window.mainbox.listview.element`: The entries in the listview
* `#window.mainbox.sidebar`
* `#window.mainbox.sidebar.box`: The main horizontal @box packing the buttons.
* `#window.mainbox.sidebar.button`: The buttons @textbox for each mode.
* `#window.mainbox.sidebar.separator`: The separator under/above the sidebar.
* `#window.mainbox.message`
* `#window.mainbox.message.textbox`: The message textbox.
* `#window.mainbox.message.separator`: The separator under/above the sidebar.
## State
@ -60,11 +43,11 @@ Optional flag(s) indicating state.
These are appended after the name or class of the widget.
`@textbox selected.normal { }`
`#window.mainbox.sidebar.button selected.normal { }`
`#listview.element selected.urgent { }`
`#window.mainbox.listview.element selected.urgent { }`
Currently only the @entrybox has states:
Currently only the entrybox and scrollbar has states:
`{visible modifier}.{state}`
@ -82,7 +65,7 @@ These can be mixed.
Example:
```
@textbox selected.active {
#name.to.textbox selected.active {
background: #003642;
foreground: #008ed4;
}
@ -90,6 +73,9 @@ Example:
Sets all selected textboxes marked active to the given foreground and background color.
The scrollbar when drawing uses the `handle` state when drawing the small scrollbar handle.
Allowing overriding of color.
# File structure
The file is structured as follows
@ -98,15 +84,16 @@ The file is structured as follows
/* Global properties, that apply as default to all widgets. */
{list of properties}
@{class} {optional state} {
#{name} {optional state} {
{list of properties}
}
@{name}.{name} {optional state} {
#{name}.{optional state} {
{list of properties}
}
```
The global properties an freeĺy be mixed between entries.
Name and state can be separated by a comman, or joined using a dot.
Each property is constructed like:
```
@ -126,69 +113,55 @@ Value supports the following formats:
* `argb:[0-0a-fA-F]{8}`: Old **rofi** argb color style.
* `rgba\([0-9]{1,3},[0-9]{1,3}, [0-9]{1,3}, {double}\)`: css style rgba color.
* `rgb\([0-9]{1,3},[0-9]{1,3}, [0-9]{1,3}\)`: css style rgb color.
* distance:
* `{size}{unit} {line-style}`
* unit can be px,em,%. for px `{size}` is an integer number, for %,em it is a positive real.
* {line-style} can be `dash` or `solid` and is optional.
* padding: `({distance}){1,4}`
Each property is closed by a semi-colon `;`;
The following properties are currently supports:
* all widgets:
* spacing: distance
* padding: distance
* padding: distance distance
* padding: distance distance distance
* padding: distance distance distance distance
* margin: distance
* border: distance
* background: color
* foreground: color
* end: boolean
* window:
* font: string
* background: color
* foreground: color
* border-width: integer
* transparency: string
- real
- background
- screenshot
- Path to png file
* separator:
* line-style: string
* foreground: color
* scrollbar
* foreground: color
* scrollbar handle
* foreground: color
* box
* spacing: distance
* textbox:
* background: color
* foreground: color
* textbox:
* background: color
* foreground: color
* listview:
* columns: integer
* fixed-height: boolean
* dynamic: boolean
* scrollbar: boolean
* scrollbar-width: integer
* scrollbar-width: distance
* cycle: boolean
* spacing: distance
## Resolving properties
Current matching does:
1. Find exact name match, with exact state match.
If found return
1. Find exact class match, with exact state match.
If found return
1. Find fuzzy name match, with fuzzy state.
If found is not root node, return
1. Find fuzzy class match, with fuzzy state.
return
It tries to find the longest match down the dependency tree.