PolytreeDE/rofi
1
0
Fork 0
mirror of https://github.com/davatorium/rofi.git synced 2025-07-31 21:59:25 -04:00
Code Releases Activity

Update themer.doc with latest theme changes.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

125
doc/themer.md
View file

@ -2,55 +2,38 @@
Each widget has: 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
Name: Internal name of the widget. Name: Internal name of the widget.
Sub-widgets are {Parent}.{Child}. 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 `#` Names are prefixed with a `#`
List of names in **rofi**: List of names in **rofi**:
* `#window` * `#window`
* `#mainbox` * `#window.overlay`: The overlay widget.
* `#mainbox.box`: The main vertical @box * `#window.mainbox`
* `#inputbar` * `#window.mainbox.box`: The main vertical @box
* `#inputbar.box`: The horizontal @box packing the widgets. * `#window.mainbox.inputbar`
* `#inputbar.separator`: The separator under/above the inputbar. * `#window.mainbox.inputbar.box`: The horizontal @box packing the widgets.
* `#inputbar.case-indicator`: The case/sort indicator @textbox * `#window.mainbox.inputbar.separator`: The separator under/above the inputbar.
* `#inputbar.prompt`: The prompt @textbox * `#window.mainbox.inputbar.case-indicator`: The case/sort indicator @textbox
* `#inputbar.entry`: The main entry @textbox * `#window.mainbox.inputbar.prompt`: The prompt @textbox
* `#listview` * `#window.mainbox.inputbar.entry`: The main entry @textbox
* `#listview.scrollbar`: The listview scrollbar * `#window.mainbox.listview`
* `#listview.element`: The entries in the listview * `#window.mainbox.listview.scrollbar`: The listview scrollbar
* `#sidebar` * `#window.mainbox.listview.element`: The entries in the listview
* `#sidebar.box`: The main horizontal @box packing the buttons. * `#window.mainbox.sidebar`
* `#sidebar.button`: The buttons @textbox for each mode. * `#window.mainbox.sidebar.box`: The main horizontal @box packing the buttons.
* `#sidebar.separator`: The separator under/above the sidebar. * `#window.mainbox.sidebar.button`: The buttons @textbox for each mode.
* `#message` * `#window.mainbox.sidebar.separator`: The separator under/above the sidebar.
* `#message.textbox`: The message textbox. * `#window.mainbox.message`
* `#message.separator`: The separator under/above the sidebar. * `#window.mainbox.message.textbox`: The message textbox.
* `#window.mainbox.message.separator`: The separator under/above the sidebar.
## State ## State
@ -60,11 +43,11 @@ Optional flag(s) indicating state.
These are appended after the name or class of the widget. 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}` `{visible modifier}.{state}`
@ -82,7 +65,7 @@ These can be mixed.
Example: Example:
``` ```
@textbox selected.active { #name.to.textbox selected.active {
background: #003642; background: #003642;
foreground: #008ed4; foreground: #008ed4;
} }
@ -90,6 +73,9 @@ Example:
Sets all selected textboxes marked active to the given foreground and background color. 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 # File structure
The file is structured as follows 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. */ /* Global properties, that apply as default to all widgets. */
{list of properties} {list of properties}
@{class} {optional state} { #{name} {optional state} {
{list of properties} {list of properties}
} }
@{name}.{name} {optional state} { #{name}.{optional state} {
{list of properties} {list of properties}
} }
``` ```
The global properties an freeĺy be mixed between entries. 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: 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. * `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. * `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. * `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 `;`; Each property is closed by a semi-colon `;`;
The following properties are currently supports: The following properties are currently supports:
* all widgets: * all widgets:
* spacing: distance
* padding: distance * padding: distance
* padding: distance distance * margin: distance
* padding: distance distance distance * border: distance
* padding: distance distance distance distance * background: color
* foreground: color
* end: boolean
* window: * window:
* font: string * font: string
* background: color
* foreground: color
* border-width: integer
* transparency: string * transparency: string
- real - real
- background - background
- screenshot - screenshot
- Path to png file - Path to png file
* separator:
* line-style: string
* foreground: color
* scrollbar * scrollbar
* foreground: color * foreground: color
* scrollbar handle
* foreground: color
* box * box
* spacing: distance
* textbox: * textbox:
* background: color * background: color
* foreground: color * foreground: color
* listview: * listview:
* columns: integer * columns: integer
* fixed-height: boolean * fixed-height: boolean
* dynamic: boolean * dynamic: boolean
* scrollbar: boolean * scrollbar: boolean
* scrollbar-width: integer * scrollbar-width: distance
* cycle: boolean * cycle: boolean
* spacing: distance
## Resolving properties ## Resolving properties
It tries to find the longest match down the dependency tree.
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