I am using the rollershutter on a canvas like here:
and I like to style the widget in a different color. As the white background color off the white rounded rectangle stands out too much I would like to make it a bit transparent or greyish.
Frow what I understood I can add a style parameter to the config of the card which I did for the outer card rectangle to make it red (which will not stay but just shows what I did so far):
My question is how I can change the inner white rectangle of the widget via this config to achieve a “background-color: lightgray;” so it would appear as follows (I tweaked the style with the browser dev tools to show what I intend to do):
The background color for the controls are still just set by the f7 variables. So, in the card style you need to set the --f7-button-bg-color and the --f7-segmented-strong-bg-color variables.
Question: how do I find out which vars are used. I tried looking into the css source but I can’t figute it out. Where do you get the info from? What if I wanted to give it a thin border for example (without asking you all the time )
If it’s not one I’m familiar with from my own previous struggles, then I usually just quickly check the component vue file to make sure that there isn’t a direct OH setting for the style I’m trying to control, and if there is not, then I bring up the F7 css doc:
(segmental buttons are under button and don’t have their own doc page).
By the way I added this to the yaml of the widget. However, as a sidenote, this can be even done on the page level and it then applies to all widgets for the whole page.
Finally I set it to on the page level to
style:
background-color: black
--f7-card-bg-color: rgba(240, 240, 240, 0.2)
--f7-button-height: 7px