Hey everyone,
I am working on a new frontend design where i have button cards that, on double click, toggle the visibility of conditional cards that also include several button cards in them.
Let’s call them trigger cards:
Double click on the ones with the chevrons, will open the conditional card (let’s call them container cards) under them, like this:
I have created input_booleans that act as toggles for the visibility of the container cards, and interlocked them, so only one “container card” is viewable at once… You get the idea
What i’m trying to do is find a way to easily style those container cards to differentiate them from the rest.
As you can see i have already applied some styles (those teal lines).
On the trigger card (Veranda) it’s easy, as it’s only one card and i am conditionally applying the styles for the bottom-border, whenever the equivalent input boolean is on:
styles:
card:
- border-bottom: |
[[[
if (states['input_boolean.toggle_visibility_up_veranda_lights'].state == 'on')
return " var(--border-bottom-toggle-header)";
return "none";
]]]
Created a style in my theme and getting the bottom border there.
On the other hand, the container cards are difficult.
In the case above, where it is only one line i have applied the top border to all the cards (non-conditionally since they are only visible when on) and i had this idea of a top border.
It all looks good when it’s only one line, and when there’s no other cards below.
But in the example below, where other cards follow, its very hard to understand where the container card ends:
Those cards are all visible all the time, and they turn to this when the Living Room container card is toggled:
As you can see, it’s difficult to differentiate where the container cards ends, and those stats cards begin.
I know i can go and edit every individual button in the container card and have a nice effect. Style the top ones, bottom ones and left and right ones differently and have a nice effect (borders or different bgs). But, this involves a huge effort and if i ever move a card or a device, ill need to do it all over again.
The card structure is like this:
- Conditional card
- Vertical stack
- Hortizontal stack
- Hortizontal stack
- Hortizontal stack
I have tried to apply card_mod styles to either the conditional card, or the vertical stack, but i am either doing something wrong or they just don’t work on them, or get inherited to the button cards under them.
Is there any way to achieve this?
Any type of container that i could enclose the card in and apply some styles to the whole bunch of the toggle-able cards?
Ideally, something like a border, or shadow around the whole box of the container or vertical card would be great, so i wont have to add may lines of code on my config,
Thanks in advance!
Hope i explained it sufficiently, please let me know if i’m not making any sense.