mirror of
https://github.com/xoseperez/espurna.git
synced 2026-03-02 22:44:17 +01:00
fa3deeffbf
Refactor WebUI: - remove jquery dependency from the base custom.js and use vanilla JS - remove jquery + jquery-datatables dependency from the RFM69 module - replace jquery-datatables handlers with pure-css table + some basic cell filtering (may be incomplete, but tbh it is not worth additional 50Kb to the .bin size) - introduce a common way to notify about the app errors, show small text notification at the top of the page instead of relying on user to find out about errors by using the Web Developer Tools - replace <span name=...> with <span data-settings-key=...> - replace <div> templates with <template>, disallowing modification without an explicit DOM clone - run `eslint` on html/custom.js and `html-validate` on html/index.html, and fix issues detected by both tools Streamline settings group handling in custom.js & index.html - drop module-specific button-add-... in favour of button-add-settings-group - only enforce data-settings-max requirement when the property actually exists - re-create label for=... and input id=... when settings group is modified, so checkboxes refer to the correct element - introduce additional data-... properties to generalize settings group additions - introduce Enumerable object to track some common list elements for <select>, allow to re-create <option> list when messages come in different order Minor fixes that also came with this: - fix relay code incorrectly parsing the payload, causing no relay names to be displayed in the SWITCHES panel - fix scheduler code accidentally combining keys b/c of the way C parses string literals on separate lines, without any commas in-between - thermostat should not reference tmpUnit directly in the webui, replace with module-specific thermostatUnit that is handled on the device itself - fix index.html initial setup invalid adminPass ids - fix index.html layout when removing specific schedules
551 lines
10 KiB
CSS
551 lines
10 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;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.panel {
|
|
display: none;
|
|
}
|
|
|
|
.block {
|
|
display: block;
|
|
}
|
|
|
|
.page {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.hint {
|
|
color: #9e9e9e;
|
|
font-size: 80%;
|
|
margin: -10px 0 10px 0;
|
|
}
|
|
|
|
.hint a {
|
|
color:inherit;
|
|
}
|
|
|
|
legend.module,
|
|
.module {
|
|
display: none;
|
|
}
|
|
|
|
.template {
|
|
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;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
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 {
|
|
background: rgb(0, 192, 0); /* green */
|
|
}
|
|
|
|
.button-wifi-scan,
|
|
.button-more-parent,
|
|
.button-rfb-send {
|
|
background: rgb(255, 128, 0); /* orange */
|
|
}
|
|
|
|
.button-curtain-open,
|
|
.button-curtain-pause,
|
|
.button-curtain-close,
|
|
.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: auto;
|
|
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%)
|
|
}
|