From c917e61bcb5903c39cf5857b89dd88d0d5d77139 Mon Sep 17 00:00:00 2001 From: rudolfkoenig <> Date: Sun, 10 Mar 2019 17:07:33 +0000 Subject: [PATCH] ios6Common.css: Patches from Blackcat (Forum #23406) git-svn-id: https://svn.fhem.de/fhem/trunk@18852 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- .../openautomation/light_led_stripe.svg | 1282 +++++-------- fhem/www/pgm2/ios6Common.css | 384 ++-- fhem/www/pgm2/ios6touchpadstyle.css | 1696 +++++++++-------- 3 files changed, 1501 insertions(+), 1861 deletions(-) diff --git a/fhem/www/images/openautomation/light_led_stripe.svg b/fhem/www/images/openautomation/light_led_stripe.svg index 4b7d43cc0..f06c75469 100644 --- a/fhem/www/images/openautomation/light_led_stripe.svg +++ b/fhem/www/images/openautomation/light_led_stripe.svg @@ -1,775 +1,527 @@ - - - -image/svg+xml + + + +Created by potrace 1.8, written by Peter Selinger 2001-2007 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file + d="m 219.191,174.762 c -0.481,0.481 -0.964,0.963 -1.445,1.444 -0.578,0.578 -0.578,1.543 0,2.121 0.578,0.578 1.543,0.578 2.121,0 0.481,-0.481 0.964,-0.963 1.445,-1.444 0.578,-0.578 0.578,-1.543 0,-2.121 -0.578,-0.578 -1.542,-0.578 -2.121,0 l 0,0 z" + id="path371" + inkscape:connector-curvature="0" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fhem/www/pgm2/ios6Common.css b/fhem/www/pgm2/ios6Common.css index ea10164b6..5974bc82d 100644 --- a/fhem/www/pgm2/ios6Common.css +++ b/fhem/www/pgm2/ios6Common.css @@ -1,258 +1,126 @@ -/* jQuery-UI mods */ - -/*.ui-dialog { - top: 150px !important; - left: 300px !important; - } - */ - -.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-widget-content { - background:none !important; - 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-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; - -} -.checkbox { - margin:0 auto; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; - position:relative; - display: block; - width:76px; - height:26px; -} - -.checkbox input[type=checkbox] { - position:absolute; - left:0; - top:0; - z-index:99; -} -.checkbox input[type=checkbox]:active{ - right:0px; -} -.checkbox input[type=checkbox] + label { - position:absolute; - left:0; - top:0; - display: block; - cursor:pointer; - width: 76px; - overflow: hidden; - background:#fff; - -webkit-border-radius:3px; - -moz-border-radius:3px; - border-radius:3px; - background:-webkit-linear-gradient(left, #2d5ba8 50%, #999 50%) no-repeat -20px 0; - background:-moz-linear-gradient(left, #2d5ba8 50%, #999 50%) no-repeat -20px 0; - -webkit-transition: background-position 0.3s ease-in-out; - -moz-transition: background-position 0.3s ease-in-out; -} - -.checkbox input[type=checkbox] + label span, -.checkbox input[type=checkbox] + label span:before, -.checkbox input[type=checkbox] + label span:after{ - text-align:center; - display:block; - width:50px; - height:26px; - line-height:26px; - position:absolute; - top:-1px; - font-weight:bold; - text-indent: 0; - -webkit-box-shadow:inset 1px 2px 2px 0 rgba(0,0,0,.2); - -moz-box-shadow:inset 1px 2px 2px 0 rgba(0,0,0,.2); - box-shadow:inset 1px 2px 2px 0 rgba(0,0,0,.2); -} -.checkbox input[type=checkbox] + label span{ - text-indent: -9999px; - top:0; - position:relative; - left:0; - width:26px; - -webkit-border-radius:3px; - -moz-border-radius:3px; - border-radius:3px; - background:-webkit-linear-gradient(#efefef 1px, #cecece 1px, #fbfbfb); - background:-moz-linear-gradient(#efefef 1px, #cecece 1px, #fbfbfb); - -webkit-transition: left 0.3s ease-in-out; - -moz-transition: left 0.3s ease-in-out; - border:solid 1px; - border-color: #919191 #9f9f9f #999999 #90aacf; - -webkit-box-shadow:none; - -moz-box-shadow:none; - box-shadow:none; -} -.checkbox input[type=checkbox] + label span:before{ - color:#eee; - text-shadow:0 1px rgba(255,255,255,.1), 0 -1px rgba(0,0,0,.3); - content:"I"; -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; - border-top:solid 1px #133676; - border-bottom:solid 1px #6587b7; - border-radius:1px 0 0 1px; - left:-50px; -} -.checkbox input[type=checkbox] + label span:after{ - color:#888; - content:"O"; - left:auto; - right:-50px; - background:-webkit-linear-gradient(#ddd, #eee); - background:-moz-linear-gradient(#ddd, #eee); - border-top:solid 1px #7d7d7d; - border-bottom:solid 1px #c0c0c0; -} -.checkbox input[type=checkbox] + label:active span{ - left:0px; -} -.checkbox input[type=checkbox]:checked + label:active span{ - left:40px; -} -.checkbox input[type=checkbox]:checked + label span{ - left:50px; -} -.checkbox input[type=checkbox]:checked + label{ - background-position:20px; -} - -.checkbox:before, -.checkbox:after{ - content: " "; - display:block; - position:absolute; - top:0; - left:75px; - width:1px; - height:27px; - border:solid #fff; - border-width:1px 0; - z-index:20; - background:#999; -} -.checkbox:before{ - left:0; -} - -.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 { border:3px solid #278727; padding: 0.2em; } -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; } +/* jQuery-UI mods */ + +/*.ui-dialog { + top: 150px !important; + left: 300px !important; + } + */ + +.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-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/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css index f5d8efff0..4c9027bad 100644 --- a/fhem/www/pgm2/ios6touchpadstyle.css +++ b/fhem/www/pgm2/ios6touchpadstyle.css @@ -1,843 +1,863 @@ -@import url("ios6dashboard.css"); -@import url("ios6Common.css"); - -/* iOS 6 Theme for FHEM */ -/* by Sandra Ohmayer */ -/* http://www.animeschatten.net */ -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 -} - -#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 -} - -#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 -} - -#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 -} -} - -/* 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 (landscape) ----------- */ -@media only screen -and (min-device-width : 768px) -and (max-device-width : 1024px) -and (orientation : landscape) { -body { - width:1024px -} -} - -/* iPads (portrait) ----------- */ -@media only screen -and (min-device-width : 768px) -and (max-device-width : 1024px) -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 -} - -textarea,input[type="text"] { - background-color:#fff; - -webkit-appearance:none; - /*width:90%*/ -} - -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:25px -} - -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%!important -} - -#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 -} - -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 -} +@import url("ios6dashboard.css"); +@import url("ios6Common.css"); + +/* iOS 6 Theme for FHEM */ +/* by Sandra Ohmayer */ +/* http://www.animeschatten.net */ +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 +} +.colorpicker_widget { + display: none !important; +} +.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 +} +.colorpicker_widget { + display: none !important; +} +.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 +} +.colorpicker_widget { + display: none !important; +} +.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; +} +.colorpicker_widget { +display: none; +} +} + +/* 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; +} +.colorpicker_widget { +display: none; +} +.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 +} + +textarea,input[type="text"] { + background-color:#fff; + -webkit-appearance:none; + /*width:90%*/ +} + +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:25px +} + +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%!important +} + +#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 +} + +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; + word-break: break-word; +} .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 -} - -.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 { - 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:15px; - width:18px; - left:0; - top:-6px; - -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-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 -} - -.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 + +.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 +} + +.slider { + margin-top:0px; + 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-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 +} + +.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 }