updated picture element and sensor css placement

[frank-schubidoo]

hi guys,

I adjusted the SVG element a bit. Still not 100% where I want it but a bit better IMHO on what was there. Also there is a bug in original element where the in/out humidity sensors where swapped.

-->
type: picture-elements
image: >-
data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE
svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
x='0' y='0' width='420' height='512' viewBox='0, 0, 420,
512'%3E%3Cdefs%3E%3ClinearGradient id='Gradient_1'
gradientUnits='userSpaceOnUse' x1='57.688' y1='278.913' x2='395.671'
y2='278.913'%3E%3Cstop offset='0' stop-color='%23FF0000'
stop-opacity='0.396'/%3E%3Cstop offset='1' stop-color='%233D00FF'
stop-opacity='0.458'/%3E%3C/linearGradient%3E%3ClinearGradient id='Gradient_2'
gradientUnits='userSpaceOnUse' x1='69.201' y1='200.783' x2='395.671'
y2='200.783'%3E%3Cstop offset='0' stop-color='%23FF0000'
stop-opacity='0.5'/%3E%3Cstop offset='1' stop-color='%239A01FF'
stop-opacity='0.501'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg
id='Layer_1'%3E%3Cpath d='M129.517,188.074 L49.517,278.074 L119.517,346.965
L229.517,346.965 L289.517,278.074 L219.517,188.074 z' fill='%236DA7C2'
fill-opacity='0.294'/%3E%3Cpath d='M49.517,278.074 L49.517,318.074
L109.517,388.074 L229.517,388.074 L289.517,328.074 L289.517,278.074
L229.517,346.965 L119.517,346.965 z' fill='%236DA7C2'
fill-opacity='0.615'/%3E%3Cpath d='M5.54,408.574 L15.54,448.574 L45.54,448.574
M85.54,448.574 L325.54,448.574 L334.493,408.574' fill-opacity='0'
stroke='%23000000' stroke-width='2.835' stroke-linecap='square'
stroke-linejoin='bevel'/%3E%3Cpath d='M294.116,98.483 L296.533,120.483
L281.54,120.483 L281.54,214.483 L277.174,223.257 L76.54,374.969
L76.008,400.948 L54.994,400.948 L54.54,369.496 L58.905,360.722 L259.54,209.01
L259.54,109.483 L270.54,98.483 L294.116,98.483 z M395.671,98.357
L306.502,98.483 L309.429,120.302 L395.671,120.383 L395.671,98.357 z
M64.557,508.483 L35.04,459.483 L95.04,459.483 z M76.008,415.03 L55.065,415.03
L55.143,459.583 L75.761,459.583 L76.008,415.03 z'
fill='url(%23Gradient_1)'/%3E%3Cpath d='M199.672,286.702 C200.453,287.249
202.823,288.905 206.339,291.366 C211.026,294.647 211.026,294.647
217.667,299.295 C233.292,310.233 233.292,310.233 252.042,323.358
C270.792,336.483 270.792,336.483 286.417,347.42 C293.058,352.069
293.058,352.069 297.745,355.35 C298.639,355.976 298.158,355.639
299.189,356.361 C303.015,356.427 306.841,356.439 310.667,356.456
C315.343,356.466 321.578,356.669 322.056,356.62 C322.056,356.62 324.474,377.8
325.012,378.477 C325.549,379.155 295.245,378.544 295.352,378.984
C295.459,379.424 289.037,376.936 289.037,376.936 C288.256,376.389
288.256,376.389 284.741,373.928 C280.053,370.646 280.053,370.646
273.412,365.998 C257.787,355.061 257.787,355.061 239.037,341.936
C220.287,328.811 220.287,328.811 204.662,317.873 C198.022,313.225
198.022,313.225 193.334,309.943 C189.819,307.482 181.765,301.849
180.984,301.302 L199.672,286.702 z M91.878,53.926 L69.201,53.926
L69.201,212.966 L73.737,222.037 L153.087,281.24 L171.652,267.337
L91.878,207.297 L91.878,53.926 z M91.684,3.365 L69.367,3.365 L69.201,41.916
L91.878,41.916 L91.684,3.365 z M395.671,368.526 L345.54,398.303
L345.54,338.483 z M345.54,357.238 L333.993,357.196 L336.833,378.957
L345.54,379.036 L345.54,357.238 z' fill='url(%23Gradient_2)'/%3E%3Cpath
d='M45.54,48.574 L295.54,48.574 L334.493,408.574 L5.54,408.574 z'
fill-opacity='0' stroke='%23000000' stroke-width='2.835'
stroke-linejoin='bevel'/%3E%3C/g%3E%3C/svg%3E%0A
style: |
ha-card {
border-radius: 20px;
margin: 0em 0em 0em 0em;
padding: 10px;
}
labelContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255, 255, 255,0.8) 0%, rgba(128,128,128,0) 80%, rgba(0,0,0,0) 100%);
}
elements:

• type: icon
  icon: mdi:water-percent
  entity: sensor.waschkueche_abs_humidity_in
  tap_action: more_info
  style:
  align: left
  color: black
  left: 45%
  top: 95%
• type: state-label
  entity: sensor.waschkueche_abs_humidity_in
  style:
  align: left
  color: black
  left: 58%
  top: 95%
• type: icon
  icon: mdi:eye
  entity: sensor.waschkueche
  tap_action: more_info
  style:
  color: black
  left: 41%
  top: 26.5%
• type: state-label
  entity: sensor.waschkueche
  style:
  color: black
  left: 42%
  top: 30%
• type: icon
  icon: mdi:water-percent
  entity: sensor.waschkueche_abs_humidity_out
  tap_action: more_info
  style:
  align: left
  position: absolute
  color: black
  left: 47%
  top: 5%
• type: state-label
  entity: sensor.waschkueche_abs_humidity_out
  style:
  align: left
  position: absolute
  color: black
  left: 60%
  top: 5%
• type: icon
  icon: mdi:thermometer
  entity: sensor.waschkueche_temp_out
  tap_action: more_info
  style:
  color: black
  left: 27%
  top: 5%
• type: state-label
  entity: sensor.waschkueche_temp_out
  style:
  color: black
  left: 34.5%
  top: 5%
• type: icon
  icon: mdi:thermometer
  entity: sensor.waschkueche_temp_in
  tap_action: more_info
  style:
  color: black
  left: 25%
  top: 95%
• type: state-label
  entity: sensor.waschkueche_temp_in
  style:
  color: black
  left: 32%
  top: 95%
• type: icon
  icon: mdi:thermometer
  entity: sensor.waschkueche_temp_fresh
  tap_action: more_info
  style:
  color: black
  left: 77%
  top: 15%
• type: state-label
  entity: sensor.waschkueche_temp_fresh
  style:
  color: black
  left: 85%
  top: 15%
• type: custom:circle-sensor-card
  entity: sensor.waschkueche_efficiency
  max: 100
  min: 0
  stroke_width: 15
  gradient: true
  fill: rgba(255,255,255,0.3
  name: eff.
  units: ' '
  font_style:
  font-size: 1.0em
  font-color: white
  style:
  top: 35%
  left: 32%
  width: 4em
  height: 4em
  transform: none

<--