2017-03-18 10:57:34 -04:00
|
|
|
# ROFI-THEME 5 rofi-theme
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
## NAME
|
|
|
|
|
|
|
|
**rofi-theme** - Rofi theme format files
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
## Getting started with theming
|
2022-04-06 14:23:07 -04:00
|
|
|
|
|
|
|
The easiest way to get started theming rofi is by modifying your existing theme.
|
2022-04-07 15:02:55 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Themes can be modified/tweaked by adding theming elements to the end of the\
|
2022-04-07 15:02:55 -04:00
|
|
|
config file. The default location of this file is `~/.config/rofi/config.rasi`,
|
2022-04-06 14:23:07 -04:00
|
|
|
if the file does not exists, you can create it.
|
|
|
|
|
2022-04-07 15:02:55 -04:00
|
|
|
A basic config:
|
|
|
|
|
|
|
|
```css
|
|
|
|
configuration {
|
|
|
|
modes: [ combi ];
|
|
|
|
combi-modes: [ window, drun, run ];
|
|
|
|
}
|
|
|
|
|
|
|
|
@theme "gruvbox-light"
|
|
|
|
|
|
|
|
/* Insert theme modifications after this */
|
|
|
|
```
|
|
|
|
|
|
|
|
For example if we want to change the `Type to filter` text in the entry box we
|
|
|
|
append the following:
|
2022-04-06 14:23:07 -04:00
|
|
|
|
|
|
|
```css
|
|
|
|
entry {
|
|
|
|
placeholder: "Type here";
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-04-07 15:02:55 -04:00
|
|
|
In the above section, `entry` indicates the widget, `placeholder` is the
|
2023-03-27 12:45:44 -04:00
|
|
|
property we want to modify and we set it to the string `"Type here"`. To find
|
|
|
|
the commonly available widgets in rofi, see the 'Basic structure' section.
|
2022-04-06 14:23:07 -04:00
|
|
|
|
|
|
|
To change the mouse over cursor to a pointer, add:
|
|
|
|
|
|
|
|
```css
|
|
|
|
entry {
|
|
|
|
placeholder: "Type here";
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
For the next modification, we want to add the icon after each text element and
|
|
|
|
increase the size. First we start by modifying the `element` widget:
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
|
|
element {
|
|
|
|
orientation: horizontal;
|
|
|
|
children: [ element-text, element-icon ];
|
|
|
|
spacing: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Resulting in the following packing:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-06 14:23:07 -04:00
|
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
|
|
│ element │
|
|
|
|
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
|
|
|
|
│ │element─text │ │ element─icon │ │
|
|
|
|
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
|
|
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
|
|
```
|
|
|
|
|
2022-04-07 15:02:55 -04:00
|
|
|
The `element` (container) widget hold each entry in the `listview`, we add the
|
|
|
|
two pre-defined children in the order we want to show. We also specify the
|
|
|
|
packing direction (`orientation`) and the spacing between the children
|
|
|
|
(`spacing`). We specify the space between the two children in absolute pixels
|
|
|
|
(`px`).
|
2022-04-06 14:23:07 -04:00
|
|
|
|
|
|
|
To increase the icon-size, we need to modify the `element-icon` widget.
|
|
|
|
|
|
|
|
```css
|
|
|
|
element-icon {
|
|
|
|
size: 2.5em;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-06 14:23:07 -04:00
|
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
|
|
│ element │
|
|
|
|
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
|
|
|
|
│ │element─text │ │ element │ │
|
|
|
|
│ │ │ │ ─ │ │
|
|
|
|
│ │ │ │ icon │ │
|
|
|
|
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
|
|
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
|
|
```
|
|
|
|
|
|
|
|
In this example we specify the size in the [em](https://www.w3.org/Style/LieBos3e/em) unit.
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Now lets change the text color of both the `entry` and the `element-text`
|
|
|
|
widget to red and background to blue.
|
2022-04-06 14:23:07 -04:00
|
|
|
|
|
|
|
```css
|
|
|
|
entry, element-text {
|
|
|
|
text-color: red;
|
|
|
|
background-color: rgb(0,0,255);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
Here we use two different methods of writing down the color, for `text-color`
|
|
|
|
we used a named color, for `background-color` we specify it in `rgb`.
|
|
|
|
We also specify the property for multiple widgets by passing a comma separated
|
|
|
|
list of widget names.
|
|
|
|
|
|
|
|
If you want to center the text relative to the icon, we can set this:
|
|
|
|
|
|
|
|
```css
|
2022-08-07 03:21:32 -04:00
|
|
|
element-text {
|
2022-04-06 14:23:07 -04:00
|
|
|
vertical-align: 0.5;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-06 14:23:07 -04:00
|
|
|
┌─────────────────────────────────────────────────────────────────────┐
|
|
|
|
│ element │
|
|
|
|
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
|
|
|
|
│ │ │ │ element │ │
|
|
|
|
│ │element-text │ │ ─ │ │
|
|
|
|
│ │ │ │ icon │ │
|
|
|
|
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
|
|
|
|
└─────────────────────────────────────────────────────────────────────┘
|
|
|
|
```
|
|
|
|
|
2022-11-25 04:28:34 -05:00
|
|
|
We can also specify the color and width of the cursor. You could, for example,
|
|
|
|
create a crimson block cursor like this:
|
|
|
|
|
|
|
|
```css
|
|
|
|
entry {
|
|
|
|
cursor-color: rgb(220,20,60);
|
|
|
|
cursor-width: 8px;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
By default, the `cursor-color` will be the same as the `text-color`. The
|
|
|
|
`cursor-width` will always default to 2 pixels.
|
2022-11-25 04:28:34 -05:00
|
|
|
|
2022-04-06 14:23:07 -04:00
|
|
|
If you want to see the complete theme, including the modification you can run:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
rofi -dump-theme
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Default theme loading
|
2021-09-12 13:59:36 -04:00
|
|
|
|
|
|
|
By default, rofi loads the default theme. This theme is **always** loaded.
|
2022-04-06 14:23:07 -04:00
|
|
|
The default configuration contains:
|
2021-09-12 13:59:36 -04:00
|
|
|
|
|
|
|
```css
|
|
|
|
@theme "default"
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
To unload the default theme, and load another theme, add the `@theme` statement
|
2022-04-06 14:23:07 -04:00
|
|
|
to your `config.rasi` file.
|
2021-09-12 13:59:36 -04:00
|
|
|
|
2022-04-06 14:23:07 -04:00
|
|
|
If you have a theme loaded via `@theme` or use the default theme, you can tweak
|
2021-09-12 13:59:36 -04:00
|
|
|
it by adding overriding elements at the end of your `config.rasi` file.
|
|
|
|
|
|
|
|
For the difference between `@import` and `@theme` see the `Multiple file
|
|
|
|
handling` section in this manpage.
|
|
|
|
|
|
|
|
To see the default theme, run the following command:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
rofi -no-config -dump-theme
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Description
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The need for a new theme format was motivated by the fact that the way rofi
|
|
|
|
handled widgets has changed. From a very static drawing of lines and text to a
|
|
|
|
nice structured form of packing widgets. This change made it possible to
|
|
|
|
provide a more flexible theme framework. The old theme format and config file
|
|
|
|
are not flexible enough to expose these options in a user-friendly way.
|
|
|
|
Therefore, a new file format has been created, replacing the old one.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Format specification
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
## Encoding
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The encoding of the file is UTF-8. Both unix (`\n`) and windows (`\r\n`)
|
|
|
|
newlines format are supported. But unix is preferred.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
## Comments
|
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
C and C++ file comments are supported.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Anything after `// ` and before a newline is considered a comment.
|
|
|
|
|
|
|
|
- Everything between `/*` and `*/` is a comment, this comment can span
|
|
|
|
multiple lines.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Comments can be nested and the C comments can be inline.
|
|
|
|
|
|
|
|
The following is valid:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
// Magic comment.
|
|
|
|
property: /* comment */ value;
|
|
|
|
```
|
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
However, this is not:
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
prop/*comment*/erty: value;
|
|
|
|
```
|
|
|
|
|
|
|
|
## White space
|
|
|
|
|
|
|
|
White space and newlines, like comments, are ignored by the parser.
|
|
|
|
|
|
|
|
This:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
property: name;
|
|
|
|
```
|
|
|
|
|
|
|
|
Is identical to:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
property :
|
|
|
|
name
|
|
|
|
|
|
|
|
;
|
|
|
|
```
|
|
|
|
|
|
|
|
## File extension
|
|
|
|
|
|
|
|
The preferred file extension for the new theme format is **rasi**. This is an
|
2023-03-27 12:45:44 -04:00
|
|
|
abbreviation for **r**ofi **a**dvanced **s**tyle **i**nformation. If a theme
|
|
|
|
file is split over multiple files, include files can have the: **rasinc**
|
|
|
|
extension.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2019-12-14 04:59:10 -05:00
|
|
|
## Basic Structure
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Each element has a section with defined properties. Global properties can be
|
|
|
|
defined in section `* { }`. Sub-section names begin with an optional hash
|
|
|
|
symbol `#`.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-04-04 02:38:21 -04:00
|
|
|
It is advised to define the *global properties section* on top of the file to
|
2017-04-03 11:39:09 -04:00
|
|
|
make inheritance of properties clearer.
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
/* Global properties section */
|
|
|
|
* {
|
|
|
|
// list of properties
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Element theme section. */
|
2017-11-01 16:58:07 -04:00
|
|
|
{element path} {
|
2017-04-03 11:39:09 -04:00
|
|
|
// list of properties
|
|
|
|
}
|
2017-11-01 16:58:07 -04:00
|
|
|
{elements... } {
|
2017-04-03 11:39:09 -04:00
|
|
|
// list of properties
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
If there are multiple sections with the same name, they are merged. Duplicate
|
|
|
|
properties are overwritten and the last parsed entry kept.
|
2017-07-26 05:47:47 -04:00
|
|
|
|
2017-04-03 11:39:09 -04:00
|
|
|
## Global properties section
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A theme can have one or more global properties sections. If there is more than
|
|
|
|
one, they will be merged.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
The global properties section denotes the defaults for each element.
|
|
|
|
Each property of this section can be referenced with `@{identifier}`
|
|
|
|
(See Properties section)
|
|
|
|
|
|
|
|
A global properties section is indicated with a `*` as element path.
|
|
|
|
|
|
|
|
## Element theme section
|
|
|
|
|
|
|
|
A theme can have multiple element theme sections.
|
|
|
|
|
|
|
|
The element path can consist of multiple names separated by whitespace or dots.
|
2017-08-13 13:19:19 -04:00
|
|
|
Each element may contain any number of letters, numbers and `-`'s.
|
2022-04-05 16:21:13 -04:00
|
|
|
The first element in the element path can optionally start with a `#` (for
|
|
|
|
historic reasons). Multiple elements can be specified by a `,`.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
This is a valid element name:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
element normal.normal {
|
2017-09-15 04:19:46 -04:00
|
|
|
background-color: blue;
|
|
|
|
}
|
2017-11-01 16:58:07 -04:00
|
|
|
button {
|
2017-09-15 04:19:46 -04:00
|
|
|
background-color: blue;
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
And is identical to:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
element normal normal, button {
|
2017-09-15 04:19:46 -04:00
|
|
|
background-color: blue;
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-04-05 16:21:13 -04:00
|
|
|
Each section inherits the global properties. Properties can be explicitly
|
|
|
|
inherited from their parent with the `inherit` keyword.
|
2017-04-03 11:39:09 -04:00
|
|
|
In the following example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
window {
|
2017-04-03 11:39:09 -04:00
|
|
|
a: 1;
|
|
|
|
b: 2;
|
2019-12-14 04:59:10 -05:00
|
|
|
children: [ mainbox ];
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
2017-11-01 16:58:07 -04:00
|
|
|
mainbox {
|
2017-09-15 04:19:46 -04:00
|
|
|
a: inherit;
|
2017-04-03 11:39:09 -04:00
|
|
|
b: 4;
|
|
|
|
c: 8;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-04-05 16:21:13 -04:00
|
|
|
The element `mainbox` will have the following set of properties (if `mainbox`
|
|
|
|
is a child of `window`):
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
a: 1;
|
|
|
|
b: 4;
|
|
|
|
c: 8;
|
|
|
|
```
|
|
|
|
|
|
|
|
If multiple sections are defined with the same name, they are merged by the
|
|
|
|
parser. If multiple properties with the same name are defined in one section,
|
|
|
|
the last encountered property is used.
|
|
|
|
|
2019-12-14 04:59:10 -05:00
|
|
|
## Properties Format
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
The properties in a section consist of:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
{identifier}: {value};
|
|
|
|
```
|
|
|
|
|
2018-02-03 06:02:20 -05:00
|
|
|
Both fields are mandatory for a property.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
The `identifier` names the specified property. Identifiers can consist of any
|
|
|
|
combination of numbers, letters and '-'. It must not contain any whitespace.
|
2017-07-26 05:47:47 -04:00
|
|
|
The structure of the `value` defines the type of the property. The current
|
|
|
|
parser does not define or enforce a certain type of a particular `identifier`.
|
2017-08-13 13:19:19 -04:00
|
|
|
When used, values with the wrong type that cannot be converted are ignored.
|
|
|
|
|
|
|
|
The current theme format supports different types:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- a string
|
|
|
|
- an integer number
|
|
|
|
- a fractional number
|
|
|
|
- a boolean value
|
|
|
|
- a color
|
|
|
|
- image
|
|
|
|
- text style
|
|
|
|
- line style
|
|
|
|
- a distance
|
|
|
|
- a padding
|
|
|
|
- a border
|
|
|
|
- a position
|
|
|
|
- a reference
|
|
|
|
- an orientation
|
|
|
|
- a cursor
|
|
|
|
- a list of keywords
|
|
|
|
- an array of values
|
|
|
|
- an environment variable
|
|
|
|
- Inherit
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Some of these types are a combination of other types.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### String
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `"[:print:]+"`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A string is always surrounded by double quotes (`"`). Between the quotes there
|
|
|
|
can be any printable character.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
font: "Awasome 12";
|
|
|
|
```
|
|
|
|
|
2022-04-05 16:21:13 -04:00
|
|
|
The string must be valid UTF-8, special characters can be escaped:
|
|
|
|
|
|
|
|
```css
|
|
|
|
text {
|
|
|
|
content: "Line one\n\tIndented line two";
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
The following special characters can be escaped: `\b`, `\f`, `\n`, `\r`, `\t`, `\v`, `\` and `"`.
|
2017-07-26 05:47:47 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Integer
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `[-+]?[:digit:]+`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
An integer may contain any number.
|
|
|
|
|
|
|
|
For examples:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
lines: 12;
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Real
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `[-+]?[:digit:]+(\.[:digit:]+)?`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
A real is an integer with an optional fraction.
|
|
|
|
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
real: 3.4;
|
|
|
|
```
|
|
|
|
|
|
|
|
The following is not valid: `.3`, `3.` or scientific notation: `3.4e-3`.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Boolean
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(true|false)`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Boolean value is either `true` or `false`. This is case-sensitive.
|
|
|
|
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
dynamic: false;
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Image
|
2021-06-13 14:50:25 -04:00
|
|
|
|
2021-06-15 14:10:04 -04:00
|
|
|
**rofi** support a limited set of background-image formats.
|
2021-06-13 14:50:25 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: url("path to image");
|
|
|
|
|
|
|
|
- Format: url("path to image", scale);
|
|
|
|
where scale is: none, both, width, height
|
|
|
|
|
|
|
|
- Format: linear-gradient(stop color,stop1, color, stop2 color, ...);
|
|
|
|
|
|
|
|
- Format: linear-gradient(to direction, stop color,stop1, color, stop2 color,
|
|
|
|
...); where direction is: top,left,right,bottom.
|
|
|
|
|
|
|
|
- Format: linear-gradient(angle, stop color,stop1, color, stop2 color, ...);
|
|
|
|
Angle in deg,rad,grad (as used in color).
|
2021-06-13 14:50:25 -04:00
|
|
|
|
2021-06-15 11:18:34 -04:00
|
|
|
Where the `path` is a string, and `stop` color is of type color.
|
2021-06-13 14:50:25 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Color
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
**rofi** supports the color formats as specified in the CSS standard (1,2,3 and
|
|
|
|
some of CSS 4)
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `#{HEX}{3}` (rgb)
|
2017-05-17 02:24:28 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `#{HEX}{4}` (rgba)
|
2017-05-17 02:24:28 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `#{HEX}{6}` (rrggbb)
|
|
|
|
|
|
|
|
- Format: `#{HEX}{8}` (rrggbbaa)
|
|
|
|
|
|
|
|
- Format: `rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])`
|
2017-05-17 02:24:28 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])`
|
2017-10-03 14:38:15 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])`
|
|
|
|
|
|
|
|
- Format: `cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE} [,
|
|
|
|
{PERCENTAGE} ])`
|
|
|
|
|
|
|
|
- Format: `{named-color} [ / {PERCENTAGE} ]`
|
|
|
|
|
|
|
|
The white-space format proposed in CSS4 is also supported.
|
|
|
|
|
|
|
|
The different values are:
|
|
|
|
|
|
|
|
- `{HEX}` is a hexadecimal number ('0-9a-f' case insensitive).
|
|
|
|
|
|
|
|
- `{INTEGER}` value can be between 0 and 255 or 0-100 when representing
|
|
|
|
percentage.
|
|
|
|
|
|
|
|
- `{ANGLE}` is the angle on the color wheel, can be in `deg`, `rad`, `grad`
|
|
|
|
or `turn`. When no unit is specified, degrees is assumed.
|
|
|
|
|
|
|
|
- `{PERCENTAGE}` can be between 0-1.0, or 0%-100%
|
|
|
|
|
|
|
|
- `{named-color}` is one of the following colors:
|
|
|
|
|
|
|
|
AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black,
|
|
|
|
BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse,
|
|
|
|
Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue,
|
|
|
|
DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki,
|
|
|
|
DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon,
|
|
|
|
DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise,
|
|
|
|
DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick,
|
|
|
|
FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod,
|
|
|
|
Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo,
|
|
|
|
Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue,
|
|
|
|
LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey,
|
|
|
|
LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue,
|
|
|
|
LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime,
|
|
|
|
LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue,
|
|
|
|
MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue,
|
|
|
|
MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue,
|
|
|
|
MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive,
|
|
|
|
OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen,
|
|
|
|
PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum,
|
|
|
|
PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown,
|
|
|
|
Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue,
|
|
|
|
SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle,
|
|
|
|
Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow,
|
|
|
|
YellowGreen,transparent
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-10-03 14:38:15 -04:00
|
|
|
background-color: #FF0000;
|
|
|
|
border-color: rgba(0,0,1, 0.5);
|
|
|
|
text-color: SeaGreen;
|
|
|
|
```
|
|
|
|
or
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-10-03 14:38:15 -04:00
|
|
|
background-color: transparent;
|
|
|
|
text-color: Black;
|
2017-04-03 11:39:09 -04:00
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Text style
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(bold|italic|underline|strikethrough|none)`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Text style indicates how the highlighted text is emphasized. `None` indicates
|
|
|
|
that no emphasis should be applied.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `bold`: make the text thicker then the surrounding text.
|
|
|
|
- `italic`: put the highlighted text in script type (slanted).
|
|
|
|
- `underline`: put a line under the text.
|
|
|
|
- `strikethrough`: put a line through the text.
|
2022-07-30 09:05:28 -04:00
|
|
|
|
|
|
|
The following options are available on pango 1.50.0 and up:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `uppercase`: Uppercase the text.
|
|
|
|
- `lowercase`: Lowercase the text.
|
2022-07-30 09:07:11 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The following option is disabled as pango crashes on this if there is eel
|
|
|
|
upsizing or wrapping. This will be re-enabled once fixed:
|
2022-07-30 09:07:11 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `capitalize`: Capitalize the text.
|
2017-07-26 05:47:47 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Line style
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(dash|solid)`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Indicates how a line should be drawn.
|
|
|
|
It currently supports:
|
2023-03-27 12:45:44 -04:00
|
|
|
- `dash`: a dashed line, where the gap is the same width as the dash
|
|
|
|
- `solid`: a solid line
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Distance
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `{Integer}px`
|
|
|
|
- Format: `{Real}em`
|
|
|
|
- Format: `{Real}ch`
|
|
|
|
- Format: `{Real}%`
|
2023-07-23 18:18:03 -04:00
|
|
|
- Format: `{Real}mm`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
A distance can be specified in 3 different units:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `px`: Screen pixels.
|
|
|
|
- `em`: Relative to text height.
|
|
|
|
- `ch`: Relative to width of a single number.
|
|
|
|
- `mm`: Actual size in millimeters (based on dpi).
|
|
|
|
- `%`: Percentage of the **monitor** size.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Distances used in the horizontal direction use the monitor width. Distances in
|
|
|
|
the vertical direction use the monitor height.
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
padding: 10%;
|
|
|
|
```
|
2017-08-13 13:19:19 -04:00
|
|
|
On a full-HD (1920x1080) monitor, it defines a padding of 192 pixels on the left
|
2017-04-03 11:39:09 -04:00
|
|
|
and right side and 108 pixels on the top and bottom.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
#### Calculating sizes
|
2020-04-24 13:54:08 -04:00
|
|
|
|
|
|
|
Rofi supports some maths in calculating sizes. For this it uses the CSS syntax:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2020-04-24 13:54:08 -04:00
|
|
|
width: calc( 100% - 37px );
|
|
|
|
```
|
|
|
|
|
2022-04-06 14:23:07 -04:00
|
|
|
```css
|
|
|
|
width: calc( 20% min 512 );
|
|
|
|
```
|
|
|
|
|
2020-04-24 13:54:08 -04:00
|
|
|
It supports the following operations:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `+` : Add
|
|
|
|
- `-` : Subtract
|
|
|
|
- `/` : Divide
|
|
|
|
- `-` : Multiply
|
|
|
|
- `modulo` : Modulo
|
|
|
|
- `min` : Minimum of lvalue or rvalue;
|
|
|
|
- `max` : Maximum of lvalue or rvalue;
|
|
|
|
- `floor` : Round down lvalue to the next multiple of rvalue
|
|
|
|
- `ceil` : Round up lvalue to the next multiple of rvalue
|
|
|
|
- `round` : Round lvalue to the next multiple of rvalue
|
2020-04-24 13:54:08 -04:00
|
|
|
|
|
|
|
It uses the C precedence ordering.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Padding
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `{Integer}`
|
|
|
|
- Format: `{Distance}`
|
|
|
|
- Format: `{Distance} {Distance}`
|
|
|
|
- Format: `{Distance} {Distance} {Distance}`
|
|
|
|
- Format: `{Distance} {Distance} {Distance} {Distance}`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2019-12-14 04:59:10 -05:00
|
|
|
If no unit is specified, pixels are assumed.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
The different number of fields in the formats are parsed like:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- 1 field: `all`
|
|
|
|
- 2 fields: `top&bottom` `left&right`
|
|
|
|
- 3 fields: `top`, `left&right`, `bottom`
|
|
|
|
- 4 fields: `top`, `right`, `bottom`, `left`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Border
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `{Integer}`
|
|
|
|
|
|
|
|
- Format: `{Distance}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Distance}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Distance} {Distance}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Distance} {Distance} {Distance}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Line style}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Line style} {Distance} {Line style}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Line style} {Distance} {Line style} {Distance} {Line
|
|
|
|
style}`
|
|
|
|
|
|
|
|
- Format: `{Distance} {Line style} {Distance} {Line style} {Distance} {Line
|
|
|
|
style} {Distance} {Line style}`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
Borders are identical to padding, except that each distance field has a line
|
2017-04-03 11:39:09 -04:00
|
|
|
style property.
|
|
|
|
|
2019-12-14 04:59:10 -05:00
|
|
|
> When no unit is specified, pixels are assumed.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Position
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-07-26 05:47:47 -04:00
|
|
|
Indicate a place on the window/monitor.
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌─────────────┬─────────────┬─────────────┐
|
|
|
|
│ north west │ north │ north east │
|
|
|
|
├─────────────┼─────────────┼─────────────┤
|
|
|
|
│ west │ center │ east │
|
|
|
|
├─────────────┼─────────────┼─────────────┤
|
|
|
|
│ south west │ south │ south east │
|
|
|
|
└─────────────┴─────────────┴─────────────┘
|
2017-07-26 05:47:47 -04:00
|
|
|
```
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(center|east|north|west|south|north east|north west|south west|south
|
|
|
|
east)`
|
2022-04-05 18:04:30 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Visibility
|
2017-11-01 16:58:07 -04:00
|
|
|
|
|
|
|
It is possible to hide widgets:
|
|
|
|
|
2022-04-05 16:21:13 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
inputbar {
|
|
|
|
enabled: false;
|
|
|
|
}
|
2022-04-05 16:21:13 -04:00
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Reference
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `@{PROPERTY NAME}`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A reference can point to another reference. Currently, the maximum number of
|
|
|
|
redirects is 20. A property always refers to another property. It cannot be
|
|
|
|
used for a subpart of the property. For example, this is not valid:
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-04-03 11:39:09 -04:00
|
|
|
highlight: bold @pink;
|
|
|
|
```
|
|
|
|
|
2017-07-26 05:47:47 -04:00
|
|
|
But this is:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-07-26 05:47:47 -04:00
|
|
|
* {
|
|
|
|
myhigh: bold #FAA;
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
window {
|
2017-07-26 05:47:47 -04:00
|
|
|
highlight: @myhigh;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `var(PROPERTY NAME, DEFAULT)`
|
2021-09-01 15:27:25 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A reference can point to another reference. Currently, the maximum number of
|
|
|
|
redirects is 20. A property always refers to another property. It cannot be
|
|
|
|
used for a subpart of the property.
|
2021-09-01 15:27:25 -04:00
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
```css
|
|
|
|
window {
|
|
|
|
width: var( width, 30%);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
If the property `width` is set globally (`*{}`) that value is used, if the
|
|
|
|
property `width` is not set, the default value is used.
|
2021-09-01 15:27:25 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Orientation
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(horizontal|vertical)`
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
Specify the orientation of the widget.
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Cursor
|
2021-05-22 18:17:27 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `(default|pointer|text)`
|
2021-05-22 18:17:27 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Specify the type of mouse cursor that is set when the mouse pointer is over the
|
|
|
|
widget.
|
2021-05-22 18:17:27 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### List of keywords
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `[ keyword, keyword ]`
|
2017-07-24 10:26:14 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A list starts with a '[' and ends with a ']'. The entries in the list are
|
|
|
|
comma-separated. The `keyword` in the list refers to an widget name.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### List of values
|
2022-01-24 16:20:41 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `[ value, value, ... ]`
|
2022-01-24 16:20:41 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
An list starts with a '[' and ends with a ']'. The entries in the list are
|
|
|
|
comma-separated.
|
2022-01-24 16:20:41 -05:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Environment variable
|
2018-07-09 06:40:14 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `${:alnum:}`
|
2018-07-09 06:40:14 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
This will parse the environment variable as the property value. (that then can
|
|
|
|
be any of the above types). The environment variable should be an alphanumeric
|
|
|
|
string without white-space.
|
2018-07-09 06:40:14 -04:00
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2018-07-09 06:40:14 -04:00
|
|
|
* {
|
|
|
|
background-color: ${BG};
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `env(ENVIRONMENT, default)`
|
2021-09-01 15:27:25 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
This will parse the environment variable as the property value. (that then can
|
|
|
|
be any of the above types). The environment variable should be an alphanumeric
|
|
|
|
string without white-space. If the environment value is not found, the default
|
|
|
|
value is used.
|
2021-09-01 15:27:25 -04:00
|
|
|
|
|
|
|
```css
|
|
|
|
window {
|
|
|
|
width: env(WIDTH, 40%);
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
If environment WIDTH is set, then that value is parsed, otherwise the default
|
|
|
|
value (`40%`).
|
2021-09-01 15:27:25 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Inherit
|
2017-09-10 10:09:53 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Format: `inherit`
|
2017-09-10 10:09:53 -04:00
|
|
|
|
|
|
|
Inherits the property from its parent widget.
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
mainbox {
|
2017-09-10 10:09:53 -04:00
|
|
|
border-color: inherit;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Elements paths
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Element paths exists of two parts, the first part refers to the actual widget
|
|
|
|
by name. Some widgets have an extra state.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
For example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
element selected {
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Here `element selected` is the name of the widget, `selected` is the state of
|
|
|
|
the widget.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The difference between dots and spaces is purely cosmetic. These are all the
|
|
|
|
same:
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
element .selected {
|
2017-09-10 10:09:53 -04:00
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
element.selected {
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
2017-11-01 16:58:07 -04:00
|
|
|
element selected {
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### Supported element paths
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
### Base widgets
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
The default widgets available in **rofi** and the default hierarchic:
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `window`
|
|
|
|
- `overlay`: the overlay widget.
|
2017-07-25 02:25:21 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `mainbox`: The mainbox box.
|
|
|
|
|
|
|
|
- `inputbar`: The input bar box.
|
|
|
|
- `box`: the horizontal @box packing the widgets
|
|
|
|
|
|
|
|
- `case-indicator`: the case/sort indicator @textbox
|
|
|
|
|
|
|
|
- `prompt`: the prompt @textbox
|
|
|
|
|
|
|
|
- `entry`: the main entry @textbox
|
|
|
|
|
|
|
|
- `num-rows`: Shows the total number of rows.
|
|
|
|
|
|
|
|
- `num-filtered-rows`: Shows the total number of rows after
|
|
|
|
filtering.
|
|
|
|
|
|
|
|
- `textbox-current-entry`: Shows the text of the currently selected
|
|
|
|
entry.
|
|
|
|
|
|
|
|
- `icon-current-entry`: Shows the icon of the currently selected
|
|
|
|
entry.
|
|
|
|
|
|
|
|
- `listview`: The listview.
|
|
|
|
|
|
|
|
- `scrollbar`: the listview scrollbar
|
|
|
|
|
|
|
|
- `element`: a box in the listview holding the entries
|
|
|
|
|
|
|
|
- `element-icon`: the widget in the listview's entry showing the
|
|
|
|
(optional) icon
|
|
|
|
|
|
|
|
- `element-index`: the widget in the listview's entry
|
|
|
|
keybindable index (1,2,3..0)
|
|
|
|
|
|
|
|
- `element-text`: the widget in the listview's entry showing the
|
|
|
|
text.
|
|
|
|
|
|
|
|
- `mode-switcher`: the main horizontal @box packing the buttons.
|
|
|
|
- `button`: the buttons @textbox for each mode
|
|
|
|
|
|
|
|
- `message`: The container holding the textbox.
|
|
|
|
- `textbox`: the message textbox
|
|
|
|
|
|
|
|
Note that these path names match the default theme. Themes that provide a
|
|
|
|
custom layout will have different elements, and structure.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### State
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
State: State of widget
|
|
|
|
|
|
|
|
Optional flag(s) indicating state of the widget, used for theming.
|
|
|
|
|
|
|
|
These are appended after the name or class of the widget.
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
#### Example
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
`button selected.normal { }`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
`element selected.urgent { }`
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Currently only the entrybox and scrollbar have states:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
#### Entrybox
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
`{visible modifier}.{state}`
|
|
|
|
|
|
|
|
Where `visible modifier` can be:
|
2023-03-27 12:45:44 -04:00
|
|
|
- normal: no modification
|
|
|
|
- selected: the entry is selected/highlighted by user
|
|
|
|
- alternate: the entry is at an alternating row (uneven row)
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
Where `state` is:
|
2023-03-27 12:45:44 -04:00
|
|
|
- normal: no modification
|
|
|
|
- urgent: this entry is marked urgent
|
|
|
|
- active: this entry is marked active
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
These can be mixed.
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
2021-07-02 12:17:25 -04:00
|
|
|
```css
|
2017-11-01 16:58:07 -04:00
|
|
|
nametotextbox selected.active {
|
2017-10-03 14:38:15 -04:00
|
|
|
background-color: #003642;
|
|
|
|
text-color: #008ed4;
|
2017-04-03 11:39:09 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Sets all selected textboxes marked active to the given text and background
|
|
|
|
color. Note that a state modifies the original element, it therefore contains
|
|
|
|
all the properties of that element.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
#### Scrollbar
|
2017-04-03 11:39:09 -04:00
|
|
|
|
|
|
|
The scrollbar uses the `handle` state when drawing the small scrollbar handle.
|
|
|
|
This allows the colors used for drawing the handle to be set independently.
|
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Widget properties
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The following properties are currently supported:
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### all widgets
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **enabled**: enable/disable rendering of the widget
|
|
|
|
|
|
|
|
- **padding**: padding
|
|
|
|
Padding on the inside of the widget
|
|
|
|
|
|
|
|
- **margin**: padding
|
|
|
|
Margin on the outside of the widget
|
|
|
|
|
|
|
|
- **border**: border
|
|
|
|
Border around the widget (between padding and margin)/
|
|
|
|
|
|
|
|
- **border-radius**: padding
|
|
|
|
Sets a radius on the corners of the borders.
|
|
|
|
|
|
|
|
- **background-color**: color
|
|
|
|
Background color
|
|
|
|
|
|
|
|
- **background-image**: image
|
|
|
|
Background image
|
|
|
|
|
|
|
|
- **border-color**: color
|
|
|
|
Color of the border
|
|
|
|
|
|
|
|
- **cursor**: cursor
|
|
|
|
Type of mouse cursor that is set when the mouse pointer is hovered over the
|
|
|
|
widget.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### window
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **font**: string
|
|
|
|
The font used in the window
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **transparency**: string
|
|
|
|
Indicating if transparency should be used and what type:
|
|
|
|
- **real** - True transparency. Only works with a compositor.
|
|
|
|
- **background** - Take a screenshot of the background image and use that.
|
|
|
|
- **screenshot** - Take a screenshot of the screen and use that.
|
|
|
|
- **Path** to png file - Use an image.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **location**: position
|
|
|
|
The place of the anchor on the monitor
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **anchor**: anchor
|
|
|
|
The anchor position on the window
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **fullscreen**: boolean Window is fullscreen.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **width**: distance The width of the window
|
|
|
|
|
|
|
|
- **x-offset**: distance
|
|
|
|
|
|
|
|
- **y-offset**: distance The offset of the window to the anchor point,
|
|
|
|
allowing you to push the window left/right/up/down
|
|
|
|
|
|
|
|
### scrollbar Properties
|
|
|
|
|
|
|
|
- **background-color**: color
|
|
|
|
- **handle-width**: distance
|
|
|
|
- **handle-color**: color
|
|
|
|
- **border-color**: color
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### box
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **orientation**: orientation Set the direction the elements are packed.
|
|
|
|
- **spacing**: distance Distance between the packed elements.
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### textbox
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- **background-color**: color
|
|
|
|
|
|
|
|
- **border-color**: the color used for the border around the widget.
|
|
|
|
|
|
|
|
- **font**: the font used by this textbox (string).
|
|
|
|
|
|
|
|
- **str**/**content**: the string to display by this textbox (string).
|
|
|
|
|
|
|
|
- **vertical-align**: Vertical alignment of the text. A number between 0
|
|
|
|
(top) and 1 (bottom).
|
|
|
|
|
|
|
|
- **horizontal-align**: Horizontal alignment of the text. A number between 0
|
|
|
|
(left) and 1 (right).
|
|
|
|
|
|
|
|
- **text-color**: the text color to use.
|
|
|
|
|
|
|
|
- **text-transform**: text style {color} for the whole text.
|
|
|
|
|
|
|
|
- **highlight**: text style {color}. color is optional, multiple
|
|
|
|
highlight styles can be added like: bold underline italic #000000; This
|
|
|
|
option is only available on the `element-text` widget.
|
|
|
|
|
|
|
|
- **width**: override the desired width for the textbox.
|
|
|
|
|
|
|
|
- **content**: Set the displayed text (String).
|
|
|
|
|
|
|
|
- **placeholder**: Set the displayed text (String) when nothing is
|
|
|
|
entered.
|
|
|
|
|
|
|
|
- **placeholder-markup**: If true, placeholder text supports pango
|
|
|
|
markup for stylizing.
|
|
|
|
|
|
|
|
- **placeholder-color**: Color of the placeholder text.
|
|
|
|
|
|
|
|
- **blink**: Enable/Disable blinking on an input textbox
|
|
|
|
(Boolean).
|
|
|
|
|
|
|
|
- **markup**: Force markup on, beware that only valid pango markup
|
|
|
|
strings are shown.
|
|
|
|
|
|
|
|
- **tab-stops**: array of distances. Set the location of tab stops by
|
|
|
|
their distance from the beginning of the line. Each distance should be
|
|
|
|
greater than the previous one. The text appears to the right of the tab
|
|
|
|
stop position (other alignments are not supported yet).
|
|
|
|
|
|
|
|
- **cursor-width**: The width of the cursor.
|
|
|
|
|
|
|
|
- **cursor-color**: The color used to draw the cursor.
|
|
|
|
|
|
|
|
- **cursor-outline**: Enable a border (outline) around the cursor.
|
|
|
|
(Boolean)
|
|
|
|
|
|
|
|
- **cursor-outline-width**: The width of the border around the cursor.
|
|
|
|
(Double)
|
|
|
|
|
|
|
|
- **cursor-outline-color**: The color to use for the cursor outline.
|
|
|
|
(Color)
|
|
|
|
|
|
|
|
- **text-outline**: Enable a border (outline) around the text. (Boolean)
|
|
|
|
|
|
|
|
- **text-outline-width**: The width of the border around the text. (Double)
|
|
|
|
|
|
|
|
- **text-outline-color**: The color to use for the text outline. (Color)
|
2017-04-03 11:39:09 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
### listview
|
2023-03-27 12:45:44 -04:00
|
|
|
- **columns**: integer Number of columns to show (at least 1)
|
|
|
|
|
|
|
|
- **fixed-height**: boolean Always show `lines` rows, even if fewer
|
|
|
|
elements are available.
|
|
|
|
|
|
|
|
- **dynamic**: boolean `True` if the size should change when filtering
|
|
|
|
the list, `False` if it should keep the original height.
|
|
|
|
|
|
|
|
- **scrollbar**: boolean If the scrollbar should be enabled/disabled.
|
|
|
|
|
|
|
|
- **scrollbar-width**: distance Width of the scrollbar
|
|
|
|
|
|
|
|
- **cycle**: boolean When navigating, it should wrap around
|
|
|
|
|
|
|
|
- **spacing**: distance Spacing between the elements (both vertical
|
|
|
|
and horizontal)
|
|
|
|
|
|
|
|
- **lines**: integer Number of rows to show in the list view.
|
|
|
|
|
|
|
|
- **layout**: orientation Indicate how elements are stacked.
|
|
|
|
Horizontal implements the dmenu style.
|
|
|
|
|
|
|
|
- **reverse**: boolean Reverse the ordering (top down to bottom up).
|
|
|
|
|
|
|
|
- **flow**: orientation The order the elements are layed out.
|
|
|
|
Vertical is the original 'column' view.
|
|
|
|
|
|
|
|
- **fixed-columns**: boolean Do not reduce the number of columns shown when
|
|
|
|
number of visible elements is not enough to fill them all.
|
|
|
|
|
|
|
|
- **require-input**: boolean Listview requires user input to be unhidden.
|
|
|
|
The list is still present and hitting accept will activate the first entry.
|
2019-12-14 04:59:10 -05:00
|
|
|
|
2023-01-25 17:15:30 -05:00
|
|
|
## Listview widget
|
|
|
|
|
2023-01-25 16:55:04 -05:00
|
|
|
The listview widget is special container widget.
|
2023-01-25 17:15:30 -05:00
|
|
|
It has the following fixed children widgets:
|
2023-01-25 17:00:30 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- 0 or more `element` widgets of the type box.
|
|
|
|
|
|
|
|
- An optional `scrollbar` widget. This can be enabled using the scrollbar
|
|
|
|
property.
|
2023-01-25 16:55:04 -05:00
|
|
|
|
2023-01-25 17:15:30 -05:00
|
|
|
These cannot be changed using the `children` property.
|
|
|
|
|
2023-01-25 17:20:06 -05:00
|
|
|
Each Entry displayed by listview is captured by a `box` called `element`.
|
2023-01-25 17:15:30 -05:00
|
|
|
An `element` widget can contain the following special child widgets:
|
2023-01-25 17:00:30 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `element-icon`: An icon widget showing the icon associated to the entry.
|
|
|
|
- `element-text`: A textbox widget showing the text associated to the entry.
|
|
|
|
- `element-index`: A textbox widget that shows the shortcut keybinding number.
|
2023-01-25 16:55:04 -05:00
|
|
|
|
2023-01-25 17:15:30 -05:00
|
|
|
By default the `element-icon` and `element-text` child widgets are added to the
|
2023-01-25 17:20:06 -05:00
|
|
|
`element`. This can be modified using the `children` property or the
|
|
|
|
`[no]-show-icons` option.
|
2023-01-25 17:15:30 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
A child added with another name is treated the same as the special widget
|
|
|
|
described in the [advanced layout](#advanced-layout) section.
|
2017-04-04 02:38:21 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
### listview text highlight
|
2020-09-06 05:59:41 -04:00
|
|
|
|
|
|
|
The `element-text` widget in the `listview` is the one used to show the text.
|
2023-03-27 12:45:44 -04:00
|
|
|
On this widget set the `highlight` property (only place this property is used)
|
|
|
|
to change the style of highlighting. The `highlight` property consist of the
|
|
|
|
`text-style` property and a color.
|
2020-09-06 05:59:41 -04:00
|
|
|
|
|
|
|
To disable highlighting:
|
|
|
|
|
|
|
|
```css
|
|
|
|
element-text {
|
|
|
|
highlight: None;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
To set to red underlined:
|
|
|
|
|
|
|
|
```css
|
|
|
|
element-text {
|
|
|
|
highlight: underline red;
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-07-24 03:57:53 -04:00
|
|
|
## Layout
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The new format allows the layout of the **rofi** window to be tweaked
|
|
|
|
extensively. For each widget, the themer can specify padding, margin, border,
|
|
|
|
font, and more. It even allows, as an advanced feature, to pack widgets in a
|
|
|
|
custom structure.
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
### Basic layout structure
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The whole view is made out of boxes that pack other boxes or widgets.
|
|
|
|
The box can be vertical or horizontal. This is loosely inspired by [GTK](http://gtk.org/).
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The current layout of **rofi** is structured as follows:
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌────────────────────────────────────────────────────────────────────────────────────┐
|
|
|
|
│ window {BOX:vertical} │
|
|
|
|
│ ┌───────────────────────────────────────────────────────────────────────────────┐ │
|
|
|
|
│ │ mainbox {BOX:vertical} │ │
|
|
|
|
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ inputbar {BOX:horizontal} │ │ │
|
|
|
|
│ │ │ ┌─────────┐ ┌─┐ ┌───────────────────────────────┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │ │
|
|
|
|
│ │ │ │ prompt │ │:│ │ entry │ │#fr│ │ / │ │#ns│ │ci │ │ │ │
|
|
|
|
│ │ │ └─────────┘ └─┘ └───────────────────────────────┘ └───┘ └───┘ └───┘ └───┘ │ │ │
|
|
|
|
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ │ │ │
|
|
|
|
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ message │ │ │
|
|
|
|
│ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │ │
|
|
|
|
│ │ │ │ textbox │ │ │ │
|
|
|
|
│ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │ │
|
|
|
|
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ │ │ │
|
|
|
|
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ listview │ │ │
|
|
|
|
│ │ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │ │
|
|
|
|
│ │ │ │ element │ │ │ │
|
|
|
|
│ │ │ │ ┌─────────────────┐ ┌─────────────────────────────────────────────┐ │ │ │ │
|
|
|
|
│ │ │ │ │element─icon │ │element─text │ │ │ │ │
|
|
|
|
│ │ │ │ └─────────────────┘ └─────────────────────────────────────────────┘ │ │ │ │
|
|
|
|
│ │ │ └─────────────────────────────────────────────────────────────────────┘ │ │ │
|
|
|
|
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ │ │ │
|
|
|
|
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ mode─switcher {BOX:horizontal} │ │ │
|
|
|
|
│ │ │ ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ ┌───────────────┐ │ │ │
|
|
|
|
│ │ │ │ Button │ │ Button │ │ Button │ │ Button │ │ │ │
|
|
|
|
│ │ │ └───────────────┘ └───────────────┘ └──────────────┘ └───────────────┘ │ │ │
|
|
|
|
│ │ └───────────────────────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ └───────────────────────────────────────────────────────────────────────────────┘ │
|
|
|
|
└────────────────────────────────────────────────────────────────────────────────────┘
|
2017-07-24 08:36:31 -04:00
|
|
|
|
|
|
|
|
|
|
|
```
|
2023-03-27 12:45:44 -04:00
|
|
|
> - ci is the case-indicator
|
|
|
|
> - fr is the num-filtered-rows
|
|
|
|
> - ns is the num-rows
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2018-06-14 05:16:32 -04:00
|
|
|
### Error message structure
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌──────────────────────────────────────────────────────────────────────────────────┐
|
|
|
|
│ window {BOX:vertical} │
|
|
|
|
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
|
|
|
|
│ │ error─message {BOX:vertical} │ │
|
|
|
|
│ │ ┌────────────────────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ textbox │ │ │
|
|
|
|
│ │ └────────────────────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ └─────────────────────────────────────────────────────────────────────────────┘ │
|
|
|
|
└──────────────────────────────────────────────────────────────────────────────────┘
|
2018-06-14 05:16:32 -04:00
|
|
|
|
|
|
|
```
|
|
|
|
|
2017-07-24 08:36:31 -04:00
|
|
|
### Advanced layout
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The layout of **rofi** can be tweaked by packing the 'fixed' widgets in a
|
|
|
|
custom structure.
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The following widgets are fixed, as they provide core **rofi** functionality:
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- prompt
|
|
|
|
- entry
|
|
|
|
- overlay
|
|
|
|
- case-indicator
|
|
|
|
- message
|
|
|
|
- listview
|
|
|
|
- mode-switcher
|
|
|
|
- num-rows
|
|
|
|
- num-filtered-rows
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The following keywords are defined and can be used to automatically pack a
|
|
|
|
subset of the widgets. These are used in the default theme as depicted in the
|
|
|
|
figure above.
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- mainbox Packs: `inputbar, message, listview, mode-switcher`
|
|
|
|
- inputbar Packs: `prompt,entry,case-indicator`
|
2017-07-24 08:36:31 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Any widget name starting with `textbox` is a textbox widget, others are box
|
|
|
|
widgets and can pack other widgets.
|
2019-09-20 09:01:34 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
There are several special widgets that can be used by prefixing the name of the
|
|
|
|
widget:
|
2019-09-20 09:01:34 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
#### Textbox widget
|
2021-07-02 12:01:46 -04:00
|
|
|
|
|
|
|
This is a read-only textbox widget. The displayed string can be set with `content`.
|
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
```css
|
|
|
|
textbox-custom {
|
|
|
|
expand: false;
|
2021-08-14 07:03:16 -04:00
|
|
|
content: "My Message";
|
2021-07-02 12:01:46 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Icon
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
This is an icon widget. The displayed icon can be set with `filename` and size
|
|
|
|
with `size`. If the property `action` is set, it acts as a button. `action` can
|
|
|
|
be set to a keybinding name and completes that action. (see rofi -show keys for
|
|
|
|
a list).
|
2021-07-02 12:01:46 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
If the `squared` property is set to **false** the widget height and width are
|
|
|
|
not forced to be equal.
|
2021-07-02 12:01:46 -04:00
|
|
|
|
|
|
|
Example:
|
|
|
|
|
|
|
|
```css
|
|
|
|
icon-paste {
|
|
|
|
expand: false;
|
|
|
|
filename: "gtk-paste";
|
|
|
|
size: 24;
|
|
|
|
vertical-align: 0.5;
|
|
|
|
action: "kb-primary-paste";
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### button
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
This is a textbox widget that can have a 'clickable' action. The `action` can
|
|
|
|
be set to: `keybinding`: accepts a keybinding name and completes that action.
|
|
|
|
(see rofi -show keys for a list).
|
2021-07-02 12:01:46 -04:00
|
|
|
|
|
|
|
```css
|
|
|
|
button-paste {
|
|
|
|
expand: false;
|
|
|
|
content: "My Clickable Message";
|
|
|
|
vertical-align: 0.5;
|
|
|
|
action: "kb-primary-paste";
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Children
|
2019-09-20 09:01:34 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
To specify children, set the `children`
|
2017-07-24 08:36:31 -04:00
|
|
|
property (this always happens on the `box` child, see example below):
|
|
|
|
|
2021-07-02 12:01:46 -04:00
|
|
|
```css
|
|
|
|
inputbar {
|
|
|
|
children: [prompt,entry,overlay,case-indicator];
|
|
|
|
}
|
2017-07-24 08:36:31 -04:00
|
|
|
```
|
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The theme needs to be updated to match the hierarchy specified.
|
2017-07-24 08:36:31 -04:00
|
|
|
|
|
|
|
Below is an example of a theme emulating dmenu:
|
|
|
|
|
|
|
|
```css
|
|
|
|
* {
|
2017-10-03 14:38:15 -04:00
|
|
|
background-color: Black;
|
|
|
|
text-color: White;
|
|
|
|
border-color: White;
|
2017-07-24 08:36:31 -04:00
|
|
|
font: "Times New Roman 12";
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
window {
|
2017-07-24 08:36:31 -04:00
|
|
|
anchor: north;
|
|
|
|
location: north;
|
|
|
|
width: 100%;
|
|
|
|
padding: 4px;
|
|
|
|
children: [ horibox ];
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
horibox {
|
2017-07-24 08:36:31 -04:00
|
|
|
orientation: horizontal;
|
|
|
|
children: [ prompt, entry, listview ];
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
listview {
|
2017-07-24 08:36:31 -04:00
|
|
|
layout: horizontal;
|
|
|
|
spacing: 5px;
|
|
|
|
lines: 10;
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
entry {
|
2017-07-24 08:36:31 -04:00
|
|
|
expand: false;
|
|
|
|
width: 10em;
|
|
|
|
}
|
|
|
|
|
2017-11-01 16:58:07 -04:00
|
|
|
element {
|
2017-07-24 08:36:31 -04:00
|
|
|
padding: 0px 2px;
|
|
|
|
}
|
2017-11-01 16:58:07 -04:00
|
|
|
element selected {
|
2017-10-03 14:38:15 -04:00
|
|
|
background-color: SteelBlue;
|
2017-07-24 08:36:31 -04:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2017-07-24 03:57:53 -04:00
|
|
|
### Padding and margin
|
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
Just like CSS, **rofi** uses the box model for each widget.
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
|
|
│ margin │
|
|
|
|
│ ┌────────────────────────────────────────────────────────────┐ │
|
|
|
|
│ │ border │ │
|
|
|
|
│ │ ┌────────────────────────────────────────────────────────┐ │ │
|
|
|
|
│ │ │ padding │ │ │
|
|
|
|
│ │ │ ┌────────────────────────────────────────────────────┐ │ │ │
|
|
|
|
│ │ │ │ content │ │ │ │
|
|
|
|
│ │ │ └────────────────────────────────────────────────────┘ │ │ │
|
|
|
|
│ │ └────────────────────────────────────────────────────────┘ │ │
|
|
|
|
│ └────────────────────────────────────────────────────────────┘ │
|
|
|
|
└──────────────────────────────────────────────────────────────────┘
|
2017-07-24 03:57:53 -04:00
|
|
|
```
|
|
|
|
|
|
|
|
Explanation of the different parts:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Content - The content of the widget.
|
|
|
|
|
|
|
|
- Padding - Clears an area around the widget. The padding shows the
|
|
|
|
background color of the widget.
|
|
|
|
|
|
|
|
- Border - A border that goes around the padding and content. The border use
|
|
|
|
the border-color of the widget.
|
|
|
|
|
|
|
|
- Margin - Clears an area outside the border. The margin is transparent.
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The box model allows us to add a border around elements, and to define space
|
|
|
|
between elements.
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
The size of each margin, border, and padding can be set.
|
|
|
|
For the border, a linestyle and radius can be set.
|
2017-07-24 03:57:53 -04:00
|
|
|
|
|
|
|
### Spacing
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Widgets that can pack more then one child widget (currently box and listview)
|
|
|
|
have the `spacing` property. This property sets the distance between the packed
|
|
|
|
widgets (both horizontally and vertically).
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌───────────────────────────────────────┐
|
|
|
|
│ ┌────────┐ s ┌────────┐ s ┌────────┐ │
|
|
|
|
│ │ child │ p │ child │ p │ child │ │
|
|
|
|
│ │ │ a │ │ a │ │ │
|
|
|
|
│ │ │ c │ │ c │ │ │
|
|
|
|
│ │ │ i │ │ i │ │ │
|
|
|
|
│ │ │ n │ │ n │ │ │
|
|
|
|
│ └────────┘ g └────────┘ g └────────┘ │
|
|
|
|
└───────────────────────────────────────┘
|
2017-07-24 03:57:53 -04:00
|
|
|
```
|
|
|
|
|
|
|
|
### Advanced box packing
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
More dynamic spacing can be achieved by adding dummy widgets, for example to
|
|
|
|
make one widget centered:
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2022-04-05 18:04:30 -04:00
|
|
|
┌────────────────────────────────────────────────────┐
|
|
|
|
│ ┌───────────────┐ ┌────────┐ ┌───────────────┐ │
|
|
|
|
│ │ dummy │ │ child │ │ dummy │ │
|
|
|
|
│ │ expand: true; │ │ │ │ expand: true; │ │
|
|
|
|
│ │ │ │ │ │ │ │
|
|
|
|
│ │ │ │ │ │ │ │
|
|
|
|
│ │ │ │ │ │ │ │
|
|
|
|
│ └───────────────┘ └────────┘ └───────────────┘ │
|
|
|
|
└────────────────────────────────────────────────────┘
|
2017-07-24 03:57:53 -04:00
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
If both dummy widgets are set to expand, `child` will be centered. Depending on
|
|
|
|
the `expand` flag of child the remaining space will be equally divided between
|
|
|
|
both dummy and child widget (expand enabled), or both dummy widgets (expand
|
|
|
|
disabled).
|
2017-07-24 03:57:53 -04:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Debugging
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
To get debug information from the parser, run rofi like:
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```bash
|
2017-07-25 02:13:07 -04:00
|
|
|
G_MESSAGES_DEBUG=Parser rofi -show run
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Syntax errors are shown in a popup and printed out to command line with the
|
|
|
|
above command.
|
2017-07-25 02:13:07 -04:00
|
|
|
|
|
|
|
To see the elements queried during running, run:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```bash
|
2017-07-25 02:13:07 -04:00
|
|
|
G_MESSAGES_DEBUG=Theme rofi -show run
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
To test minor changes, part of the theme can be passed on the command line, for
|
|
|
|
example to set it to full-screen:
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```bash
|
2021-07-02 12:01:46 -04:00
|
|
|
rofi -theme-str 'window { fullscreen:true;}' -show run
|
2017-07-25 02:13:07 -04:00
|
|
|
```
|
|
|
|
|
2021-12-17 13:04:02 -05:00
|
|
|
Another syntax to modify theme properties is:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
rofi -theme+window+fullscreen true -show run
|
|
|
|
```
|
|
|
|
|
2017-08-13 13:19:19 -04:00
|
|
|
To print the current theme, run:
|
2017-07-25 02:13:07 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```bash
|
2017-07-25 02:13:07 -04:00
|
|
|
rofi -dump-theme
|
|
|
|
```
|
|
|
|
|
2019-12-25 17:10:46 -05:00
|
|
|
## Media support
|
|
|
|
|
|
|
|
Parts of the theme can be conditionally loaded, like the CSS `@media` option.
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```css
|
2020-09-11 11:55:09 -04:00
|
|
|
@media ( min-width: 120 ) {
|
2019-12-25 17:10:46 -05:00
|
|
|
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
It supports the following keys as constraint:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- `min-width`: load when width is bigger or equal then value.
|
|
|
|
- `max-width`: load when width is smaller then value.
|
|
|
|
- `min-height`: load when height is bigger or equal then value.
|
|
|
|
- `max-height`: load when height is smaller then value.
|
|
|
|
- `min-aspect-ratio` load when aspect ratio is over value.
|
|
|
|
- `max-aspect-ratio`: load when aspect ratio is under value.
|
|
|
|
- `monitor-id`: The monitor id, see rofi -help for id's.
|
|
|
|
- `enabled`: Boolean option to enable. Supports environment variable.
|
2020-09-11 11:55:09 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
@media takes an integer number or a fraction, for integer number `px` can be
|
|
|
|
added.
|
2019-12-25 17:10:46 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```css
|
2020-09-11 12:10:49 -04:00
|
|
|
@media ( min-width: 120 px ) {
|
|
|
|
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```css
|
2022-07-15 17:28:57 -04:00
|
|
|
@media ( enabled: env(DO_LIGHT, false ) {
|
|
|
|
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
2023-01-22 06:54:45 -05:00
|
|
|
## Conflicting constraints
|
|
|
|
|
|
|
|
It is possible to define conflicting constraints in the theme. These conflicts
|
|
|
|
are not explicitly reported. The most common example is forcing a specific
|
|
|
|
window size, for example by enabling full-screen mode, having number of lines
|
|
|
|
set in the listview and having the listview expand to available space. There is
|
|
|
|
clearly a conflict in these 3 constraints. In this case, listview will not
|
|
|
|
limit to the number of lines, but tries to fill the available space. It is up
|
|
|
|
to the theme designer to make sure the theme handles this correctly.
|
2021-06-08 12:35:21 -04:00
|
|
|
|
|
|
|
## Font Parsing
|
|
|
|
|
2023-01-22 06:54:45 -05:00
|
|
|
Rofi uses [pango](https://pango.gnome.org/) for font rendering. The font should
|
|
|
|
be specified in a format that pango understands. This normally is the font name
|
|
|
|
followed by the font size. For example:
|
2021-06-08 12:35:21 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2021-06-08 12:35:21 -04:00
|
|
|
mono 18
|
|
|
|
```
|
|
|
|
|
|
|
|
Or
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```text
|
2021-06-08 12:35:21 -04:00
|
|
|
FontAwesome 22
|
|
|
|
```
|
|
|
|
|
2023-01-14 06:44:55 -05:00
|
|
|
From the pango manpage:
|
|
|
|
|
|
|
|
The string must have the form
|
|
|
|
|
|
|
|
`\[FAMILY-LIST] \[STYLE-OPTIONS] \[SIZE] \[VARIATIONS]`,
|
|
|
|
|
|
|
|
where FAMILY-LIST is a comma-separated list of families optionally terminated
|
|
|
|
by a comma, STYLE\_OPTIONS is a whitespace-separated list of words where each
|
|
|
|
word describes one of style, variant, weight, stretch, or gravity, and SIZE is
|
|
|
|
a decimal number (size in points) or optionally followed by the unit modifier
|
|
|
|
“px” for absolute size. VARIATIONS is a comma-separated list of font variation
|
|
|
|
specifications of the form “`axis`=value” (the = sign is optional).
|
|
|
|
|
|
|
|
The following words are understood as styles: "Normal”, “Roman”, “Oblique”,
|
|
|
|
“Italic”.
|
|
|
|
|
|
|
|
The following words are understood as variants: “Small-Caps”, “All-Small-Caps”,
|
|
|
|
“Petite-Caps”, “All-Petite-Caps”, “Unicase”, “Title-Caps”.
|
|
|
|
|
|
|
|
The following words are understood as weights: “Thin”, “Ultra-Light”,
|
|
|
|
“Extra-Light”, “Light”, “Semi-Light”, “Demi-Light”, “Book”, “Regular”,
|
|
|
|
“Medium”, “Semi-Bold”, “Demi-Bold”, “Bold”, “Ultra-Bold”, “Extra-Bold”,
|
|
|
|
“Heavy”, “Black”, “Ultra-Black”, “Extra-Black”.
|
|
|
|
|
|
|
|
The following words are understood as stretch values: “Ultra-Condensed”,
|
|
|
|
“Extra-Condensed”, “Condensed”, “Semi-Condensed”, “Semi-Expanded”, “Expanded”,
|
|
|
|
“Extra-Expanded”, “Ultra-Expanded”.
|
|
|
|
|
|
|
|
The following words are understood as gravity values: “Not-Rotated”, “South”,
|
|
|
|
“Upside-Down”, “North”, “Rotated-Left”, “East”, “Rotated-Right”, “West”.
|
|
|
|
|
|
|
|
Any one of the options may be absent. If FAMILY-LIST is absent, then the
|
|
|
|
family\_name field of the resulting font description will be initialized to
|
|
|
|
NULL. If STYLE-OPTIONS is missing, then all style options will be set to the
|
|
|
|
default values. If SIZE is missing, the size in the resulting font description
|
|
|
|
will be set to 0.
|
|
|
|
|
|
|
|
A typical example:
|
|
|
|
|
|
|
|
"Cantarell Italic Light 15 \`wght`=200"
|
|
|
|
|
2022-07-16 07:33:13 -04:00
|
|
|
## Icon Handling
|
|
|
|
|
|
|
|
Rofi supports 3 ways of specifying an icon:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- Filename
|
|
|
|
- icon-name, this is looked up via the icon-theme.
|
|
|
|
- Markup String. It renders a string as an icon.
|
2022-07-16 07:33:13 -04:00
|
|
|
|
|
|
|
For the first two options, GdkPixbuf is used to open and render the icons.
|
|
|
|
This in general gives support for most required image formats.
|
|
|
|
For the string option it uses Pango to render the string. The string needs to
|
|
|
|
start with a `<span` tag, that allows you to set color and font.
|
|
|
|
|
|
|
|
Markup string:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
echo -en "testing\0icon\x1f<span color='red'>⏻</span>" | ./rofi -dmenu
|
|
|
|
```
|
|
|
|
|
|
|
|
Getting supported icon formats:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
G_MESSAGES_DEBUG=Helpers.IconFetcher rofi
|
|
|
|
```
|
|
|
|
This uses the debug framework and prints out a list of supported image file
|
|
|
|
extensions.
|
|
|
|
|
2019-12-29 11:30:53 -05:00
|
|
|
## Multiple file handling
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
The rasi file format offers two methods of including other files. This can be
|
|
|
|
used to modify existing themes, or have multiple variations on a theme.
|
2019-12-29 11:30:53 -05:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
- import: Import and parse a second file.
|
|
|
|
- theme: Discard theme, and load file as a fresh theme.
|
2019-12-29 11:30:53 -05:00
|
|
|
|
|
|
|
Syntax:
|
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
```css
|
2019-12-29 11:30:53 -05:00
|
|
|
@import "myfile"
|
|
|
|
@theme "mytheme"
|
|
|
|
```
|
|
|
|
|
|
|
|
The specified file can either by *name*, *filename*,*full path*.
|
|
|
|
|
|
|
|
If a filename is provided, it will try to resolve it in the following order:
|
|
|
|
|
2023-08-15 13:16:26 -04:00
|
|
|
- If path is absolute and file exists, it will open the file. This includes expansion of '~' or '~user'
|
|
|
|
- On an `@import` or `@theme` it looks in the directory of the file that tried to include it.
|
2023-03-27 12:45:44 -04:00
|
|
|
- `${XDG_CONFIG_HOME}/rofi/themes/`
|
|
|
|
- `${XDG_CONFIG_HOME}/rofi/`
|
|
|
|
- `${XDG_DATA_HOME}/rofi/themes/`
|
|
|
|
- `${INSTALL PREFIX}/share/rofi/themes/`
|
2019-12-29 11:30:53 -05:00
|
|
|
|
2023-08-15 13:12:14 -04:00
|
|
|
A name is resolved (if it has no valid extension) as a filename by appending the `.rasi` extension.
|
2019-12-25 17:10:46 -05:00
|
|
|
|
2022-12-31 07:15:01 -05:00
|
|
|
## Examples
|
2017-04-04 02:38:21 -04:00
|
|
|
|
2023-03-27 12:45:44 -04:00
|
|
|
Several examples are installed together with **rofi**. These can be found in
|
|
|
|
`{datadir}/rofi/themes/`, where `{datadir}` is the install path of **rofi**
|
|
|
|
data. When installed using a package manager, this is usually: `/usr/share/`.
|
2017-04-04 02:38:21 -04:00
|
|
|
|
|
|
|
## SEE ALSO
|
|
|
|
|
2020-04-20 05:27:06 -04:00
|
|
|
rofi(1), rofi-script(5), rofi-theme-selector(1)
|