diff --git a/doc/themer.md b/doc/themer.md index 563af9fd..74e8ff1e 100644 --- a/doc/themer.md +++ b/doc/themer.md @@ -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.