styling for system tray

[sagax]

Checklist before submitting an issue

• [X] I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
• [X] I have specifically verified that this bug is not a common user error
• [X] 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

Examples of styling the context menu for icons in the system tray are needed, please

Reproducing the issue

No response

Expected behaviour

No response

Additional context

No response

Platform and environment

Linux, X11, Xmonad, openSUSE Tumbleweed, X64

[hypernova7]

https://github.com/elkowar/eww/issues/1161#issuecomment-2295482424

[hypernova7]

Here is something more complete, these styles can be used to add an arrow to the options that are submenus

menu {
  padding: 5px;
  background-color: $black;
  color: #fff;

  menuitem {
    border-radius: 5px;
    padding: 8px 12px;
    background-color: transparent;
    transition: all .2s ease;

    &:backdrop {
      background-color: $background;
    }
  }

  menuitem arrow {
    min-width: 16px;
    min-height: 16px;

    &:dir(ltr) {
      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
      margin-left: 10px;
      margin-right: 0;
    }
  }

  menuitem:hover {
    background-color: $blue;
  }
}

[sagax]

It's work, thanks.

It would be great to create a page about widget styling and widget parts.

[kaii-lb]

what about styling the "hover over app to show app name" popup?

[noahpolimon]

an even more complete styling:

menu {
    padding: $default-spacing;
    background-color: $background-color;
    color: $foreground;
    border-radius: 5px;

    menuitem {
        border-radius: 5px;
        padding: $border-size;
        background-color: transparent;
        transition: all 0.2s ease;

        &:backdrop {
            background-color: $background-color;
        }
    }

    menuitem arrow {
        min-width: 16px;
        min-height: 16px;

        &:dir(ltr) {
            -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
            margin-left: 10px;
            margin-right: 0;
        }
    }

    menuitem:hover {
        background-color: $secondary-color;
    }

    menuitem:disabled label {
        color: #555;
    }

    separator {
        background-color: $secondary-color;
        min-height: 2px;
        margin: 5px 0px;
        border-radius: 5px;
    }
}

[hypernova7]

most complete version with check fields

menu {
  border-radius: 15px;
  background-color: $surface0;
  border: 2px solid $blue;
  color: #fff;

  separator:not(:last-child) {
    margin: 0 8px;
    min-height: 2px;
    background-color: $surface1;
  }

  menuitem {
    margin: 0px;
    border-radius: 15px;
    background-color: transparent;
    transition: all 0s ease-in;
    padding: 8px;

    &:hover {
      color: $surface1;
      background-color: $text;

      arrow {
        color: $surface1;
      }

      check:checked {
        color: $text;
      }
    }

    arrow {
      min-width: 16px;
      min-height: 16px;

      &:dir(ltr) {
        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
        margin-left: 10px;
        margin-right: 20px;
      }
    }

    check:checked {
      padding-left: 7px;
      margin-right: 10px;
      min-width: 20px;
      min-height: 15px;
      background-color: $blue;
      -gtk-icon-source: -gtk-icontheme("dino-tick-symbolic");
      color: $surface1;
    }

    &:backdrop {
      background-color: $mantle;
    }
  }
}

[noahpolimon]

most complete version with check fields

menu { border-radius: 15px; background-color: $surface0; border: 2px solid $blue; color: #fff;

separator:not(:last-child) { margin: 0 8px; min-height: 2px; background-color: $surface1; }

menuitem { margin: 0px; border-radius: 15px; background-color: transparent; transition: all 0s ease-in; padding: 8px;

&:hover {
  color: $surface1;
  background-color: $text;

  arrow {
    color: $surface1;
  }

  check:checked {
    color: $text;
  }
}

arrow {
  min-width: 16px;
  min-height: 16px;

  &:dir(ltr) {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
    margin-left: 10px;
    margin-right: 20px;
  }
}

check:checked {
  padding-left: 7px;
  margin-right: 10px;
  min-width: 20px;
  min-height: 15px;
  background-color: $blue;
  -gtk-icon-source: -gtk-icontheme("dino-tick-symbolic");
  color: $surface1;
}

&:backdrop {
  background-color: $mantle;
}

} }

Hi thank you for this! spent a few hours trying to make sense of the GTK CSS doc to find those myself.

There is also styling for radio buttons for those who need it:

menuitem radio {
    &:checked {
        -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic");
    }
    -gtk-icon-source: -gtk-icontheme("radio-symbolic");

}

[noahpolimon]

@hypernova7 btw, is there any way to make all the icons the same size?

[hypernova7]

@noahpolimon The tray widget has the icon-size attribute.

(tray :icon-size 16 :spacing 4)

[noahpolimon]

@hypernova7 sorry, i meant the icons in the menus, not the tray

[hypernova7]

@noahpolimon try this https://askubuntu.com/questions/201987/how-do-i-force-a-16x16-icon-size-for-toolbar-icons-in-gtk-3 i think this work for gtk 4 too