title: v2 kiosk_mode: mobile_settings: hide_header: true custom_width: 768 views: - path: WitteNgo title: Rum type: masonry subview: false show_icon_and_title: false background: | linear-gradient(180deg, #e3e0e8 0%, #ddd9e2 100%) cards: - type: custom:button-card name: Vardagsrum show_icon: false show_state: false styles: card: - height: 198px - border-radius: 28px - padding: 16px - background: '#d7d0e3' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#111' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.wallswitch_livinroom_right show_name: false show_state: false icon: mdi:sofa-outline tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.wallswitch_livinroom_right']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.wallswitch_livinroom_right']?.state === 'on' ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.46)'; ]]] - border: | [[[ return states['switch.wallswitch_livinroom_right']?.state === 'on' ? '2px solid rgba(17,17,17,0.10)' : '1px solid rgba(17,17,17,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#111' - width: 38px - align-self: center - justify-self: center custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#111' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.wallswitch_livinroom_right']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.06)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top" "middle" "bottom"' - grid-template-columns: 1fr - grid-template-rows: 40px 40px 40px - row-gap: 8px custom_fields: top: card: type: custom:button-card entity: light.livinroomspottar name: Spot icon: mdi:ceiling-light-multiple show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.livinroomspottar']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.livinroomspottar brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.livinroomspottar brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - display: | [[[ return states['switch.wallswitch_livinroom_right']?.state === 'on' ? 'block' : 'none'; ]]] - background: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.livinroomspottar']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.livinroomspottar']?.state === 'on' ? 'block' : 'none'; ]]] middle: card: type: custom:button-card entity: light.sofflampa name: Soffa icon: mdi:floor-lamp show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.sofflampa']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.sofflampa']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.sofflampa brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.sofflampa']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.sofflampa brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.sofflampa']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['light.sofflampa']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.sofflampa']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.sofflampa']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.sofflampa']?.state === 'on' ? 'block' : 'none'; ]]] bottom: card: type: custom:button-card entity: light.theegg name: Egg icon: mdi:lamp show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.theegg']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.theegg']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.theegg brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.theegg']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.theegg brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.theegg']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['light.theegg']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.theegg']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.theegg']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.theegg']?.state === 'on' ? 'block' : 'none'; ]]] - type: custom:button-card name: Gamingrum show_icon: false show_state: false styles: card: - height: 186px - border-radius: 28px - padding: 16px - background: '#d3d1d4' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#111' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.relay_gamingrum show_name: false show_state: false icon: mdi:gamepad-variant tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.relay_gamingrum']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.relay_gamingrum']?.state === 'on' ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.46)'; ]]] - border: | [[[ return states['switch.relay_gamingrum']?.state === 'on' ? '2px solid rgba(17,17,17,0.10)' : '1px solid rgba(17,17,17,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#111' - width: 38px custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#111' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.relay_gamingrum']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.06)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top"' - grid-template-columns: 1fr - grid-template-rows: 40px custom_fields: top: card: type: custom:button-card entity: light.taklampa_gaming name: Taklampa icon: mdi:ceiling-light show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.taklampa_gaming']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.taklampa_gaming brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.taklampa_gaming brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - display: | [[[ return states['switch.relay_gamingrum']?.state === 'on' ? 'block' : 'none'; ]]] - background: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 58px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.taklampa_gaming']?.state === 'on' ? 'block' : 'none'; ]]] - type: custom:button-card name: Kök show_icon: false show_state: false styles: card: - height: 198px - border-radius: 28px - padding: 16px - background: '#92b2d6' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#fff' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.wallswitch_kitchen_right show_name: false show_state: false icon: mdi:silverware-fork-knife tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.wallswitch_kitchen_right']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.wallswitch_kitchen_right']?.state === 'on' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.11)'; ]]] - border: | [[[ return states['switch.wallswitch_kitchen_right']?.state === 'on' ? '2px solid rgba(255,255,255,0.10)' : '1px solid rgba(255,255,255,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#fff' - width: 38px custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#fff' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.wallswitch_kitchen_right']?.state === 'on' ? 'rgba(111, 195, 123, 0.28)' : 'rgba(255,255,255,0.08)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top" "middle"' - grid-template-columns: 1fr - grid-template-rows: 40px 40px - row-gap: 8px custom_fields: top: card: type: custom:button-card entity: switch.relay_diskho name: Diskho icon: mdi:water-pump show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.relay_diskho']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['switch.relay_diskho']?.state === 'on' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.10)'; ]]] - border: | [[[ return states['switch.relay_diskho']?.state === 'on' ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.05)'; ]]] grid: - grid-template-areas: '"i n state_badge"' - grid-template-columns: 16px 1fr auto - column-gap: 5px icon: - color: '#fff' - width: 16px name: - justify-self: start - align-self: center - color: '#fff' - font-size: 12px - font-weight: 600 - max-width: 66px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#fff' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['switch.relay_diskho']?.state === 'on' ? 'rgba(111, 195, 123, 0.28)' : 'rgba(255,255,255,0.08)'; ]]] middle: card: type: custom:button-card entity: light.kokslampa_skap name: Skåp icon: mdi:lightbulb-on-outline show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.kokslampa_skap']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.kokslampa_skap brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.10)'; ]]] icon: - width: 13px - color: '#fff' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.kokslampa_skap brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.10)'; ]]] icon: - width: 13px - color: '#fff' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.10)'; ]]] - border: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.05)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#fff' - width: 16px name: - justify-self: start - align-self: center - color: '#fff' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#fff' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'rgba(111, 195, 123, 0.28)' : 'rgba(255,255,255,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#fff' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.10) - display: | [[[ return states['light.kokslampa_skap']?.state === 'on' ? 'block' : 'none'; ]]] - type: custom:button-card name: Sovrum show_icon: false show_state: false styles: card: - height: 186px - border-radius: 28px - padding: 16px - background: '#d8d1bb' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#111' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.wallswitch_bedroom_right show_name: false show_state: false icon: mdi:bed-king-outline tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.wallswitch_bedroom_right']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.wallswitch_bedroom_right']?.state === 'on' ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.46)'; ]]] - border: | [[[ return states['switch.wallswitch_bedroom_right']?.state === 'on' ? '2px solid rgba(17,17,17,0.10)' : '1px solid rgba(17,17,17,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#111' - width: 38px custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#111' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.wallswitch_bedroom_right']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.06)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top" "middle"' - grid-template-columns: 1fr - grid-template-rows: 40px 40px - row-gap: 8px custom_fields: top: card: type: custom:button-card entity: switch.sovrum_uttag_lampa name: Säng icon: mdi:desk-lamp show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.sovrum_uttag_lampa']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['switch.sovrum_uttag_lampa']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['switch.sovrum_uttag_lampa']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge"' - grid-template-columns: 16px 1fr auto - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 52px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['switch.sovrum_uttag_lampa']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] middle: card: type: custom:button-card entity: light.taklampa_sovrum name: Tak icon: mdi:ceiling-light show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.taklampa_sovrum']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.taklampa_sovrum brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.taklampa_sovrum brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - display: | [[[ return states['switch.wallswitch_bedroom_right']?.state === 'on' ? 'block' : 'none'; ]]] - background: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 34px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.taklampa_sovrum']?.state === 'on' ? 'block' : 'none'; ]]] - type: custom:button-card name: Hall show_icon: false show_state: false styles: card: - height: 198px - border-radius: 28px - padding: 16px - background: '#ccd4c4' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#111' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.wallswitch_hallway show_name: false show_state: false icon: mdi:hanger tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.wallswitch_hallway']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.wallswitch_hallway']?.state === 'on' ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.46)'; ]]] - border: | [[[ return states['switch.wallswitch_hallway']?.state === 'on' ? '2px solid rgba(17,17,17,0.10)' : '1px solid rgba(17,17,17,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#111' - width: 38px custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#111' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.wallswitch_hallway']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.06)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top" "bottom"' - grid-template-columns: 1fr - grid-template-rows: 40px 40px - row-gap: 8px custom_fields: top: card: type: custom:button-card entity: light.hallspottar name: Spot icon: mdi:ceiling-light-multiple show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.hallspottar']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.hallspottar']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.hallspottar brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.hallspottar']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.hallspottar brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.hallspottar']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - display: | [[[ return states['switch.wallswitch_hallway']?.state === 'on' ? 'block' : 'none'; ]]] - background: | [[[ return states['light.hallspottar']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.hallspottar']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.hallspottar']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.hallspottar']?.state === 'on' ? 'block' : 'none'; ]]] bottom: card: type: custom:button-card entity: lock.aqara_smart_lock_u200_lite show_name: true show_state: false icon: | [[[ return states['lock.aqara_smart_lock_u200_lite']?.state === 'unlocked' ? 'mdi:lock-open-variant' : 'mdi:lock'; ]]] name: Lås tap_action: action: toggle custom_fields: state_badge: | [[[ return states['lock.aqara_smart_lock_u200_lite']?.state === 'unlocked' ? 'Öppen' : 'Låst'; ]]] styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - background: | [[[ return states['lock.aqara_smart_lock_u200_lite']?.state === 'unlocked' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['lock.aqara_smart_lock_u200_lite']?.state === 'unlocked' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge"' - grid-template-columns: 16px 1fr auto - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 42px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['lock.aqara_smart_lock_u200_lite']?.state === 'unlocked' ? 'rgba(245, 179, 66, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] - type: custom:button-card name: Matplats show_icon: false show_state: false styles: card: - height: 186px - border-radius: 28px - padding: 16px - background: '#d8cbdd' - box-shadow: none - overflow: hidden grid: - grid-template-areas: '"n n" "main extras"' - grid-template-columns: 96px 1fr - grid-template-rows: min-content 1fr - column-gap: 12px name: - justify-self: start - align-self: start - font-size: 22px - font-weight: 700 - color: '#111' custom_fields: main: - justify-self: start - align-self: center extras: - justify-self: stretch - align-self: center custom_fields: main: card: type: custom:button-card entity: switch.wallswitch_matplats_right show_name: false show_state: false icon: mdi:silverware-fork-knife tap_action: action: toggle custom_fields: state_badge: | [[[ return states['switch.wallswitch_matplats_right']?.state === 'on' ? 'På' : 'Av'; ]]] styles: card: - width: 86px - height: 86px - border-radius: 22px - box-shadow: none - padding: 0 - background: | [[[ return states['switch.wallswitch_matplats_right']?.state === 'on' ? 'rgba(255,255,255,0.82)' : 'rgba(255,255,255,0.46)'; ]]] - border: | [[[ return states['switch.wallswitch_matplats_right']?.state === 'on' ? '2px solid rgba(17,17,17,0.10)' : '1px solid rgba(17,17,17,0.05)'; ]]] grid: - grid-template-areas: '"i" "state_badge"' - grid-template-columns: 1fr - grid-template-rows: 1fr min-content icon: - color: '#111' - width: 38px custom_fields: state_badge: - justify-self: center - align-self: end - margin-bottom: 7px - color: '#111' - font-size: 10px - font-weight: 700 - padding: 2px 8px - border-radius: 999px - background: | [[[ return states['switch.wallswitch_matplats_right']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.06)'; ]]] extras: card: type: custom:button-card show_name: false show_icon: false styles: card: - background: transparent - box-shadow: none - padding: 0 - margin: 0 grid: - grid-template-areas: '"top"' - grid-template-columns: 1fr - grid-template-rows: 40px custom_fields: top: card: type: custom:button-card entity: light.lampa_matplats name: Lampa icon: mdi:ceiling-light show_name: true show_state: false tap_action: action: toggle custom_fields: state_badge: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'På' : 'Av'; ]]] percent: | [[[ const e = states['light.lampa_matplats']; if (!e || e.state !== 'on') return ''; const b = e.attributes.brightness; if (b === undefined || b === null) return ''; return Math.round((b / 255) * 100) + '%'; ]]] minus: card: type: custom:button-card icon: mdi:minus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.lampa_matplats brightness_step_pct: -20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' plus: card: type: custom:button-card icon: mdi:plus show_name: false tap_action: action: call-service service: light.turn_on service_data: entity_id: light.lampa_matplats brightness_step_pct: 20 styles: card: - width: 22px - height: 22px - border-radius: 999px - box-shadow: none - padding: 0 - background: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'rgba(255,255,255,0.50)' : 'rgba(255,255,255,0.20)'; ]]] icon: - width: 13px - color: '#111' styles: card: - height: 40px - border-radius: 13px - box-shadow: none - padding: 0 8px - display: | [[[ return states['switch.wallswitch_matplats_right']?.state === 'on' ? 'block' : 'none'; ]]] - background: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'rgba(255,255,255,0.80)' : 'rgba(255,255,255,0.32)'; ]]] - border: | [[[ return states['light.lampa_matplats']?.state === 'on' ? '1px solid rgba(17,17,17,0.08)' : '1px solid rgba(17,17,17,0.04)'; ]]] grid: - grid-template-areas: '"i n state_badge percent minus plus"' - grid-template-columns: 16px 1fr auto auto 22px 22px - column-gap: 5px icon: - color: '#111' - width: 16px name: - justify-self: start - align-self: center - color: '#111' - font-size: 12px - font-weight: 600 - max-width: 56px - overflow: hidden - text-overflow: ellipsis custom_fields: state_badge: - justify-self: end - align-self: center - color: '#111' - font-size: 9px - font-weight: 700 - padding: 2px 6px - border-radius: 999px - background: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'rgba(111, 195, 123, 0.35)' : 'rgba(17,17,17,0.08)'; ]]] percent: - justify-self: end - align-self: center - color: '#111' - font-size: 10px - font-weight: 700 - padding: 1px 5px - border-radius: 999px - background: rgba(255,255,255,0.45) - display: | [[[ return states['light.lampa_matplats']?.state === 'on' ? 'block' : 'none'; ]]]