Styling

How to style the components ?

Styling the fsearch app is quite simple. The app reads on launch the $XDG_CONFIG_HOME/fsearch/style.css or $HOME/.config/fsearch/style.css. If the css is not found in these folder, the application will be unstyled.

Being a gtk app, the css specs can be found here https://docs.gtk.org/gtk4/css-overview.html and there https://docs.gtk.org/gtk4/css-properties.html

Application Structure

Which elements to target ? Let's begin by the simple state of fsearch.

Base component

The application window

The outer of the app has the selectors class of .application, you can change the app default background with this class.

For example, you can make the background transparent:

.application {
    background: transparent;
}

The application Box

fig.1 - Figure of the base view

The #EntryBox element is the root of all other elements like (fig.1):

• #EntryInput which is the application entry (1)
• #Tip that is a Label that throws some tips at you (2)

My personal configuration looks like this:

#EntryBox {
    font-family: "Product Sans", sans-serif;
    background: rgba(40, 40, 40, 0.95);
    padding: 0.5em;
}

#EntryInput {
    all: unset;
    background: rgba(0, 0, 0, 0);
    color: #d5c4a1;
    font-size: 1.2em;
    font-weight: 900;
    caret-color: #d5c4a1;
}


#EntryInput placeholder {
    color: rgba(213, 196, 161, 0.5);
}

#Tip {
    color: #d5c4a1;
    font-size: .9em;
    font-style: italic;
}