type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
name: Sensor
icon: mdi:motion-sensor
state: null
hash: "#motions"
is_sidebar_hidden: true
styles: >-
.bubble-pop-up {
background: transparent);
}
.close-pop-up {
background-color: transparent;
}
.bubble-button-card-container {
background: transparent !important;
}
.icon-container {background-color:var(--red)!important;}
.icon-container > ha-icon
{color:var(--black)!important;opacity:1!important;}
.bubble-icon {
--mdc-icon-size: 22px !important;
}
bg_blur: "20"
shadow_opacity: "20"
bg_opacity: "88"
margin_top_mobile: 10px
margin_top_desktop: 10px
card_layout: large
- type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.10063d1e68bfa731_distance
icon: mdi:jellyfish
show_entity_picture: true
name: Jellyfin
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: "-3%"
icon:
- width: 25px
- color: auto
- margin-right: 10px
- margin-top: 5px
name:
- font-size: 90%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 20px
- margin-left: 10px
- margin-bottom: 10px
- opacity: 0.65
- text-align: center
grid:
- grid-template-areas: "\"n i\" \"temp temp\" \"graph graph\""
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `
${states['sensor.10063d1e68bfa731_distance'].state}%
${states['sensor.10063d1e68bfa731_distance'].state}MiB`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 100px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.10063d1e68bfa731_distance
name: CPU
color: "#ff8c00"
- entity: sensor.10063d1e68bfa731_distance
name: Memory
color: "#3399ff"
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}