iobroker.sonnen/widgets/sonnen/css/style.css

sonnen

/* Style your widget here */
#sonnen-grid {
    position: absolute;
    right: 5px;
    bottom: calc(50% - 31px - 26px);
    box-shadow: 0 0 20px orange;
    border-radius: 50%;
}

#sonnen-house {
    position: absolute;
    bottom: 5px;
    left: calc(50% - 29px - 26px);
    box-shadow: 0 0 20px red;
    border-radius: 50%;
}

#sonnen-battery {
    position: absolute;
    bottom: calc(50% - 31px - 26px);
    left: 5px;
    box-shadow: 0 0 20px forestgreen;
    border-radius: 50%;
}

#sonnen-photovoltaics {
    position: absolute;
    top: 5px;
    left: calc(50% - 29px - 26px);
    box-shadow: 0 0 20px purple;
    border-radius: 50%;
}

#sonnen-photovoltaics-line {
    height: calc(50% - 62px - 52px - 10px - 5px);
    box-shadow: 0 0 20px purple;
    width: 4px;
    position: absolute;
    left: calc(50% - 2px);
    top: 5px;
    margin-top: calc(62px + 52px + 10px);
    overflow: hidden;
}

#sonnen-photovoltaics-line-svg {
    stroke: purple;
    animation: sonnen-dash 10s reverse linear infinite;
}

@keyframes sonnen-dash {
    to {
        stroke-dashoffset: 50;
    }
}

#sonnen-house-line {
    height: calc(50% - 62px - 52px - 10px - 5px);
    position: absolute;
    left: calc(50% - 2px);
    top: 50%;
    box-shadow: 0 0 20px red;
    width: 4px;
    overflow: hidden;
}

#sonnen-house-line-svg {
    stroke: red;
    animation: sonnen-dash 10s reverse linear infinite;
}

#sonnen-battery-line {
    width: calc(50% - 62px - 52px - 10px - 5px);
    height: 4px;
    box-shadow: 0 0 20px forestgreen;
    bottom: calc(50% - 2px);
    left: calc(62px + 52px + 10px);
    position: absolute;
    margin-top: 50%;
    overflow: hidden;
}

#sonnen-battery-line-svg {
    stroke: forestgreen;
}

#sonnen-grid-line {
    width: calc(50% - 62px - 52px - 10px - 5px);
    height: 4px;
    box-shadow: 0 0 20px orange;
    left: 50%;
    bottom: calc(50% - 2px);
    position: absolute;
    margin-top: 50%;
    overflow: hidden;
}

#sonnen-grid-line-svg {
    stroke: orange;
}

.sonnen-svg {
    vertical-align: text-top;
}

.sonnen-line-svg {
    stroke-dasharray: 6px;
    stroke-width: 3000px;
}

.sonnen-img {
    border: 0;
    width: 58px;
    height: 62px;
    padding: 26px;
}

.sonnen-soc {
    position: absolute;
    bottom: calc(50% - 31px + 15px + 5px);
    left: calc(29px + 26px - 25px + 5px);
    width: 50px;
    height: 15px;
    text-align: center;
}

.sonnen-pac {
    position: absolute;
    bottom: calc(50% - 31px);
    left: calc(29px + 26px - 25px + 5px);
    width: 50px;
    height: 15px;
    text-align: center;
}

.sonnen-consumption {
    position: absolute;
    bottom: calc(5px + 26px);
    left: calc(50% - 25px);
    width: 50px;
    height: 15px;
    text-align: center;
}

.sonnen-grid {
    position: absolute;
    bottom: calc(50% - 31px);
    left: calc(100% - 50px - 26px - 5px);
    width: 50px;
    height: 15px;
    text-align: center;
}

.sonnen-production {
    position: absolute;
    top: calc(62px + 5px + 13px);
    left: calc(50% - 25px);
    width: 50px;
    height: 15px;
    text-align: center;
}

.sonnen-value {
    color: black;
    font-weight: bold;
    font-size: small;
}