how i can ad horizontal
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: KAMERS
card_mod:
style: |
ha-card {
--primary-text-color: pink;
}
- square: false
type: grid
cards:
- type: custom:button-card
name: Living
entity: light.living_all
icon: mdi:sofa
show_state: false
show_label: false
label: |
[[[
return Math.round(states['sensor.basement_sensor'].state) + "°C" + "  " + Math.round(states['sensor.basement_sensor'].state) + " %";
]]]
tap_action:
action: toggle
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
entity: light.zijkant
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: toggle
entity: light.schouw_lampjes
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: more-info
entity: media_pl
icon: |
{% if is_state(entity, 'on') %}
mdi:television
{% else %}
mdi:television
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card:before {
content: "Kast";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card:after {
content: "{{ states('light.zijkant') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card {
--chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.zijkant', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.zijkant', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card:before {
content: "Led";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card:after {
content: "{{ states('light.schouw_lampjes') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(140, 199, 161, 1)' if is_state('light.schouw_lampjes', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.schouw_lampjes', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.schouw_lampjes', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card:before {
content: "Tv";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
}
ha-card:after {
content: "{{ states('light.zijkant') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
}
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.telenettvbox', 'off') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('media_player.telenettvbox', 'off') %}
animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
{% else %}
animation: tube-off 2s linear forwards;
{% endif %}
}
@keyframes tube-off {
1%, 15% { transform: scale(1, 0.2); }
40% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(0.2); opacity: 0; }
}
@keyframes tube-on {
0% { transform: scale(0.2); opacity: 0; }
5% { transform: scale(1, 0.2); opacity: 0.3; }
15% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%,
95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% {
opacity: 1; }
}
ha-state-icon:before {
{% if is_state('media_player.telenettvbox', 'off') %}
content: "";
position: absolute;
width: 50%;
height: 30%;
margin: 6%;
top: 25%;
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(0,0 ,255, 1) 0%,
transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 25%, transparent
100%); }
50% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 50%, transparent
100%); }
75% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 75%, transparent
100%); }
100% { background: linear-gradient(180deg, transparent 0%,
transparent 50%, rgba(0,0 ,255, 1)
100%); }
}
styles:
grid:
- grid-template-areas: '"n btn btn1" "l btn btn1" "i btn btn1"'
- grid-template-columns: 1fr min-content min-content
- grid-template-rows: min-content min-content 1fr
img_cell:
- justify-content: center
- position: absolute
- width: 100px
- height: 100px
- left: 0
- bottom: 0
- margin: 0 0 -35px -35px
- background: '#72F3CD'
- border-radius: 200px
icon:
- width: 40px
- color: black
- opacity: '0.6'
- margin: 0 0 18px 15px
card:
- height: 200px
- width: 200px
- padding: 10px 20px 10px 10px
- border: solid 2px rgba(114, 243, 205, 1)
custom_fields:
btn:
- justify-content: end
- align-self: start
btn1:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 25px
- font-weight: 500
- color: '#72F3CD'
- margin-bottom: 5px
label:
- justify-self: start
- align-self: start
- font-size: 20px
- font-weight: 500
- margin-bottom: 20px
- color: '#fff'
- type: custom:button-card
name: Living
entity: light.living_all
icon: mdi:sofa
show_state: false
show_label: false
label: |
[[[
return Math.round(states['sensor.basement_sensor'].state) + "°C" + "  " + Math.round(states['sensor.basement_sensor'].state) + " %";
]]]
tap_action:
action: toggle
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
entity: light.zijkant
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: toggle
entity: light.schouw_lampjes
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
black
{% else %}
white
{% endif %}
- type: template
tap_action:
action: more-info
entity: media_pl
icon: |
{% if is_state(entity, 'on') %}
mdi:television
{% else %}
mdi:television
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
blue
{% else %}
white
{% endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card:before {
content: "Kast";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card:after {
content: "{{ states('light.zijkant') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card {
--chip-background: {{'rgba(235, 204, 52, 1)' if is_state('light.zijkant', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.zijkant', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card:before {
content: "Led";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('light.zijkant', 'on') }};
}
ha-card:after {
content: "{{ states('light.schouw_lampjes') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
}
ha-card {
--chip-background: {{'rgba(140, 199, 161, 1)' if is_state('light.schouw_lampjes', 'on') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('light.schouw_lampjes', 'on') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
animation: {{ 'illumination 2s infinite' if is_state('light.schouw_lampjes', 'on') }};
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card:before {
content: "Tv";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: 35px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
}
ha-card:after {
content: "{{ states('light.zijkant') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: rgb(var(--rgb-black));
font-weight: 900;
border-radius: 50%;
top: -6px;
right: -5px;
width: 20px;
height: 20px;
font-size: 8px;
z-index: 1;
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
}
ha-card {
--chip-background: {{ 'rgba(199, 239, 207, 0.8)' if is_state('media_player.telenettvbox', 'off') else 'rgba(199, 239, 207, 0.3)' }};
animation: {{ 'ping 2s ease-out infinite' if is_state('media_player.telenettvbox', 'off') }};
padding: 5px !important;
border-radius: 100px !important;
justify-content: center;
--chip-icon-size: 30px;
--chip-height: 40px;
width: var(--chip-height) !important;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(199, 239, 207, 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(199, 239, 207, 0);
}
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
.: |
ha-state-icon {
{% if is_state('media_player.telenettvbox', 'off') %}
animation: tube-on 1s linear, flicker 1s linear 1s infinite alternate;
{% else %}
animation: tube-off 2s linear forwards;
{% endif %}
}
@keyframes tube-off {
1%, 15% { transform: scale(1, 0.2); }
40% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(0.2); opacity: 0; }
}
@keyframes tube-on {
0% { transform: scale(0.2); opacity: 0; }
5% { transform: scale(1, 0.2); opacity: 0.3; }
15% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%,
95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 0.6; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% {
opacity: 1; }
}
ha-state-icon:before {
{% if is_state('media_player.telenettvbox', 'off') %}
content: "";
position: absolute;
width: 50%;
height: 30%;
margin: 6%;
top: 25%;
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(0,0 ,255, 1) 0%,
transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 25%, transparent
100%); }
50% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 50%, transparent
100%); }
75% { background: linear-gradient(180deg, transparent 0%,
rgba(0,0 ,255, 1) 75%, transparent
100%); }
100% { background: linear-gradient(180deg, transparent 0%,
transparent 50%, rgba(0,0 ,255, 1)
100%); }
}
styles:
grid: