/* SVG size */ #floorplan { padding: 10px; } #floorplan > svg { min-width: 100%; } /* SVG elements */ svg * { vector-effect: non-scaling-stroke !important; } /* Hover over */ .floorplan-shape:hover, g.floorplan-hover > :not(text):hover, g.floorplan-click > :not(text):hover, g.floorplan-long-click > :not(text):hover, :not(text).floorplan-hover:hover, :not(text).floorplan-click:hover, :not(text).floorplan-long-click:hover { stroke: #03a9f4 !important; stroke-width: 1px !important; stroke-opacity: 1 !important; } /* Animation */ .spinning { animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: 50% 50%; transform-box: fill-box; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Binary sensors */ .binary-sensor-on { fill: #f9d27c !important; } .binary-sensor-off { fill: #7cb1f9 !important; transition: fill 5s ease; } /* Lights */ .light-on { fill: #f9d27c !important; } .light-off { fill: #7cb1f9 !important; transition: fill 5s ease; } /* Buttons */ .button-on rect { fill: #1aba92 !important; } .button-off rect { fill: #d32f2f !important; } .button-on tspan, .button-off tspan { fill: white !important; }