Theme is not fully functional on Rofi 1.7.0 #1441

jpmvferreira · 2021-09-06T15:04:08Z

jpmvferreira
Sep 6, 2021

Before the update my rofi sidebar looked like this:

Now I did a few minor changes with time, but aren't that relevant. Now after the update, and after some messing around in my config files, the theme currently looks like this:

Rofi is now being executed with rofi -show drun -modi drun -drun-display-format {name}.

In ~/.config/rofi I have two files: config.rasi and sidebar.rasi:

config.rasi

// Notes:
// - CSS hex colors format: #RRGGBBAA ==> normal hex + 2 digits for transparency

/*
Transparency digits:
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
*/

configuration {
    modi: "drun";
    show-icons: false;
}

// import my theme
@import "sidebar.rasi"

* {
    lines: 15;
    columns: 1;
    font: "SF Pro Text 12";

    // Background (CSS)
    background: #2A3440BA;

    // Input box (CSS)
    background-alt: #5a81b080;

    // ?? (CSS)
    border-color: #00000000;

    // Border color (hex)
    primary: #009FFF;

    // Text color (hex)
    text-color: #D8DEE9;

    background-color: transparent;
    background-color: @background;
}

#window {
    border:           0;
    border-radius:    4px;
    padding:          0;
    width:            20%;
    height:           90%;
    transparency:     "real";
    background-color: @background;
}

#mainbox {
    children: [entry, listview];
    spacing: 40px;
    /*margin: 20%;*/
    padding: 20px 40px;
}

#listview {
    background-color: transparent;
    fixed-height: 0;
    border: 0px;
    spacing: 5px;
    scrollbar: false;
    padding: 5px 0px 0px;
}

#element {
    border: 0;
    border-radius: 15px;
    padding: 10px;
    orientation: horizontal;
    background-color: transparent;
}

element normal.urgent, element alternate.urgent {
    background-color:               @urgent;
}

element normal.active, element alternate.active {
    background-color:               @background-alt;
    border:                         4px 4px solid 4px 4px;
    border-radius:                  8;
    border-color:                   transparent;
}

#element selected {
    border:                         2px 2px solid 2px 2px;
    border-radius:                  8;
    border-color:                   @primary;
}

element selected.active {
    background-color:               @background-alt;
}

element-icon {
    border:                         0px;
    border-color:                   @primary;
    border-radius:                  0;
    padding:                        0px;
}

#case-indicator {
    background-color: #00000000;
    spacing:    0;
}

#entry {
    expand:                         false;
    margin:                         0px 0px;
    background-color:               @background-alt;
    padding:                        12px;
    border:                         3px;
    border-color:                   @background-alt;
    border-radius:                  8px;
}

#prompt {
    background-color: #00000000;
    spacing:    0;
}

#textbox-prompt-colon {
    background-color: #00000000;
    expand:     true;
    str:        "";
    margin:     0px 0.0em 0em 0em ;
}

inputbar {
    background-color: transparent;
}

sidebar.rasi

configuration {
    theme:                          "config";
    window-format:                  "{t}";
    show-icons:                     true;
    font:                           "DejaVu Sans 13";
    columns:                        1;
}

window {
    height:                         912px;
    width:                          380px;
    location:                       west;
    anchor:                         west;
    x-offset:                       48;
    y-offset:                       0;
}

mainbox {
    border:                         2px;
    border-color:                   @primary;
    padding:                        24px;
}

element-icon {
    size: 32; /* Must be a power of 2 */
}

element-text {
    vertical-align: 0.5;
}

As you can see there's some dirty workarounds here, as I am not even sure where did I got this theme, and how did I modify it. All I did was add the @import "sidebar.rasi" to config.rasi, which breaks if placed somewhere else in the code expects right after the configuration entry.
Even after that the window size was wrong and forced me to manually change it in the config.rasi instead of being dictated by sidebar.rasi as it should be.
There's also the issue that the background colors for icons and text is not fully transparent, and I can't seem to fix that.

Other than that the other solutions provided in similar threads and in the release section showed no improvement and would result in a white square with the correct placing, or something even weirder.