Styling

Wofi

Wofi is a rofi-like alternative for wlroots-based wayland compositors

Styling

Generic styling stuff here

Selectors

window

CSS Selector for the entire wofi window

outer-box (#outer-box)

Selector for a box that everything else sits inside of

input (#input)

Selector for the text box for filtering items

scroll (#scroll)

Selector for the scroll window containing inner-box

inner-box (#inner-box)

Selector for the box containing all entries

entry (#entry)

Selector for the box containing text and if present, images

text (#text)

Selector for the box containing the name of the program/option inserted

img (#img)

Selector for images displayed in entries

Example CSS

window {
margin: 5px;
border: 2px solid red;
background-color: red;
}

#input {
margin: 5px;
border: 2px solid blue;
background-color: blue;
}

#inner-box {
margin: 5px;
border: 2px solid yellow;
background-color: yellow;
}

#outer-box {
margin: 5px;
border: 2px solid green;
background-color: green;
}

#scroll {
margin: 5px;
border: 2px solid orange;
background-color: orange;
}

#text {
margin: 5px;
border: 2px solid cyan;
background-color: cyan;
}

Useful Snippets

Some handy snippets for your CSS

#entry:selected{}

Selects the currently focused entry in the list. Useful for changing the highlight color, or removing it altogether.

#text:selected{}

Selects the currently focused text inside of the entry in the list. Can change the color of the selected text, background color, etc.
#entry:selected {
background-color: rgba(0,0,0,0);
}
#text:selected {
background-color: red;
}