From 2713a1987ba95f45431a47d79fdd2b1520366242 Mon Sep 17 00:00:00 2001 From: Blackcat <> Date: Sat, 28 Dec 2019 19:02:07 +0000 Subject: [PATCH] ios12 Theme: SVG Color added / position changed and uppercase deleted ios6 Theme: SVG Color added / position changed git-svn-id: https://svn.fhem.de/fhem/trunk@20843 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/pgm2/ios12Common.css | 242 ++-- fhem/www/pgm2/ios12svg_defs.svg | 121 +- fhem/www/pgm2/ios12svg_style.css | 132 +- fhem/www/pgm2/ios12touchpadstyle.css | 5 - fhem/www/pgm2/ios6Common.css | 252 ++-- fhem/www/pgm2/ios6svg_defs.svg | 125 +- fhem/www/pgm2/ios6svg_style.css | 132 +- fhem/www/pgm2/ios6touchpadstyle.css | 1711 +++++++++++++------------- 8 files changed, 1520 insertions(+), 1200 deletions(-) diff --git a/fhem/www/pgm2/ios12Common.css b/fhem/www/pgm2/ios12Common.css index 4c5283a2c..b1ce8e44d 100644 --- a/fhem/www/pgm2/ios12Common.css +++ b/fhem/www/pgm2/ios12Common.css @@ -1,121 +1,121 @@ -/* jQuery-UI mods */ - -/*.ui-dialog { - top: 150px !important; - left: 300px !important; - } - */ - -.ui-corner-all { - border-radius: 7px !important; -} -.ui-widget { -} -.ui-widget-content { - color:inherit !important; -} -.ui-dialog table { - border-spacing:5px!important; - margin:0px!important; - padding:0px!important; - width:100%!important; -} - -.ui-dialog .ui-dialog-titlebar { display:none; } -.ui-dialog-buttonset .ui-button { - color:#FFFFFF !important; -text-shadow: 0px -1px #000000 !important; -background:none !important; -background-color:transparent !important; -border:none !important; -} -.ui-widget-overlay { - background:none !important; - background-color:#000000 !important; - opacity:0.5 !important; -} -.ui-dialog-buttonpane { -background-image: -webkit-gradient( -linear, -right top, -right bottom, -color-stop(0, #C0E2FC), -color-stop(0.02, #44AAF8), -color-stop(0.04, #0589F5), -color-stop(0.96, #015DE6), -color-stop(0.98, #0157D8), -color-stop(1, #014BBB), -color-stop(1, #1B72FF) -) !important; -background-image: -o-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; -background-image: -moz-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; -background-image: -webkit-linear-gradient(top, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; -background-image: -ms-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; -background-image: linear-gradient(to bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; -height:44px; - border-radius: 0px 0px 10px 10px !important; -} -.ui-dialog { - background:none !important; -background-image: -webkit-gradient( -linear, -right top, -right bottom, -color-stop(0, #F8F9FA), -color-stop(0.02, #EBEDEF), -color-stop(0.04, #E4E6EA), -color-stop(0.96, #E2E5E8), -color-stop(0.98, #D4D7D9), -color-stop(1, #B7B9BB) -) !important; -background-image: -o-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; -background-image: -moz-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; -background-image: -webkit-linear-gradient(top, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; -background-image: -ms-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; -background-image: linear-gradient(to bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; - -} - -.uzsuSelect.ui-buttonset { - display: block !important; - margin: 6px 0px !important; -} - -.uzsuTimerEntry div:nth-child(2) { - display: inline-grid !important; - margin: 0px 10px 5px 0px !important; -} - - -.colorpicker_ct .slider { background: url(../jscolor/ct_background.svg); } -.colorpicker_ct_mired .slider { background: url(../jscolor/ct_mired_background.svg); } -.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); } -.get,.set,.attr { margin-bottom:5px; float:left; } -select.svgSrc { width:100px; } -select.svgColumn { width:50px; } -select.svgRegexp { width:120px; } - -/* jQuery-UI mods */ -div.ui-dialog div.ui-dialog-titlebar { display:none; } -div.ui-widget-content { background:#FFFFE7; } -#fwmenu { - position: absolute; z-index:1005; - text-align:left; max-width:600px; - font-weight: normal; font-size: 100%; - background:#FFFFE7; border:1px solid #278727; -} -#fwmenu li a { color:#278727; } - -div#svgmarker { - position: absolute; z-index:1005; padding: 6px 10px; - text-align:left; max-width:600px; - color:black; background:#999; - border:1px solid #fff; border-radius:4px; -} - -svg.zw_nr .zwBox { stroke:#c0c0c0; stroke-width:2px; fill:#f7f7f7; } -svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; fill:#f7f7f7; } -svg.zw_nr .zwMargin { stroke:#c0c0c0; stroke-width:1px; fill:none; } -svg.zw_nr .zwLine { stroke:#c0c0c0; stroke-width:1px; } -svg.zw_nr .zwArrowHead { fill:#c0c0c0; stroke-width:1px; } -svg.zw_nr { height:auto; width:auto; margin:0; } +/* jQuery-UI mods */ + +/*.ui-dialog { + top: 150px !important; + left: 300px !important; + } + */ + +.ui-corner-all { + border-radius: 7px !important; +} +.ui-widget { +} +.ui-widget-content { + color:inherit !important; +} +.ui-dialog table { + border-spacing:5px!important; + margin:0px!important; + padding:0px!important; + width:100%!important; +} + +.ui-dialog .ui-dialog-titlebar { display:none; } +.ui-dialog-buttonset .ui-button { + color:#FFFFFF !important; +text-shadow: 0px -1px #000000 !important; +background:none !important; +background-color:transparent !important; +border:none !important; +} +.ui-widget-overlay { + background:none !important; + background-color:#000000 !important; + opacity:0.5 !important; +} +.ui-dialog-buttonpane { +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #C0E2FC), +color-stop(0.02, #44AAF8), +color-stop(0.04, #0589F5), +color-stop(0.96, #015DE6), +color-stop(0.98, #0157D8), +color-stop(1, #014BBB), +color-stop(1, #1B72FF) +) !important; +background-image: -o-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -moz-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -webkit-linear-gradient(top, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: -ms-linear-gradient(bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +background-image: linear-gradient(to bottom, #C0E2FC 0%, #44AAF8 2%, #0589F5 4%, #015DE6 96%, #0157D8 98%, #014BBB 100%, #1B72FF 100%) !important; +height:44px; + border-radius: 0px 0px 10px 10px !important; +} +.ui-dialog { + background:none !important; +background-image: -webkit-gradient( +linear, +right top, +right bottom, +color-stop(0, #F8F9FA), +color-stop(0.02, #EBEDEF), +color-stop(0.04, #E4E6EA), +color-stop(0.96, #E2E5E8), +color-stop(0.98, #D4D7D9), +color-stop(1, #B7B9BB) +) !important; +background-image: -o-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -moz-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -webkit-linear-gradient(top, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: -ms-linear-gradient(bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; +background-image: linear-gradient(to bottom, #F8F9FA 0%, #EBEDEF 2%, #E4E6EA 4%, #E2E5E8 96%, #D4D7D9 98%, #B7B9BB 100%) !important; + +} + +.uzsuSelect.ui-buttonset { + display: block !important; + margin: 6px 0px !important; +} + +.uzsuTimerEntry div:nth-child(2) { + display: inline-grid !important; + margin: 0px 10px 5px 0px !important; +} + + +.colorpicker_ct .slider { background: url(../jscolor/ct_background.svg); } +.colorpicker_ct_mired .slider { background: url(../jscolor/ct_mired_background.svg); } +.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); } +.get,.set,.attr { margin-bottom:5px; float:left; } +select.svgSrc { width:100px; } +select.svgColumn { width:50px; } +select.svgRegexp { width:120px; } + +/* jQuery-UI mods */ +div.ui-dialog div.ui-dialog-titlebar { display:none; } +div.ui-widget-content { background:#FFF; } +#fwmenu { + position: absolute; z-index:1005; + text-align:left; max-width:600px; + font-weight: normal; font-size: 100%; + background:#FFF; border:1px solid black; +} +#fwmenu li a { color:black; } + +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/ios12svg_defs.svg b/fhem/www/pgm2/ios12svg_defs.svg index e3f424802..a96b54350 100644 --- a/fhem/www/pgm2/ios12svg_defs.svg +++ b/fhem/www/pgm2/ios12svg_defs.svg @@ -26,18 +26,127 @@ - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fhem/www/pgm2/ios12svg_style.css b/fhem/www/pgm2/ios12svg_style.css index 0d72892c2..f956b468d 100644 --- a/fhem/www/pgm2/ios12svg_style.css +++ b/fhem/www/pgm2/ios12svg_style.css @@ -2,10 +2,10 @@ /* by Sandra Ohmayer */ /* http://www.foodcat.de */ -.background { fill:#f7f7f7; +.background { fill:#f7f7f7; } -text { +text { font: normal 10px Helvetica, Sans-serif; fill:#000000;} text.title { @@ -18,6 +18,7 @@ text-shadow: 0px 1px #FFFFFF; text.legend{ cursor:pointer; } text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} +circle#svgmarker { color:#278727; opacity:0.5; } path.SVGplot { stroke:black; fill:none; } @@ -27,31 +28,58 @@ polyline.SVGplot { stroke:black; fill:none; } .hgrid { stroke:gray; stroke-dasharray:2,6;} .pasted { stroke:black; stroke-dasharray:1,1;} -.SVGplot.l0 { stroke:red; } -.SVGplot.l1 { stroke:green; } -.SVGplot.l2 { stroke:blue; } -.SVGplot.l3 { stroke:magenta; } -.SVGplot.l4 { stroke:brown; } -.SVGplot.l5 { stroke:black; } -.SVGplot.l6 { stroke:olive; } -.SVGplot.l7 { stroke:gray; } -.SVGplot.l8 { stroke:yellow; } -.SVGplot.l0fill { stroke:#f00; fill:url(#gr_0); } -.SVGplot.l1fill { stroke:#291; fill:url(#gr_1); } -.SVGplot.l2fill { stroke:#00f; fill:url(#gr_2); } -.SVGplot.l3fill { stroke:#f0f; fill:url(#gr_3); } -.SVGplot.l4fill { stroke:#ff0; fill:url(#gr_4); } -.SVGplot.l5fill { stroke:#0ff; fill:url(#gr_5); } -.SVGplot.l6fill { stroke:#000; fill:url(#gr_6); } -.SVGplot.l0dot { stroke:red; stroke-dasharray:2,4; } -.SVGplot.l1dot { stroke:green; stroke-dasharray:2,4; } -.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);} -.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);} -.SVGplot.l0fill_gyr { stroke:red; fill:url(#gr0_gyr);} +.SVGplot.l0 { stroke:red; } +.SVGplot.l1 { stroke:green; } +.SVGplot.l2 { stroke:blue; } +.SVGplot.l3 { stroke:magenta; } +.SVGplot.l4 { stroke:brown; } +.SVGplot.l5 { stroke:black; } +.SVGplot.l6 { stroke:olive; } +.SVGplot.l7 { stroke:gray; } +.SVGplot.l8 { stroke:yellow; } -text.SVGplot.l0 { stroke:none; fill:red; } -text.SVGplot.l0 { stroke:none; fill:red; } -text.SVGplot.l1 { stroke:none; fill:green; } +.SVGplot.l0fill { stroke:red; fill:url(#gr_0); } +.SVGplot.l1fill { stroke:forestgreen; fill:url(#gr_1); } +.SVGplot.l2fill { stroke:blue; fill:url(#gr_2); } +.SVGplot.l3fill { stroke:magenta; fill:url(#gr_3); } +.SVGplot.l4fill { stroke:yellow; fill:url(#gr_4); } +.SVGplot.l5fill { stroke:cyan; fill:url(#gr_5); } +.SVGplot.l6fill { stroke:black; fill:url(#gr_6); } +.SVGplot.l7fill { stroke:brown; fill:url(#gr_7); } +.SVGplot.l8fill { stroke:olive; fill:url(#gr_8); } + +.SVGplot.l0dot { stroke:red; stroke-dasharray:2,4; } +.SVGplot.l1dot { stroke:green; stroke-dasharray:2,4; } +.SVGplot.l2dot { stroke:blue; stroke-dasharray:2,4; } +.SVGplot.l3dot { stroke:magenta; stroke-dasharray:2,4; } +.SVGplot.l4dot { stroke:brown; stroke-dasharray:2,4; } +.SVGplot.l5dot { stroke:black; stroke-dasharray:2,4; } +.SVGplot.l6dot { stroke:olive; stroke-dasharray:2,4; } +.SVGplot.l7dot { stroke:gray; stroke-dasharray:2,4; } +.SVGplot.l8dot { stroke:yellow; stroke-dasharray:2,4; } + +.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);} +.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);} +.SVGplot.l2fill_stripe { stroke:blue; fill:url(#gr2_stripe);} +.SVGplot.l3fill_stripe { stroke:magenta; fill:url(#gr3_stripe);} +.SVGplot.l4fill_stripe { stroke:brown; fill:url(#gr4_stripe);} +.SVGplot.l5fill_stripe { stroke:black; fill:url(#gr5_stripe);} +.SVGplot.l6fill_stripe { stroke:olive; fill:url(#gr6_stripe);} +.SVGplot.l7fill_stripe { stroke:gray; fill:url(#gr7_stripe);} +.SVGplot.l8fill_stripe { stroke:yellow; fill:url(#gr8_stripe);} + +.SVGplot.l0fill_gyr { stroke:red; fill:url(#gr0_gyr);} +.SVGplot.l1fill_gyr { stroke:green; fill:url(#gr1_gyr);} +.SVGplot.l2fill_gyr { stroke:blue; fill:url(#gr2_gyr);} +.SVGplot.l3fill_gyr { stroke:magenta; fill:url(#gr3_gyr);} +.SVGplot.l4fill_gyr { stroke:brown; fill:url(#gr4_gyr);} +.SVGplot.l5fill_gyr { stroke:black; fill:url(#gr5_gyr);} +.SVGplot.l6fill_gyr { stroke:olive; fill:url(#gr6_gyr);} +.SVGplot.l7fill_gyr { stroke:gray; fill:url(#gr7_gyr);} +.SVGplot.l8fill_gyr { stroke:yellow; fill:url(#gr8_gyr);} + +text.SVGplot.l0 { stroke:none; fill:red; } +text.SVGplot.l1 { stroke:none; fill:green; } text.SVGplot.l2 { stroke:none; fill:blue; } text.SVGplot.l3 { stroke:none; fill:magenta; } text.SVGplot.l4 { stroke:none; fill:brown; } @@ -59,15 +87,43 @@ text.SVGplot.l5 { stroke:none; fill:black; } text.SVGplot.l6 { stroke:none; fill:olive; } text.SVGplot.l7 { stroke:none; fill:gray; } text.SVGplot.l8 { stroke:none; fill:yellow; } -text.SVGplot.l0fill { stroke:none; fill:#f00; } -text.SVGplot.l1fill { stroke:none; fill:#291; } -text.SVGplot.l2fill { stroke:none; fill:#00f; } -text.SVGplot.l3fill { stroke:none; fill:#f0f; } -text.SVGplot.l4fill { stroke:none; fill:#ff0; } -text.SVGplot.l5fill { stroke:none; fill:#0ff; } -text.SVGplot.l6fill { stroke:none; fill:#000; } -text.SVGplot.l0dot { stroke:none; fill:red; } -text.SVGplot.l1dot { stroke:none; fill:green; } -text.SVGplot.l0fill_stripe {stroke:none; fill:red; } -text.SVGplot.l1fill_stripe {stroke:none; fill:green;} -text.SVGplot.l0fill_gyr {stroke:none; fill:red; } + +text.SVGplot.l0fill { stroke:none; fill:red; } +text.SVGplot.l1fill { stroke:none; fill:forestgreen; } +text.SVGplot.l2fill { stroke:none; fill:blue; } +text.SVGplot.l3fill { stroke:none; fill:magenta; } +text.SVGplot.l4fill { stroke:none; fill:yellow; } +text.SVGplot.l5fill { stroke:none; fill:cyan; } +text.SVGplot.l6fill { stroke:none; fill:black; } +text.SVGplot.l7fill { stroke:none; fill:brown; } +text.SVGplot.l8fill { stroke:none; fill:olive; } + +text.SVGplot.l0dot { stroke:none; fill:red; } +text.SVGplot.l1dot { stroke:none; fill:green; } +text.SVGplot.l2dot { stroke:none; fill:blue; } +text.SVGplot.l3dot { stroke:none; fill:magenta; } +text.SVGplot.l4dot { stroke:none; fill:brown; } +text.SVGplot.l5dot { stroke:none; fill:black; } +text.SVGplot.l6dot { stroke:none; fill:olive; } +text.SVGplot.l7dot { stroke:none; fill:gray; } +text.SVGplot.l8dot { stroke:none; fill:yellow; } + +text.SVGplot.l0fill_stripe {stroke:none; fill:red; } +text.SVGplot.l1fill_stripe {stroke:none; fill:green; } +text.SVGplot.l2fill_stripe {stroke:none; fill:blue; } +text.SVGplot.l3fill_stripe {stroke:none; fill:magenta; } +text.SVGplot.l4fill_stripe {stroke:none; fill:brown; } +text.SVGplot.l5fill_stripe {stroke:none; fill:black; } +text.SVGplot.l6fill_stripe {stroke:none; fill:olive; } +text.SVGplot.l7fill_stripe {stroke:none; fill:gray; } +text.SVGplot.l8fill_stripe {stroke:none; fill:yellow; } + +text.SVGplot.l0fill_gyr {stroke:none; fill:red; } +text.SVGplot.l1fill_gyr {stroke:none; fill:green; } +text.SVGplot.l2fill_gyr {stroke:none; fill:blue; } +text.SVGplot.l3fill_gyr {stroke:none; fill:magenta; } +text.SVGplot.l4fill_gyr {stroke:none; fill:brown; } +text.SVGplot.l5fill_gyr {stroke:none; fill:black; } +text.SVGplot.l6fill_gyr {stroke:none; fill:olive; } +text.SVGplot.l7fill_gyr {stroke:none; fill:gray; } +text.SVGplot.l8fill_gyr {stroke:none; fill:yellow; } diff --git a/fhem/www/pgm2/ios12touchpadstyle.css b/fhem/www/pgm2/ios12touchpadstyle.css index 216fed6aa..7a3c7a272 100644 --- a/fhem/www/pgm2/ios12touchpadstyle.css +++ b/fhem/www/pgm2/ios12touchpadstyle.css @@ -51,10 +51,6 @@ body { 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); @@ -504,7 +500,6 @@ table.room tr.sel a svg { .devType,.devType a,.makeTable,.makeTable a { font-weight:400; - text-transform: uppercase; color:#8A8A8F; font-size:13px; padding:20px 0 0 diff --git a/fhem/www/pgm2/ios6Common.css b/fhem/www/pgm2/ios6Common.css index 5974bc82d..f5a6e7412 100644 --- a/fhem/www/pgm2/ios6Common.css +++ b/fhem/www/pgm2/ios6Common.css @@ -1,126 +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 { - 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; } +/* 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:#D7DADF; } +#fwmenu { + position: absolute; z-index:1005; + text-align:left; max-width:600px; + font-weight: normal; font-size: 100%; + background:#D7DADF; border:1px solid black; +} +#fwmenu li a { color:black; } + +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/ios6svg_defs.svg b/fhem/www/pgm2/ios6svg_defs.svg index 4cba2ebe3..cce5a6995 100644 --- a/fhem/www/pgm2/ios6svg_defs.svg +++ b/fhem/www/pgm2/ios6svg_defs.svg @@ -1,8 +1,8 @@ - - + + @@ -26,18 +26,127 @@ - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fhem/www/pgm2/ios6svg_style.css b/fhem/www/pgm2/ios6svg_style.css index 91882111c..5013821c4 100644 --- a/fhem/www/pgm2/ios6svg_style.css +++ b/fhem/www/pgm2/ios6svg_style.css @@ -2,10 +2,10 @@ /* by Sandra Ohmayer */ /* http://www.animeschatten.net */ -.background { fill:#f7f7f7; +.background { fill:#f7f7f7; } -text { +text { font: normal 10px Helvetica, Sans-serif; fill:#000000;} text.title { @@ -18,6 +18,7 @@ text-shadow: 0px 1px #FFFFFF; text.legend{ cursor:pointer; } text.copy { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;} +circle#svgmarker { color:#278727; opacity:0.5; } path.SVGplot { stroke:black; fill:none; } @@ -27,31 +28,58 @@ polyline.SVGplot { stroke:black; fill:none; } .hgrid { stroke:gray; stroke-dasharray:2,6;} .pasted { stroke:black; stroke-dasharray:1,1;} -.SVGplot.l0 { stroke:red; } -.SVGplot.l1 { stroke:green; } -.SVGplot.l2 { stroke:blue; } -.SVGplot.l3 { stroke:magenta; } -.SVGplot.l4 { stroke:brown; } -.SVGplot.l5 { stroke:black; } -.SVGplot.l6 { stroke:olive; } -.SVGplot.l7 { stroke:gray; } -.SVGplot.l8 { stroke:yellow; } -.SVGplot.l0fill { stroke:#f00; fill:url(#gr_0); } -.SVGplot.l1fill { stroke:#291; fill:url(#gr_1); } -.SVGplot.l2fill { stroke:#00f; fill:url(#gr_2); } -.SVGplot.l3fill { stroke:#f0f; fill:url(#gr_3); } -.SVGplot.l4fill { stroke:#ff0; fill:url(#gr_4); } -.SVGplot.l5fill { stroke:#0ff; fill:url(#gr_5); } -.SVGplot.l6fill { stroke:#000; fill:url(#gr_6); } -.SVGplot.l0dot { stroke:red; stroke-dasharray:2,4; } -.SVGplot.l1dot { stroke:green; stroke-dasharray:2,4; } -.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);} -.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);} -.SVGplot.l0fill_gyr { stroke:red; fill:url(#gr0_gyr);} +.SVGplot.l0 { stroke:red; } +.SVGplot.l1 { stroke:green; } +.SVGplot.l2 { stroke:blue; } +.SVGplot.l3 { stroke:magenta; } +.SVGplot.l4 { stroke:brown; } +.SVGplot.l5 { stroke:black; } +.SVGplot.l6 { stroke:olive; } +.SVGplot.l7 { stroke:gray; } +.SVGplot.l8 { stroke:yellow; } -text.SVGplot.l0 { stroke:none; fill:red; } -text.SVGplot.l0 { stroke:none; fill:red; } -text.SVGplot.l1 { stroke:none; fill:green; } +.SVGplot.l0fill { stroke:red; fill:url(#gr_0); } +.SVGplot.l1fill { stroke:forestgreen; fill:url(#gr_1); } +.SVGplot.l2fill { stroke:blue; fill:url(#gr_2); } +.SVGplot.l3fill { stroke:magenta; fill:url(#gr_3); } +.SVGplot.l4fill { stroke:yellow; fill:url(#gr_4); } +.SVGplot.l5fill { stroke:cyan; fill:url(#gr_5); } +.SVGplot.l6fill { stroke:black; fill:url(#gr_6); } +.SVGplot.l7fill { stroke:brown; fill:url(#gr_7); } +.SVGplot.l8fill { stroke:olive; fill:url(#gr_8); } + +.SVGplot.l0dot { stroke:red; stroke-dasharray:2,4; } +.SVGplot.l1dot { stroke:green; stroke-dasharray:2,4; } +.SVGplot.l2dot { stroke:blue; stroke-dasharray:2,4; } +.SVGplot.l3dot { stroke:magenta; stroke-dasharray:2,4; } +.SVGplot.l4dot { stroke:brown; stroke-dasharray:2,4; } +.SVGplot.l5dot { stroke:black; stroke-dasharray:2,4; } +.SVGplot.l6dot { stroke:olive; stroke-dasharray:2,4; } +.SVGplot.l7dot { stroke:gray; stroke-dasharray:2,4; } +.SVGplot.l8dot { stroke:yellow; stroke-dasharray:2,4; } + +.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);} +.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);} +.SVGplot.l2fill_stripe { stroke:blue; fill:url(#gr2_stripe);} +.SVGplot.l3fill_stripe { stroke:magenta; fill:url(#gr3_stripe);} +.SVGplot.l4fill_stripe { stroke:brown; fill:url(#gr4_stripe);} +.SVGplot.l5fill_stripe { stroke:black; fill:url(#gr5_stripe);} +.SVGplot.l6fill_stripe { stroke:olive; fill:url(#gr6_stripe);} +.SVGplot.l7fill_stripe { stroke:gray; fill:url(#gr7_stripe);} +.SVGplot.l8fill_stripe { stroke:yellow; fill:url(#gr8_stripe);} + +.SVGplot.l0fill_gyr { stroke:red; fill:url(#gr0_gyr);} +.SVGplot.l1fill_gyr { stroke:green; fill:url(#gr1_gyr);} +.SVGplot.l2fill_gyr { stroke:blue; fill:url(#gr2_gyr);} +.SVGplot.l3fill_gyr { stroke:magenta; fill:url(#gr3_gyr);} +.SVGplot.l4fill_gyr { stroke:brown; fill:url(#gr4_gyr);} +.SVGplot.l5fill_gyr { stroke:black; fill:url(#gr5_gyr);} +.SVGplot.l6fill_gyr { stroke:olive; fill:url(#gr6_gyr);} +.SVGplot.l7fill_gyr { stroke:gray; fill:url(#gr7_gyr);} +.SVGplot.l8fill_gyr { stroke:yellow; fill:url(#gr8_gyr);} + +text.SVGplot.l0 { stroke:none; fill:red; } +text.SVGplot.l1 { stroke:none; fill:green; } text.SVGplot.l2 { stroke:none; fill:blue; } text.SVGplot.l3 { stroke:none; fill:magenta; } text.SVGplot.l4 { stroke:none; fill:brown; } @@ -59,15 +87,43 @@ text.SVGplot.l5 { stroke:none; fill:black; } text.SVGplot.l6 { stroke:none; fill:olive; } text.SVGplot.l7 { stroke:none; fill:gray; } text.SVGplot.l8 { stroke:none; fill:yellow; } -text.SVGplot.l0fill { stroke:none; fill:#f00; } -text.SVGplot.l1fill { stroke:none; fill:#291; } -text.SVGplot.l2fill { stroke:none; fill:#00f; } -text.SVGplot.l3fill { stroke:none; fill:#f0f; } -text.SVGplot.l4fill { stroke:none; fill:#ff0; } -text.SVGplot.l5fill { stroke:none; fill:#0ff; } -text.SVGplot.l6fill { stroke:none; fill:#000; } -text.SVGplot.l0dot { stroke:none; fill:red; } -text.SVGplot.l1dot { stroke:none; fill:green; } -text.SVGplot.l0fill_stripe {stroke:none; fill:red; } -text.SVGplot.l1fill_stripe {stroke:none; fill:green;} -text.SVGplot.l0fill_gyr {stroke:none; fill:red; } + +text.SVGplot.l0fill { stroke:none; fill:red; } +text.SVGplot.l1fill { stroke:none; fill:forestgreen; } +text.SVGplot.l2fill { stroke:none; fill:blue; } +text.SVGplot.l3fill { stroke:none; fill:magenta; } +text.SVGplot.l4fill { stroke:none; fill:yellow; } +text.SVGplot.l5fill { stroke:none; fill:cyan; } +text.SVGplot.l6fill { stroke:none; fill:black; } +text.SVGplot.l7fill { stroke:none; fill:brown; } +text.SVGplot.l8fill { stroke:none; fill:olive; } + +text.SVGplot.l0dot { stroke:none; fill:red; } +text.SVGplot.l1dot { stroke:none; fill:green; } +text.SVGplot.l2dot { stroke:none; fill:blue; } +text.SVGplot.l3dot { stroke:none; fill:magenta; } +text.SVGplot.l4dot { stroke:none; fill:brown; } +text.SVGplot.l5dot { stroke:none; fill:black; } +text.SVGplot.l6dot { stroke:none; fill:olive; } +text.SVGplot.l7dot { stroke:none; fill:gray; } +text.SVGplot.l8dot { stroke:none; fill:yellow; } + +text.SVGplot.l0fill_stripe {stroke:none; fill:red; } +text.SVGplot.l1fill_stripe {stroke:none; fill:green; } +text.SVGplot.l2fill_stripe {stroke:none; fill:blue; } +text.SVGplot.l3fill_stripe {stroke:none; fill:magenta; } +text.SVGplot.l4fill_stripe {stroke:none; fill:brown; } +text.SVGplot.l5fill_stripe {stroke:none; fill:black; } +text.SVGplot.l6fill_stripe {stroke:none; fill:olive; } +text.SVGplot.l7fill_stripe {stroke:none; fill:gray; } +text.SVGplot.l8fill_stripe {stroke:none; fill:yellow; } + +text.SVGplot.l0fill_gyr {stroke:none; fill:red; } +text.SVGplot.l1fill_gyr {stroke:none; fill:green; } +text.SVGplot.l2fill_gyr {stroke:none; fill:blue; } +text.SVGplot.l3fill_gyr {stroke:none; fill:magenta; } +text.SVGplot.l4fill_gyr {stroke:none; fill:brown; } +text.SVGplot.l5fill_gyr {stroke:none; fill:black; } +text.SVGplot.l6fill_gyr {stroke:none; fill:olive; } +text.SVGplot.l7fill_gyr {stroke:none; fill:gray; } +text.SVGplot.l8fill_gyr {stroke:none; fill:yellow; } diff --git a/fhem/www/pgm2/ios6touchpadstyle.css b/fhem/www/pgm2/ios6touchpadstyle.css index 3f593d822..ed1a9edb4 100644 --- a/fhem/www/pgm2/ios6touchpadstyle.css +++ b/fhem/www/pgm2/ios6touchpadstyle.css @@ -1,858 +1,853 @@ -@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 { - text-align:center -} - -.SVGplot embed { - -o-transition:scale(-o-calc(100vw - 260px),100px); - -ms-transition:scale(c-ms-alc(100vw - 260px),100px); - -moz-transition:scale(-moz-calc(100vw - 260px),100px); - -webkit-transition:scale(-webkit-calc(100vw - 260px),100px); - transition:scale(calc(100vw - 260px),100px) -} - -/*iPhone Skalierung*/ -/* iPhone < 5(portrait) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 480px) -and (orientation : portrait) { -body { - width:320px -} - -.SVGplot { - width: 265px; - overflow: scroll; -} -#content,#right { - padding:0 10px!important -} -} - -/* iPhone < 5(landscape) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 480px) -and (orientation : landscape) { -body { - width:480px -} -} - -/* iPhone 5(portrait) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 568px) -and (orientation : portrait) { -body { - width:320px -} - -.SVGplot { - width: 265px; - overflow: scroll; -} -#content,#right { - padding:0 10px!important -} -} - -/* iPhone 5(landscape) ----------- */ -@media only screen -and (min-device-width : 320px) -and (max-device-width : 568px) -and (orientation : landscape) { -body { - width:568px -} -} - -/* iPhone 6(portrait) ----------- */ -@media only screen -and (min-device-width : 375px) and (max-device-width : 667px) -and (orientation : portrait) { -body { - width:375px -} - -.SVGplot { - width: 320px; - overflow: scroll; -} -#content,#right { - padding:0 10px!important -} -} - -/* iPhone 6(landscape) ----------- */ -@media only screen -and (min-device-width : 375px) and (max-device-width : 667px) -and (orientation : landscape) { -body { - width:667px -} -} - -/* iPhone 6+(portrait) ----------- */ -@media only screen -and (min-device-width : 414px) and (max-device-width : 736px) -and (orientation : portrait) { -body { - width:414px -} -.SVGplot { - width: 359px; - overflow: scroll; -} -} - -/* iPhone 6+(landscape) ----------- */ -@media only screen -and (min-device-width : 414px) and (max-device-width : 736px) -and (orientation : landscape) { -body { - width:736px -} -} - -/*iPad Skalierung*/ - -/* iPads (portrait) ----------- */ -@media only screen -and (min-device-width : 768px) -and (max-device-width : 768px) -and (orientation : portrait) { -body { - width:768px -} -} - -/* Android Phone Devices */ -@media only screen -and (orientation : portrait) { -.isAndroidPhone { - width:360px; -} -.isAndroidTablet { -} -} - -@media only screen -and (orientation : landscape) { -.isAndroidPhone { - width:640px -} -.isAndroidTablet { -} -} - -.isMobile { - background-color:#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 -} +@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 +}