This PR tries to avoid the confusion discussed in #726, #1295, #2265, where child elements of ui.card loose shadow and borders. This happens due to Quasar's CSS definitions, which are optimized for "tight" cards. NiceGUI adds some padding and gap by default, so shadow and borders seem to be missing for no obvious reason.

Unfortunately we can't undo Quasar's CSS setting. But I found a way to make them ineffective by inserting another div layer, catching Quasar's CSS setting, while the actual card content isn't affected.

I tested with the following scenarios:

with ui.card().classes('bg-blue-100'):
    with ui.card().classes('bg-green-100'):
        ui.label('Hello world!')

with ui.card().classes('no-shadow border-[1px]'):
    ui.label('See, no shadow!')

with ui.card().tight():
    ui.image('https://picsum.photos/id/684/640/360')
    with ui.card_section():
        ui.label('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ...')

with ui.card():
    ui.table(
        [{'name': 'age', 'label': 'Age', 'field': 'age'}],
        [{'age': '16'}, {'age': '18'}, {'age': '21'}],
    ).props('flat bordered')

Only when working with "tight" cards, the result is suboptimal. But I guess it's more intuitive to remove unwanted borders in this case than to wonder why they magically disappear.

with ui.card().tight():
    with ui.card().classes('border'):
        ui.label('Hello world!')
    with ui.card().classes('border'):
        ui.label('Hello world!')