Search Unity

Yet another Default.uss thing...

Discussion in 'UI Toolkit' started by MoruganKodi, Mar 3, 2021.

  1. MoruganKodi

    MoruganKodi

    Joined:
    Feb 11, 2015
    Posts:
    79
    Default.USS once again. Not even in the mood for yet another constantly recurring Default.USS issue.

    Default.USS prevents style inheritance for various elements.
    Default.USS still causes various issues with overloading certain styled (most notably with text elements)
    Default.USS defines default text values directly on label/button/other text element classes, instead of a global declaration on the root - this breaks and prevents inheritance down the heirarchy of custom classes. overloading these classes directly has been problematic on numerous occasions.

    Default.USS rules still for some reason take precedence over a user's stylesheet regardless of order of declaration, it's almost impossible to touch .unity-label in a local hierarchy without it causing all colors of classes attached to the same element to be outright ignored down the hierarchy - regardless of what order they defined in, even refusing to acknowledge `!important. This behavior is nonexistent in CSS.

    A basic example of Default.USS implementation in which workarounds had to be forced - in this case: specifically related to inheritance. The only way to avoid the issues here is to never include Default.USS to begin with.

    Code (XML):
    1.  
    2. <ui:UXML xmlns:ui="UnityEngine.UIElements">
    3.     <ui:VisualElement class="fw-state">
    4.         <ui:Label name="label-state-name" text="Build Phase" class="fw-state-label"/>
    5.         <ui:VisualElement class="fw-remaining-label">
    6.             <!-- forced workaround: inheritance -->
    7.             <ui:Label text="Rmaining" class="fw-gray"/>
    8.             <ui:Label name="label-time-remaining" text="00" class="fw-remaining-count"/>
    9.             <!-- forced workaround: inheritance -->
    10.             <ui:Label text="seconds" class="fw-gray"/>
    11.         </ui:VisualElement>
    12.     </ui:VisualElement>
    13. </ui:UXML>
    14.  
    Code (CSharp):
    1.  
    2. .fw-state,
    3. .fw-gray  /* <-- exists because Default.USS, many rules defined on .fw-state are not inherited down the heirarchy */
    4. {
    5.     font-size: 20px;
    6.     /*
    7.         Once again, Default.uss strikes again!!!
    8.     */
    9.     color : rgb(255, 255, 255);
    10.     -unity-font-style    : bold;
    11. }
    12.  
    13. .fw-state-label
    14. {
    15.     color : rgb(255, 0, 0) !important;
    16.     background-color : rgba(0,0,0,0.75);
    17. }
    18.  
    19. .fw-remaining-label
    20. {
    21.     flex-direction: row;
    22. }
    23.  
    24. .fw-remaining-count
    25. {
    26.     /*
    27.         Q: required because we dont even inherit parent container's font size, why?
    28.         A: default.uss, as usual
    29.     */
    30.     font-size : 20px;
    31.     color: red;
    32. }
    33.  
    If I was to declare ".fw-state .unity-label" with a color at the beginning of file, ALL COLORS for all other classes attached to labels are ignored down the heirarchy - even when using !important, you literally cannot apply a color to `.fw-state`, because no label affected by default.uss will inherit those values:

    The reason? You defined the defaults on the element classes themselves instead of at the root of the document - this is literally one of the primary reasons defaults in html are applied to `body` or via `*` - to allow inheritance and and overloads down the heirarchy.

    The problem defined by this screenshot: text elements define certain properties directly on their classes which prevents USS inheritance for these properties in a hierarchy where a different font size may be defined up the same branch by a parent container:
    upload_2021-3-3_22-14-34.png

    A custom hand written Default.USS replacement matching unity default styles written with global defaults at the root element is the only way to get around these issues - kicking default.uss out the door while yelling "good riddance" additionally solves every single overloading and inheritance related issue I have ever encountered. Default.USS works fine for editor, but it isn't particularly friendly anywhere else.
     

    Attached Files:

  2. alexandred_unity

    alexandred_unity

    Unity Technologies

    Joined:
    Dec 12, 2018
    Posts:
    43
    Thanks for reporting it. This is a known issue that we are currently addressing
     
  3. alexandred_unity

    alexandred_unity

    Unity Technologies

    Joined:
    Dec 12, 2018
    Posts:
    43
    Hi Kerihobo,
    this has been addressed months ago. Do you experience the exact same problems?
     
  4. Kerihobo

    Kerihobo

    Joined:
    Jun 26, 2013
    Posts:
    65
    I'll remove my previous comment. At the time I didn't understand about the specificity, thanks.
     
  5. JulianNeil

    JulianNeil

    Joined:
    Jun 27, 2022
    Posts:
    78
    Hi @MoruganKodi,
    Can you share your custom hand written Default.uss by any chance? I'm struggling with the same issue.
     
  6. huwp

    huwp

    Joined:
    May 22, 2013
    Posts:
    33
    Here's what I've found to be the minimum to get things working:
    Code (CSharp):
    1. /* this is the official class definition, required for correct layout */
    2. .unity-ui-document__root {
    3.     position: absolute;
    4.     top: 0;
    5.     bottom: 0;
    6.     left: 0;
    7.     right: 0;
    8. }
    9.  
    10. .unity-text-element {
    11.     /* replace with whatever font asset you have available */
    12.     -unity-font-definition: resource('LiberationSans SDF');
    13.  
    14.     /* default font size has to be defined */
    15.     font-size: 12px;
    16. }