/* * EVChargeControl.css */ /* General appearance: */ body { padding: 0 8px; font-size: 11pt; line-height: 125%; } summary:focus { outline: none; } /* Main page grid layout: */ body { display: grid; grid-template-columns: 1fr 550px 1fr; grid-template-areas: "header header header" "error error error " ". status . " ". solar . " ". batt . " ". weather . " "tabs tabs tabs " ; } #header { margin-bottom: 12px; grid-area: header; } #server-status { margin-bottom: 12px; grid-area: error; } #status { margin-bottom: 12px; grid-area: status; } #solar-info { margin-bottom: 12px; grid-area: solar; } #batt-info { margin-bottom: 12px; grid-area: batt; } #weather-info { margin-bottom: 12px; grid-area: weather; } .tabs-interface { margin-bottom: 12px; grid-area: tabs; } /* Appearance of main page: */ body { background-color: #555; } body > * { background-color: white; } /*override inheritance*/ #info > * { background-color: white; } /*override inheritance*/ /* Layout of header: */ #header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; text-align: center; } #header .row { display: contents /*grid pass-thru*/; } /* Appearance of header: */ #header { background-color: #ddf; box-shadow: 0 5px 10px -1px black; border-radius: 32px; padding: 0 10px; } /* Visibility of server status messages: */ #server-status { display: none; } #server-status.connecting { display: block; } #server-status.failed { display: block; } #server-status > span { display: none; } #server-status.connecting span.connecting { display: block; } #server-status.failed span.failed { display: block; } /* Appearance of server status messages: */ #server-status { background-color: transparent; } #server-status span { width: 100%; text-align: center; } #server-status span.connecting { color: blue; } #server-status span.failed { color: red; font-weight: bold; } /* Layout of charging status information: */ #status { display: grid; grid-template-columns: 120px 1fr; text-align: center; white-space: nowrap; } #status .row { display: contents /*grid pass-thru*/; } #status .status { white-space: normal; } #status .evses { grid-column: span 2; display: grid; grid-template-columns: 120px 16px 1fr 88px; } #status .evses .none { grid-column: span 4; } #status .evses .evse { display: contents /*grid pass-thru*/; } #status .evses .evse .label { grid-column: 1; } #status .evses .evse .state { grid-column: 2; } #status .evses .evse .status { grid-column: 3; } #status .evses .evse .charge { grid-column: 4; width: 88px; height: 20px; font-size: smaller; } #status { position: relative/*=>offset parent*/; } #status .show-info { position: absolute; width: 20px; height: 20px; left: 5px; bottom: 5px; } #status .controls { grid-column: span 2; } /* Appearance of charging status information: */ #status { line-height: 150%; padding: 7px; box-shadow: 0 5px 10px -1px black; } #status .evses .none { color: red; font-weight: bold; } #status .evses .evse.unresponsive { color: grey; } #status .evses .evse .state.unplugged { color: black; } #status .evses .evse .state.charging { color: green; } #status .evses .evse .state.stopping { color: green; } #status .evses .evse .state.offering { color: lightblue; } #status .evses .evse .state.waiting { color: blue; } #status .evses .evse .state.error { color: red; } #status .evses .evse.unresponsive .state { color: grey; } /* Layout of charging controls: */ #status .controls { text-align: center; } /* Appearance of charging controls: */ #status .controls #charge-stop { background-color: red; color: white; border-radius: 16px; padding: 2px 12px 3px 10px; } #status .controls #charge-stop:disabled { background-color: lightgrey; color: grey; } #status .show-info::after { content: '▶️'; } #status .show-info.expanded::after { content: '🔽'; } #info { display: contents /*grid pass-thru*/; } /* Layout of solar information: */ #solar-info { border-spacing: 0px; text-align: center; } /* Appearance of solar information: */ #solar-info { box-shadow: 0 5px 10px -1px black; } #solar-info, #solar-info th, #solar-info td { border: 0.5px solid lightgrey; } #solar-info tr:nth-child(1) th { border-bottom: none; } #solar-info tr:nth-child(2) th { border-top: none; font-weight: normal; font-size: small; } #solar-info th.gen { background-color: #0802; } #solar-info th.load { background-color: #00A2; } #solar-info th.load:last-child { background-color: #0083; } #solar-info .grid.cheap { color: green; } #solar-info .grid.stressed { background-color: orange; } #solar-info .grid.outage { background-color: red; } /* Layout of batteries information: */ #batt-info { border-spacing: 0px; text-align: center; } /* Appearance of batteries information: */ #batt-info { box-shadow: 0 5px 10px -1px black; } #batt-info, #batt-info th, #batt-info td { border: 0.5px solid lightgrey; } #batt-info th { border-top: none; background-color: #8883; font-size: small; } #batt-info .low { color: orange; } #batt-info .critical { color: red; } /* Layout of weather information: */ #weather-info { border-spacing: 0px; text-align: center; } /* Appearance of weather information: */ #weather-info { box-shadow: 0 5px 10px -1px black; } #weather-info, #weather-info th, #weather-info td { border: 0.5px solid lightgrey; white-space: nowrap; } #weather-info th { border-top: none; background-color: #0083; font-size: small; } /* Layout of the tab interface: */ .tabs-interface { width: 100%; margin-top: 10px; } .tab-pane { height: 60vh; overflow: auto; box-sizing: border-box; padding: 20px; } .tab-pane:not(.active) { display: none !important; } .tab-pane.active { display: block; } .tabs { display: flex /*=>flex parent*/; flex-direction: row; align-items: center; justify-content: center; } .tab { flex: 1; } /*tabs are all equal width*/ /* Appearance of the tab interface: */ .tabs { background-color: #555; } /*merge into the background of the containing element (body)*/ .tab { padding: 3px 10px; text-align: center; text-decoration: none; color: #333; } .tab { transition: background-color 0.3s; } .tab { background-color: #eee; border-bottom: 1px solid #ccc; border-radius: 5px 5px 0px 0px; } .tab.active { background-color: #fff; border-bottom: 1px solid #fff; font-face: bold; } .tab:hover { background-color: #ccd; } .tab { border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .tab:first-child { border-left: 0px; } .tab:last-child { border-right: 0px; } /* Behavior of energy graph: */ #energy-graphs { display: flex /*=>flex parent*/; flex-direction: column; align-items: center; justify-content: center; gap: 15px; } #energy-graph, #grid-batt-graph, #batt-SoC-graph { position: relative /*=>offset parent*/; touch-action: manipulation; } /* Both required for co-ordinate calculations to work properly! */ #energy-graphs { position: relative /*=>offset parent*/; } /* Required for 'loading' spinner to be positioned relative to this element */ #energy-graphs .scrollbar { position: relative /*=>offset parent*/; } #energy-graphs .controls { display: flex /*=>flex parent*/; flex-direction: row; align-items: center; justify-content: center; touch-action: manipulation; } /* Appearance of energy graph: */ #energy-graphs { height: 70vh; } #energy-graph { width: 100%; height: 15vh; } #grid-batt-graph { width: 100%; height: 15vh; } #batt-SoC-graph { width: 100%; height: 15vh; } #energy-graphs canvas { width: 100% !important; height: 100% !important; } #energy-graphs .scrollbar { width: 100%; height: 10px; border-radius: 5px; background-color: lightgrey; } #energy-graphs .scrollbar > .thumb { position: relative; left: 0px; top: -5px; width: 100%; height: 20px; border-radius: 10px; background-color: grey; } #energy-graphs .scrollbar > .thumb.locked { background-color: green; } #energy-graphs .controls { width: 100%; margin-top: 5px; margin-bottom: 5px; } #energy-graphs .controls button { width: 24px; height: 24px; border: none; background-color: lightgrey; margin-left: 2px; } /* Loading spinner: */ .loading { display: flex /*=>flex parent*/; flex-direction: column; justify-content: center; align-items: center; } .loading { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.1; pointer-events: none; } .loading > .spinner { width: 60px; height: 60px; margin-bottom: 50px; border: 16px solid black; border-top: 16px solid blue; border-radius: 50%; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Layout of historic energy information: */ #historic-info { display: contents /*flex pass-thru*/; } #historic-info .timeline { margin-bottom: -10px; } #historic-info .timeline, #historic-info .solar-info { width: 100%; max-width: 550px; } #historic-info .solar-info { border-spacing: 0px; text-align: center; } #historic-info .solar-info td { width: 16.7%; } /* Appearance of historic energy information: */ #historic-info, #historic-info th, #historic-info td { border: 0.5px solid lightgrey; } #historic-info tr:nth-child(1) th, #historic-info tr:nth-child(1) td { border: none; } #historic-info tr:nth-child(2) th { border-bottom: none; } #historic-info tr:nth-child(3) th { border-top: none; font-weight: normal; font-size: small; } #historic-info th.gen { background-color: #0802; } #historic-info th.load { background-color: #00A2; } #historic-info th.load:last-child { background-color: #0083; } /* Layout of the settings tab: */ #settings { display: flex /*=>flex parent*/; flex-direction: column; justify-content: center; align-items: center; gap: 20px; } /* Appearance of the settings tab: */ #settings { background-color: #666; } #settings > * { background-color: white; } /*override inheritance*/ .tab.active[href='settings'] { border-bottom: 1px solid #666; } /*match tab content background*/ /* Layout of settings: */ #settings > table { width: 100%; max-width: 550px; padding: 20px; } /* Appearance of settings: */ #settings > table { box-shadow: 0 5px 10px -1px black; } #settings input[type='number'] { width: 5ch; } /* Appearance of settings info popups: */ #settings .info { color: grey; } #settings .info.active { background-color: yellow; font-weight: bold; } #settings .popup { width: 90%; max-width: 400px; } #settings .popup { background-color: white; padding: 10px 20px; border-radius: 5px; } #settings .popup dt { font-weight: bold; } /* Layout of the accounts tab: */ #accounts { display: flex /*=>flex parent*/; flex-direction: column; justify-content: center; align-items: center; gap: 20px; } /* Appearance of the accounts tab: */ #accounts { background-color: #666; } #accounts > * { background-color: white; } /*override inheritance*/ .tab.active[href='accounts'] { border-bottom: 1px solid #666; } /*match tab content background*/ /* Layout of accounts: */ #accounts > table { width: 100%; max-width: 550px; padding: 20px; } /* Appearance of accounts: */ #accounts > table { box-shadow: 0 5px 10px -1px black; } #accounts tr.title { font-size: 16pt; padding-bottom: 20px; } /* Layout of log viewer: */ #log.disabled > summary { cursor: initial; pointer-events: all; } /* Appearance of log viewer: */ #log .text-view { border: 1px solid black; width: 100%; min-height: 80px; max-height: 54vh; overflow: auto; background-color: #EEE; } #log .text-view canvas { font-size: 10px; font-family: monospace; color: grey; line-height: 125%; } #log .controls { display: flex; justify-content: space-between; align-items: flex-start; } /* Layout of debug levels popups: */ #log .popup { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 20px; } #log .popup { width: 90%; max-width: 400px; } #log .popup label { margin-right: 8px; } /* Appearance of debug levels popups: */ #log .popup { background-color: white; border-radius: 5px; } /* Behavior of popups: */ .popup-background { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } /* full size of the browser window */ .popup-background { display: flex /*=>flex parent*/; justify-content: center; align-items: center; } /* center content (popup) */ .popup:not(.active) { display: none !important; } /* Appearance of popups: */ .popup-background { background-color: #0008; backdrop-filter: blur(3px); } /* Phone screen layout differences: */ @media only screen and (max-width: 768px) { body { font-size: 10pt; grid-template-columns: 1fr 400px 1fr; } #header { font-size: 8pt; } .tabs-interface { margin-top: 0px; } .tab-pane > table, #historic-info .timeline, #historic-info .solar-info { max-width: 400px; } #log .text-view { max-height: 52vh; } #log .text-view canvas { font-size: 8px; } } /* Visibility (highest precedence, must be at end of style sheet): */ .hidden { display: none !important; } /* => invisible and not part of the layout */ .disabled, .disabled * { opacity: 0.7; cursor: wait; pointer-events: none; }