Broken CSS after updating from 2.24.2 to 3.0.2

[Kowersky]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

notification_defaults = {
        'timeout': 500,
        'group': True,
        'badgeClass': "Essa"
        }
    global notification_default
    notification_default = functools.partial(ui.notification, **notification_defaults)

ui.add_head_html("""
            .bg-positive, .bg-negative, .bg-info, .bg-warning { border-radius: 25px !important; background: transparent !important; backdrop-filter: blur(15px) !important;}
            .bg-positive { border: 2px solid #21ba45 !important; box-shadow: 0px 3px 15px 0px #21ba45; }
            .bg-positive .q-notification__content { color: #21ba45 !important; }
            .bg-negative { border: 2px solid #FF4D4F !important; box-shadow: 0px 3px 15px 0px #FF4D4F; }
            .bg-negative .q-notification__content { color: #FF4D4F !important; }
            .bg-info { border: 2px solid #31ccec !important; box-shadow: 0px 3px 15px 0px #31ccec; }
            .bg-info .q-notification__content { color: #31ccec !important; }
            .bg-warning { border: 2px solid #f2c037 !important; box-shadow: 0px 3px 15px 0px #f2c037; }
            .bg-warning .q-notification__content { color: #f2c037 !important; }
            .q-tab__label { font-size: unset; font-weight: unset;}
            .q-notification { position: sticky; overflow: hidden; }
            .q-notifications__list--bottom { margin-bottom: 1.5% !important; gap: 15px; }
            .q-notification::before{content:'';position:absolute;top:0;left:0;height:100%;width:0;background:#00494d95;z-index:-1;animation:progress 3.5s linear forwards;border-radius:23px}
            .q-notification__badge{padding: 0px !important;}
    """)
    
    ui.button('Odśwież Listę', on_click=[notification_default("Nie wykryto okien Minecrafta", type="warning").props('progress')]).classes("w-48 text-lg rounded-[35px]").props("no-caps color=primary unelevated outline ")

Description

Hi! I recently updated Quasar from version 2.24.2 to 3.0.2 and encountered a problem with CSS malfunctioning. Specifically, for some elements for which I had custom CSS styles, the built-in classes of the Quasar framework now override my custom rules, which was not the case before. Here is an example illustrating this issue:
Before:

After:

Css (3.0.2):

NiceGUI Version

3.0.2

Python Version

Python 3.13.7

Browser

Edge

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @Kowersky

It's you again, I know you from your extensive styling of NiceGUI.

High-level speaking, in 3.0 we use CSS layers, and in #5171 our intention is to fully leverage CSS layering to put Quasar's !important styles into less powerful CSS layer, such that user already have power over Quasar.

But in your code ui.add_head_html on the context of 3.0's CSS structuring, it restore the importance of the Quasar styles instead.

I think this is an expected collateral breaking change in 3.0, and it should not be unfixable, but will require user code changes. Still, we may try and work on better documentation.

When I have time let me try and work things out, but right now I'm unavailable.

[Kowersky]

Haha, yes, it's me again. Thanks for the reply, I'll tinker with it some more and see if I can fix it myself.

[evnchn]

You should have joined our 3.0 release discussion and maybe the NiceGUI discord where we have the off-topic chat. We need you.

[Kowersky]

You should have joined our 3.0 release discussion and maybe the NiceGUI discord where we have the off-topic chat. We need you.

I didn't join the discussion, but I've been on Discord for a while now :)

[falkoschindler]

Luckily the fix is rather simple. Just move your Quasar CSS into the new "quasar" layer:

ui.add_css('''
    @layer quasar {
        .bg-positive, .bg-negative, .bg-info, .bg-warning { border-radius: 25px !important; background: transparent !important; backdrop-filter: blur(15px) !important;}
        .bg-positive { border: 2px solid #21ba45 !important; box-shadow: 0px 3px 15px 0px #21ba45; }
        .bg-positive .q-notification__content { color: #21ba45 !important; }
        .bg-negative { border: 2px solid #FF4D4F !important; box-shadow: 0px 3px 15px 0px #FF4D4F; }
        .bg-negative .q-notification__content { color: #FF4D4F !important; }
        .bg-info { border: 2px solid #31ccec !important; box-shadow: 0px 3px 15px 0px #31ccec; }
        .bg-info .q-notification__content { color: #31ccec !important; }
        .bg-warning { border: 2px solid #f2c037 !important; box-shadow: 0px 3px 15px 0px #f2c037; }
        .bg-warning .q-notification__content { color: #f2c037 !important; }
        .q-tab__label { font-size: unset; font-weight: unset;}
        .q-notification { position: sticky; overflow: hidden; }
        .q-notifications__list--bottom { margin-bottom: 1.5% !important; gap: 15px; }
        .q-notification::before{content:'';position:absolute;top:0;left:0;height:100%;width:0;background:#00494d95;z-index:-1;animation:progress 3.5s linear forwards;border-radius:23px}
        .q-notification__badge{padding: 0px !important;}
    }
''')

ui.button('Notify', on_click=lambda: ui.notify('Nie wykryto okien Minecrafta', type='warning'))

[Kowersky]

I wouldn't have figured that out on my own. You've been a great help, thank you.