/* iOS 6 Theme for FHEM */ /* by Sandra Ohmayer */ /* http://www.animeschatten.net */ @import url("ios6touchpadstyle.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 Helvetica, Sans-serif; 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 #000000; } #menu.floorplan a { padding-left: 7px; display:block; 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; } #menu.floorplan tr:first-child { 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%); border-radius:5px 5px 0px 0px; } #menu.floorplan tr:first-child a { color:#FFFFFF; text-shadow: 0px -1px #000000; } #menu.floorplan tr:first-child td { text-align:center; padding-right: 7px; } #floorplans 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; } #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; }