Unity's USS Varible Reference

Unity Engine
1

Hi,

I have a TextField, I wish for the background to be transparent until the user hovers over the field.

I had this working in 2019.2, but since 2019.3 Text Fields (and friends) background are no longer images, but background images.

2019.2:

#unity-text-input
{
    background-image: none;
}
:hover>#unity-text-input
{
    background-image: resource("TextField.png");
}
:focus>#unity-text-input
{
    background-image: resource("TextField focused.png");
}

2019.3:

#unity-text-input
{
    background-color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
}
:hover>#unity-text-input
{
  ??
}
:focus>#unity-text-input
{
  ??
}

I can change the backgrounds colour, so the alpha is 0, which achieves the same effect. However the issue comes when I want to show the background colour again. I could just use the UI Element Debugger, to get the color for both Pro and non-pro themes. But I am curious if I can use the USS Variables Unity Uses to color the background to the desired colour.

Thanks in advance

2

Hi,

Along with the USS var(…) feature, we will have a public list of Unity-defined styles variables that can be used in your own style rules. Stay tuned for 2020.1!

In the mean time, I do suggest using values you find with the UIE debugger.

Sebastien

1 Like
3

That’s great new Sebastien!

I now would like to be cheeky and ask if there are any plans to release the icon default resources paths/names. for example:
the USS code to get the hamburger: background-image: resource("pane options.png");
I’ve literally spent hours of my life using third party tools to find out what Unity Icons are called.

I’m a firm believer in making my tool UI look like Unity made it (you can take that as a compliment), as it helps the user feel familiar and use it with ease.