MMM-Powerwall.css

/*
 *
 * MMM-Powerwall
 *
 * Mike Bishop
 * MIT Licensed.
 *
 * Custom here your css module
 *
 */
.module.MMM-Powerwall:not(.module-content) {
    background-color: rgba(0,0,0,0);
}

.MMM-Powerwall.flexbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.MMM-Powerwall.rflexbox {
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
    justify-content: space-evenly;
}

.MMM-Powerwall.vflexbox {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    height: 100%;
    max-height: 250px;
}

.MMM-Powerwall.flexitem {
    margin: 10px;
    height: 250px;
    width: 430px;
    backface-visibility: hidden;
}

.MMM-Powerwall .spaced {
    margin: auto;
}

.MMM-Powerwall[class*="grid-"] {
    display: grid;
    grid-template-rows: auto;
}

.MMM-Powerwall.grid-left {
    grid-template-columns: minmax(min-content,40%) auto;
}

.MMM-Powerwall.grid-right {
    grid-template-columns: auto minmax(min-content,40%);
}

.scene {
    margin: 0;
    position: relative;
    width: 150px;
    height: 240px;
    perspective: 600px;
}

.MMM-Powerwall .text {
    transition: all 250ms;
    text-align: center;
}

.cube__face {
    position: absolute;
    border: 2px solid black;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    color: black;
    text-align: center;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px) rotateY(-35deg);
  margin: -10px 0px;
}

.cube__face {
    backface-visibility: hidden;
    height: 240px;
}

.cube__face--front  { 
    background: ghostwhite;
    width: 150px;
    transform: rotateY(  0deg) translateZ(15px);
}

.cube__face--right  { 
    background: black; 
    transform: rotateY( 90deg) translateZ(137px); 
    width: 30px;
}

.meter-vertical {
    width:80%;
    position: absolute;
    bottom: 0;
    transition: height 1s;
}

.meter-level {
    border-bottom: 2px solid white;
    width: 80%;
    position: absolute;
    display: none;
    transition: 1s ease bottom;
}

.meter-horizontal {
    height:97%;
    margin: 1px;
    transition: width 1s;
    float: left
}

.cbattery:after {
    border: 2px solid darkgray;
    background: darkgray;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    right: -10px;
    top: 29px;
    width: 6px;
}

.cbattery {
    border: 2px solid darkgray;
    background: black;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 150px;
    text-align: center;
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
}

.MMM-Powerwall.col1 {
    grid-column: 1;
}

.MMM-Powerwall.col2 {
    grid-column: 2;
}

.MMM-Powerwall .solar {
    color: gold
}

.MMM-Powerwall .battery {
    background: #0BC60B;
}

.MMM-Powerwall .battery-cold {
    background: lightskyblue;
}

.MMM-Powerwall .battery-warn {
    background: #f5c71a;
}

.MMM-Powerwall .battery-critical {
    background: red;
}

.MMM-Powerwall .grid {
    color: #CACECF
}

.MMM-Powerwall .house {
    color: #09A9E6
}

.MMM-Powerwall .car {
    color: #B91413;
}

.MMM-Powerwall .big {
    font-size: 45px;
    line-height: 50px;
}

.MMM-Powerwall .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
  }

.MMM-Powerwall .grid-grid {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 45% 30%;
    grid-template-areas:
        "icon direction"
        "icon number"
        "import export";
    gap: 1%;
    place-items: center;
    height: 100%;
}

.MMM-Powerwall .graph-container {
    position: relative;
    height: 250px;
    max-width: 280px;
    max-height: 250px;
}

.MMM-Powerwall .big-graph-container {
    max-height: 250px;
    height: 250px;
    position: relative;
    max-width: 425px;
}

.MMM-Powerwall .no-overflow {
    overflow: hidden;
    white-space: nowrap;
}

.MMM-Powerwall .border {
    border-style: dashed;
    border-width: thick;
    margin: -5px;
    border-radius: 10px;
}

.MMM-Powerwall .storm-watch {
    color: #09A9E6;
    margin-top: auto;
}

.MMM-Powerwall .grid-direction {
    grid-area: direction;
    align-self: flex-end;
}

.MMM-Powerwall .grid-number {
    grid-area:number;
}

.MMM-Powerwall .grid-import {
    grid-area:import;
}

.MMM-Powerwall .grid-export {
    grid-area:export;
}

.MMM-Powerwall .grid-error {
    color: red;
    font-size: 30px;
    grid-area: 1 / 2 / 3 / 4;
    margin: auto;
}