commit a30d499eef0e349c0a9effa0280d7ff37f100912
Author: topaLE <63888024+topa-LE@users.noreply.github.com>
Date:   Mon May 11 17:19:32 2020 +0200

    Initial commit

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..aaf95a8
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 topaLE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..90f9cb5
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# fhem_blue_dark_themes
+ FHEM WebIF Blue Dark Themes
diff --git a/images/default/10px-kreis-gelb.png b/images/default/10px-kreis-gelb.png
new file mode 100644
index 0000000..57f9517
Binary files /dev/null and b/images/default/10px-kreis-gelb.png differ
diff --git a/images/default/10px-kreis-gruen.png b/images/default/10px-kreis-gruen.png
new file mode 100644
index 0000000..7e4b516
Binary files /dev/null and b/images/default/10px-kreis-gruen.png differ
diff --git a/images/default/10px-kreis-rot.png b/images/default/10px-kreis-rot.png
new file mode 100644
index 0000000..aedfc1a
Binary files /dev/null and b/images/default/10px-kreis-rot.png differ
diff --git a/images/default/Zoom-in.png b/images/default/Zoom-in.png
new file mode 100644
index 0000000..73c3a15
Binary files /dev/null and b/images/default/Zoom-in.png differ
diff --git a/images/default/Zoom-out.png b/images/default/Zoom-out.png
new file mode 100644
index 0000000..3cf548d
Binary files /dev/null and b/images/default/Zoom-out.png differ
diff --git a/images/default/fhemicon_dark_topaLE.png b/images/default/fhemicon_dark_topaLE.png
new file mode 100644
index 0000000..9139e68
Binary files /dev/null and b/images/default/fhemicon_dark_topaLE.png differ
diff --git a/images/default/fhemicon_darksmall.png b/images/default/fhemicon_darksmall.png
new file mode 100644
index 0000000..f8e0db7
Binary files /dev/null and b/images/default/fhemicon_darksmall.png differ
diff --git a/images/default/icoEverything.png b/images/default/icoEverything.png
new file mode 100644
index 0000000..2e5162f
Binary files /dev/null and b/images/default/icoEverything.png differ
diff --git a/pgm2/dashboard_topa_LEstyle.css b/pgm2/dashboard_topa_LEstyle.css
new file mode 100644
index 0000000..ffc6f92
--- /dev/null
+++ b/pgm2/dashboard_topa_LEstyle.css
@@ -0,0 +1,602 @@
+@import url('https://fonts.googleapis.com/css?family=Titillium+Web') ;
+.ui-widget-overlay {
+background : #000000;
+opacity : 0.7;
+position : fixed;
+top : 0;
+left : 0;
+width : 100%;
+height : 100%;
+}
+.ui-corner-bottom, .ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-all {
+border-radius : 5px;
+}
+#dashboard {
+margin-top : -10px;
+}
+#dashboard .dashboard_column {
+float : left;
+}
+#dashboard .dashboard_columnhelper {
+border : #CCCCCC dotted 1px;
+}
+#dashboard .dashboard_widgetinner .block .block {
+border : none;
+box-shadow : none;
+}
+#dashboard .dashboard_row {
+width : 100%;
+height : inherit;
+padding : 0;
+}
+#dashboard .dashboard_columncenter {
+height : inherit;
+}
+#dashboard .dashboard_content {
+padding : 0.2em;
+}
+#dashboard .ui-widget-content {
+background-color : #333333;
+color : #eeeeee;
+border : none;
+font-size : 13px !important ;
+font-family : 'Titillium Web', Arial, Helvetica, sans-serif !important ;
+}
+#dashboard .ui-widget-content a {
+color : #eeeeee;
+}
+#dashboard .dashboard_content.table {
+box-shadow : none !important ;
+border-radius : 0 0 8px 8px !important ;
+border : #FFFFFF none 1px !important ;
+border-left : 1px solid #FFFFFF !important ;
+border-right : 1px solid #FFFFFF !important ;
+border-bottom : 1px solid #FFFFFF !important ;
+}
+#dashboard .dashboard_button_icon {
+width : 13px;
+height : 14px;
+background-repeat : no-repeat;
+float : left;
+background-image : url(../images/default/dashboardicons.png);
+}
+#dashboard .dashboard_button_iconplus {
+margin : 0.1em 0.4em;
+float : right;
+background-position : -65px 0;
+}
+#dashboard .dashboard_button_iconminus {
+margin : 0.1em 0.4em;
+float : right;
+background-position : -52px 0;
+}
+#dashboard .dashboard-button {
+display : inline-block;
+padding : 0 0.6em;
+height : 1.9em;
+cursor : pointer;
+background-color : #f5f5f5;
+background-repeat : no-repeat !important ;
+background-position : 7px;
+border : #FFFFFF solid 1px;
+border-radius : 4px;
+margin-top : 2px;
+width : 14px;
+position : absolute;
+}
+#dashboard .dashboard-button-defineDetails {
+right : 10px;
+top : 0.2em;
+background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY4NjYwOTg0NEJFQzExRTI4MjI3OTFCOEEyNzY2MzE2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY4NjYwOTg1NEJFQzExRTI4MjI3OTFCOEEyNzY2MzE2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjg2NjA5ODI0QkVDMTFFMjgyMjc5MUI4QTI3NjYzMTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjg2NjA5ODM0QkVDMTFFMjgyMjc5MUI4QTI3NjYzMTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7i4cyWAAAAsElEQVR42mJgoCEwA+IPUGxGrKZkIE6AsjOB+D8UZyKJReHTDNOwGoifIPEfAvFGJH4gIQMIYZyuWI3mCm8oRhZfhCvA0pCcvRGLmnVI3klDD9gPaE50gopvRDLMG00NSA8DCw6vcELpX0hifwnFeRrUef+hzsXlhSfYvMCA5GTkQPSAYvTAxQoyyYlGJiQDviOxFwPxCyQ+iL0eh1oUEA7EfniSciySPG0yE8kAIMAAicRYTX3YPyoAAAAASUVORK5CYII=") !important ;
+}
+#dashboard .dashboard-button-setPosition {
+right : 45px;
+top : 0.2em;
+background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4XtWRUQrAMAhDneyg9mT2ptugHRaCY/FnLJAveWKifCW7AS3Avlj2AmzrFUrDIYhgJNwvN4VcBDwiYC5/CyclBpDDoe2poATGEuegs3AswCUIk/8+pl2K8uE/6ATG4BstrVLVgQAAAABJRU5ErkJggg==") !important ;
+}
+#dashboard .dashboard-button-setPosition:not(.ui-state-disabled) {
+background-color : red !important ;
+}
+#dashboard .dashboard-button-goBack {
+right : 80px;
+top : 0.2em;
+background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAZ0lEQVQ4jd3RMQqDQBBA0YekV0wj3v8QNqZTJBEtPY42K9l2p0s+TDHF/zAMf8kTE4aovOPEp1TucGRyE5XXUhnmJJfMCFUKVMp55EuLzfeENhBUY0mRA30kkr/xHQnckQWvaODHuADAUSEXjMLoMwAAAABJRU5ErkJggg==") !important ;
+}
+#dashboard .dashboard-button-editTab {
+right : 115px;
+top : 0.2em;
+background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOklEQVR42o3SPUhCURjG8WPR1tBgU23SEEH0AUFDSURDtFU4FOQSQh9LlDgEUdSiU7QUuSq0RCAIYhTl0JCUIEFLRUQ1NLWIEGX9D74XRPJ4XvjB5V7Oc8597nUpuxnDBDbxWfnAZbG4Ce9w4xmzuLINaEALlrGBRnxjCzs2AWF4MA0vYmjHL7pwbwoYRxz9COABJ9jDG0KmE7Qhh0U5chR9mJSQF1MH+j3PcYcIbuFHM3bRjQ9TwLZ8smGcSuP7yMIn91StgFEcYwDzUpy+d4kU1qt3qwxoRR6rqvyzxKTAFfRgBD+mAF3clJxAF7iAEg7Ri9f/2nYCBmXBkjTdiQPcYA7JWt/aCdDveoFHzOAaR7LrmjJMdYCeL1X+baPSRckmYAgZuS4gLTs/qTrjBHQgiATOUKy30Jk/KjtDEXVEBowAAAAASUVORK5CYII=");
+}
+#dashboard .ui-button {
+display : inline-block;
+line-height : normal;
+margin-right : 0.1em;
+cursor : pointer;
+vertical-align : middle;
+text-align : center;
+overflow : visible;
+}
+#dashboard .ui-button, #dashboard .ui-button:active {
+text-decoration : none;
+}
+#dashboard .ui-button .ui-button-text {
+display : block;
+line-height : normal;
+}
+#dashboard .ui-button-text-only .ui-button-text {
+padding : 0.4em 1em;
+}
+#dashboard .ui-resizable {
+position : relative;
+}
+#dashboard .ui-resizable-handle {
+position : absolute;
+font-size : 0.1px;
+}
+#dashboard .ui-resizable-se {
+cursor : se-resize;
+width : 12px;
+height : 12px;
+right : 1px;
+bottom : 1px;
+background-image : url("data:image/gif;base64,R0lGODlhEAAQAIABAJOnY////yH5BAEAAAEALAAAAAAQABAAAAIZjI+py+0IwDtx2ktlqI1zDCae9mXGGKZgAQA7");
+}
+#dashboard .ui-sortable-placeholder {
+border : #FFFFFF dotted 1px;
+visibility : visible !important ;
+height : 25px !important ;
+width : 150px;
+}
+#dashboard .block.wide {
+border-radius : 5px;
+}
+#dashboard .dashboard_tabcontent {
+width : 100%;
+padding : 0;
+margin : 0;
+}
+#dashboard .dashboard_widget {
+border-radius : 8px;
+float : left;
+}
+#dashboard .dashboard_widgethelper {
+background-color : #111111;
+}
+#dashboard .dashboard_widgetheader {
+background : none 0 0 repeat scroll #333333;
+border : #FFFFFF solid 1px;
+box-shadow : 5px 5px 5px #000000;
+margin : 0.2em;
+padding-bottom : 4px;
+padding-top : 3px;
+padding-left : 0.7em;
+font-weight : normal;
+}
+#dashboard .ui-widget .ui-widget {
+font-size : 1em;
+font-family : 'Titillium Web', Arial, Helvetica, sans-serif;
+}
+#dashboard .ui-widget-header {
+background-color : #222222;
+color : #ffffff;
+}
+#dashboard .ui-helper-clearfix:before, #dashboard .ui-helper-clearfix:after {
+content : "";
+display : table;
+border-collapse : collapse;
+}
+#dashboard .ui-helper-clearfix:after {
+clear : both;
+}
+#dashboard .ui-helper-clearfix {
+min-height : 0;
+}
+#dashboard .ui-helper-reset {
+margin : 0;
+padding : 0;
+border : 0;
+outline : 0;
+line-height : 1.3;
+text-decoration : none;
+font-size : 100%;
+list-style : none;
+}
+#dashboard .ui-tabs {
+position : relative;
+padding : 0;
+}
+#dashboard .ui-tabs .ui-tabs-panel {
+display : block;
+border-width : 0;
+background : none;
+box-shadow : 0 0 0 0;
+border-radius : 0;
+padding : 0;
+}
+#dashboard .ui-tabs .ui-tabs-nav {
+margin : 0;
+padding : 0.2em 140px 0.2em 0.2em;
+background-image : none;
+}
+#dashboard .ui-tabs .ui-tabs-nav li {
+list-style : none;
+float : left;
+position : relative;
+top : 0;
+margin : 1px 0.2em 0 0;
+padding : 0;
+}
+#dashboard .ui-tabs .ui-tabs-nav li a {
+float : none;
+padding : 0;
+}
+#dashboard .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+float : left;
+padding : 0.5em 0.5em;
+text-decoration : none;
+color : black;
+}
+#dashboard .ui-tabs-icon {
+width : 23px;
+height : 23px;
+margin : -8px 2px -6px -3px;
+padding-right : 2px;
+}
+#dashboard .dashboard_tabnav_hidden {
+background-color : #333333;
+}
+#dashboard .ui-widget-header .ui-state-default {
+border : #FFFFFF solid 1px;
+background-color : #adadad;
+font-weight : normal;
+color : #333333;
+}
+#dashboard .ui-widget-header .ui-state-active {
+border : #FFFFFF solid 1px;
+background : #333333;
+font-weight : normal;
+color : #ffffff;
+}
+#dashboard .ui-state-default a {
+color : #333333;
+text-decoration : none;
+}
+#dashboard .dashboard_tab.ui-state-default a {
+color : #333333 !important ;
+text-decoration : none;
+}
+#dashboard .dashboard_tab.ui-state-default a svg:not([fill]) {
+fill : #333333;
+}
+#dashboard .dashboard_tab.ui-state-active a {
+color : #CCCCCC !important ;
+text-decoration : none;
+}
+#dashboard .dashboard_tab.ui-state-active a svg:not([fill]) {
+fill : #CCCCCC;
+}
+#dashboard .ui-state-disabled {
+opacity : 0.35;
+}
+#dashboard .ui-state-active a {
+color : #ffffff;
+text-decoration : none;
+}
+#dashboard .ui-state-hover {
+border : #FFFFFF solid 1px;
+font-weight : normal;
+color : #ffffff;
+}
+#dashboard .ui-state-hover a, #dashboard .ui-state-focus a:hover {
+color : #ffffff;
+text-decoration : none;
+}
+#dashboard .dashboard_rowcenter {
+position : relative;
+}
+#dashboard-dialog {
+overflow : visible !important ;
+position : absolute;
+top : 0;
+left : 0;
+padding : 0.2em;
+outline : 0;
+border : #FFFFFF solid 1px;
+z-index : 100;
+font-size : 13px !important ;
+font-family : 'Titillium Web', Arial, Helvetica, sans-serif !important ;
+}
+#dashboard-dialog .ui-dialog-content {
+padding : 0;
+}
+#dashboard-dialog .ui-widget-header {
+background-color : #222222;
+color : #ffffff;
+padding : 5px;
+}
+#dashboard-dialog .ui-button {
+display : inline-block;
+line-height : normal;
+margin-right : 0.1em;
+cursor : pointer;
+vertical-align : middle;
+text-align : center;
+overflow : visible;
+}
+#dashboard-dialog .ui-button, #dashboard-dialog .ui-button:hover, #dashboard-dialog .ui-button:active {
+text-decoration : none;
+}
+#dashboard-dialog .ui-button .ui-button-text {
+display : block;
+line-height : normal;
+}
+#dashboard-dialog .ui-button-text-only .ui-button-text {
+padding : 0.4em 1em;
+}
+#dashboard-dialog .ui-dialog-buttonpane {
+background-color : #222222;
+padding : 5px;
+}
+#dashboard-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+float : right;
+}
+#dashboard-dialog .ui-helper-clearfix:before, #dashboard-dialog .ui-helper-clearfix:after {
+content : "";
+display : table;
+border-collapse : collapse;
+}
+#dashboard-dialog .ui-helper-clearfix:after {
+clear : both;
+}
+#dashboard-dialog .ui-helper-clearfix {
+min-height : 0;
+}
+#dashboard-dialog .ui-helper-reset {
+margin : 0;
+border : 0;
+outline : 0;
+line-height : 1.3;
+text-decoration : none;
+font-size : 100%;
+list-style : none;
+}
+#dashboard-dialog .ui-tabs {
+position : relative;
+padding : 0.2em;
+border : none;
+}
+#dashboard-dialog .ui-tabs .ui-tabs-panel {
+display : block;
+border-width : 0;
+background : none;
+box-shadow : 0 0 0 0;
+border-radius : 0;
+padding : 0;
+}
+#dashboard-dialog .ui-tabs .ui-tabs-nav {
+margin : 0;
+padding : 0.2em 0.2em 0.4em;
+}
+#dashboard-dialog .ui-tabs .ui-tabs-nav li {
+list-style : none;
+float : left;
+position : relative;
+top : 0;
+margin : 1px 0.2em 0 0;
+padding : 0;
+}
+#dashboard-dialog .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+float : left;
+padding : 0.5em 1em;
+text-decoration : none;
+}
+#dashboard-dialog .ui-state-default {
+border : #FFFFFF solid 1px;
+background-color : #adadad;
+font-weight : normal;
+color : #333333;
+}
+#dashboard-dialog .ui-state-default a {
+color : #333333;
+text-decoration : none;
+}
+#dashboard-dialog .ui-state-disabled {
+border : #444444 solid 1px;
+background : #333333;
+font-weight : normal;
+color : #444444;
+}
+#dashboard-dialog .ui-state-active {
+border : #FFFFFF solid 1px;
+background : #333333;
+font-weight : normal;
+color : #ffffff;
+}
+#dashboard-dialog .ui-state-active a {
+color : #ffffff;
+text-decoration : none;
+}
+#dashboard-dialog .ui-state-hover {
+border : #FFFFFF solid 1px;
+font-weight : normal;
+color : #ffffff;
+}
+#dashboard-dialog .ui-state-hover a, #dashboard-dialog .ui-state-hover a:hover {
+color : #ffffff;
+text-decoration : none;
+}
+.evo-pop {
+width : 204px;
+padding : 3px 3px 0;
+border : solid 1px;
+}
+.evo-pop-ie {
+z-index : 10000;
+width : 212px;
+padding : 3px;
+}
+.evo-palette td {
+font-size : 1px;
+border : #c0c0c0 solid 1px;
+padding : 7px;
+cursor : pointer;
+}
+.evo-palette tr.top td {
+border-bottom : 0;
+}
+.evo-palette tr.in td {
+border-top : 0;
+border-bottom : 0;
+}
+.evo-palette tr.bottom td {
+border-top : 0;
+}
+.evo-palette div.sep {
+height : 3px;
+}
+.evo-palette, .evo-palette-ie {
+border-collapse : separate;
+border-spacing : 4px 0;
+}
+.evo-palette th, .evo-palette-ie th {
+border : 0;
+padding : 5px 3px;
+text-align : left;
+font-weight : normal;
+background : transparent !important ;
+}
+.evo-palette-ie td {
+font-size : 1px;
+border : #c0c0c0 solid 1px;
+padding : 7px;
+cursor : pointer;
+}
+.evo-palette2, .evo-palette2-ie {
+margin : auto;
+border-collapse : collapse;
+}
+.evo-palette2 td, .evo-palette2-ie td {
+font-size : 1px;
+cursor : pointer;
+}
+.evo-palette2 td {
+padding : 6px 7px;
+}
+.evo-palette2-ie td {
+padding : 5px;
+}
+.evo-palcenter {
+padding : 5px;
+text-align : center;
+}
+.evo-colorind, .evo-colorind-ie, .evo-colorind-ff {
+border : #c3c3c3 solid 1px;
+width : 20px;
+height : 20px;
+float : right;
+margin-top : 3px;
+}
+.evo-colorind {
+position : relative;
+top : 2px;
+}
+.evo-colorind-ie {
+position : relative;
+top : -23px;
+}
+.evo-colorbox-ie {
+font-size : 8px;
+padding : 3px 9px !important ;
+}
+.evo-colortxt-ie {
+position : relative;
+top : -6px;
+}
+.evo-pop:after, .evo-pop-ie:after, .evo-colorind:after, .evo-colorind-ie:after, .evo-colorind-ff:after, .evo-color span:after, .evo-cHist:after {
+content : ".";
+display : block;
+height : 0;
+clear : both;
+visibility : hidden;
+font-size : 0;
+}
+.evo-color {
+width : 94px;
+padding : 1px 3px 0 4px;
+}
+.evo-color div {
+border : #808080 solid 1px;
+border-right : 1px solid #c0c0c0;
+border-bottom : 1px solid #c0c0c0;
+padding : 3px;
+margin-bottom : 5px;
+width : 10px;
+height : 10px;
+float : left;
+}
+.evo-color span {
+font-size : 15px;
+margin : 1px 0 4px 3px;
+float : left;
+}
+.evo-sep {
+height : 10px;
+font-size : 0;
+}
+.evo-more {
+padding : 4px 5px 4px;
+font-size : smaller;
+}
+.evo-cHist {
+padding : 3px;
+}
+.evo-cHist div {
+cursor : pointer;
+border : #c0c0c0 solid 1px;
+padding : 3px;
+margin : 5px;
+width : 10px;
+height : 10px;
+float : left;
+}
+a.evo-hist {
+margin-left : 6px;
+}
+.evo-pointer {
+cursor : pointer;
+visibility : hidden;
+position : absolute;
+}
+#dashboard td table.readingsGroup {
+padding : 0;
+}
+#dashboard td table {
+width : 100%;
+}
+#dashboard .dashboard_dev_container {
+padding : 0;
+}
+#dashboard .dashboard_dev_container > table > tbody > tr > td {
+padding : 0;
+}
+body.dashboard_fullsize #menuScrollArea {
+display : none;
+}
+body.dashboard_fullsize #hdr {
+display : none;
+}
+body.dashboard_fullsize {
+background-image : none;
+}
+body.dashboard_fullsize #content {
+position : inherit !important ;
+overflow : visible !important ;
+float : none !important ;
+width : 100% !important ;
+height : 100% !important ;
+padding : 0 !important ;
+border : none !important ;
+}
+.dashboard_widgetheader svg {
+margin-right : 5px;
+}
diff --git a/pgm2/topa_LECommon.css b/pgm2/topa_LECommon.css
new file mode 100644
index 0000000..4b470a8
--- /dev/null
+++ b/pgm2/topa_LECommon.css
@@ -0,0 +1,75 @@
+@import url('dashboard_topa_LEstyle.css') ;
+@import url('https://fonts.googleapis.com/css?family=Titillium+Web') ;
+table.readings td:nth-child(2) {
+word-break : break-all;
+}
+div.ui-dialog {
+border : #f3f3f3 solid 4px;
+padding : 0.2em;
+}
+div.ui-dialog div.ui-dialog-titlebar {
+display : none;
+}
+div.ui-widget-content {
+background : #081824;
+color : #F3F3F3;
+}
+div.ui-widget-content a {
+color : #CCCCCC !important ;
+text-decoration : none !important ;
+}
+.ui-widget {
+font-family : 'Titillium Web', Arial, sans-serif !important ;
+}
+.ui-button-text {
+font-weight : normal !important ;
+color : #555 !important ;
+}
+div.detLink {
+display : inline-block;
+margin-right : 1.5em;
+padding-left : 11px;
+}
+.fhemlog {
+color : #FFFFFF;
+}
+svg.zw_nr .zwBox {
+stroke : #fff;
+stroke-width : 2px;
+fill : #000;
+}
+svg.zw_nr .zwDongle {
+stroke : red;
+stroke-width : 2px;
+fill : #000;
+}
+svg.zw_nr .zwMargin {
+stroke : #fff;
+stroke-width : 1px;
+fill : none;
+}
+svg.zw_nr .zwLine {
+stroke : #fff;
+stroke-width : 1px;
+}
+svg.zw_nr .zwArrowHead {
+fill : #fff;
+stroke-width : 1px;
+}
+svg.zw_nr {
+height : auto;
+width : auto;
+margin : 0;
+}
+#errmsg {
+border-radius : 3px;
+border : #000 solid 1px;
+background-color : #081824;
+padding : 4px;
+margin-left : 20px;
+font-family : 'Titillium';
+position : fixed;
+top : 18px;
+left : 350px;
+z-index : 10;
+}
diff --git a/pgm2/topa_LEstyle.css b/pgm2/topa_LEstyle.css
new file mode 100644
index 0000000..6d424d6
--- /dev/null
+++ b/pgm2/topa_LEstyle.css
@@ -0,0 +1,459 @@
+
+@import url('https://fonts.googleapis.com/css?family=Titillium+Web') ;
+@import url('topa_LECommon.css') ;
+body {
+background-color : #18222a;
+background-image : url(../images/default/fhemicon_dark_topaLE.png);
+background-repeat : no-repeat;
+color : #CCCCCC;
+font-family : 'Titillium', Arial, Helvetica, sans-serif;
+font-size : 15px;
+}
+#logo {
+position : absolute;
+top : 10px;
+left : 20px;
+width : 140px;
+height : 150px;
+}
+#menu {
+position : absolute;
+top : 170px;
+left : 20px;
+width : 140px;
+}
+#console {
+width : 100%;
+top : 2em;
+bottom : 0;
+position : absolute;
+overflow-y : auto;
+}
+#hdr {
+position : absolute;
+top : 10px;
+left : 200px;
+}
+#content {
+position : absolute;
+top : 50px;
+left : 200px;
+bottom : 20px;
+right : 10px;
+padding-left : 0;
+padding-top : 4px;
+}
+a {
+color : #CCCCCC;
+text-decoration : none;
+}
+a:hover {
+color : #ffffff;
+}
+.wide {
+width : 100%;
+}
+table.block {
+border : #30415a solid 1px;
+width : 100%;
+background : #081824;
+box-shadow : 4px 4px 4px #0a0f17;
+}
+table.block tr.odd {
+background : #0b1319;
+}
+table.block tr.sel {
+background : #970f05;
+}
+table {
+border-radius : 8px;
+border-spacing : 0;
+padding-bottom : 6px;
+padding-top : 6px;
+}
+table.room {
+font-family : 'Titillium';
+background : #081824;
+width : 160px;
+border : #30415a solid 1px;
+box-shadow : 4px 4px 4px #0a0f17;
+}
+table.room a {
+color : #CCCCCC;
+text-decoration : none;
+}
+table.room a:hover {
+color : #eba15d;
+}
+table.room tr.sel {
+background : #eba15d;
+}
+table.room tr.sel a {
+font-weight : 500;
+font-size : 15px;
+color : #081824 !important ;
+}
+th {
+font-family : 'Titillium';
+color : #f8d0a5;
+text-align : left;
+padding-left : 10px;
+font-weight : 200;
+font-size : 14px;
+}
+td {
+padding-left : 10px;
+padding-right : 10px;
+padding-top : 3px;
+padding-bottom : 3px;
+}
+input {
+outline : none;
+background-color : #d2deef;
+border : #30415a solid 2px;
+color : #303030;
+font-family : 'Titillium';
+padding : 6px;
+margin-left : 10px;
+border-radius : 8px;
+box-shadow : 4px 4px 4px #0a0f17;
+}
+input:focus {
+border : #f4a242 solid 2px;
+}
+input:disabled {
+color : #808080;
+}
+input[type="submit"] {
+background-color : #d2deef;
+border-style : outset;
+border-width : 2px;
+}
+textarea {
+min-width : 1000px;
+background-color : #111111;
+border : #ffffff solid 1px;
+color : #cccccc;
+padding : 5px;
+margin-left : 10px;
+border-radius : 8px;
+box-shadow : 4px 4px 4px #0a0f17;
+}
+#left {
+position : absolute;
+top : 140px;
+left : 60px;
+width : 160px;
+}
+#right {
+position : absolute;
+top : 20px;
+left : 200px;
+bottom : 20px;
+right : 10px;
+}
+body > div#left {
+position : fixed;
+}
+div#block {
+border : gray solid 1px;
+background : #101010;
+padding : 0.7em;
+}
+div#dist {
+padding-top : 0.3em;
+}
+button.dist {
+margin : 10px;
+background : transparent;
+border : 0;
+cursor : pointer;
+}
+h2, h3, h4 {
+color : #EEE;
+line-height : 1.3;
+margin-top : 1.5em;
+font-family : 'Titillium', Verdana;
+}
+a img {
+border-style : none;
+}
+.col2 {
+text-align : center;
+}
+tr.column > td {
+padding-top : 5px;
+padding-right : 5px;
+padding-left : 8px;
+vertical-align : top;
+}
+.makeTable {
+display : inline;
+float : left;
+clear : left;
+margin-top : 10px;
+margin-bottom : 20px;
+}
+.makeSelect {
+display : inline;
+float : left;
+clear : left;
+vertical-align : middle;
+}
+select {
+margin-left : 5px;
+margin-right : 5px;
+font-family : 'Titillium';
+}
+.get, .set, .attr {
+margin-bottom : 5px;
+float : left;
+font-family : 'Titillium';
+}
+.slider {
+margin-left : 10px;
+float : left;
+width : 250px;
+height : 26px;
+font-family : 'Titillium';
+}
+.get .slider, .set .slider, .attr .slider {
+background : #101010;
+border-radius : 8px;
+}
+.set .set {
+margin-bottom : 2px;
+margin-top : 3px;
+}
+.slider {
+margin-left : 10px;
+float : left;
+width : 250px;
+height : 26px;
+border-style : solid;
+border-width : 2px;
+border-color : #555555;
+}
+.handle {
+position : relative;
+cursor : pointer;
+width : 50px;
+height : 20px;
+line-height : 20px;
+border : solid 2px;
+color : white;
+text-align : center;
+}
+.downText, .makeSelect select {
+margin : 0.7em;
+}
+ul.sortable-src, ul.sortable-dest {
+min-width : 130px;
+min-height : 1.8em;
+list-style-type : none;
+border : white solid 2px;
+vertical-align : middle;
+border-radius : 3px;
+margin : 3px;
+background : #aaa;
+padding : 2px;
+}
+ul.sortable-src li, ul.sortable-dest li {
+color : black !important ;
+font-size : 0.8em;
+line-height : 1.6em;
+vertical-align : middle;
+text-align : left;
+border-radius : 3px;
+margin : 3px;
+padding : 2px;
+padding-left : 4px;
+min-width : 120px;
+}
+ul.sortable-dest {
+background : #101010;
+}
+span.sort-item-delete-link {
+float : right;
+margin : 0;
+vertical-align : middle;
+margin-left : 3px;
+padding : 0;
+}
+.ui-state-highlight {
+height : 1.1em;
+line-height : 1.1em;
+}
+svg {
+height : 32px;
+width : 32px;
+vertical-align : middle;
+margin : 2px 0;
+}
+svg:not([fill]) {
+fill : #fff;
+}
+g.on {
+fill : red;
+}
+.rc_body {
+border-style : solid;
+border-color : gray;
+border-width : 2px;
+padding : 5px;
+background : #101010;
+font-size : 6px;
+}
+.rc_button {
+padding : 5px 7px;
+}
+.rc_button img {
+border-style : solid;
+border-width : 1px;
+border-color : transparent;
+}
+.rc_button img:active {
+border-color : gray;
+}
+.changed a, .changed {
+color : #eba15d !important ;
+}
+.colorpicker_ct .slider {
+background : url(../jscolor/ct_background.svg);
+}
+.colorpicker_ct_mired .slider {
+background : url(../jscolor/ct_mired_background.svg);
+}
+.colorpicker_hue .slider {
+background : url(../jscolor/hue_background.svg);
+}
+.get, .set, .attr {
+margin-bottom : 5px;
+float : left;
+}
+select.svgSrc {
+width : 100px;
+}
+select.svgColumn {
+width : 50px;
+}
+select.svgRegexp {
+width : 120px;
+}
+#fwmenu {
+position : absolute;
+z-index : 1005;
+text-align : left;
+max-width : 600px;
+font-weight : normal;
+font-size : 100%;
+background : black;
+border : white solid 1px;
+}
+#fwmenu li a {
+color : white;
+}
+div#svgmarker {
+position : absolute;
+z-index : 1005;
+padding : 6px 10px;
+text-align : left;
+max-width : 600px;
+color : white;
+background : black;
+border : white solid 2px;
+border-radius : 4px;
+}
+.log {
+font-family : 'Titillium';
+}
+pre.log {
+border-radius : 3px;
+border : #30415a solid 1px;
+background-color : #1e2b36;
+padding : 12px;
+margin-left : 10px;
+font-family : 'Titillium';
+}
+pre {
+background-color : #18222a;
+border : #30415a solid 1px;
+border-radius : 3px;
+font-family : 'Titillium';
+padding : 7px;
+word-break : break-all;
+}
+pre.dval {
+word-break : break-all;
+}
+#console {
+border-radius : 3px;
+border : #30415a solid 1px;
+background-color : #1e2b36;
+padding : 12px;
+margin-left : 10px;
+width : 95%;
+}
+select.svgSrc, select.svgRegexp, input {
+font-family : 'Titillium';
+}
+.changed a, .changed {
+color : #8c1404;
+}
+#logo {
+position : fixed;
+top : 30px;
+left : 20px;
+width : 100px;
+height : 105px;
+text-align : center;
+font-family : 'Titillium', Times-Roman;
+font-size : xx-large;
+font-weight : bold;
+}
+select.svgSrc {
+width : 100px;
+background-color : #dfdfd9;
+font-family : "Titillium";
+}
+select.svgColumn {
+width : 50px;
+background-color : #dfdfd9;
+}
+select.svgRegexp {
+width : 120px;
+background-color : #dfdfd9;
+}
+select.set {
+background-color : #dfdfd9;
+}
+input.maininput {
+width : 500px;
+}
+.changed a, .changed {
+color : #7e1709;
+}
+#devSpecHelp {
+border-radius : 3px;
+border : #666 solid 1px;
+background-color : #373c48;
+padding : 10px;
+font-family : 'Titillium';
+}
+.cm-s-blackboard.CodeMirror {
+background : #0b1319 !important ;
+color : #F8F8F8;
+}
+.cm-s-blackboard .CodeMirror-gutters {
+background : #0b1319 !important ;
+}
+.CodeMirror {
+font-family : 'Titillium' !important ;
+font-size : 16px;
+height : 500px !important ;
+width : 1100px !important ;
+border-radius : 3px;
+border : #30415a solid 1px;
+padding : 5px;
+margin-left : 10px;
+}
diff --git a/screenshots/screen-0.png b/screenshots/screen-0.png
new file mode 100644
index 0000000..9f7a2d6
Binary files /dev/null and b/screenshots/screen-0.png differ
diff --git a/screenshots/screen-1.png b/screenshots/screen-1.png
new file mode 100644
index 0000000..f547c06
Binary files /dev/null and b/screenshots/screen-1.png differ
diff --git a/screenshots/screen-2.png b/screenshots/screen-2.png
new file mode 100644
index 0000000..6a4baf5
Binary files /dev/null and b/screenshots/screen-2.png differ
diff --git a/screenshots/screen-3.png b/screenshots/screen-3.png
new file mode 100644
index 0000000..5a8cc2f
Binary files /dev/null and b/screenshots/screen-3.png differ
diff --git a/screenshots/screen-4.png b/screenshots/screen-4.png
new file mode 100644
index 0000000..dd653aa
Binary files /dev/null and b/screenshots/screen-4.png differ