[BUG] Systray not working correctly with all:unset

[JuanH88]

Checklist before submitting an issue

• I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
• I have specifically verified that this bug is not a common user error
• I am providing as much relevant information as I am able to in this bug report (Minimal config to reproduce the issue for example, if applicable)

Description of the bug

I use a property Global all: unset necessary for my bars to look good, but systray does not work as it should, it does not allow you to set the background color. Attached images.

Reproducing the issue

No response

Expected behaviour

No response

Additional context

No response

[Rayzeq]

My systray widget as the css class tray.
You can use my config as a reference to help you theme the systray menus

.tray menu {
	border-radius: 10px;
	padding: 5px 0px;

	background-color: rgba(0, 0, 0, 0.8);

	>menuitem {
		padding: 0px 5px;

		&:disabled label {
			color: gray;
		}

		&:hover {
			background-color: #0e4679;
		}
	}

	separator {
		background-color: #222222;
		padding-top: 1px;

		&:last-child {
			padding: unset;
		}
	}
}

[JuanH88]

Great, now it works, but with one small detail, the corners look black and remain round even though I indicate in the scss with border-radius: 0. I think I will ignore it for the moment.

[Rayzeq]

Could you send your config ? For me it works with:

.tray menu {
	border-radius: 0;
}

[JuanH88]

My config. For more details, here you will find eww.yuck and eww.scss: https://github.com/JuanH88/gh0stzk_1080p/tree/master/config/bspwm/rices/andrea/andy.

.tray menu {
	border-radius: 0px;
	border: 1px solid $borderbg;
	padding: 5px 0px;

	background-color: $bg;

	>menuitem {
		padding: 0px 5px;

		&:disabled label {
			color: gray;
		}

		&:hover {
			background-color: $magenta;
		}
	}

	separator {
		background-color: $borderbg;
		padding-top: 1px;

		&:last-child {
			padding: unset;
		}
	}
}

[Rayzeq]

Well, I copy-pasted your config on my computer and here is the result

However I noticed you were using :pack-direction on the systray widget, which has been removed by the second pull request for the systray (#1059).
Either you are using only the first pull request for the systray (commit 1b819fb), which may explain why it works for me and not for you (even though the second pull request didn't change a lot of things related to menus). Or, you're using a commit that have both pull requests and I have no idea why it doesn't work for you.

[JuanH88]

Oh, so could it be the composer? In picom I have set corner-radius = 6, now I set it to 60 and the error persists, the menu was not affected, it is exactly the same, maybe it is something else.

[Rayzeq]

No, I don't think it's the compositor, I was saying that you may not have the very latest version of eww, which would explain why it works for me (I'm on the latest commit)

[dacyberduck]

Oh, so could it be the composer? In picom I have set corner-radius = 6, now I set it to 60 and the error persists, the menu was not affected, it is exactly the same, maybe it is something else.

try setting border-radius to zero in your gtk.css. Eww windows somehow respect the system gtk configuration. Had the same issue, but fixed by setting border radius to zero in gtk.css. here is my ~/.config/gtk-3.0/gtk.css

/* Remove rounded corners */
button,
.titlebar,
.titlebar .background,
decoration,
window,
window.background
{
    border-radius: 0px;
}

[cry0x11]

Thank you all for your contributions that helped me customize my config.

However, I found out a problem with the current approach ... that there are no arrows to indicate sub-menus, check boxes or radio buttons.

After searching for long and some trial and error, I figured out how to get these working ...

(please read the CSS comments I left)

.systray menu {
	border-radius: $borderRadius;
	padding: 0.33em;
	color: $white;
	background-color: $altBg;

    /*
        >menuitem matches menuitem elements nested directly inside menu
    */

	menuitem {
		padding: 0.25em;
        
        arrow {
            
            /*
                Symbolic icons from your icons theme

                EXAMPLE: (using Papirus-Dark icons)
                1. run `find /usr/share/icons/Papirus-Dark/symbolic | grep <YOUR-ICON-NAME>`
                2. use the name without the .svg part like what i did below

             */

            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
            color: $white;
            
            // min-width and min-height are required for the icon to be rendered
            min-width: 1em;
            min-height: 1em;
        }

        /* 
            & before pseudo element means nesting selector modifiers
            so instead of 
            
            menuitem:disabled{

            } 

            you type:

            menuitem {
                &:disabled{
                }
            }

         */

        radio{
            // min-width and min-height are required for the icon to be rendered
            min-width: 1em;
            min-height: 1em;
            padding-right: 0.5em;
            
            /*
                How to get the url for icon?

                1. Use your terminal to go to gtk-3.0 sub-directory inside your gtk theme directory, 
                   `/usr/share/themes/<YOUR-GTK-THEME>/gtk-3.0/` NOTE: also works for `~/.themes`

                   EXAMPLE: I use arc-dark theme, so for me it's `/usr/share/themes/Arc-Dark/gtk-3.0/`
                

                2. View contents of either `gtk.css` or `gtk-dark.css`, for me it looks like this
                   
                   `@import url("resource:///org/gnome/arc-theme/gtk-main-dark.css");`
                   
                   the important part is `url("resource:///org/gnome/arc-theme/")`


                3. run `gresource list <NAME-OF-GRESOURCE-FILE>.gresource` in the same directory to 
                   list all files inside of it or even easier, pipe it to grep to pick the icon you want.

                   EXAMPLE: `gresource list gtk.gresource | grep radio-checked-dark` 
                   
                   RESULT: `
                            /org/gnome/arc-theme/assets/radio-checked-dark.png
                            /org/gnome/arc-theme/assets/radio-checked-dark@2.png
                           `
                   The @2 variant is a an additional scale 
                   SEE: https://docs.gtk.org/gtk3/css-overview.html#using-themed-icons-in-css
                   
                   I'm not concerned so I'll just pick the intended one


                4. Merging the two would be:
                   
                   `url("resource:///org/gnome/arc-theme/assets/radio-checked-dark.png")`
             */

            /*
                Scale 2 can be added through:

                `-gtk-icon-source: -gtk-scaled(url(...), url(..<SCALE-2>..));`
             
             */

            -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/radio-unchecked-dark.png"));

            &:checked {
                -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/radio-checked-dark.png"));
                &:hover {
                    -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/radio-checked-selected.png"));
                }
            }
            
            &:hover {
                -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/radio-unchecked-selected.png"));
            }
        }
        
        check{
            // same as before, min-width and min-height are required for the icon to be rendered
            min-width: 1em;
            min-height: 1em;
            padding-right: 0.5em;
            -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/checkbox-unchecked-dark.png"));

            &:checked {
                -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/checkbox-checked-dark.png"));
                &:hover {
                    -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/checkbox-checked-selected.png"));
                }
            }
            
            &:hover {
                -gtk-icon-source: -gtk-scaled(url("resource:///org/gnome/arc-theme/assets/checkbox-unchecked-selected.png"));
            }
        }

        &:disabled label { color: $trayDisabled; }
		&:hover {
            arrow { color: $bg; }
			background-color: $accentColor;
			color: $bg;
		}
	}

	separator {
		background-color: $bg;
		padding-top: 0.06em;

		&:last-child {
			padding: unset;
		}
	}
}

So it just becomes a matter of getting the icon theme and GTK theme

As for the problem with rounded-corners, I run river (wayland compositor) and it doesn't give control over compositing as it will require significant change to code and the developer decided to delay eye-candy features, but I found out that changing the color from hex #282828 to rgba rgba(40,40,40,0.99) (Notice that i used 0.99 for alpha value) gives me some kind of rounded corners (although not truly rounded).

Also, you'll find the tooltip of systray icons transparent ... to control that you can use tooltip CSS selector

tooltip {
    background-color: $altBgRadius;
    border-radius: $borderRadius;
    color: $white;
}

[cry0x11]

And if someone is interested, here are the variables I use in my SCSS file

$bg: #282828;
$white: #d4be98;
$grey: #5a524c; 
$red: #ea6962;
$yellow: #d8a657;
$green: #a9b665;
$blue: #7daea3;
$cyan: #89b482;
$purple: #d3869b;

$accentColor: $red;
$altBg: #45403d;
$altBgRadius: rgba(69, 64, 61, 0.99);
$trayDisabled: #7c6f64;

$borderRadius: 0.6em;

[dacyberduck]

Appearance of systray in my system.

* {
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  font-family: "Dina NF";
  font-size: 12pt;
  label {
    color: #ebdbb2;
  }
  button {
    background: #1c1c1c;
  }
  button:hover label {
    color: #8ec07c;
  }
  tooltip {
    background-color: #1c1c1c;
    color: #ebdbb2;
  }
  trough {
    background: #4c4c4c;
    min-height: 4px;
    min-width: 50px;
    border-radius: 15px;
    highlight {
      background: #8ec07c;
      border-radius: 15px;
    }
  }
}

.systray {
  background-color: #1c1c1c;
  color: #ebdbb2;
  border-radius: 0;
  * {
    border-radius: 0;
    padding: 2px;
    box-shadow: none;
    margin: 0;
  }
}

[MathiasPius]

I stumbled upon this issue because I was seeing weird inconsistent behaviour when using all: unset with eww, using two monitors like so:

eww daemon &

eww open --screen 0 p --arg target-monitor=1
eww open --screen 1 s --arg target-monitor=0

Despite using identical defwindow and css for the two windows, one of them would have weird padding issues, and reloading would sometimes fix the issue, and sometimes break one of the windows.

I ended up solving it by using open-many to achieve the same result:

eww open-many tab:p tab:s \
    --arg p:screen=0            \
    --arg p:target-monitor=1    \
    --arg s:screen=1            \
    --arg s:target-monitor=0

I'm thinking maybe the * { all:unset } clause fucks with either the way GTK or Eww handles styling when opening multiple windows like that, introducing a sort of race condition or conflicting style application, causing the inconsistency.