mirror of
https://github.com/xoseperez/espurna.git
synced 2026-03-03 15:04:17 +01:00
21e75bef51
* Completed kingart curtain switch support:
Added Web UI controls and view in status
Added power up behaviour (nothing, close, open, last position)
Added curtain style (Roller, etc...) for UI status and to be used in MQTT
* Checked commit before PR. Added html gulp static files generated.
* Corrected a code refactor error which make the MQTT messages not handling position from received messages. Added comment to debug tab to show how to enable debug
* Use the maximum compression for gzip. A byte is a byte :)
* Update code/espurna/curtain_kingart.cpp
Co-authored-by: Max Prokhorov <prokhorov.max@outlook.com>
* Variable name prefix update
Added public set position function and curtain count
* Added Scheduler new type : curtain
* Add curtain schedule support and correct the 12h bug when adding a slot (00:00 after refresh). Default Hour is 12h
* Code cleaning.
Schedule support.
Light support is having an issue with new schedules corrected here.
* I let do better by the specialists
* Curtain init statues
* Coding style corrections
* Removed debug stuff from now - will be back later with the right way
* rebuild webui
* revert 435f1c5e03 schHour default, rebuild ui
Co-authored-by: Eric Chauvet <eric.chauvet@test-tree.com>
Co-authored-by: Max Prokhorov <prokhorov.max@outlook.com>
547 lines
10 KiB
CSS
547 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: #ccc;
|
|
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-del-schedule {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.button-reboot,
|
|
.button-reconnect,
|
|
.button-ha-del,
|
|
.button-rfb-forget,
|
|
.button-lightfox-clear,
|
|
.button-del-network,
|
|
.button-del-parent,
|
|
.button-del-schedule,
|
|
.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-update-password,
|
|
.button-add-network,
|
|
.button-add-mapping,
|
|
.button-add-rpnrule,
|
|
.button-add-rpntopic,
|
|
.button-upgrade-browse,
|
|
.button-rfb-learn,
|
|
.button-lightfox-learn,
|
|
.button-ha-add,
|
|
.button-ha-config,
|
|
.button-settings-backup,
|
|
.button-settings-restore,
|
|
.button-dbgcmd,
|
|
.button-apikey {
|
|
background: rgb(0, 192, 0); /* green */
|
|
}
|
|
|
|
.button-add-switch-schedule,
|
|
.button-add-light-schedule,
|
|
.button-add-curtain-schedule {
|
|
background: rgb(0, 192, 0); /* green */
|
|
display: none;
|
|
}
|
|
|
|
.button-more-network,
|
|
.button-more-schedule,
|
|
.button-wifi-scan,
|
|
.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 {
|
|
background-image: url('images/loading.gif');
|
|
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;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
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%;
|
|
}
|
|
|
|
#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
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
table.dataTable.display tbody td {
|
|
text-align: center;
|
|
}
|
|
|
|
#packets_filter {
|
|
display: none;
|
|
}
|
|
|
|
.filtered {
|
|
color: rgb(202, 60, 60);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
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;
|
|
}
|