Hello to all,
I am seeking for some help with Card Mod as i have made a card that acts like a sidebar. The card itself is inside a conditional card that uses the screen condition to appear only on desktop and also if a helper is “on”. I positioned the card to the left of the screen and it currently looks like this:
For further understanding, here is the code of the card:
type: conditional
conditions:
- condition: screen
media_query: '(min-width: 1024px)'
- condition: state
entity: input_boolean.show_interface_options
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
@media (min-width:100px) {
ha-card {
background: linear-gradient(180deg, rgba(39, 39, 39, 1) 11.2%, rgba(32, 36, 32, 01) 100%);
border-radius: 10px;
position: fixed;
top: var(--header-height);
z-index: 9;
right: 0px;
width: 25%;
height: 100%;
padding: 5px;
}
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Interface Options
- type: entities
entities:
- input_boolean.dashboard_automations
- type: divider
- input_boolean.show_location
- input_boolean.show_person_card
- input_boolean.show_notifications
- input_boolean.show_plex_button
- input_boolean.show_battery_information
- input_boolean.phone_control
- type: divider
- switch.tapo_c210_41a4_privacy
- switch.tapo_c210_41a4_auto_track
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(180deg, rgba(39, 39, 39, 0.93) 11.2%, rgb(32, 36, 32) 100%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
entity: input_boolean.show_interface_options
name: Hide Interface Options
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(145deg, rgb(195, 67, 129) 11%, rgb(90, 43, 186) 83.4%);
border-radius: 10px;
--mdc-theme-primary: var(--primary-text-color) !important;}
This card has toggle helpers and based on them i can show/hide other cards on the dashboard.
As it is now, the card appears on top (overlaps) of the other cards of the dashboard. I would like some help with the CSS code to do one of the following:
- Push the entire dasboard interface to the left so it doesn’t overlap. Essensially i am trying to immitate this colapsed sidebar: W3Schools Tryit Editor
- OR if the above is not possible, i would like to blur the rest of the interface when this card is visible. Very similar to bluring the background on a “more info dialog box” which i have already on my theme.
I posted already this question to the 🔹 Card-mod - Super-charge your themes! - #1674 by michaelkrtikos topic but i was re-directed here.
I would appreciate if someone has implemented something similar and can support.
Thank you very much in advance
Kind Regards
M