diff --git a/fhem/www/pgm2/ios6dashboard.css b/fhem/www/pgm2/ios6dashboard.css new file mode 100644 index 000000000..be6e825fb --- /dev/null +++ b/fhem/www/pgm2/ios6dashboard.css @@ -0,0 +1,105 @@ +/* Author: svenson08*/ + +/*TODO for iOS6*/ + +.dashboard_column { float: left; } +.dashboard_columnhelper { border: 1px dotted #808080; } + +.dashboard_content { padding: 0.1em; } +.dashboard_content.table { box-shadow: none !important; border-radius: 0 0 8px 8px !important; border: 1px none #278727!important; + border-left: 1px solid #278727 !important; border-right: 1px solid #278727 !important; border-bottom: 1px solid #278727 !important;} + +.dashboard_button_icon { width: 13px; height: 14px; background-repeat: no-repeat; + float: left; background-image: url(../images/default/dashboardicons.png); } +.dashboard_button_iconplus { margin: 0.1em 0.4em; float: right; background-position: -65px -16px; } +.dashboard_button_iconminus { margin: 0.1em 0.4em; float: right; background-position: -52px -16px; } +.dashboard-button { display: inline-block; padding: 0 .6em; height: 1.9em; cursor: pointer; + background-color: #f5f5f5; background-repeat:no-repeat !important; background-position: 7px; + border: 1px solid #278727; border-radius: 4px; margin-top: 2px; width: 14px; position: absolute;} +.dashboard-button-defineDetails{right: 10px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY4NjYwOTg0NEJFQzExRTI4MjI3OTFCOEEyNzY2MzE2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY4NjYwOTg1NEJFQzExRTI4MjI3OTFCOEEyNzY2MzE2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Rjg2NjA5ODI0QkVDMTFFMjgyMjc5MUI4QTI3NjYzMTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjg2NjA5ODM0QkVDMTFFMjgyMjc5MUI4QTI3NjYzMTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7i4cyWAAAAsElEQVR42mJgoCEwA+IPUGxGrKZkIE6AsjOB+D8UZyKJReHTDNOwGoifIPEfAvFGJH4gIQMIYZyuWI3mCm8oRhZfhCvA0pCcvRGLmnVI3klDD9gPaE50gopvRDLMG00NSA8DCw6vcELpX0hifwnFeRrUef+hzsXlhSfYvMCA5GTkQPSAYvTAxQoyyYlGJiQDviOxFwPxCyQ+iL0eh1oUEA7EfniSciySPG0yE8kAIMAAicRYTX3YPyoAAAAASUVORK5CYII=') !important;} +.dashboard-button-setPosition{right: 45px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4XtWRUQrAMAhDneyg9mT2ptugHRaCY/FnLJAveWKifCW7AS3Avlj2AmzrFUrDIYhgJNwvN4VcBDwiYC5/CyclBpDDoe2poATGEuegs3AswCUIk/8+pl2K8uE/6ATG4BstrVLVgQAAAABJRU5ErkJggg==') !important;} +.dashboard-button-goBack{right: 80px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAZ0lEQVQ4jd3RMQqDQBBA0YekV0wj3v8QNqZTJBEtPY42K9l2p0s+TDHF/zAMf8kTE4aovOPEp1TucGRyE5XXUhnmJJfMCFUKVMp55EuLzfeENhBUY0mRA30kkr/xHQnckQWvaODHuADAUSEXjMLoMwAAAABJRU5ErkJggg==') !important;} +.dashboard-button-editTab{right: 115px;} +.dashboard .ui-button {display: inline-block;line-height: normal;margin-right: .1em;cursor: pointer;vertical-align: middle;text-align: center;overflow: visible;} +.dashboard .ui-button, +.dashboard .ui-button:link, +.dashboard .ui-button:visited, +.dashboard .ui-button:hover, +.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 #278727; visibility: visible !important; height: 25px !important; width: 150px;} + +.dashboard .block.wide {border-radius: 5px;} +.dashboard_tabcontent {width: 100%; padding: 0; margin: 0; } +.dashboard .dashboard_row {width: 100%; height: inherit; padding: 0;} +.dashboard .dashboard_columncenter {height: inherit;} + +.dashboard .ui-corner-bottom, +.dashboard .ui-corner-top, +.dashboard .ui-corner-left, +.dashboard .ui-corner-right, +.dashboard .ui-corner-all {border-radius: 5px;} + +.dashboard_widget {border-radius: 8px; float: left;} +.dashboard_widgethelper { background-color: #D7FFFF;} +.dashboard_widgetheader { background: none repeat scroll 0 0 #F0F0D8; border: 1px solid #808080; + border-radius: 8px; margin: 0.1em;padding-bottom: 4px; padding-top: 3px; padding-left: 0.7em;} +.dashboard .ui-widget .ui-widget {font-size: 1em;} +.dashboard .ui-widget-content {background-color: #F8F8d5;color: #278727;} +.dashboard .ui-widget-content a {color: #278727;} +.dashboard .ui-widget-header {background-color: #e9e9c8;color: #278727;} +.dashboard .ui-widget-header a {color: #278727;} +.dashboard .ui-state-default, +.dashboard .ui-widget-content .ui-state-default, +.dashboard .ui-widget-header .ui-state-default {border: 1px solid #278727;background-color: #d5d5b7;font-weight: normal;color: #F0F0dd;} + +.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: .2em;} +.dashboard .ui-tabs .ui-tabs-panel {display: block;border-width: 0;background: none;box-shadow: 0 0 0 0;border-radius: 0;} +.dashboard .ui-tabs .ui-tabs-nav {margin: 0;padding: 0.2em 0.2em 0.4em;} +.dashboard .ui-tabs .ui-tabs-nav li {list-style: none;float: left;position: relative;top: 0;margin: 1px .2em 0 0;padding: 0;} +.dashboard .ui-tabs .ui-tabs-nav .ui-tabs-anchor {float: left;padding: .5em 1em;text-decoration: none;} +.dashboard .ui-tabs-icon {width: 18px;height: 18px;float: left;vertical-align: top;margin-left: 0.3em;margin-top: 0.5em;} +.dashboard .dashboard_tabnav_hidden{background-color: #F8F8d5;} + +.dashboard .ui-state-default a, +.dashboard .ui-state-default a:link, +.dashboard .ui-state-default a:visited {color: #F8F8d5;text-decoration: none;} + +.dashboard .ui-state-active, +.dashboard .ui-widget-content .ui-state-active, +.dashboard .ui-widget-header .ui-state-active{border: 1px solid #278727;background: #F8F8d5;font-weight: normal;color: #278727;} +.dashboard .ui-state-active a, +.dashboard .ui-state-active a:link, +.dashboard .ui-state-active a:visited {color: #278727;text-decoration: none;} + +.dashboard .ui-state-hover, +.dashboard .ui-widget-content .ui-state-hover, +.dashboard .ui-widget-header .ui-state-hover, +.dashboard .ui-state-focus, +.dashboard .ui-widget-content .ui-state-focus, +.dashboard .ui-widget-header .ui-state-focus {border: 1px solid #278727;font-weight: normal;color: #278727;} + +.dashboard .ui-state-hover a, +.dashboard .ui-state-hover a:hover, +.dashboard .ui-state-hover a:link, +.dashboard .ui-state-hover a:visited, +.dashboard .ui-state-focus a, +.dashboard .ui-state-focus a:hover, +.dashboard .ui-state-focus a:link, +.dashboard .ui-state-focus a:visited {color: #278727;text-decoration: none;} + +.dashboard .ui-state-disabled, +.dashboard .ui-widget-content .ui-state-disabled, +.dashboard .ui-widget-header .ui-state-disabled {opacity: .35;filter:Alpha(Opacity=35);} diff --git a/fhem/www/pgm2/ios6touchpadfloorplanstyle.css b/fhem/www/pgm2/ios6touchpadfloorplanstyle.css new file mode 100644 index 000000000..bdb3bd4bb --- /dev/null +++ b/fhem/www/pgm2/ios6touchpadfloorplanstyle.css @@ -0,0 +1,177 @@ +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ + +#menu { +height: 100vh; +} +#fpmenu.fp_arrange { +position:absolute; top:20px; left:220px; +} +/*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; +} +} + +/* iPads (portrait) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 1024px) +and (orientation : portrait) { +body { +width:768px; +} +#menu { +height: 1004px; +} +} +body { +background-color: #F7F7F7; +background-repeat:no-repeat; +margin: 0px; +padding: 0px; +font: normal 9px Helvetica, Sans-serif; +text-decoration:none; +color: #385487; +font-weight:normal; +} + +body[id~=Media] { background-color: #A5A5A5; + font-family:Arial, sans-serif; + font-size:9px; + background-image:url(../icons/Media.bak); + background-repeat:no-repeat; } + +#logo { position:absolute; top: 10px; left: 10px; + width:64px; height:67px; background-image:url(../icons/fhem_smallscreen); } +#backimg { + position:absolute; top:0px; left:201px; +} +#menu.floorplan { +overflow: auto; +width: 200px; +background-color: #d7dadf; +position:absolute; +top:0px; +font-size:14px; +margin:0px; +padding:0px; +border-right: 1px solid #000000; +} +#menu.floorplan a { +padding-left: 10px; +vertical-align: middle; +color:#000000; +text-shadow: 0px 1px #FFFFFF; +font-weight:bold; +} + +#menu.floorplan table { +margin-bottom: 10px; +border-spacing:0px; +padding:0px; +width: 100%; +-moz-box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +-webkit-box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +} + +#menu.floorplan tr { +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) +); +background-image: -o-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -moz-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -webkit-linear-gradient(top, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -ms-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: linear-gradient(to bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +height: 44px; +} + +#fpmenu.fp_arrange { + z-index:99; +min-width:310px; font-size:9px; border:1px solid gray; +background-color:#F7F7F7; +} +#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:center} +#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:40px; 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: 201px; +} + +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 */ +svg { height:32px; width:32px; fill:#fff; vertical-align:middle; margin:2px 0; } +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/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css new file mode 100644 index 000000000..5b13940d9 --- /dev/null +++ b/fhem/www/pgm2/ios6touchpadstyle.css @@ -0,0 +1,625 @@ +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ + +@import url("ios6dashboard.css"); + +#content { +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 { +/*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%; +} + +/*iPad Skalierung*/ +/* iPads (landscape) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 1024px) +and (orientation : landscape) { +body { +width:1024px; +} +#content { +width: 763px; +} +#content, #menu { +height: 704px; +} +#hdr input { +width: 773px; +} +} + +/* iPads (portrait) ----------- */ +@media only screen +and (min-device-width : 768px) +and (max-device-width : 1024px) +and (orientation : portrait) { +body { +width:768px; +} +#content, #menu { +height: 960px; +} +#content { +width: 507px; +} +#hdr input { +width: 517px; +} +} + +html, body { +margin: 0px; +padding: 0px; +font: normal 14px Helvetica, Sans-serif; +text-decoration:none; +color: #385487; +font-weight:normal; + +} + +body { +background-color: #000000; +background: #000000; +} + +a { +color:#000000; +font-weight:bold; +text-decoration:none; } +img { border-style:none; } + +div.dist { padding-top:0.3em; } +button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; } + +textarea, select, input { +background: #f7f7f7; +border-radius: 25px; +border:1px solid #d4d7db; +border-bottom-color:#c6c8cd; +background-color:#f7f7f7; +padding-left: 1.5em; +margin:20px; +outline: none; +-moz-box-shadow: 0px 1px #f7f7f7, inset 0px 1px 1px #b6b8bd, inset 0px -2px 2px #ffffff; +-webkit-box-shadow: 0px 1px #f7f7f7, inset 0px 1px 1px #b6b8bd, inset 0px -2px 2px #ffffff; +box-shadow: 0px 1px #f7f7f7, inset 0px 1px 1px #b6b8bd, inset 0px -2px 2px #ffffff; +} +textarea, input[type="text"] { +-webkit-appearance: none; +width:80%; +} +input[type="checkbox"] { +border-radius: 2px; +} +select,input[type="submit"],input[type="reset"],input[type="button"] { +-webkit-appearance: none; +width:35%; +font: normal 14px Helvetica, Sans-serif; +height:25px; +} +input[type="text"] { +height: 25px; +} + +tr.column td { padding:0; vertical-align:top;} + +/* Documentation */ +h2,h3,h4 { color:#52865D; line-height:1.3; +margin-top:1.5em; font-family:Arial,Sans-serif; } +div.dist { padding-top:0.3em; } +button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; } +div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; } + + + +/* jQuery-UI mods */ +.ui-corner-all { + border-radius: 10px !important; +} +.ui-widget { + font-family: Helvetica, Sans-serif !important; + font-size: 14px !important; + font-weight:bold !important; + color:#000000 !important; +text-shadow: 0px 1px #FFFFFF !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-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; + +} +/* +div.ui-widget-content td:first-child { + height: 28px; + width: 77px; + border: 1px solid #979797; + border-radius: 20px; + overflow: hidden; + } +*/ +pre { white-space: pre-wrap; } +svg { +height:28px; +width:28px; +fill:#7b7b7b; +vertical-align:middle; +margin-right:5px; +} +svg.on,svg.FS20_on { fill:orange; } + + +#logo { +position:absolute; top:5px; left:5px; +width:29px; height:29px; +z-index:99; +background-image: url(../images/fhemSVG/system_fhem.svg),-webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #E7EBF5), +color-stop(0.02, #C8D4E9), +color-stop(0.76, #5274B3), +color-stop(0.98, #204994) +); +background-image: url(../images/fhemSVG/system_fhem.svg),-o-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%); +background-image: url(../images/fhemSVG/system_fhem.svg),-moz-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%); +background-image: url(../images/fhemSVG/system_fhem.svg),-webkit-linear-gradient(top, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%); +background-image: url(../images/fhemSVG/system_fhem.svg),-ms-linear-gradient(bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%); +background-image: url(../images/fhemSVG/system_fhem.svg),linear-gradient(to bottom, #E7EBF5 0%, #C8D4E9 2%, #5274B3 76%, #204994 98%); + +background-size: 25px 25px, contain; +background-position: 2px 2px, 0px 0px; +background-repeat:no-repeat; +border-radius:5px; +border: 2px solid #000000; +background-color:#4b6dab; +} + +#hdr { +float:right; +z-index:98; +position:relative; top:0px; left:0px; +width:100%; +height: 44px; +background-image: -webkit-gradient( +linear, +left top, +left bottom, +color-stop(0, #6C6C6C), +color-stop(0.02, #505050), +color-stop(0.96, #1B1B1C), +color-stop(0.98, #232323), +color-stop(1, #000000) +); +background-image: -o-linear-gradient(bottom, #6C6C6C 0%, #505050 2%, #1B1B1C 96%, #232323 98%, #000000 100%); +background-image: -moz-linear-gradient(bottom, #6C6C6C 0%, #505050 2%, #1B1B1C 96%, #232323 98%, #000000 100%); +background-image: -webkit-linear-gradient(top, #6C6C6C 0%, #505050 2%, #1B1B1C 96%, #232323 98%, #000000 100%); +background-image: -ms-linear-gradient(bottom, #6C6C6C 0%, #505050 2%, #1B1B1C 96%, #232323 98%, #000000 100%); +background-image: linear-gradient(to bottom, #6C6C6C 0%, #505050 2%, #1B1B1C 96%, #232323 98%, #000000 100%); + +-moz-box-shadow: 0px 1px 4px #b4b6ba; +-webkit-box-shadow: 0px 1px 4px #b4b6ba; +box-shadow: 0px 1px 4px #b4b6ba; + +border-radius:5px 5px 0px 0px; +} +#hdr input { +margin:0px; +position:relative; +float:right; +right:7px; +height:25px; +border-radius: 2em; +background-color:#2e2e2e; +border: none; +color: #b3b3b3; +padding-left: 1.5em; +outline: none; +-moz-box-shadow: 0px -1px #171717, 0px 1px #2e2d2d, inset 0px -2px 2px #494949, inset 0px 1px #272727; +-webkit-box-shadow: 0px -1px #171717, 0px 1px #2e2d2d, inset 0px -2px 2px #494949, inset 0px 1px #272727; +box-shadow: 0px -1px #171717, 0px 1px #2e2d2d, inset 0px -2px 2px #494949, inset 0px 1px #272727; +} +#hdr table { +width:100%; +margin:0px; +padding: 5px; +} + +#menu { +position: absolute; +top:44px; +overflow: auto; +float: left; +width: 200px; + +background-color: #d7dadf; +} +#menu table { +width: 100%; +border-spacing:0px; +padding:0px; +} + +#content { +background-color:#e0e3e8; +background:#e0e3e8; + +overflow:auto; +border-left: 1px solid #000000; +float: right; + +padding: 0px 30px 0px 30px; + +} +#content table { +width:100%; +} + +#menuScrollArea { +float: left; +} + +#right { position:absolute; top:20px; left:180px; } +#console { width:100%; height:100%; position:absolute; overflow-y:auto;} +#errmsg { background-color: #000000; color: #FFFFFF; +position:absolute; top:0px; right:0px; z-index: 10; } + +.devType, .devType a, .makeTable, .makeTable a { +font-weight:bold; +color:#4c566c; +font-size:16px; +text-shadow: 0px 1px #FFFFFF; +padding:20px 0px 0px 0px; } + +.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:0px; + +-webkit-border-radius: 7px; +-moz-border-radius: 7px; +border-radius:7px; + +border:1px solid #b6b8bd; +border-bottom-color:#b4b7bb; +-moz-box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +-webkit-box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +background:#f7f7f7; +} + +table.block td { +text-align:left; +vertical-align:middle; +} + +table.block td { +border-top: 1px solid #fdfdfd; +border-bottom: 1px solid #cbcbcb; +} + +.roomoverview table.block td a{ +color: #385487; +} +.roomoverview table.block td:first-child a { +color: #000000; +font-weight:bold; +} +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; +color:#000000; +font-weight:bold; +} + +.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:0px; +padding:0px; +width: 100%; +-moz-box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +-webkit-box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +box-shadow: 0px 1px 2px #ebedee, 0px -1px #b7b9bb; +} + +table.block tr { +height: 44px; +} + +table.room tr { +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) +); +background-image: -o-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -moz-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -webkit-linear-gradient(top, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: -ms-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +background-image: linear-gradient(to bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%); +height: 44px; +} +table.room a, table.block a { +vertical-align: middle; +text-shadow: 0px 1px #FFFFFF; +} +table.room a { +padding-left: 10px; +display:block; +} +table.room tr.sel a svg { +fill:#FFFFFF; +} + +table.block tr.sel, table.room tr.sel { +color:#FFFFFF; +text-shadow: 0px -1px #000000; +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) +); +background-image: -o-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%); +background-image: -moz-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%); +background-image: -webkit-linear-gradient(top, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%); +background-image: -ms-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%); +background-image: linear-gradient(to bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%); +} +table.block tr.sel a,table.room tr.sel a{ +color:#FFFFFF; +text-shadow: 0px -1px #000000; +} + +.changed { color:red; } +.dname { + +} + +/* Widgets */ +.makeTable { +width: 100%; +display:block; +float:left; +clear:left; +} +.makeSelect { +margin-top:20px; +width: 100%; +display:block; +float:left; +clear:left; + +padding: 0px; +border-spacing:0px; + +-webkit-border-radius: 7px; +-moz-border-radius: 7px; +border-radius:7px; + +border:1px solid #b6b8bd; +border-bottom-color:#b4b7bb; +-moz-box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +-webkit-box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +box-shadow: 0px 1px #fefefe, inset 0px 1px #d7d7d7; +background:#f7f7f7; +} +.slider { +margin-top:10px; +display: inline-block; +-webkit-box-sizing: border-box; +-moz-box-sizing: padding-box; +box-sizing: padding-box; +height: 9px; +width: 120px; +padding: 1px; +-webkit-border-radius: 4px; +-moz-border-radius: 4px; +border-radius: 4px; +background-image: +-webkit-gradient(linear, left top ,left bottom, +from(#0a3a86), +color-stop(.5, #4c8de7), +color-stop(.95, #6babf5), +to(#0a3a86)), +-webkit-gradient(linear, left top ,left bottom, +from(#919191), +color-stop(.5, #f0f0f0), +color-stop(.5, #fff), +color-stop(.95, #fff), +to(#919191)); +background-image: +-moz-linear-gradient(top, +#0a3a86, +#4c8de7 50%, +#6babf5 95%, +#0a3a86), +-moz-linear-gradient(top, +#919191, +#f0f0f0 50%, +#fff 50%, +#fff 95%, +#919191); +background-repeat: no-repeat, repeat-x; +} +.get,.set,.attr { +margin-top:20px; +margin-bottom:20px; +float:left; } +.handle { position:relative; +-webkit-box-shadow: inset 0px 1px #e8e8e8; +-moz-box-shadow: inset 0px 1px #e8e8e8; +box-shadow: inset 0px 1px #e8e8e8; +border: 1px solid #9d9d9d; +color: #666666; +height:15px; +width:18px; +left: 0px; +top: -6px; +-webkit-border-radius: 10px; +-moz-border-radius: 10px; +border-radius: 10px; +padding:3px 0px 0px 0px; +text-align:center; +font-size:10px; +-webkit-tap-highlight-color: transparent; + +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #A6A6A6), +color-stop(1, #FCFCFC) +); +background-image: -o-linear-gradient(bottom, #A6A6A6 0%, #FCFCFC 100%); +background-image: -moz-linear-gradient(bottom, #A6A6A6 0%, #FCFCFC 100%); +background-image: -webkit-linear-gradient(top, #A6A6A6 0%, #FCFCFC 100%); +background-image: -ms-linear-gradient(bottom, #A6A6A6 0%, #FCFCFC 100%); +background-image: linear-gradient(to bottom, #A6A6A6 0%, #FCFCFC 100%); +} +.handle:hover, .handle.hover { +color:#FCFCFC; +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #666666), +color-stop(1, #CBCBCB) +); +background-image: -o-linear-gradient(bottom, #666666 0%, #CBCBCB 100%); +background-image: -moz-linear-gradient(bottom, #666666 0%, #CBCBCB 100%); +background-image: -webkit-linear-gradient(top, #666666 0%, #CBCBCB 100%); +background-image: -ms-linear-gradient(bottom, #666666 0%, #CBCBCB 100%); +background-image: linear-gradient(to bottom, #666666 0%, #CBCBCB 100%); +} + +.SVGplot { + text-align:center; +} + +/* 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/ios6touchpadsvg_defs.svg b/fhem/www/pgm2/ios6touchpadsvg_defs.svg new file mode 100644 index 000000000..1be83cfcf --- /dev/null +++ b/fhem/www/pgm2/ios6touchpadsvg_defs.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fhem/www/pgm2/ios6touchpadsvg_style.css b/fhem/www/pgm2/ios6touchpadsvg_style.css new file mode 100644 index 000000000..17ff7d8a9 --- /dev/null +++ b/fhem/www/pgm2/ios6touchpadsvg_style.css @@ -0,0 +1,49 @@ +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ + +.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.copy { text-decoration:underline; stroke:none; fill:blue;} +text.paste { text-decoration:underline; stroke:none; fill:blue;} + +polyline { 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;} + +.l0 { stroke:red; } text.l0 { stroke:none; fill:red; } +.l1 { stroke:green; } text.l1 { stroke:none; fill:green; } +.l2 { stroke:blue; } text.l2 { stroke:none; fill:blue; } +.l3 { stroke:magenta; } text.l3 { stroke:none; fill:magenta; } +.l4 { stroke:brown; } text.l4 { stroke:none; fill:brown; } +.l5 { stroke:black; } text.l5 { stroke:none; fill:black; } +.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; } +.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; } +.l8 { stroke:yellow; } text.l8 { stroke:none; fill:yellow; } + +.l0fill{ stroke:#f00; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#f00; } +.l1fill{ stroke:#291; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#291; } +.l2fill{ stroke:#00f; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#00f; } +.l3fill{ stroke:#f0f; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#f0f; } +.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; } +.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; } +.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; } + +.l0dot { stroke:red; stroke-dasharray:2,4; } text.ldot { stroke:none; fill:red; } +.l1dot { stroke:green; stroke-dasharray:2,4; } text.ldot { stroke:none; fill:green; } + +.l0fill_stripe {stroke:red; fill:url(#gr0_stripe);} text.l0fill_stripe {stroke:none; fill:red;} +.l1fill_stripe {stroke:green; fill:url(#gr1_stripe);} text.l1fill_stripe {stroke:none; fill:green;} + +.l0fill_gyr {stroke:red; fill:url(#gr0_gyr);} text.l0fill_gyr {stroke:none; fill:red;}