- /* -----------------------------------------------------------------------------
- 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;
- }
-
- .pure-form-message,
- .pure-form-message-inline {
- color: #9e9e9e;
- font-size: 80%;
- }
-
- .pure-form-message a,
- .pure-form-message-inline 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;
- }
-
- .state {
- border-top: 1px solid #eee;
- margin-top: 20px;
- padding-top: 30px;
- font-size: 80%;
- line-height: 28px;
- }
-
- .state label {
- width: 33%;
- }
-
- .state span {
- font-weight: bold;
- display: block;
- }
-
- .right {
- text-align: right;
- }
-
- .terminal {
- font-family: 'Courier New', monospace;
- font-size: 80%;
- background-color: #121212;
- margin-top: 10px;
- margin-bottom: 10px;
- }
-
- #cmd-input,
- #cmd-output {
- border-style: none;
- border-color: #121212;
- color: #0f0;
- background-color: rgba(0, 0, 0, 0);
- line-height: 100%;
- }
-
- #cmd-output {
- -webkit-box-shadow: none;
- box-shadow: none;
- }
-
- #cmd-input {
- -webkit-box-shadow: inset 0 1px 1px #555;
- box-shadow: inset 0 1px 1px #555;
- }
-
- /* -----------------------------------------------------------------------------
- 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-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-cmd,
- .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-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
- -------------------------------------------------------------------------- */
-
- .pure-form .toggleWrapper {
- display: inline-block;
- vertical-align: middle;
- 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;
- }
- .toggleWrapper label.toggle {
- width: 130px;
- }
- .toggle {
- letter-spacing:normal;
- cursor: pointer;
- display: inline-block;
- position: relative;
- height: 100%;
- background: #e9e9e9;
- color: #a9a9a9;
- border-radius: 4px;
- 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;
- 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;
- transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
- 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;
- 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
- -------------------------------------------------------------------------- */
-
- #cmd-output {
- height: 400px;
- margin-bottom: 10px;
- }
-
- #cmd-input {
- display: inline-block;
- }
-
- /* -----------------------------------------------------------------------------
- Password input controls
- -------------------------------------------------------------------------- */
- .password-reveal {
- font-family: EmojiSymbols,Segoe UI Symbol;
- background: rgba(0,0,0,0);
- position: absolute;
- display: inline-block;
- float: right;
- z-index: 50;
- margin-top: 0.3em;
- margin-left: -1.4em;
- vertical-align: middle;
- font-size: 1.2em;
- }
-
- .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%)
- }
|