diff --git a/fhem/www/pgm2/ios12.js b/fhem/www/pgm2/ios12.js new file mode 100644 index 000000000..bbd7f4063 --- /dev/null +++ b/fhem/www/pgm2/ios12.js @@ -0,0 +1,8 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ +/* jQuery is required*/ + +var imported = document.createElement('script'); +imported.src = '/fhem/pgm2/ios12touchpad.js'; +document.head.appendChild(imported); diff --git a/fhem/www/pgm2/ios12Common.css b/fhem/www/pgm2/ios12Common.css new file mode 100644 index 000000000..4c5283a2c --- /dev/null +++ b/fhem/www/pgm2/ios12Common.css @@ -0,0 +1,121 @@ +/* jQuery-UI mods */ + +/*.ui-dialog { + top: 150px !important; + left: 300px !important; + } + */ + +.ui-corner-all { + border-radius: 7px !important; +} +.ui-widget { +} +.ui-widget-content { + color:inherit !important; +} +.ui-dialog table { + border-spacing:5px!important; + margin:0px!important; + padding:0px!important; + width:100%!important; +} + +.ui-dialog .ui-dialog-titlebar { display:none; } +.ui-dialog-buttonset .ui-button { + color:#FFFFFF !important; +text-shadow: 0px -1px #000000 !important; +background:none !important; +background-color:transparent !important; +border:none !important; +} +.ui-widget-overlay { + background:none !important; + background-color:#000000 !important; + opacity:0.5 !important; +} +.ui-dialog-buttonpane { +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #C0E2FC), +color-stop(0.02, #44AAF8), +color-stop(0.04, #0589F5), +color-stop(0.96, #015DE6), +color-stop(0.98, #0157D8), +color-stop(1, #014BBB), +color-stop(1, #1B72FF) +) !important; +background-image: -o-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -moz-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -webkit-linear-gradient(top, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -ms-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: linear-gradient(to bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +height:44px; + border-radius: 0px 0px 10px 10px !important; +} +.ui-dialog { + background:none !important; +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #F8F9FA), +color-stop(0.02, #EBEDEF), +color-stop(0.04, #E4E6EA), +color-stop(0.96, #E2E5E8), +color-stop(0.98, #D4D7D9), +color-stop(1, #B7B9BB) +) !important; +background-image: -o-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -moz-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -webkit-linear-gradient(top, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -ms-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: linear-gradient(to bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; + +} + +.uzsuSelect.ui-buttonset { + display: block !important; + margin: 6px 0px !important; +} + +.uzsuTimerEntry div:nth-child(2) { + display: inline-grid !important; + margin: 0px 10px 5px 0px !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; } + +/* jQuery-UI mods */ +div.ui-dialog div.ui-dialog-titlebar { display:none; } +div.ui-widget-content { background:#FFFFE7; } +#fwmenu { + position: absolute; z-index:1005; + text-align:left; max-width:600px; + font-weight: normal; font-size: 100%; + background:#FFFFE7; border:1px solid #278727; +} +#fwmenu li a { color:#278727; } + +div#svgmarker { + position: absolute; z-index:1005; padding: 6px 10px; + text-align:left; max-width:600px; + color:black; background:#999; + border:1px solid #fff; border-radius:4px; +} + +svg.zw_nr .zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } +svg.zw_nr .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } +svg.zw_nr .zwLine { stroke:#c0c0c0; stroke-width:1px; } +svg.zw_nr .zwArrowHead { fill:#c0c0c0; stroke-width:1px; } +svg.zw_nr { height:auto; width:auto; margin:0; } diff --git a/fhem/www/pgm2/ios12dashboard.css b/fhem/www/pgm2/ios12dashboard.css new file mode 100644 index 000000000..99859ed21 --- /dev/null +++ b/fhem/www/pgm2/ios12dashboard.css @@ -0,0 +1,415 @@ +/* Strukture author: svenson08*/ +/* Edit for */ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ + +a { + outline: 0; +} + +body { + background: #e0e3e8 !important; +} + +body.dashboard_fullsize #menuScrollArea { + display: none; +} + +body.dashboard_fullsize #hdr { + display: none; +} + +body.dashboard_fullsize #content { + position: inherit !important; + overflow: visible !important; + float: none !important; + width: 100% !important; + height: 100% !important; + padding: 0px !important; + border: none !important; +} + +#dashboard .dashboard_rowcenter { + position: relative; +} + +.dashboard_tabnav { +background-color: #fff !important; +} +ul.dashboard_tabcontent:before{ + content: ""; + display: block; + height: 2px; +width:100%; +margin-bottom: -2px; + + +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e3e8+0,f3f3f3+10,f3f3f3+90,e0e3e8+100 */ +background: #e0e3e8; /* Old browsers */ +background: -moz-linear-gradient(left, #e0e3e8 0%, #f3f3f3 10%, #f3f3f3 90%, #e0e3e8 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e0e3e8), color-stop(10%,#f3f3f3), color-stop(90%,#f3f3f3), color-stop(100%,#e0e3e8)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(left, #e0e3e8 0%,#f3f3f3 10%,#f3f3f3 90%,#e0e3e8 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(left, #e0e3e8 0%,#f3f3f3 10%,#f3f3f3 90%,#e0e3e8 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(left, #e0e3e8 0%,#f3f3f3 10%,#f3f3f3 90%,#e0e3e8 100%); /* IE10+ */ +background: linear-gradient(to right, #e0e3e8 0%,#f3f3f3 10%,#f3f3f3 90%,#e0e3e8 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e3e8', endColorstr='#e0e3e8',GradientType=1 ); /* IE6-9 */ +} +table.dashboard_tabcontent:before{ + content: ""; + display: block; + height: 2px; +width:100%; +margin-bottom: 5px; +/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e3e8+10,d0d0d0+30,d0d0d0+70,e0e3e8+90 */ +background: #e0e3e8; /* Old browsers */ +background: -moz-linear-gradient(left, #e0e3e8 10%, #d0d0d0 30%, #d0d0d0 70%, #e0e3e8 90%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, right top, color-stop(10%,#e0e3e8), color-stop(30%,#d0d0d0), color-stop(70%,#d0d0d0), color-stop(90%,#e0e3e8)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(left, #e0e3e8 10%,#d0d0d0 30%,#d0d0d0 70%,#e0e3e8 90%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(left, #e0e3e8 10%,#d0d0d0 30%,#d0d0d0 70%,#e0e3e8 90%); /* Opera 11.10+ */ +background: -ms-linear-gradient(left, #e0e3e8 10%,#d0d0d0 30%,#d0d0d0 70%,#e0e3e8 90%); /* IE10+ */ +background: linear-gradient(to right, #e0e3e8 10%,#d0d0d0 30%,#d0d0d0 70%,#e0e3e8 90%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e3e8', endColorstr='#e0e3e8',GradientType=1 ); /* IE6-9 */ + +} + +.ui-widget-overlay {background: #000000;opacity: .7;filter: Alpha(Opacity=30);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;} + +/* jQuery UI Fix*/ +#dashboardtabs, #dashboard_tabnav, .dashboard_tab, #dashboard-dialog .ui-widget-header { + border: none !important; + background: none; +} + +/* Dashboard +------------------------------------------------------------------------*/ +.dashboardhidden { height:0px;} +#dashboard .dashboard_column { float: left; min-width: 200px; } +#dashboard .dashboard_columnhelper { border: 1px dotted #CCCCCC;} +#dashboard .dashboard_row { + width: 100%; + height:auto; + min-height: 20px; + padding: 0; + overflow:inherit; +} +#dashboard input, #dashboard select { + margin:0px; +} +#dashboard .dashboard_columncenter {height: inherit;} +#dashboard .dashboard_content { padding: 0.2em; } +#dashboard .ui-widget-content { + border: none; +} +#dashboard .dashboard_widgetheader { +background: none; +border: none; +} +#dashboard .ui-widget-content a { + /*color: #eeeeee;*/ + } +#dashboard .dashboard_content.table { +box-shadow: none !important; +border-radius: 0 0 8px 8px !important; +border: 1px none #FFFFFF!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 0px; } +#dashboard .dashboard_button_iconminus { margin: 0.1em 0.4em; float: right; background-position: -52px 0px; } +#dashboard .dashboard-button, #dashboard .ui-button { +width:28px !important; +height:28px !important; +background-size: 16px 16px!important; +background-position: 6px 6px !important; +border-radius:5px !important; +border: 1px solid #999999 !important; +background-color:#f5f5f5 !important; +cursor: pointer; +background-repeat:no-repeat !important; +position: absolute; +top: 5px; +} +#dashboard .ui-button { +background-color: #f5f5f5 !important; +} +#dashboard .dashboard-button-defineDetails{ +right: 10px; top: 0px; +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: 44px; top: 0px; +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: 112px; top: 0px; +background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAZ0lEQVQ4jd3RMQqDQBBA0YekV0wj3v8QNqZTJBEtPY42K9l2p0s+TDHF/zAMf8kTE4aovOPEp1TucGRyE5XXUhnmJJfMCFUKVMp55EuLzfeENhBUY0mRA30kkr/xHQnckQWvaODHuADAUSEXjMLoMwAAAABJRU5ErkJggg==') !important;} +#dashboard .dashboard-button-editTab{ +right: 78px; top: 0px; +background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABOklEQVR42o3SPUhCURjG8WPR1tBgU23SEEH0AUFDSURDtFU4FOQSQh9LlDgEUdSiU7QUuSq0RCAIYhTl0JCUIEFLRUQ1NLWIEGX9D74XRPJ4XvjB5V7Oc8597nUpuxnDBDbxWfnAZbG4Ce9w4xmzuLINaEALlrGBRnxjCzs2AWF4MA0vYmjHL7pwbwoYRxz9COABJ9jDG0KmE7Qhh0U5chR9mJSQF1MH+j3PcYcIbuFHM3bRjQ9TwLZ8smGcSuP7yMIn91StgFEcYwDzUpy+d4kU1qt3qwxoRR6rqvyzxKTAFfRgBD+mAF3clJxAF7iAEg7Ri9f/2nYCBmXBkjTdiQPcYA7JWt/aCdDveoFHzOAaR7LrmjJMdYCeL1X+baPSRckmYAgZuS4gLTs/qTrjBHQgiATOUKy30Jk/KjtDEXVEBowAAAAASUVORK5CYII=');} +#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: .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: 1px dotted #FFFFFF; visibility: visible !important; height: 25px !important; width: 150px;} +#dashboard .block.wide {border-radius: 5px;} +#dashboard .dashboard_widgetinner .block .block {border: none; box-shadow: none;} +#dashboard .dashboard_tabcontent {width: 100%; padding: 0; margin: 0; } +#dashboard .dashboard_widget {border-radius: 8px; float: left;} +#dashboard .dashboard_widgethelper {background-color: none; } +#dashboard .ui-widget .ui-widget {font-size: 1em; font-family: Arial,Helvetica,sans-serif;} +#dashboard .ui-widget-header { + font-weight: 400; + text-transform: uppercase; + color: #8A8A8F; + font-size: 13px; + padding:10px 0px 0px 3px; + text-shadow:none; +} +#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: 2.5;text-decoration: none;font-size: 100%;list-style: none; background: none;} + +#dashboard .ui-tabs { + padding: 0px; +} +#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;} +#dashboard .ui-tabs .ui-tabs-nav li { +list-style: none; +float: left; +position: relative; +top: 0; +margin: 1px .2em 0 0; +padding: 2px 5px; +text-align:center; + white-space: pre-line; + width:100px; + line-height: 1.5;} +#dashboard .ui-tabs .ui-tabs-nav li a {padding:0;} +#dashboard .ui-tabs .ui-tabs-nav .ui-tabs-anchor { +font-size:10px; +word-wrap:break-word; + margin-bottom: 5px; + float: none; + } +#dashboard .ui-tabs-icon { +fill:#FFFFFF; +padding:7.5px; +width:27px; +height:27px; +margin: auto; + +background-size: 42px 18px; +background-repeat:no-repeat; +border-radius:7.5px; +display:block; +-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(75%, transparent) , to(rgba(250, 250, 250, 0.15))); +margin-bottom: 10px; +margin-top: 5px; +} + +#dashboard .dashboard_tab .ui-tabs-icon { + background-color:#007AFE; +} + +#dashboard .ui-widget-header .ui-state-active .ui-tabs-icon { +background-color:#444; +} +#dashboard .ui-widget-header .ui-state-hover .ui-tabs-icon { +background-color:#777777; +} +#dashboard .dashboard_tabnav_hidden{} +#dashboard .ui-widget-header .ui-state-default { +border: none; +background: none; + } +#dashboard .ui-widget-header .ui-state-active{ + } +#dashboard .ui-state-default a {color: #333333;text-decoration: none;} +#dashboard .ui-state-disabled {opacity: .35;filter:Alpha(Opacity=35);} +#dashboard .ui-state-active a {color: #444!important;} +#dashboard .ui-state-hover {color: #000000;} +#dashboard .ui-state-hover a, +#dashboard .ui-state-focus a:hover {color: #8A8A8F;} + +/* Dashboard Dialog +------------------------------------------------------------------------*/ + +#dashboard-dialog { +overflow: visible !important; +position: absolute;top: 0;left: 0;padding: .2em !important;outline: 0;border: 1px solid #FFFFFF;z-index: 100; +display: inline-block !important; +} +#dashboard-dialog input[type="text"] { +min-width:80px !important; +width:70% !important; +} +#dashboard-dialog .ui-dialog-content {padding: 0;} +#dashboard-dialog .ui-widget-header { +padding: 5px;} +#dashboard-dialog .ui-button {display: inline-block;line-height: normal;margin-right: .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: .4em 1em;} +#dashboard-dialog .ui-dialog-buttonpane { +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: .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 { +display: inline-block; +margin: 0; +padding: 5px; +} +#dashboard-dialog .ui-tabs .ui-tabs-nav li {list-style: none;float: left;position: relative;top: 0;margin: 1px .2em 0 0;padding: 0;} +#dashboard-dialog .ui-tabs .ui-tabs-nav .ui-tabs-anchor {float: left;padding: .5em 1em;text-decoration: none;} + +#dashboard-dialog .ui-state-default {border: 1px solid #FFFFFF;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: 1px solid #444444;background: #333333;font-weight: normal;color: #444444;} +#dashboard-dialog .ui-state-active {border: 1px solid #FFFFFF;background: #333333;font-weight: normal;color: #ffffff;} +#dashboard-dialog .ui-state-active a {color: #ffffff;text-decoration: none;} +#dashboard-dialog .ui-state-hover {border: 1px solid #FFFFFF;font-weight: normal;color: #ffffff;} +#dashboard-dialog .ui-state-hover a, #dashboard-dialog .ui-state-hover a:hover {color: #ffffff;text-decoration: none;} + +/* Colorpicker +------------------------------------------------------------------------*/ +.evo-pop.ui-widget-content {-index: 10000; + width: 225px; + padding: 3px 3px 0; + background-color:#fefefe !important; + border: 1px #999999 solid; + transform: translate(-100px,0px); + } +.evo-pop-ie.ui-widget-content {z-index: 10000; +width: 225px; +padding: 3px; +background-color:#fefefe !important; +border: 1px #999999 solid; + +} +.evo-palette td {font-size: 1px;border: solid 1px #c0c0c0;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 0px; *border-collapse: expression('separate', cellSpacing='2px');} +.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: solid 1px #c0c0c0;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: solid 1px #c3c3c3;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: solid 1px #808080;border-right: solid 1px #c0c0c0;border-bottom: solid 1px #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: solid 1px #c0c0c0;padding: 3px;margin: 5px;width: 10px;height: 10px;float: left;} +a.evo-hist {margin-left: 6px;} +.evo-pointer {cursor: pointer;visibility:hidden;position:absolute;} + +/* Make readingGroups 100% wide */ +#dashboard td table { + width: 100%; +} + +#dashboard .dashboard_dev_container > table > tbody > tr > td { + padding: 0px; +} + +.dashboard_widgetheader svg { + margin-right: 5px; +} + +.dashboard_row .dashboard_widget { + max-width: 100%; +} + +/* Small devices */ +@media screen and (max-width: 480px) { + .dashboard_tabnav { + position: absolute !important; + min-height: 40px; + width: 100%; + padding: 5px 0; + padding-right: 0px !important; + z-index: 100000; + top: -86px; + } + #dashboardtabs { + margin-top: 86px; + position: relative; + } + .dashboard_tabnav li { + display: none; /* hide all
  • items */ + margin: 0; + } + .dashboard_tabnav .ui-state-active { + display: block; /* show only current
  • item */ + } + .dashboard_tabnav a { + display: block; + padding: 5px 5px 5px 32px; + } + .dashboard_tabnav .ui-state-active a { + color: #888888 !important; + } + + /* on nav hover */ + .dashboard_tabnav:hover { + padding-right: 0px !important; + height: 300px; + overflow: auto; + } + .dashboard_tabnav:hover .dashboard-button { + visibility: hidden; + } + .dashboard_tabnav:hover li { + display: table-cell; + float: none; + margin: 0 0 5px; + } + + .dashboard_tabnav:hover .ui-state-active { + } + + .dashboard .dashboard_widget { + width: 100% !important; + } + + .dashboard_row .dashboard_column { + width: 100% !important; + } +} diff --git a/fhem/www/pgm2/ios12floorplanstyle.css b/fhem/www/pgm2/ios12floorplanstyle.css new file mode 100644 index 000000000..a33cfcc2d --- /dev/null +++ b/fhem/www/pgm2/ios12floorplanstyle.css @@ -0,0 +1,5 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ + +@import url("ios12touchpadfloorplanstyle.css"); \ No newline at end of file diff --git a/fhem/www/pgm2/ios12style.css b/fhem/www/pgm2/ios12style.css new file mode 100644 index 000000000..7b882d3c9 --- /dev/null +++ b/fhem/www/pgm2/ios12style.css @@ -0,0 +1,5 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ + +@import url("ios12touchpadstyle.css"); \ No newline at end of file diff --git a/fhem/www/pgm2/ios12svg_defs.svg b/fhem/www/pgm2/ios12svg_defs.svg new file mode 100644 index 000000000..e3f424802 --- /dev/null +++ b/fhem/www/pgm2/ios12svg_defs.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fhem/www/pgm2/ios12svg_style.css b/fhem/www/pgm2/ios12svg_style.css new file mode 100644 index 000000000..0d72892c2 --- /dev/null +++ b/fhem/www/pgm2/ios12svg_style.css @@ -0,0 +1,73 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ + +.background { fill:#f7f7f7; +} + +text { +font: normal 10px Helvetica, Sans-serif; +fill:#000000;} +text.title { +font: normal 14px Helvetica, Sans-serif; +font-weight:bold; +fill:#4c566c; +text-shadow: 0px 1px #FFFFFF; +} + +text.legend{ cursor:pointer; } +text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} +text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} + + +path.SVGplot { stroke:black; fill:none; } +polyline.SVGplot { stroke:black; fill:none; } +.border { stroke:black; fill:url(#gr_bg);} +.vgrid { stroke:gray; stroke-dasharray:2,6;} +.hgrid { stroke:gray; stroke-dasharray:2,6;} +.pasted { stroke:black; stroke-dasharray:1,1;} + +.SVGplot.l0 { stroke:red; } +.SVGplot.l1 { stroke:green; } +.SVGplot.l2 { stroke:blue; } +.SVGplot.l3 { stroke:magenta; } +.SVGplot.l4 { stroke:brown; } +.SVGplot.l5 { stroke:black; } +.SVGplot.l6 { stroke:olive; } +.SVGplot.l7 { stroke:gray; } +.SVGplot.l8 { stroke:yellow; } +.SVGplot.l0fill { stroke:#f00; fill:url(#gr_0); } +.SVGplot.l1fill { stroke:#291; fill:url(#gr_1); } +.SVGplot.l2fill { stroke:#00f; fill:url(#gr_2); } +.SVGplot.l3fill { stroke:#f0f; fill:url(#gr_3); } +.SVGplot.l4fill { stroke:#ff0; fill:url(#gr_4); } +.SVGplot.l5fill { stroke:#0ff; fill:url(#gr_5); } +.SVGplot.l6fill { stroke:#000; fill:url(#gr_6); } +.SVGplot.l0dot { stroke:red; stroke-dasharray:2,4; } +.SVGplot.l1dot { stroke:green; stroke-dasharray:2,4; } +.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);} +.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);} +.SVGplot.l0fill_gyr { stroke:red; fill:url(#gr0_gyr);} + +text.SVGplot.l0 { stroke:none; fill:red; } +text.SVGplot.l0 { stroke:none; fill:red; } +text.SVGplot.l1 { stroke:none; fill:green; } +text.SVGplot.l2 { stroke:none; fill:blue; } +text.SVGplot.l3 { stroke:none; fill:magenta; } +text.SVGplot.l4 { stroke:none; fill:brown; } +text.SVGplot.l5 { stroke:none; fill:black; } +text.SVGplot.l6 { stroke:none; fill:olive; } +text.SVGplot.l7 { stroke:none; fill:gray; } +text.SVGplot.l8 { stroke:none; fill:yellow; } +text.SVGplot.l0fill { stroke:none; fill:#f00; } +text.SVGplot.l1fill { stroke:none; fill:#291; } +text.SVGplot.l2fill { stroke:none; fill:#00f; } +text.SVGplot.l3fill { stroke:none; fill:#f0f; } +text.SVGplot.l4fill { stroke:none; fill:#ff0; } +text.SVGplot.l5fill { stroke:none; fill:#0ff; } +text.SVGplot.l6fill { stroke:none; fill:#000; } +text.SVGplot.l0dot { stroke:none; fill:red; } +text.SVGplot.l1dot { stroke:none; fill:green; } +text.SVGplot.l0fill_stripe {stroke:none; fill:red; } +text.SVGplot.l1fill_stripe {stroke:none; fill:green;} +text.SVGplot.l0fill_gyr {stroke:none; fill:red; } diff --git a/fhem/www/pgm2/ios12touchpad.js b/fhem/www/pgm2/ios12touchpad.js new file mode 100644 index 000000000..b109b4613 --- /dev/null +++ b/fhem/www/pgm2/ios12touchpad.js @@ -0,0 +1,308 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ +/* jQuery is required*/ + + +$(document).ready(function() { + /* + /* Style Config + */ + var spaltensumme = 200; + var menuwidth = 200; + var paddingwidth = 60; + var mobilepaddingwidth = 20; + var logowidth = 28; + var switchtomobilemode = 415; + var hdrheight = 44; + var inputpadding = 251; + /* + /* Functions + */ + // Set style height and width + var recalculateStyleHeight = function() { + var height = window.innerHeight; + $("#menu").height(height - hdrheight); + $("#content").height(height - hdrheight); + $("#right").height(height - hdrheight); + }; + var recalculateStyleWithMenu = function() { + var width = $("body").width(); + $("body").removeClass("hideMenu"); + if (switchtomobilemode > width) { + $("#menu").width(width); + $("#content").width(0); + $("#right").width(0); + $("#content").hide() + $("#right").hide(); + $("#hdr input").width(width - inputpadding + menuwidth - logowidth); + } else { + $("#menu").width(menuwidth); + $("#content").width(width - menuwidth - paddingwidth - 1); + $("#right").width(width - menuwidth - paddingwidth - 1); + $("#hdr input").width(width - inputpadding); + $("#content").show() + $("#right").show(); + } + }; + var recalculateStyleWithoutMenu = function() { + var width = $("body").width(); + $("body").addClass("hideMenu"); + if (switchtomobilemode > width) { + $("#hdr input").width(width - inputpadding + menuwidth - logowidth); + $("#content").width(width - mobilepaddingwidth); + $("#right").width(width - mobilepaddingwidth); + } else { + $("#hdr input").width(width - inputpadding); + $("#content").width(width - paddingwidth); + $("#right").width(width - paddingwidth); + } + $("#menu").width(0); + $("#content").show() + $("#right").show(); + }; + // Show / Hide menu + var toggleMenuOnFHEMIcon = function() { + if ($("body").hasClass("hideMenu")) { + recalculateStyleWithMenu(); + resetcolumns(); + calccolumns(); + } else { + recalculateStyleWithoutMenu(); + resetcolumns(); + calccolumns(); + } + }; + + //Berechnung Spaltenbreite + var calccolumns = function() { + $("table.block.wide").find("table.block.wide").addClass("notrelevantcount"); + var tables = $("table.block.wide").not('.notrelevantcount'); + // Ermitteln der maximalen Spaltenanzahl im Layout + var maxlength = 0; + var maxtr; + tables.each(function() { + var tr =$(this).children("tbody").children("tr"); + tr.each(function(){ + var td = $(this).children("td"); + var trlength = 0; + td.each(function() { + trlength = trlength+$(this).prop("colSpan"); + }); + if (trlength > maxlength) { + maxlength = trlength; + maxtr=$(this); + } + }); + + + }); + + // Setzen aller hinteren Spalten auf ein Minimum an Platzbedarf + tables.children("tbody").children("tr").each(function() { + var trlength = $(this).children("td").length; + var diff = 0; + if (trlength < maxlength) { + diff = maxlength - trlength; + } + diff++; + + $(this).children("td").css("width", "1%"); + $(this).children("td").css("white-space", "nowrap"); + $(this).children("td").first().css("width", ""); + $(this).children("td").first().css("white-space", ""); + + }); + + // Ermitteln der maxwidth abhängig vom größten Spaltenelement beginnend bei Spalte 2 + var i; + var maxwidthtd = new Array(); + for (i = 1; i < maxlength; i++) { + maxwidthtd.push(0); + var counttr = tables.children("tbody").children('tr').length; + for (j=0; j < counttr; j++) { + tables.children("tbody").children('tr:eq('+j+')').children('td:eq('+i+')').each(function() { + var tdwidth = $(this).innerWidth()/$(this).prop("colSpan")+($(this).prop("colSpan")-1)*14; + if (tdwidth > maxwidthtd[i-1]) { + maxwidthtd[i-1] = tdwidth; + } + }); + } + } + + // Anpassen der width der Spalten auf das maxwidth beginnend bei Spalte 2 + for (i = 1; i < maxlength; i++) { + tables.children("tbody").children("tr").children('td:eq('+i+')').css("width",maxwidthtd[i-1]+"px"); + } + + // Berechnung der gesamten Tabellen width + var innertablewidth = -20; + if(maxtr) { + maxtr.children('td').each(function() { + innertablewidth=innertablewidth+$(this).innerWidth(); + }); + // Berechnung der hinteren Spalten + maxwidthtd.forEach(function(column, index){ + if(column > 260) { + maxwidthtd[index] = 260; + } + innertablewidth=innertablewidth-column-10; + }); + if (innertablewidth > 750) { + innertablewidth = 750; + } else if (innertablewidth < 110){ + innertablewidth = 110; + } + spaltensumme = innertablewidth; + tables.children("tbody").children("tr").each(function() { + var trlength = $(this).children("td").length; + var diff = 0; + if (trlength < maxlength) { + diff = maxlength - trlength; + } + diff++; + $(this).children("td").last().attr('colspan',diff); + $(this).children("td").css("white-space", ""); + $(this).children("td").css("width", ""); + $(this).children("td").first().css("width", innertablewidth); + $(this).children("td").first().next().css("width", maxwidthtd[0]); + }); + } + $(".fbcalllist-container").find("tr").each(function() { + $(this).find("td").last().attr('colspan',1); + $(this).find("td").css("width", ""); + $(this).find("td").css("white-space", ""); + }); + + }; + + //Neuberechnung Spaltenbreite + var resetcolumns = function() { + $("table.block.wide").not('.notrelevantcount').children("tbody").children("tr").each(function() { + $(this).children("td").last().attr('colspan',1); + $(this).children("td").css("width", ""); + $(this).children("td").css("white-space", ""); + }); + }; + + + var mobiletoggle = function () { + if($('body').hasClass("colortoggle")){}else{ + var counter=0; + $( ".colorpicker_widget, .slider_widget" ).each(function(){ + $( '
    Created by potrace 1.8, written by Peter Selinger 2001-2007 Created by potrace 1.8, written by Peter Selinger 2001-2007
    ' ).insertBefore( $(this) ); + $(this).parent().css("white-space", "nowrap"); + $(this).parent().css("display", "table"); + $(this).attr('id', 'colorpicker'+counter); + $(this).hide(); + $('#colorminus'+counter).hide(); + counter++; + }); + $('body').addClass("colortoggle"); + } + }; + + + + + + /* + /* DOM manipulation + */ + // init viewport + $('meta[name="viewport"]').remove(); + $('head').append(''); + + var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(navigator.userAgent.toLowerCase())); + var istablet = (/ipad|android|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase())); + + var isAndroid = function() { + return navigator.userAgent.match(/Android/i); + }; + + + if (ismobile) { + $("body").addClass("isMobile"); + if (isAndroid()) { + $("body").addClass("isAndroidPhone"); + } + } else if(istablet) { + if (isAndroid()) { + $("body").addClass("isAndroidTablet"); + } + } + // init height and width + recalculateStyleHeight(); + + // hide menu + if ($("body").width() < window.innerHeight) { + recalculateStyleWithoutMenu(); + } else { + recalculateStyleWithMenu(); + } + + // Logo - add toggle link + var parentLink = $("#logo").parent("a"); + $(parentLink).unbind("click"); + if (typeof(parentLink.attr("href")) == "undefined") { + parentLink.attr("onclick", "#"); + } else { + parentLink.attr("href", "#"); + } + $("#logo").closest("a").removeAttr("onclick"); + + $("#logo").click(toggleMenuOnFHEMIcon); + + /* + /* Event Handlers + */ + // Resize + $(window).resize(function() { + recalculateStyleHeight(); + if ($("body").width() < window.innerHeight) { + recalculateStyleWithoutMenu(); + resetcolumns(); + calccolumns(); + } else { + recalculateStyleWithMenu(); + resetcolumns(); + calccolumns(); + } + if (spaltensumme < 200) { + mobiletoggle(); + resetcolumns(); + calccolumns(); + } + }); + $(window).bind('orientationchange', function(event) { + $(window).trigger('resize'); + //alert("orientationchange width: "+window.innerWidth+" height: "+window.innerHeight); + }); + // Touch - Color picker + $(document).on('touchstart', function(e) { + var container = $("#colorpicker"); + if (!container.is(e.target) // if the target of the click isn't the container... + && container.has(e.target).length === 0 // ... nor a descendant of the container + && !$("input").is(e.target) && container.length > 0) // ... is not an input + { + container.remove(); + } + }); +}); + +function triggerResize() { + window.dispatchEvent(new Event('resize')); +} + +function togglecolorpicker(counter) { + $('#colorpicker'+counter).toggle('fast'); + $('#colorminus'+counter).toggle(); + $('#colorplus'+counter).toggle(); +} +function togglecolorpickerct(counter) { + $('#colorpicker_ct_mired'+counter).toggle('fast'); + $('#colorctminus'+counter).toggle(); + $('#colorctplus'+counter).toggle(); +} + +window.addEventListener("load",triggerResize,false); \ No newline at end of file diff --git a/fhem/www/pgm2/ios12touchpadfloorplanstyle.css b/fhem/www/pgm2/ios12touchpadfloorplanstyle.css new file mode 100644 index 000000000..0cb801504 --- /dev/null +++ b/fhem/www/pgm2/ios12touchpadfloorplanstyle.css @@ -0,0 +1,220 @@ +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ + +@import url("ios12touchpadstyle.css"); + +#backimg { +width: 823px !important; +/* Firefox */ +width: -moz-calc(100% - 201px) !important; +/* WebKit */ +width: -webkit-calc(100% - 201px) !important; +/* Opera */ +width: -o-calc(100% - 201px) !important; +/* Standard */ +width: calc(100% - 201px) !important; +} + +#fpmenu.fp_arrange { +position:fixed; bottom:10px; left:7px; +} +/*iPad Skalierung*/ +/* iPads (landscape) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 1024px) +and (orientation : landscape) { +body { +width:1024px; +} +#menu { +height: 748px; +} +#backimg { +width:823px !important; +height: 748px !important; +} +} + +/* iPads (portrait) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 1024px) +and (orientation : portrait) { +body { +width:768px; +} +#menu { +height: 1004px; +} +#backimg { +width:567px !important; +height: 1004px !important; +} +} +body { +font: normal 9px "Segoe UI","Helvetica Neue"; +background-image: -webkit-gradient( + linear, + left top, + right top, + color-stop(0.2, #D7DADF), + color-stop(0.2, #000000) +); +background-image: -o-linear-gradient(right, #D7DADF 20%, #000000 20%); +background-image: -moz-linear-gradient(right, #D7DADF 20%, #000000 20%); +background-image: -webkit-linear-gradient(to right, #D7DADF 20%, #000000 20%); +background-image: -ms-linear-gradient(right, #D7DADF 20%, #000000 20%); +background-image: linear-gradient(to right, #D7DADF 20%, #000000 20%); +background-position: 0 0; +background-size: 1000px 2500px; +background-repeat:no-repeat; +} + +body[id~=Media] { background-color: #A5A5A5; + font-family:Arial, sans-serif; + font-size:9px; + background-image:url(../icons/Media.bak); + background-repeat:no-repeat; } + +#backimg { + position:absolute; top:0px; left:201px; +} +#menu.floorplan { +overflow: auto; +width: 200px; +position:absolute; +top:0px; +font-size:14px; +margin:0px; +padding:0px; +background-color:transparent; +border-right: 1px solid #CACACE; +} +#menu.floorplan a { +padding-left: 7px; +display:block; +vertical-align: middle; +font-weight:600; +} + +#menu.floorplan table { +margin-bottom: 10px; +border-spacing:0px; +padding:0px; +width: 100%; + -moz-box-shadow: 0 -1px #E1E1E4; + -webkit-box-shadow: 0 -1px #E1E1E4; + box-shadow: 0 -1px #E1E1E4; +} + +#menu.floorplan tr { + background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#FFFFFF),color-stop(0.02,#FFFFFF),color-stop(0.04,#FFFFFF),color-stop(0.96,#FFFFFF),color-stop(0.97,#FFFFFF),color-stop(1,#E1E1E4)); + background-image:-o-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-moz-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-webkit-linear-gradient(top,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-ms-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:linear-gradient(to bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); +height: 44px; +} + +#menu.floorplan tr:first-child a { +color:#000; +} + +#menu.floorplan tr:first-child td { + text-align:center; + padding-right: 7px; +} + +#floorplans svg { + fill:#FFF; + padding:5px; + width:18px; + height:18px; + background-size:28px 12px; + background-repeat:no-repeat; + border-radius:5px; + border:1px solid #007AFE; + background-color:#007AFE; +} + +#fpmenu.fp_arrange { +width:200px; +font-size:9px; +} +#fpmenu.fp_arrange input, #fpmenu.fp_arrange select { +width:180px; +margin:2px; +} +#fpmenu.fp_arrange input[type=text] { +width:157px; +} +#fpmenu.fp_arrange #fp_ar_input_top, #fpmenu.fp_arrange #fp_ar_input_left { + width:57px; +} + +#startcontent {position:absolute; top:20px; left:180px; text-align:left; font-size: 16px; } +table a:hover {font-weight:bold;} +#hdr { position:absolute; top:10px; left:180px; border:1px solid gray; } +#content { position:absolute; top:50px; left:180px; bottom:10px; right:10px; text-align:left} +#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; right:0px; z-index: 10; } +img { border-style: none; } + +.fp_Grundriss {border:0px solid gray;} + + .devicename {font-size: 11px; text-align:center; } + .devicestate {text-align:center; } + .devicecommands {font-size:14px; text-align:center; } + .devicetimestamp{font-size:10px; text-align:center; } + +#sz_Rollo.devicename {font-size:14px;} +#sz_Rollo.devicecommands {font-size:12px; text-align:center; } +#ez_Aussensensor.devicestate {color:green; font-size:30px; } +#HomeStatus.devicestate {color:green; font-size:30px; } +table.dummy {min-width:100px; } +table.FHT {min-width:100px; } +#wakeup.devicestate {color:green; font-size:11px; } +#ez_FHT.devicestate {color:green; font-size:30px; } +#Home.fp_Grundriss {font-size:14px; width:100px; } +#Home.fp_Media {font-size:14px; text-align:left; } +#Media {font-size:14px; } +#Grundriss {font-size:14px; text-align:left; } +.fp_tempvalue {color:red; font-size:20px; } +.fp_humvalue {color:blue; font-size:20px; } + +.screen { + position:absolute; + top:0px; + left: 0px; +} + +h2,h3,h4 { color:#52865D; line-height:1.3; + margin-top:1.5em; font-family:Arial,Sans-serif; } +.at { + width:100px; +} + +/* detail-selector & slider */ +select { margin-left:5px; margin-right:5px; } +.set,.attr { margin-bottom:5px; float:left; } +.slider { float:left; width:140px; height:26px; border:2px solid; color:grey; } +.set .slider { background:#F0F0D8; border-radius:8px; } +/* timepicker */ +.set .set { margin-bottom:2px; margin-top:3px; } + +.handle { position:relative; cursor:pointer; width:50px; + height:20px; line-height:20px; user-select:none; + border:3px solid; color:#278727; text-align:center; } +.downText { margin-top:2px; } + +/* next lines are for openautomation-svg */ +g.on { fill:red; } + +/* next lines are for remotecontrol */ +.rc_body { border-style: solid; border-color: gray; border-width: 2px; + padding: 5px; background: #C8C8B0; 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; } diff --git a/fhem/www/pgm2/ios12touchpadstyle.css b/fhem/www/pgm2/ios12touchpadstyle.css new file mode 100644 index 000000000..216fed6aa --- /dev/null +++ b/fhem/www/pgm2/ios12touchpadstyle.css @@ -0,0 +1,830 @@ +@import url("ios12dashboard.css"); +@import url("ios12Common.css"); + +/* iOS 12 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.foodcat.de */ +body { + width:100% +} + +/*set standard for view without js*/ +#content,#right { + width:763px; +/* Firefox */ + width:-moz-calc(100% - 261px); +/* WebKit */ + width:-webkit-calc(100% - 261px); +/* Opera */ + width:-o-calc(100% - 261px); +/* Standard */ + width:calc(100% - 261px) +} + +#content,#menu,#right { +/*old*/ + height:704px; +/* Firefox */ + height:-moz-calc(100vh - 44px); +/* WebKit */ + height:-webkit-calc(100vh - 44px); +/* Opera */ + height:-o-calc(100vh - 44px); +/* Standard */ + height:calc(100vh - 44px) +} + +#hdr input { + width:80% +} + +/*hideMenu toggle*/ +.hideMenu #content,.hideMenu #right { + width:964px; +/* Firefox */ + width:-moz-calc(100% - 60px); +/* WebKit */ + width:-webkit-calc(100% - 60px); +/* Opera */ + width:-o-calc(100% - 60px); +/* Standard */ + width:calc(100% - 60px) +} + +.SVGplot { + text-align:center +} + +.SVGplot embed { + -o-transition:scale(-o-calc(100vw - 260px),100px); + -ms-transition:scale(c-ms-alc(100vw - 260px),100px); + -moz-transition:scale(-moz-calc(100vw - 260px),100px); + -webkit-transition:scale(-webkit-calc(100vw - 260px),100px); + transition:scale(calc(100vw - 260px),100px) +} + +/*iPhone Skalierung*/ +/* iPhone < 5(portrait) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) +and (orientation : portrait) { +body { + width:320px +} + +.SVGplot { + width: 265px; + overflow: scroll; +} +#content,#right { + padding:0 10px!important +} +} + +/* iPhone < 5(landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) +and (orientation : landscape) { +body { + width:480px +} +} + +/* iPhone 5(portrait) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 568px) +and (orientation : portrait) { +body { + width:320px +} + +.SVGplot { + width: 265px; + overflow: scroll; +} +#content,#right { + padding:0 10px!important +} +} + +/* iPhone 5(landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 568px) +and (orientation : landscape) { +body { + width:568px +} +} + +/* iPhone 6(portrait) ----------- */ +@media only screen +and (min-device-width : 375px) and (max-device-width : 667px) +and (orientation : portrait) { +body { + width:375px +} + +.SVGplot { + width: 320px; + overflow: scroll; +} +#content,#right { + padding:0 10px!important +} +} + +/* iPhone 6(landscape) ----------- */ +@media only screen +and (min-device-width : 375px) and (max-device-width : 667px) +and (orientation : landscape) { +body { + width:667px +} +} + +/* iPhone 6+(portrait) ----------- */ +@media only screen +and (min-device-width : 414px) and (max-device-width : 736px) +and (orientation : portrait) { +body { + width:414px +} +.SVGplot { + width: 359px; + overflow: scroll; +} +} + +/* iPhone 6+(landscape) ----------- */ +@media only screen +and (min-device-width : 414px) and (max-device-width : 736px) +and (orientation : landscape) { +body { + width:736px +} +} + +/*iPad Skalierung*/ + +/* iPads (portrait) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 768px) +and (orientation : portrait) { +body { + width:768px +} +} + +/* Android Phone Devices */ +@media only screen +and (orientation : portrait) { +.isAndroidPhone { + width:360px; +} +.isAndroidTablet { +} +} + +@media only screen +and (orientation : landscape) { +.isAndroidPhone { + width:640px +} +.isAndroidTablet { +} +} + +.isMobile { + background-color:#EFEFF4; + background:#EFEFF4; +} + +.hideMenu #menu { + display:none +} + +html,body { + margin:0; + padding:0; + font:normal 14px "Segoe UI","Helvetica Neue"; + text-decoration:none; + color:#8A8A8F; + font-weight:400 +} + +body { + background-color:#000; + background:#000 +} + +a { + color:#000; + font-weight:600; + text-decoration:none +} + +a:hover { + cursor:pointer; + color:#8A8A8F; +} + +img { + border-style:none +} + +div.dist { + padding-top:.3em +} + +button.dist { + margin:10px; + background:transparent; + border:0; + cursor:pointer +} + +textarea,select,input { + background:#F5F5F7; + border-radius:7px; + border:1px solid #F5F5F7; + border-bottom-color:#F5F5F7; + background-color:#F5F5F7; + padding-left:0.5em; + margin:7px; + outline:none; + -moz-box-shadow: 0 -1px #F5F5F7,0 1px #F5F5F7,inset 0 -2px 2px #F5F5F7,inset 0 1px #F5F5F7; + -webkit-box-shadow: 0 -1px #F5F5F7, 0 1px #F5F5F7, inset 0 -2px 2px #F5F5F7, inset 0 1px #F5F5F7; + box-shadow: 0 -1px #F5F5F7, 0 1px #F5F5F7, inset 0 -2px 2px #F5F5F7, inset 0 1px #F5F5F7; +} + +input[type="checkbox"] { + border-radius:2px +} + +select,input[type="submit"],input[type="reset"],input[type="button"] { + /*width:35%;*/ + min-width:90px; + font:normal 14px Helvetica,Sans-serif; + height:25px +} + +input[type="text"] { + height: 23px; + margin: 9px; +} + +tr.column td { + padding:0; + vertical-align:top +} + +/* Documentation */ +h2,h3,h4 { + line-height:1.3; + margin-top:1.5em +} + +div.dist { + padding-top:.3em +} + +button.dist { + margin:10px; + background:transparent; + border:0; + cursor:pointer +} + +div.block { + border:1px solid gray; + background:#F8F8E0; + padding:.7em +} + +pre { + white-space:pre-wrap +} + +svg { + height:28px; + width:28px; + vertical-align:middle; + margin-right:5px +} + +.roomoverview table.block td:first-child a svg { + fill:#FFF; + padding:5px; + width:24px; + height:24px; + background-size:28px 12px; + background-repeat:no-repeat; + border-radius:5px; + border:1px solid #007AFE; + background-color:#007AFE; +} + + +svg:not([fill]) { + fill:#8A8A8F; +} + +svg.on,svg.FS20_on { + fill:orange +} + +#logo { + position:absolute; + top:5px; + left:6px; + width:28px; + height:28px; + z-index:99; + background-image:url(../images/fhemSVG/system_fhem.svg); + background-size:24px 24px,28px 8px; + background-position:2px 2px,0 0; + background-repeat:no-repeat; + border-radius:5px; + border:2px solid #000; + background-color:#E2E2E7 +} + +table.room svg { + fill:#FFF; + padding:5px; + width:18px; + height:18px; + background-size:28px 12px; + background-repeat:no-repeat; + border-radius:5px; + border:1px solid #007AFE; + background-color:#007AFE; +} + +#saveCheck { + position:absolute; + top:13px; + right:7px; + padding-right:10px; + padding-left:10px; + padding-top:2px; + padding-bottom:2px; + background:#7887A4; + border-radius:20px; + color:#F4FDFF +} + +table.room .changedicon svg { + background:#02a202; +/* Old browsers */ + background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-webkit-repeating-linear-gradient(135deg,#02a202 0px,#00b900 2px,#02a202 3px); +/* Chrome10+,Safari5.1+ */ + background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-moz-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); +/* FF3.6+ */ + background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(255,255,255,0.2))),-webkit-gradient(linear,left top,right bottom,color-stop(0px,rgba(2,162,2,1)),color-stop(2px,rgba(0,185,0,1)),color-stop(3px,rgba(2,162,2,1))); +/* Chrome,Safari4+ */ + background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-webkit-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); +/* Chrome10+,Safari5.1+ */ + background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-o-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); +/* Opera 11.10+ */ + background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-ms-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); +/* IE10+ */ + background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),repeating-linear-gradient(135deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px); +/* W3C */ + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0); +/* IE6-9 */ + background-size:28px 12px,28px 28px; + background-repeat:no-repeat,repeat; + fill:#F4F4F4 +} + +table.room tr.sel a svg { + border-color:#444; + background-color:#444 +} + +#hdr { + float:right; + z-index:98; + position:relative; + top:0; + left:0; + width:100%; + height:44px; + background-color: #fff; + -moz-box-shadow:0 0px 1px #CACACE; + -webkit-box-shadow:0 0px 1px #CACACE; + box-shadow:0 0px 1px #CACACE; +} + +#hdr input { + margin:0; + position:relative; + float:right; + right:7px; + height:25px; + border-radius:7px; + background-color:#F5F5F7; + border:none; + color:#95959A; + padding-left:1.5em; + outline:none; + -moz-box-shadow:0 -1px #F5F5F7,0 1px #F5F5F7,inset 0 -2px 2px #F5F5F7,inset 0 1px #F5F5F7; + -webkit-box-shadow:0 -1px #F5F5F7,0 1px #F5F5F7,inset 0 -2px 2px #F5F5F7,inset 0 1px #F5F5F7; + box-shadow:0 -1px #F5F5F7,0 1px #F5F5F7,inset 0 -2px 2px #F5F5F7,inset 0 1px #F5F5F7; +} + +#hdr table { + width:100%; + margin:0; + padding:5px +} + +#menu { + position:absolute; + top:44px; + overflow:auto; + -webkit-overflow-scrolling:touch; + float:left; + width:200px; + background-color:#EFEFF4 +} + +#menu table { + width:100%; + border-spacing:0; + padding:0 +} + +#content,#right { + background-color:#EFEFF4; + background:#EFEFF4; + overflow:auto; + -webkit-overflow-scrolling:touch; + border-left:1px solid #CACACE; + float:right; + padding:0 30px +} + +#content table { + width:100%; +} + +#content > form > .CodeMirror { + height: initial !important; +} + +#menuScrollArea { + float:left +} + +#right { + margin-top:44px +} + +#console { + font:11px "Courier New",Courier,monospace +} + +#errmsg { + padding:6px; + color:#95959A; + font-weight:600; + position:absolute; + top:5px; + left:225px; + z-index:99; + text-shadow:0 1px #000 +} + +.devType,.devType a,.makeTable,.makeTable a { + font-weight:400; + text-transform: uppercase; + color:#8A8A8F; + font-size:13px; + padding:20px 0 0 +} + +.devType table,.makeTable table { + font-weight:400; + color:#385487; + font-size:14px; + padding:0 +} + +.devType table a,.makeTable table a { + font-weight:600; + color:#000; + font-size:14px; + padding:0 +} + +.devType table a:hover,.makeTable table a:hover { + color:#8A8A8F; +} + +.wide { + width:100% +} + +.block { + margin-top:5px; + position:relative; + font-size:14px +} + +table.block input,table.block select { + margin:5px +} + +table.block { + padding:0; + border-spacing:0; + -webkit-border-radius:7px; + -moz-border-radius:7px; + border-radius:7px; + border:1px solid #fff; + border-bottom-color:#fff; + -moz-box-shadow:0 1px #fff,inset 0 1px #fff; + -webkit-box-shadow:0 1px #fff,inset 0 1px #fff; + box-shadow:0 1px #fff,inset 0 1px #fff; + background:#fff +} + +table.block td { + text-align:left; + vertical-align:middle +} + +.dval { + word-break: break-all; +} + +table.block td { + border-top:1px solid #fdfdfd; + border-bottom:1px solid #cbcbcb; + padding-right: 9px; +} + +table.block tr:first-child td { + border-top:none +} + +table.block tr:last-child td { + border-bottom:none +} + +.block td:first-child { + padding-left:10px; + font-weight:600; +} + +.block > tbody > tr > td:last-child { + padding-right:10px; +} + +.block > tbody > tr > td:last-child { + padding-right:10px; +} + +.roomoverview table.block td:first-child { + min-width:50px +} + +.roomoverview table.block td:nth-child(2) { + min-width:30px +} + +table.room { + margin-bottom:10px; + border-spacing:0; + padding:0; + width:100%; + -moz-box-shadow:0 -1px #E1E1E4; + -webkit-box-shadow:0 -1px #E1E1E4; + box-shadow:0 -1px #E1E1E4 +} + +table.block tr { + height:44px +} + +table.room tr { + background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#FFFFFF),color-stop(0.02,#FFFFFF),color-stop(0.04,#FFFFFF),color-stop(0.96,#FFFFFF),color-stop(0.97,#FFFFFF),color-stop(1,#E1E1E4)); + background-image:-o-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-moz-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-webkit-linear-gradient(top,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:-ms-linear-gradient(bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + background-image:linear-gradient(to bottom,#FFFFFF 0%,#FFFFFF 2%,#FFFFFF 4%,#FFFFFF 96%,#FFFFFF 97%,#E1E1E4 100%); + height:44px +} + +table.room a,table.block a { + vertical-align:middle +} + +table.room a { + padding-left:5px; + display:block +} + +table.block tr.sel,table.room tr.sel { + color:#FFF; + background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#4DA2FF),color-stop(0.02,#4DA2FF),color-stop(0.04,#4DA2FF),color-stop(0.96,#4DA2FF),color-stop(0.97,#4DA2FF),color-stop(1,#1B72FF)); + background-image:-o-linear-gradient(bottom,#4DA2FF 0%,#4DA2FF 2%,#4DA2FF 4%,#4DA2FF 96%,#4DA2FF 97%,#4DA2FF 100%,#1B72FF 100%); + background-image:-moz-linear-gradient(bottom,#4DA2FF 0%,#4DA2FF 2%,#4DA2FF 4%,#4DA2FF 96%,#4DA2FF 97%,#4DA2FF 100%,#1B72FF 100%); + background-image:-webkit-linear-gradient(top,#4DA2FF 0%,#4DA2FF 2%,#4DA2FF 4%,#4DA2FF 96%,#4DA2FF 97%,#4DA2FF 100%,#1B72FF 100%); + background-image:-ms-linear-gradient(bottom,#4DA2FF 0%,#4DA2FF 2%,#4DA2FF 4%,#4DA2FF 96%,#4DA2FF 97%,#4DA2FF 100%,#1B72FF 100%); + background-image:linear-gradient(to bottom,#4DA2FF 0%,#4DA2FF 2%,#4DA2FF 4%,#4DA2FF 96%,#4DA2FF 97%,#4DA2FF 100%,#1B72FF 100%) +} + +table.room tr.sel a { + color:#FFF; +} + +table.room tr.sel a:hover { + color:#333; +} + +table.room a:hover svg { + background-color:#777; + border:1px solid #777; +} + +table.room tr.sel a:hover svg { + background-color:#333; + border:1px solid #333; +} + +.dname { +} + +.FileLog td:first-child { + font-weight:400; + width:180px +} + +.FileLog td:nth-child(2) { + width:100px +} + +/* Widgets */ +.makeTable { + width:100%; + display:block; + float:left; + clear:left +} + +.textField_widget { + display:block!important +} + +.makeSelect { + margin-top:20px; + width:100%; + display:block; + float:left; + clear:left; + padding:0; + border-spacing:0; + -webkit-border-radius:7px; + -moz-border-radius:7px; + border-radius:7px; + border: 1px solid #fff; + border-bottom-color: #fff; + -moz-box-shadow: 0 1px #fff,inset 0 1px #fff; + -webkit-box-shadow: 0 1px #fff, inset 0 1px #fff; + box-shadow: 0 1px #fff, inset 0 1px #fff; + background: #fff; +} +.colorpicker { + display: inline-block; +} + +.slider { + margin-top: 4px; + margin-bottom: 4px; + display:inline-block; + -webkit-box-sizing:border-box; + -moz-box-sizing:padding-box; + box-sizing:padding-box; + height:28px; + width:250px; + padding:1px; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + background-color:#007AFE; + background-repeat:no-repeat,repeat-x +} + +.get,.set,.attr { + float:left; + margin-bottom:10px; + margin-top:10px +} + +.handle { + position:relative; + -webkit-box-shadow: 0 1px #CACACE; + -moz-box-shadow: 0 1px #CACACE; + box-shadow: 0 1px #CACACE; + border: 1px solid #CACACE; + color:#666; + height:26px; + width:20px; + left:0; + top:-2px; + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; + padding:3px 0 0; + text-align:center; + font-size:10px; + -webkit-tap-highlight-color:transparent; + background-color: #fff; +} + +.handle:hover,.handle.hover { + color:#FCFCFC; + background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#666),color-stop(1,#CBCBCB)); + background-image:-o-linear-gradient(bottom,#666 0%,#CBCBCB 100%); + background-image:-moz-linear-gradient(bottom,#666 0%,#CBCBCB 100%); + background-image:-webkit-linear-gradient(top,#666 0%,#CBCBCB 100%); + background-image:-ms-linear-gradient(bottom,#666 0%,#CBCBCB 100%); + background-image:linear-gradient(to bottom,#666 0%,#CBCBCB 100%) +} + +.sysmon table { + border-spacing:0; + padding:0; + font-weight:400 +} + +/* next lines are for remotecontrol */ +.rc_body { + border-style:solid; + border-radius: 7px; + border-color:#7b7b7b; + border-width:2px; + padding:5px; + background:#FFF; + font-size:6px; + width: auto!important; + margin-top: 8px; +} + + +.rc_button { + padding:6px 8px +} + +.rc_button img { + border-style:solid; + border-width:1px; + border-color:transparent +} + +.rc_button img:active { + border-color:gray +} + +.rc_BLANK_svg { + height: 10px; +} + +.colorpicker { + border-color:#4c566c +} + +::-webkit-scrollbar { + width:7px +} + +::-webkit-scrollbar-button { + width:7px; + height:1px +} + +::-webkit-scrollbar-track { + background:#EFEFF4; + border:thin solid #EFEFF4; + box-shadow:0 0 3px #EFEFF4 inset; + border-radius:10px +} + +::-webkit-scrollbar-thumb { + background:#E1E1E4; + border:thin solid #E1E1E4; + border-radius:10px +} + +::-webkit-scrollbar-thumb:hover { + background:#777 +} diff --git a/fhem/www/pgm2/ios6touchpad.js b/fhem/www/pgm2/ios6touchpad.js index 4ebcf96fa..dba0cee4f 100644 --- a/fhem/www/pgm2/ios6touchpad.js +++ b/fhem/www/pgm2/ios6touchpad.js @@ -82,15 +82,20 @@ $(document).ready(function() { var maxlength = 0; var maxtr; tables.each(function() { - var td = $(this).children("tbody").children("tr").first().children("td"); - var trlength = 0; - td.each(function() { - trlength = trlength+$(this).prop("colSpan"); + var tr =$(this).children("tbody").children("tr"); + tr.each(function(){ + var td = $(this).children("td"); + var trlength = 0; + td.each(function() { + trlength = trlength+$(this).prop("colSpan"); + }); + if (trlength > maxlength) { + maxlength = trlength; + maxtr=$(this); + } }); - if (trlength > maxlength) { - maxlength = trlength; - maxtr=$(this).children("tbody").children("tr").children('td:eq('+(maxlength-1)+')').parent().first(); - } + + }); // Setzen aller hinteren Spalten auf ein Minimum an Platzbedarf diff --git a/fhem/www/pgm2/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css index bea7c00b2..3f593d822 100644 --- a/fhem/www/pgm2/ios6touchpadstyle.css +++ b/fhem/www/pgm2/ios6touchpadstyle.css @@ -262,11 +262,6 @@ textarea,select,input { box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff } -textarea,input[type="text"] { - background-color:#fff; - -webkit-appearance:none; - /*width:90%*/ -} input[type="checkbox"] { border-radius:2px @@ -280,7 +275,8 @@ select,input[type="submit"],input[type="reset"],input[type="button"] { } input[type="text"] { - height:25px + height: 23px; + margin: 9px; } tr.column td { @@ -499,7 +495,7 @@ table.room tr.sel a svg { } #content table { - width:100%!important + width:100%; } #content > form > .CodeMirror { @@ -803,15 +799,18 @@ table.room tr.sel a:hover svg { /* next lines are for remotecontrol */ .rc_body { border-style:solid; - border-color:gray; + border-radius: 7px; + border-color:#7b7b7b; border-width:2px; padding:5px; - background:#C8C8B0; - font-size:6px + background:#FFF; + font-size:6px; + width: auto!important; + margin-top: 8px; } .rc_button { - padding:5px 7px + padding:6px 8px } .rc_button img { @@ -824,6 +823,10 @@ table.room tr.sel a:hover svg { border-color:gray } +.rc_BLANK_svg { + height: 10px; +} + .colorpicker { border-color:#4c566c }