mirror of
https://github.com/xoseperez/espurna.git
synced 2026-03-03 15:04:17 +01:00
8f7f1c968f
- remove 'local' index and replace sensor code depending on it with the existing 'slot' aka 'magnitude index' used in value() and type() - common method to store and retrieve ratios for voltage, current, active power and energy. default implementation is no-op, sensor should implement ratio adjustment & calculations to use 'slot' indexes - re-implement 'expected' values ui. display the actual ratio values, and have a separate page for updating them in a more apparent way - remove legacy settings that were adjusting expected values - remove legacy settings that were resetting ratios and analog calibration - generic webui action caller, add ratios and analog calibration resets all of 'emon' sensors were updated to utilize the new approach to the ratio handling. pulsemeter is somewhat an outlier, but it is unclear whether removing the energy ratio is justified terminal part was also updated - implement `expected` command that hooks into the new ratioFromValue (and what webui uses to calculate ratios) - implement `energy` command to list only MAGNITUDE_ENERGY - remove old pzem004t commands doing ratio reset and total energy count another global update is related to espurna::duration - rework module-local heartbeat and led durations into a global espurna::duration - update sensor internals to use specific units instead of multiplying things on line-by-line basis. export count() to the api
571 lines
11 KiB
CSS
571 lines
11 KiB
CSS
/* -----------------------------------------------------------------------------
|
|
General
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#menu .pure-menu-heading {
|
|
font-size: 100%;
|
|
padding: .5em .5em;
|
|
white-space: normal;
|
|
text-transform: initial;
|
|
}
|
|
|
|
.pure-g {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pure-form legend {
|
|
font-weight: bold;
|
|
letter-spacing: 0;
|
|
margin: 10px 0 1em 0;
|
|
}
|
|
|
|
.pure-form .pure-g > label {
|
|
margin: .4em 0 .2em;
|
|
}
|
|
|
|
.pure-form input {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pure-form input[type=text][disabled] {
|
|
color: #777777;
|
|
}
|
|
|
|
@media screen and (max-width: 32em) {
|
|
.header > h1 {
|
|
line-height: 100%;
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
|
|
.header strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.panel {
|
|
display: none;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.page {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.hint {
|
|
color: #9e9e9e;
|
|
font-size: 80%;
|
|
margin: -0.3em 0 0.3em 0;
|
|
}
|
|
|
|
.hint a {
|
|
color:inherit;
|
|
}
|
|
|
|
.module {
|
|
display: none;
|
|
}
|
|
|
|
input[name=upgrade] {
|
|
display: none;
|
|
}
|
|
|
|
select {
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
input.center {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.center {
|
|
margin: .5em 0 1em;
|
|
}
|
|
|
|
.webmode {
|
|
display: none;
|
|
}
|
|
|
|
#password .content {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#layout .content {
|
|
margin: 0;
|
|
}
|
|
|
|
div.state {
|
|
border-top: 1px solid #eee;
|
|
margin-top: 20px;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.state div {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.state span {
|
|
font-size: 80%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.pure-g span.terminal,
|
|
.pure-g textarea.terminal {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 80%;
|
|
line-height: 100%;
|
|
background-color: #000;
|
|
color: #0F0;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Sensors
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.pure-form-aligned
|
|
.pure-control-group
|
|
label {
|
|
text-align: left;
|
|
}
|
|
|
|
.emon-expected-pwrP,
|
|
.emon-expected-volt,
|
|
.emon-expected-curr,
|
|
.emon-expected-ene {
|
|
display: none;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Curtains
|
|
-------------------------------------------------------------------------- */
|
|
|
|
/* removeIf(!curtain) */
|
|
|
|
.curtain-div {
|
|
text-align: center;
|
|
}
|
|
|
|
.curtain-roller {
|
|
width: 300px;
|
|
height: 200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.curtain-button{
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.reverse-range {
|
|
direction: rtl;
|
|
}
|
|
|
|
/* endRemoveIf(!curtain) */
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Buttons
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.pure-button {
|
|
border-radius: 4px;
|
|
color: white;
|
|
letter-spacing: 0;
|
|
margin-bottom: 10px;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
padding: 8px 8px;
|
|
}
|
|
|
|
.main-buttons {
|
|
margin: 20px auto;
|
|
text-align: center;
|
|
}
|
|
.main-buttons button {
|
|
width: 100px;
|
|
}
|
|
|
|
.button-reboot,
|
|
.button-reconnect,
|
|
.button-ha-del,
|
|
.button-rfb-forget,
|
|
.button-lightfox-clear,
|
|
.button-del-parent,
|
|
.button-dbg-clear,
|
|
.button-upgrade,
|
|
.button-clear-filters,
|
|
.button-clear-messages,
|
|
.button-clear-counts,
|
|
.button-settings-factory {
|
|
background: rgb(192, 0, 0); /* redish */
|
|
}
|
|
|
|
.button-update,
|
|
.button-setup-password,
|
|
.button-add-settings-group,
|
|
.button-upgrade-browse,
|
|
.button-rfb-learn,
|
|
.button-lightfox-learn,
|
|
.button-ha-add,
|
|
.button-ha-config,
|
|
.button-settings-backup,
|
|
.button-settings-restore,
|
|
.button-garland-set-default,
|
|
.button-dbgcmd,
|
|
.button-apikey,
|
|
.button-emon-expected-calculate {
|
|
background: rgb(0, 192, 0); /* green */
|
|
}
|
|
|
|
.button-wifi-scan,
|
|
.button-more-parent,
|
|
.button-simple-action,
|
|
.button-rfb-send {
|
|
background: rgb(255, 128, 0); /* orange */
|
|
}
|
|
|
|
.button-curtain-open,
|
|
.button-curtain-pause,
|
|
.button-curtain-close,
|
|
.button-emon-expected,
|
|
.button-emon-expected-apply,
|
|
.button-generate-password {
|
|
background: rgb(66, 184, 221); /* blue */
|
|
}
|
|
|
|
.button-upgrade-browse,
|
|
.button-clear-filters,
|
|
.button-clear-messages,
|
|
.button-clear-counts,
|
|
.button-dbgcmd,
|
|
.button-ha-add,
|
|
.button-apikey,
|
|
.button-upgrade {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.button-thermostat-reset-counters {
|
|
background: rgb(204, 139, 41);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Sliders
|
|
-------------------------------------------------------------------------- */
|
|
|
|
input.slider {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
span.slider {
|
|
font-size: 70%;
|
|
letter-spacing: 0;
|
|
margin-left: 10px;
|
|
margin-top: 7px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Checkboxes
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.toggleWrapper {
|
|
overflow: hidden;
|
|
width: max-content;
|
|
height: 30px;
|
|
margin: 0px 0px 10px 0px;
|
|
padding: 0px;
|
|
border-radius: 4px;
|
|
box-shadow: inset 1px 1px #CCC;
|
|
}
|
|
.toggleWrapper input {
|
|
position: absolute;
|
|
left: -99em;
|
|
}
|
|
label[for].toggle {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
.toggle {
|
|
letter-spacing:normal;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 130px;
|
|
height: 100%;
|
|
background: #e9e9e9;
|
|
color: #a9a9a9;
|
|
border-radius: 4px;
|
|
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
}
|
|
.toggle:before,
|
|
.toggle:after {
|
|
position: absolute;
|
|
line-height: 30px;
|
|
font-size: .7em;
|
|
z-index: 2;
|
|
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
}
|
|
.toggle:before {
|
|
content: "NO";
|
|
left: 20px;
|
|
}
|
|
input[name="relay"] + .toggle:before {
|
|
content: "OFF";
|
|
}
|
|
input[name="thermostatMode"] + .toggle:before {
|
|
content: "Heater";
|
|
}
|
|
.toggle:after{
|
|
content: "YES";
|
|
right: 20px;
|
|
}
|
|
input[name="relay"] + .toggle:after {
|
|
content: "ON";
|
|
}
|
|
input[name="thermostatMode"] + .toggle:after {
|
|
content: "Cooler";
|
|
}
|
|
.toggle__handler {
|
|
display: inline-block;
|
|
position: relative;
|
|
z-index: 1;
|
|
background: #c00000;
|
|
width: 50%;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
top: 0px;
|
|
left: 0px;
|
|
-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
-webkit-transform: translateX(0px);
|
|
transform: translateX(0px);
|
|
}
|
|
input:checked + .toggle:after {
|
|
color: #fff;
|
|
}
|
|
input:checked + .toggle:before {
|
|
color: #a9a9a9;
|
|
}
|
|
input + .toggle:before {
|
|
color: #fff;
|
|
}
|
|
input:checked + .toggle .toggle__handler {
|
|
width: 50%;
|
|
background: #00c000;
|
|
-webkit-transform: translateX(65px);
|
|
transform: translateX(65px);
|
|
border-color: #000;
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
input[name="thermostatMode"]:checked + .toggle .toggle__handler {
|
|
background: #00c0c0;
|
|
}
|
|
input[disabled] + .toggle .toggle__handler {
|
|
background: #ccc;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Loading
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.loading {
|
|
display: none;
|
|
height: 20px;
|
|
margin: 8px 0 0 10px;
|
|
width: 20px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Menu
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#menu .small {
|
|
font-size: 60%;
|
|
padding-left: 9px;
|
|
}
|
|
|
|
#menu div.footer {
|
|
color: #999;
|
|
font-size: 80%;
|
|
padding: 10px;
|
|
}
|
|
#menu div.footer a {
|
|
padding: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Home panel
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#color {
|
|
padding-bottom: 1em;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
RF Bridge panel
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#panel-rfb fieldset {
|
|
margin: 10px 2px;
|
|
padding: 20px;
|
|
}
|
|
|
|
#panel-rfb input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#panel-rfb label {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
#panel-rfb input {
|
|
text-align: center;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Admin panel
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#upgrade-progress {
|
|
display: none;
|
|
height: 20px;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
#error-notification,
|
|
#uploader,
|
|
#downloader {
|
|
display: none;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Wifi panel
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#networks .pure-g,
|
|
#schedules .pure-g {
|
|
border-bottom: 1px solid #eee;
|
|
margin-bottom: 10px;
|
|
padding: 10px 0 10px 0;
|
|
}
|
|
|
|
#networks .more {
|
|
display: none;
|
|
}
|
|
|
|
#haConfig,
|
|
#scanResult {
|
|
margin-top: 10px;
|
|
display: none;
|
|
padding: 10px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Table
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#rfm69-messages {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
summary {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.filtered {
|
|
color: rgb(202, 60, 60);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Logs
|
|
-------------------------------------------------------------------------- */
|
|
|
|
#weblog {
|
|
height: 400px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
Password input controls
|
|
-------------------------------------------------------------------------- */
|
|
.password-reveal {
|
|
font-family: EmojiSymbols,Segoe UI Symbol;
|
|
background: rgba(0,0,0,0);
|
|
display: inline-block;
|
|
float: right;
|
|
z-index: 50;
|
|
margin-top: 6px;
|
|
margin-left: -30px;
|
|
vertical-align: middle;
|
|
font-size: 1.2em;
|
|
height: 100%;
|
|
}
|
|
|
|
.password-reveal:after {
|
|
content: "👁";
|
|
}
|
|
|
|
input[type="password"] + .password-reveal {
|
|
color: rgba(205, 205, 205, 0.3);
|
|
}
|
|
|
|
input[type="text"] + .password-reveal {
|
|
color: rgba(66, 184, 221, 0.8);
|
|
}
|
|
|
|
.no-select {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
input::-ms-clear,
|
|
input::-ms-reveal {
|
|
display: none;
|
|
}
|
|
|
|
/* css minifier must not combine these.
|
|
* style will not apply otherwise */
|
|
input::-ms-input-placeholder {
|
|
color: #ccd;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #ccc;
|
|
}
|
|
|
|
#error-notification {
|
|
width: 100%;
|
|
box-shadow: 0 1px 2px 1px rgb(192 0 0 / 25%)
|
|
}
|