summaryrefslogtreecommitdiffstats
path: root/doc/themer.md
blob: 8440b8a5ae293cea0865f03a6d4a2dc98d13895e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
# Basic Organization 

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

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.

## State

State: State of widget

Optional flag(s) indicating state. 

These are appended after the name or class of the widget.

`@textbox selected.normal { }` 

`#listview.element selected.urgent { }` 

Currently only the @entrybox has states:

`{visible modifier}.{state}`

Where `visible modifier` can be:
 * normal: No modification.
 * selected: The entry is selected/highlighted by user.
 * alternate: The entry is at an alternating row. (uneven row) 

Where `state` is:
 * normal: No modification.
 * urgent: This entry is marked urgent.
 * activE: This entry is marked active.

These can be mixed.

Example:
```
@textbox selected.active { 
    background: #003642;
    foreground: #008ed4;
}
```

Sets all selected textboxes marked active to the given foreground and background color.

# File structure

The file is structured as follows

```
/* Global properties, that apply as default to all widgets. */
{list of properties}

@{class} {optional state} {
    {list of properties}
}
@{name}.{name} {optional state} {
    {list of properties}
}
```

The global properties has to be at the top of the file, the rest can freeĺy be mixed.