[Runtime] Unable to override .unity-button font size.

In a project where I am implementing common dialog, as well as a common mvc structure,
I am loading first, the default.uss asset, followed by loading my own framework.asset.

However, the default stylesheet defines unity-button with a font size with 12px, and I am trying to default my UI to 16px.

No matter what approach I use (outside of overriding a button directly, inline), I cannot get UIToolkit to apply my font-size override, even though my stylesheet is loaded and applied after the default style. And such the unity-button class always renders with 12px fonts.

In code, I am applying the two stylesheest like this, applied to a global root visual element via a UIDocument.

var baseStyle = styleSettings.BaseStyle;      // currently: default.uss
var defaultStyle = styleSettings.DefaultStyle;   // currently: framework.uss
var gameStyle = styleSettings.GameStyle;      // currently: null

if (baseStyle    ) root.AddStyleSheet(baseStyle);
if (defaultStyle ) root.AddStyleSheet(defaultStyle);
if (gameStyle   )  root.AddStyleSheet(gameStyle);

I also have a setting for applying a default font, and a global default font size via a configuration asset, currently set to 16px:

var defaultFont = styleSettings.defaultFont;
if (defaultFont)
    root.SetFont(new StyleFont(defaultFont));
root.style.fontSize = new Length(styleSettings.defaultFontSize, LengthUnit.Pixel);

Because .unity-button defines 12px font size, it will ignore my global-font size.
So I attempted to instead, override this inside Framework.uss, but i do not wish to force it using !important
I have tried to force it globally in my USS with the following at the beginning of my stylesheet. The buttons on my dialogs have both fw-button and unity-button classes assigned.
All other VisualElements respect my desired font size.

There are absolutly no other cases within my USS where I have attempted to set font size.

*,
* . *,
* .fw-button,
* .fw-button *,
.unity-button,
* .unity-button
{
    -unity-font-size: 16px;
    font-size: 16px;
}
/* .unity-button font size refuses to override at the above 16px, it stays permanently at 12px */

6339660--704214--upload_2020-9-23_9-55-52.png

The Accept and Cancel dialog buttons as they appear at runtime:

UIToolkit Debugger shows both stylesheets have been loaded successfully, and clearly shows the above rules are recognized:

But the button still refuses to to override it’s font-size: as reported by both visual representation and the debugger.
6339660--704226--upload_2020-9-23_10-15-30.png

SIDE: Can we please get a copy of default.uss.asset in text form (default.uss) as it is not possible to copy and edit it’s values (because it is a generated asset). Or perhaps a method of dumping all the rules of an existing stylesheet asset into a new text-based USS stylesheet

Can you paste the code for your StyleSettings class? I tried to reproduce the issue you’re encountering on my end and everything works smoothly

StyleSettings is just a serialized class contained inside of a ScriptableObject containing configuration. It has no logic in it.

6347421--705444--upload_2020-9-25_8-44-24.png

the code I pasted in my OP is run in a static method which builds my global containers.
And as mentioned in my OP, I am assigning **default.uss.asset** first, and then loading my other stylesheet after.

I am applying these stylesheets only to the root, which is the VisualElement objtained from a UIDocument .

My entire initialization for my global containers is this:

[RuntimeInitializeOnLoadMethod(RuntimeInitializeLoadType.BeforeSceneLoad)]
internal static void CheckInitialized()
{
    if (container != null)
        return;

    GameObject go;
    container = (go = new GameObject(Global.GetResourceName("UIElements")))
        .AddComponent<UIDocument>()
        .DontDestroyOnLoad();

 
    // UIE version of event system.
    go.AddComponent<EventSystem>();
    if (!go.GetComponent<InputWrapper>())
        go.AddComponent<InputWrapper>();

    var uiSettings                  = Configuration.GameSettings.UISettings;
    var styleSettings               = uiSettings.StyleSettings;
 
    go.hideFlags                    = HideFlags.NotEditable;
    defaultPanelSettings            = CreateDefaultPanelSettings();
    currentPanelSettings            = styleSettings.OverridePanelSettings;
    container.panelSettings         = currentPanelSettings ? currentPanelSettings : defaultPanelSettings;
    root                            = container.rootVisualElement;
    root.style.flexGrow             = new StyleFloat(1);
    root.focusable                  = false;

    var defaultFont                 = styleSettings.defaultFont;
    if (defaultFont)
        root.SetFont(new StyleFont(defaultFont));
    root.style.fontSize = new Length(styleSettings.defaultFontSize, LengthUnit.Pixel);
    var baseStyle                   = styleSettings.BaseStyle;      // currently: default.uss
    var defaultStyle                = styleSettings.DefaultStyle;   // currently: framework.uss
    var gameStyle                   = styleSettings.GameStyle;      // currently: null

    if (baseStyle   )               root.AddStyleSheet(baseStyle);
    if (defaultStyle)               root.AddStyleSheet(defaultStyle);
    if (gameStyle   )               root.AddStyleSheet(gameStyle);

    root.Add(userContainer          = GetContainer(Layout.UserContainerName));
    root.Add(gamestateContainer     = GetContainer(Layout.GameStateContainerName));
    root.Add(popupContainer         = GetContainer(Layout.PopupContainerName));
    root.Add(dialogContainer        = GetContainer(Layout.DialogContainerName));
    root.Add(loadingContainer       = GetContainer(Layout.LoadingContainerName));

    popupContainer                  . Add(blockingGraphic = CreateBlockingGraphic());
}

GetContainer is just this:

static VisualElement GetContainer(string name)
{
    var container                               = new VisualElement();
    container.name                              = name;
    container.style.flexGrow                    = 1;
    container.style.position                    = Position      .Absolute;
    container.style.left                        =
    container.style.right                       =
    container.style.top                         =
    container.style.bottom                      = 0;
    container.pickingMode                       = PickingMode   .Ignore;
    container.style.alignContent                =
    container.style.alignItems                  = Align         .Center;
    container.style.flexDirection               = FlexDirection .Row;
    container.style.justifyContent              = Justify       .Center;
    return container;
}

CreateDefaultPanelSettings only creates a default Panel Settings Asset in memory, with no stylesheet assigned.

CreateBlockingGraphic only creates an empty visual element which is automatically positioned behind Popups, Messageboxes, dialogs and such to block interaction to anything behind it.

Layout contains mainly just UXML/USS names and class names, and some extension methods.

No other code anywhere in my project/framework attempts to adjust font size in any way.

All of my VisualElements should be getting their styles from the root: Which is working for everything else:

This screenshot is with no font size defined in any of my own stylesheets, a Dialog’s Button container, which is inheriting the default font settings:

Everything except for **unity-button** is rendering at 16px, as my framework.uss overrides are still being ignored by the buttons.

Just in case, here is my Framework.uss in it’s current form:

/*
    Attempting to override .unity-button font size
    in every way I can think of without using `!important`
*/

*,
* . *,
* .fw-button,
* .fw-button *,
.unity-button,
* .unity-button
{
    -unity-font-size: 16px;
    font-size: 16px;
}

/* .............................................. */

.fw-border-outer
{
    border-left-color: rgba(0, 0, 0, 0.75);
    border-right-color: rgba(0, 0, 0, 0.75);
    border-top-color: rgba(0, 0, 0, 0.75);
    border-bottom-color: rgba(0, 0, 0, 0.75);
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.fw-border-inner
{
    border-left-color: rgba(255, 255, 255, 0.5);
    border-right-color: rgba(255, 255, 255, 0.5);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.5);
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.fw-header
{
    -unity-font-style: bold;
    background-color: rgb(125, 125, 128);
    border-bottom-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.75);
    flex-shrink: 0;
    min-height: 16px;
    flex-wrap: wrap;
    flex-grow: 0;
}

.fw-content
{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    flex-grow: 1;
}

.fw-dialog-buttons
{
   
}

Label
{
    height: 24px;
}

/*
.unity-disabled
{
    opacity: 0.5;
}
*/

/*
Button
{
    background-image: url('/Assets/Framework/Content/Textures/Generic/t_VerticalGradient3.png');
    -unity-background-image-tint-color: rgba(255, 255, 255, 0.1);
    margin: 2px;
    padding: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.25);
    -unity-text-align: middle-center;
    -unity-font-style: bold;
}

Button:hover
{
    border-color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 0.5);
}

Button:active
{
    border-color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}
*/
/*
    Modals
*/
.fw-modal .fw-content
{
    border-top-color: rgba(255, 255, 255, 0.5);
    border-top-width: 1px;
    flex-grow: 1;
    min-width: 400px;
    min-height: 100px;
}

.fw-modal .fw-header
{
    -unity-text-align: upper-center;
}

.fw-modal .fw-border-outer
{
    flex-grow: 1;
}

.fw-modal .fw-border-inner
{
    flex-grow: 1;

}

.fw-modal
{
    background-color: rgb(200, 200, 200);
}

.fw-header Label
{
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: rgb(255, 255, 255);
}

.fw-button-container
{
    justify-content : center;
    flex-direction  : row-reverse;
}
.fw-button-container .fw-button
{
    padding: 3px;
    min-width: 100px;
}

.fw-messagebox .fw-messagebox-message
{
    -unity-text-align: middle-center;
}
MessageBox, .fw-messagebox
{
    min-width: 0px;
    min-height: 0px;
}
ProgressBar, .fw-progressbar
{
    /* border-width: 1px; */
    /* border-color: rgba(255, 255, 255, 0.5); */
   
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.25);
    border-bottom-color: rgba(255, 255, 255, 0.75);
    border-right-color: rgba(255, 255, 255, 0.75);
}

.fw-progressbar .fw-progressbar-background
{
    background-color: rgba(0, 0, 0, 0.5);
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.25);
    min-height: 24px;
}


.fw-progressbar .fw-progressbar-progress
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: rgba(255, 255, 255, 0.25);
    border-left-color: rgba(255, 255, 255, 0.25);
     
    background-color: rgba(0, 100, 100, 1);
}
.fw-progressbar .fw-progressbar-title
{   
    padding: 0px;
    margin: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    flex-grow: 1;
    -unity-text-align: middle-center;
    color: white;
    -unity-font-style: bold;
}

I decided to create a test project, and tried the following:
(this is tested on both preview-8 and preview-9)
(this was also tested on two seperate computers)
(this is tested on Unity 2020.1.4f1)

using UnityEngine;
using UnityEngine.UIElements;

[RequireComponent(typeof(UIDocument))]
public class TestScript : MonoBehaviour
{
    [SerializeField]
    StyleSheet
        baseStyle,
        overrides;

    private void OnEnable()
    {
        SetupDocument();
    }

    void SetupDocument()
    {
        TryGetComponent(out UIDocument component);
        var root = component.rootVisualElement;
        if (baseStyle) root.styleSheets.Add(baseStyle);
        if (overrides) root.styleSheets.Add(overrides);

        var bt0 = new Button();
        var bt1 = new Button();
        bt0.text = bt1.text = "Some Button";
        root.Add(bt0);
        root.Add(bt1);
    }
}

I then applied default.uss.asset to the base style slot.
I applied the following USS to the overrides slot:
The color applies successfully.
The font size does not.

.unity-button
{
   color: red; /* the RED color is applied successfully */
   font-size: 24px;
   -unity-font-size: 24px; /* the font-size does not apply successully */
}

Result: The font stays at 12px.

I went further and created a custom class: fwbtn and modified the test case:

btn0.AddToClassList("fwbtn");
btn1.AddToClassList("fwbtn");

USS:

.fwbtn
{
    -unity-font-size: 36px;
    font-size: 36px;
}

Result: The font still stays at 12px.

The UIToolkit Debugger shows both stylesheets are loaded, but still ignores the font size defined for .unity-button in my overriding uss.

:expressionless:

I can’t reproduce the issue on my end. Can you report a bug using help>Report a bug and append a small repro sample?

submitted.

1 Like

I did receive a response from the QA side but they basically said _dont use -unity-font-size in **your** **stylesheets.** because it is obsolete, yet_ have made no mention of fixing the rule in unity’s own stylesheets.

So I presume this wont be fixed then, because the **-unity-font-size** rule exists the non-editable default USS, and because the rule exists, I am forced to recreate the entirety of Default.USS by hand using the debugger to recreate every rule - just so we can have a variant of that stylesheet we can actually edit.

Unity closes the ticket with By Design because of course you did.

Hello, I am the one who answer your report, QA is just passing along information :slight_smile:

For posterity let me post it here:

The issue is that the Custom.uss file contains an invalid property, e.g. “-unity-font-size”. That property has been removed a few versions back.
When re-importing the USS file, a warning to that effect should be displayed in the console.
Currently an invalid property such as this one will cause the rule to become “invalid”, so no properties after it will apply.
Removing the “-unity-font-size” property will make “font-size” take its effect.
For users who need to support older versions with their USS files, moving them at the end of the rule should work around that behaviour.

Following this advice, you should be able to override the font-size property in a selector of .unity-button. I modified the Custom.uss file attached in the report and it works fine.

Usually, defining a font-size value on the root of UI will make that value inherited by child elements. But you are encountering a different issue which is that some elements like the Button seemingly have a specificfont-size value in the default.uss style sheets. I will bring this up internally and see if that can be looked at.