I had in v0.17 a transparent drawer and wasn’t able to recreate this in v1.
Normal things, like dialogs I do with something like this.
style=“background: rgba(90, 60, 90, 0.6) !important;” inline color=“white” text-color=“primary”>

If I try this on btn dropdown or drawer it just get “milky”. Looks like there are some solid backgrounds I can’t address.

Is there a solution?

Thanks for your example! Helped me a lot, also the codepen was very helpful.

As not that appreciated workaround I tried without success:
<q-td slot=“body-cell-color1” slot-scope=“props” :props=“props” :color=“props.value”>

also

<q-badge color=“props.value”>{{ props.value }}</q-badge>

did not led to the desired result. What colorinformation is needed, if not something like #46ff3c?

What would be the best approach to colorize specific table data. The table itself and its structure is generated.
E.g. I do have some table data, containing only color information; also for positive negative numbers this would be great.
Valid solutions would be to colorize the td background - but than again, the information is only in the data and varies from field to field.
I also can imagine to put some kind of badge into it, but as far as I know, the information in the table can’t be components. This also makes absolute sense!
So which options are left?

I don’t want to colorize the structure itself, even if this would be great. But I don’t wand to color every second column, row or alike. I really need this specific for the field.

Will try the bg image approach. I think this could be my solution. Will report back.

One specific question / feature request I do have: How would I do it that one section is shown with mouse out and “effects out” - while another section “effects in” with mouse over.
Would be great for labels as in titles and descriptions.

Maybe “inversed transition” is the key word here?

And yes, you can have a look in the source. As being fullstack including devops myself, I do have a wide range of tech and information need to know. The better the documentation, the less hazzle do people like me have. And I bet, I am not the only one not having 10 years frontend experience or specialization in node / vue / css and companion techs.

As implicit in using your flashcards, I think they are great.
May I ask for an improvement in the example section? It would be great to see the source code of the different examples, so I can easier work with them. Reverse engineering is so cumbersome ;).
( https://quasarframework.github.io/app-extension-qflashcard/demo/dist/spa/#/ )

Even for your ONE example, I need to figure out the style myself. Your work IS great, your documentation isn’t. But in adoption of tech, documentation is a big factor. And from a creators perspective, everything is known, everything is straight forward - if it wasn’t the creator wouldn’t have done it this way. Implicit knowledge is the keyword here.

Talking specifically of your extensions: not being documented at least in a intermediate manner, it hurts your great results. The best tool won’t be used if only few people are able to understand how it works and have to be used.

What would be the responsive and working way to fit an image into the flashcard?
It mostly ignores the image style and is only shown partly - i some places. Seems to dependof elements outside of it. Any tipps?

Also img works, q-img not.

Is there some functionality within quasar or vue to get the sizfe of an element, analog to $q.screen.width for screen?
Example: If a screen contains a container I would like to have its size in pixels. How would I do this?

thx! your support is great.