Hi Marius, have a look, played with CSS a little:
type: custom:shutter-card
card_mod:
style: |
ha-card {
--ha-card-background: rgb(168,240,255);
--ha-card-header-color: black;
--ha-card-header-font-size: 16px;
--ha-card-border-radius: 8px;
}
.card-header {
background-color: rgb(190,212,216);
border-radius: 8px 8px 0px 0px;
text-align: right;
}
.sc-shutter .sc-shutter-top {
display: flex;
flex-direction: row;
}
.sc-shutter .sc-shutter-top .sc-shutter-label {
flex: 1 1 75%;
text-align: left;
}
.sc-shutter .sc-shutter-top .sc-shutter-position {
text-align: center;
}
title: My shutters
entities:
- entity: cover.left_living_shutter
name: Left shutter
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right shutter
buttons_position: left
title_position: top
Another example:
type: custom:stack-in-card
mode: horizontal
keep:
background: false
box_shadow: false
margin: false
outer_padding: false
border_radius: false
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-header {
text-align: center;
}
.sc-shutter .sc-shutter-top {
display: flex;
flex-direction: row;
}
.sc-shutter .sc-shutter-top .sc-shutter-label {
flex: 1 1 75%;
text-align: center;
font-size: var(--mdc-typography-body1-font-size);
}
.sc-shutter .sc-shutter-top .sc-shutter-position {
text-align: center;
}
title: Bedroom
entities:
- entity: cover.left_living_shutter
name: Left
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right
buttons_position: left
title_position: top
- type: custom:shutter-card
title: Kitchen
entities:
- entity: cover.left_living_shutter
name: Left
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right
buttons_position: left
title_position: top
It is strange , but styling the 1st card affects on the 2nd card too…