Save config
?
ESPEasy
Gerätestatus
Logs
Plots
Temperaturen
Unsorted
Everything
Logfile
Commandref
Remote doc
Edit files
Select style
Event monitor
@import url("ios6dashboard.css"); @import url("ios6Common.css"); /* iOS 6 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 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:#e0e3e8; background:#e0e3e8; } .hideMenu #menu { display:none } html,body { margin:0; padding:0; font:normal 14px Helvetica,Sans-serif; text-decoration:none; color:#385487; font-weight:400 } body { background-color:#000; background:#000 } a { color:#000; font-weight:700; text-decoration:none } a:hover { cursor:pointer; color:#777 } img { border-style:none } div.dist { padding-top:.3em } button.dist { margin:10px; background:transparent; border:0; cursor:pointer } textarea,select,input { background:#f7f7f7; border-radius:25px; border:1px solid #d4d7db; border-bottom-color:#c6c8cd; background-color:#f7f7f7; padding-left:0.5em; margin:7px; outline:none; -moz-box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff; -webkit-box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff; box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff } 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 } svg:not([fill]) { fill:#7b7b7b; } svg.on,svg.FS20_on { fill:orange } #logo { position:absolute; top:5px; left:5px; width:28px; height:28px; z-index:99; background-image:url(../images/fhemSVG/system_fhem.svg); background:url(../images/fhemSVG/system_fhem.svg),-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* FF3.6+ */ background:url(../images/fhemSVG/system_fhem.svg),-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))); /* Chrome,Safari4+ */ background:url(../images/fhemSVG/system_fhem.svg),-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */ background:url(../images/fhemSVG/system_fhem.svg),-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */ background:url(../images/fhemSVG/system_fhem.svg),-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */ background:url(../images/fhemSVG/system_fhem.svg),linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0); /* IE6-9 */ 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:#bbb } table.room svg { fill:#FFF; padding:5px; width:18px; height:18px; box-shadow:inset 0 1px 1px rgba(255,255,255,0.7); background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* 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))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */ background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0); /* IE6-9 */ background-size:28px 12px; background-repeat:no-repeat; border-radius:5px; border:1px solid #666; background-color:#4b6dab } #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:#333; background-color:#111 } #hdr { float:right; z-index:98; position:relative; top:0; left:0; 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,#000)); background-image:-o-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%); background-image:-moz-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%); background-image:-webkit-linear-gradient(top,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%); background-image:-ms-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%); background-image:linear-gradient(to bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%); -moz-box-shadow:0 1px 4px #b4b6ba; -webkit-box-shadow:0 1px 4px #b4b6ba; box-shadow:0 1px 4px #b4b6ba; border-radius:5px 5px 0 0 } #hdr input { margin:0; 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:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727; -webkit-box-shadow:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727; box-shadow:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727 } #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:#d7dadf } #menu table { width:100%; border-spacing:0; padding:0 } #content,#right { background-color:#e0e3e8; background:#e0e3e8; overflow:auto; -webkit-overflow-scrolling:touch; border-left:1px solid #000; 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:#fff; font-weight:700; position:absolute; top:5px; left:225px; z-index:99; text-shadow:0 1px #000 } .devType,.devType a,.makeTable,.makeTable a { font-weight:700; color:#4c566c; font-size:16px; text-shadow:0 1px #FFF; 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:700; color:#000; font-size:14px; padding:0 } .devType table a:hover,.makeTable table a:hover { color:#777 } .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 #b6b8bd; border-bottom-color:#b4b7bb; -moz-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; -webkit-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; background:#f7f7f7 } 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:700; } .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 2px #ebedee,0 -1px #b7b9bb; -webkit-box-shadow:0 1px 2px #ebedee,0 -1px #b7b9bb; box-shadow:0 1px 2px #ebedee,0 -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 } table.room a { padding-left:5px; display:block } table.block tr.sel,table.room tr.sel { color:#FFF; text-shadow:0 -1px #000; 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.room tr.sel a { color:#FFF; text-shadow:0 -1px #000 } table.room tr.sel a:hover { text-shadow:0 -1px #333 } table.room a:hover svg { background-color:#777 } table.room tr.sel a:hover svg { background-color:#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 #b6b8bd; border-bottom-color:#b4b7bb; -moz-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; -webkit-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7; background:#f7f7f7 } .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-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 { float:left; margin-bottom:10px; margin-top:10px } .handle { position:relative; -webkit-box-shadow:inset 0 1px #e8e8e8; -moz-box-shadow:inset 0 1px #e8e8e8; box-shadow:inset 0 1px #e8e8e8; border:1px solid #9d9d9d; 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-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,#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:#D7DADF; border:thin solid #C1C4C6; box-shadow:0 0 3px #dfdfdf inset; border-radius:10px } ::-webkit-scrollbar-thumb { background:#7887A4; border:thin solid gray; border-radius:10px } ::-webkit-scrollbar-thumb:hover { background:#777 }