Hello,
i use the custom:swipe-card but its cut at the bottom,top,right,left.
can i do there something with card_mod? or gives antoher way?
i tried padding-top, but this dont works.
my code
type: custom:swipe-card
parameters:
centeredSlides: true
scrollbar:
draggable: true
hide: true
snapOnRelease: true
spaceBetween: 8
card_mod:
style: |
ha-card {
padding-bottom: 130px !important;
}
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: climate.heizung_kueche
name: Küche
size: 40px
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Küche
large: false
style:
$: |
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_kueche
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: left
- text-align: left
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
- type: custom:button-card
size: 40px
entity: climate.heizung_keller
name: Keller
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Keller
large: false
style:
$: |
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_keller
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: left
- text-align: start
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
- type: custom:button-card
entity: climate.heizung_wohnzimmer
size: 40px
name: Wohn Zimmer
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Wohn Zimmer
large: false
style:
$: |
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_wohnzimmer
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: climate.heizung_badezimmer
name: Bade Zimmer
size: 40px
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Bade Zimmer
large: false
style:
$: >
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface
{
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_badezimmer
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: left
- text-align: left
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
- type: custom:button-card
size: 40px
entity: climate.heizung_toilette
name: Toilette
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Toilette
large: false
style:
$: >
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface
{
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_toilette
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: left
- text-align: start
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red
- type: custom:button-card
entity: climate.heizung_schlafzimmer
size: 40px
name: Schlaf Zimmer
tap_action:
action: fire-dom-event
browser_mod:
deviceID:
- this
command: popup
hide_header: false
title: Schlaf Zimmer
large: false
style:
$: >
.mdc-dialog .mdc-dialog__container {
height: 560px;
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface
{
width:25%;
height: auto;
border: 1px solid gray;
border-radius: 15px;
background: center / cover no-repeat url("/local/profilbilder/background.jpg");
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:thermostat-popup-card
entity: climate.heizung_schlafzimmer
color: rgb(3,169,244)
color_type: icon
icon: mdi:radiator
show_state: true
styles:
card:
- background-color: rgba(190, 190, 190, 0.2)
- border-radius: 12px
- height: 105px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 3fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
- margin-right: 100px
name:
- justify-self: start
- padding-left: 10px
- font-weight: light
- font-family: Helvetica
- font-size: 12px
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
state:
- value: 18
operator: <=
color: red