I need some help in a widget which I created with copy/paste and try and error 
I am struggling with the right button in the f7-card-content (marked in red). I want to have it more to the right side with a fix space like the left button… Unfortunately I could not manage it 
can someone help me?
uid: Thermostat-Control
tags: []
props:
parameters:
- context: item
description: Das Item für die gemessene Temperatur
label: Ist Temperatur Item
name: AsIsTempItem
required: true
type: TEXT
groupName: temp
- context: item
description: Das Item mit dem die Solltemperatur eingestellt wird
label: Soll Temperatur Item
name: ToBeTempItem
required: true
type: TEXT
groupName: temp
- context: item
description: Das Item das den Stellantrieb anzeigt
label: Stellwert
name: stellwert
required: false
type: TEXT
groupName: temp
- context: item
label: Sperr item
name: lock_item
required: false
type: TEXT
groupName: lock
parameterGroups:
- name: temp
label: Teperature settings
- name: lock
label: Lock settings
timestamp: Apr 7, 2021, 7:38:53 PM
component: f7-card
config:
outline: false
noBorder: false
padding: true
noShadow: false
style:
--f7-card-margin-horizontal: 5px
--f7-card-content-padding-vertical: 0px
--f7-card-content-padding-horizontal: 16px
--f7-card-border-radius: 15px
--f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
--f7-card-header-font-size: 14px
--f7-card-header-font-weight: 600
background-color: rgba(228,228,228,0.6)
slots:
default:
- component: f7-card-header
config:
style:
height: 90px
slots:
default:
- component: oh-trend
config:
trendItem: =(props.AsIsTempItem)
trendGradient:
- gray
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(30%)
position: absolute
width: 100%
height: 100%
top: 0
left: 2
z-index: 1
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-icon
config:
f7: = "thermometer"
size: 30
class:
- align-self-center
style:
margin-left: -6px
margin-top: 0px
color: '=(Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) <= 19) ? "blue" : (Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
- component: Label
config:
text: = (items[props.AsIsTempItem].displayState) + "°"
style:
font-size: 35px
font-weight: 500
margin-left: 0px
margin-top: 0px
color: '=(Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) <=19) ? "blue" : (Number.parseFloat(items[props.AsIsTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
config:
class:
- display-flex
- align-items-center
- flex-direction-column
slots:
default:
- component: Label
config:
text: = (items[props.ToBeTempItem].displayState) + "°"
style:
font-size: 35px
font-weight: 500
color: '=(Number.parseFloat(items[props.ToBeTempItem].state.split(" ")[0]) <= 19) ? "blue" : (Number.parseFloat(items[props.ToBeTempItem].state.split(" ")[0]) >= 23) ? "red" : "gray"'
- component: f7-chip
config:
visible: "=(props.stellwert > 0) ? true : false"
iconF7: gear_alt
iconColor: '=(items[props.stellwert].state > "0") ? "red" : "white"'
text: = (items[props.stellwert].state) + "%"
- component: f7-card-content
config:
style:
height: 70px
slots:
default:
- component: f7-row
config:
class:
- padding-top
- justify-content-center
style:
align-items: center
width: inherit
flex-wrap: nowrap
justify-content: flex-start
height: 40px
slots:
default:
- component: f7-col
config:
width: "20"
small: "20"
medium: "20"
style:
align-items: left
slots:
default:
- component: f7-block
config:
visible: "=(props.lock_item === undefined) ? false : true"
class:
- display-flex
- justify-content-center
- align-items-center
- no-padding
- no-margin
style:
width: 50px
height: 50px
box-shadow: "inset 0px 1px 2px #eee"
border-radius: 50%
slots:
default:
- component: f7-block
config:
class:
- no-margin
style:
position: absolute
width: 100%
height: 100%
border-radius: 50%
transition: transform 0.1s
box-shadow: '=items[props.lock_item].state == "ON" ? "0 0 20px #fff, 0px 0px 30px rgba(229,0,0,0.5)" : "none"'
background: '=items[props.lock_item].state == "ON" ? "rgba(229, 0, 0, 0.5)" : "transparent"'
transform: '=items[props.lock_item].state == "ON" ? "scale(1,1)" : "scale(0,0)"'
- component: oh-link
config:
iconOnly: true
iconF7: '=items[props.lock_item].state == "ON" ? "lock_fill" : "lock_open_fill"'
iconSize: 25
iconColor: '=items[props.lock_item].state == "ON" ? "rgba(229, 0, 0, 0.5)" : "gray"'
action: toggle
actionItem: =props.lock_item
actionCommand: '=items[props.lock_item].state == "ON" ? "OFF" : "ON"'
style:
border: solid 2pt white
border-radius: 50%
background-color: "#f7f7f7"
color: "#a7a7a7"
width: calc(100% - 10px)
height: calc(100% - 10px)
box-shadow: 0px 3px 8px
backdrop-filter: opacity(88%)
z-index: 99 !important
- component: f7-col
config:
width: "60"
small: "60"
medium: "60"
visible: =items[props.lock_item].state !== "ON"
style:
align-items: center
slots:
default:
- component: oh-slider
config:
item: =props.ToBeTempItem
vertical: false
scale: true
label: true
color: '=(items[props.ToBeTempItem].displayState <= "19") ? "blue" : (items[props.ToBeTempItem].displayState >= "23") ? "red" : "gray"'
max: 24
min: 17
step: 1
scaleSteps: 1
unit: " °C"
style:
width: 100%
margin: 2rem
--f7-range-bar-size: 13px
--f7-range-bar-border-radius: 10px
--f7-range-knob-size: 15px
--f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
--f7-range-bar-bg-color: rgba(255,255,255,0.2)
--f7-range-bar-active-bg-color: linear-gradient(to right, blue, red)
- component: f7-col
config:
width: "20"
small: "20"
medium: "20"
style:
align-items: right
slots:
default:
- component: f7-block
config:
class:
#- display-flex
#- justify-content-right
#- align-items-right
- no-padding
- no-margin
style:
width: 50px
height: 50px
box-shadow: "inset 0px 1px 2px #eee"
border-radius: 50%
slots:
default:
- component: oh-link
config:
iconOnly: true
iconF7: chart_bar_alt_fill
iconSize: 25
iconColor: gray
action: analyzer
actionAnalyzerItems: =[props.AsIsTempItem,props.ToBeTempItem]
style:
border: solid 2pt white
border-radius: 50%
background-color: "#f7f7f7"
color: "#a7a7a7"
width: calc(100% - 10px)
height: calc(100% - 10px)
box-shadow: 0px 3px 8px
backdrop-filter: opacity(88%)
z-index: 99 !important
