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); }