2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 12:49:34 +00:00

ios7 css from fhainz

git-svn-id: https://svn.fhem.de/fhem/trunk@3487 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2013-07-24 05:24:09 +00:00
parent fc77c8fdea
commit db6851ae11
9 changed files with 385 additions and 0 deletions

View File

@ -0,0 +1,71 @@
/*
Edit: fhainz
*/
body { background-color: #e5e5e5; font-family:Helvetica; font-weight:300; }
textarea { font-family:Helvetica; font-weight:300; font-size:16px;}
input { font-family:Helvetica; font-weight:300; font-size:16px;}
select { font-family:Helvetica; font-weight:300; font-size:16px;}
#back { position:absolute; top: 2px; left:18px; }
#logo { position:absolute; top: 2px; left: 2px;
width:64px; height:67px; background-image:url(../images/smallscreen/fhem_smallscreen.png); }
#menu { position:absolute; top: 2px; left:65px; }
#hdr { position:absolute; top:40px; left:65px; }
#content { position:absolute; top:85px; left: 0px; right: 0px;}
#connect_err { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:0px; z-index: 10; }
.devType { padding-top:10px; font-size:12px;}
a { color: #151515; }
img { border-style: none; }
.col2 { text-align:center; }
div.col1 { width: 188px; height: 30px; white-space: nowrap; }
div.col2 { width: 108px; height: 30px;
-webkit-box-pack: center; -moz-box-pack: center; box-pack: center;
white-space: wrap;
font-size:16px;
}
div.col1, div.col2 {
overflow: hidden; text-overflow: ellipsis;
padding-top: 10px; padding-bottom: 10px;
padding-left: 5px; padding-right: 5px;
display: -webkit-box; -webkit-box-align: center;
display: -moz-box; -moz-box-align: center;
background: #fff;
}
div.dname, div.dval {
width: 152px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size:16px;
}
div.tiny { font-size:10px; }
table.block { width: 320px; background: #fff; border-spacing:0px; }
table.block tr { border:1px solid gray; border-spacing:0px; }
table.block tr.odd { background: #fff; }
table.block tr.sel { background: #fff; }
table.block td { width: 150px; border-bottom: 1px solid #cbcbcb; };
table { -moz-border-radius:8px; border-radius:8px; }
#menu #block { visibility: hidden; }
#right { position:absolute; top:85px; left: 0px; right: 0px;
font-family:Arial, sans-serif; font-size:16px; }
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; }
button.dist { margin:5px; background:transparent; border:0px; cursor:pointer; }
.set,.attr { margin-bottom:5px; float:left;}
.slider { float:right; width:320px; height:26px; }
.set .slider { background:#F0F0D8; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
svg { height:32px; width:32px; fill:#1c7efb; }
g.on { fill:red; }

View File

@ -0,0 +1,43 @@
<!-- will be included in each svg plot -->
<defs>
<linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#fff; stop-opacity:1"/>
</linearGradient>
<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fc3e39; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#fc3e39; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#53d769; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#53d769; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#157efb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#157efb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#c34ceb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#c34ceb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
</linearGradient>
</defs>

View File

@ -0,0 +1,34 @@
/* Author: Volker
Edit: fhainz
*/
.background { fill:#e5e5e5; }
text { font-family: Helvetica; font-weight:300; font-size:12px; fill:#343434;}
text.title {font-family: Helvetica; font-weight:300; font-size:16px; fill:#343434;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}
.vgrid { stroke:gray; stroke-dasharray:2,6;}
.hgrid { stroke:gray; stroke-dasharray:2,6;}
.pasted { stroke:black; stroke-dasharray:1,1;}
.l0 { stroke:#fc3e39; } text.l0 { stroke:none; fill:#fc3e39; }
.l1 { stroke:#53d769; } text.l1 { stroke:none; fill:#53d769; }
.l2 { stroke:#157efb; } text.l2 { stroke:none; fill:#157efb; }
.l3 { stroke:#c34ceb; } text.l3 { stroke:none; fill:#c34ceb; }
.l4 { stroke:brown; } text.l4 { stroke:none; fill:brown; }
.l5 { stroke:black; } text.l5 { stroke:none; fill:black; }
.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; }
.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; }
.l8 { stroke:#f7ab28; } text.l8 { stroke:none; fill:#f7ab28; }
.l0fill{ stroke:#fc3e39; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#fc3e39; }
.l1fill{ stroke:#53d769; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#53d769; }
.l2fill{ stroke:#157efb; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#157efb; }
.l3fill{ stroke:#c34ceb; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#c34ceb; }
.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; }
.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; }
.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; }

View File

@ -0,0 +1,84 @@
/*
Edit: fhainz
*/
body { background-color: #e5e5e5;
font-family:Helvetica; font-weight:300; font-size:16px; }
input { font-family:Helvetica; font-weight:300; font-size:16px; }
select { font-family:Helvetica; font-weight:300; font-size:16px; }
#menuScrollArea { }
#menu { margin: 20px 0 20px 12px; width:200px; left: 20px; }
#menu a { color: #151515; }
#hdr { position:absolute; top:20px; left:250px; }
#content { position:absolute; top:50px; left:250px; bottom:20px; right:10px; }
#connect_err { background-color: #000000; color: #FFFFFF;
position:absolute; top:0px; left:40px; z-index: 10; }
.devType { padding-top:20px; }
a { color: #147bff; text-decoration:none; cursor: pointer; }
img { border-style: none; }
#.wide { width: 100%; }
table { border-radius:2px; margin: 0; padding: 0px; border-spacing: 0px; border-collapse:separate; }
table.room { width:210px; }
table.room tr { background:#fff; }
table.room tr.sel { background: #d9d9d9; }
table.room td { padding: 6px; }
table.room td { border-bottom: 1px solid #cbcbcb; }
table.room td:hover { background: #d9d9d9; }
table.block { width:750px; background: #fff; }
table.block a { color: #151515; }
table.block tr { width: 100%; }
table.block tr.odd { background: #fff; }
table.block tr.sel { background: #d9d9d9; }
table.block td { padding:3px; border-bottom: 1px solid #cbcbcb; }
table.fileList { width:750px; }
table.fileList td { padding:5px; padding-left: 7px; }
table.fileList td:hover { background: #d9d9d9; }
#right { position:absolute; top:20px; left:180px; }
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; }
div.dval a { color: #147bff; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
a img { border-style:none; }
input[type="submit"] { background: transparent; color:#147bff; border:0px; cursor: pointer; }
input[type="text"] { background-color: #e5e5e5; 1px solid #cbcbcb; }
/* detail-selector & slider */
select { margin-left:5px; margin-right:5px; background-color: #e5e5e5; border:0px; }
.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:250px; height:26px; }
.set .slider { background:#F0F0D8; border-radius:8px; }
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }
.changed { color:#fc3e39; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
pre { white-space: pre-wrap; }
table.room svg { height:20px; width:20px; fill:#147bff; }
svg.icon { margin-right: 20px; margin-left: 7px; }
svg { height:32px; width:32px; fill:#1c7efb; }
g.on { fill:#53d769; }

View File

@ -0,0 +1,43 @@
<!-- will be included in each svg plot -->
<defs>
<linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#fff; stop-opacity:1"/>
</linearGradient>
<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fc3e39; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#fc3e39; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#53d769; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#53d769; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#157efb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#157efb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#c34ceb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#c34ceb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
</linearGradient>
</defs>

View File

@ -0,0 +1,33 @@
/* Author: Volker
Edit: fhainz
*/
.background { fill:#e5e5e5; }
text { font-family: Helvetica; font-weight:300; font-size:12px; fill:#343434;}
text.title {font-family: Helvetica; font-weight:300; font-size:16px; fill:#343434;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}
.vgrid { stroke:gray; stroke-dasharray:2,6;}
.hgrid { stroke:gray; stroke-dasharray:2,6;}
.pasted { stroke:black; stroke-dasharray:1,1;}
.l0 { stroke:#fc3e39; } text.l0 { stroke:none; fill:#fc3e39; }
.l1 { stroke:#53d769; } text.l1 { stroke:none; fill:#53d769; }
.l2 { stroke:#157efb; } text.l2 { stroke:none; fill:#157efb; }
.l3 { stroke:#c34ceb; } text.l3 { stroke:none; fill:#c34ceb; }
.l4 { stroke:brown; } text.l4 { stroke:none; fill:brown; }
.l5 { stroke:black; } text.l5 { stroke:none; fill:black; }
.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; }
.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; }
.l8 { stroke:#f7ab28; } text.l8 { stroke:none; fill:#f7ab28; }
.l0fill{ stroke:#fc3e39; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#fc3e39; }
.l1fill{ stroke:#53d769; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#53d769; }
.l2fill{ stroke:#157efb; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#157efb; }
.l3fill{ stroke:#c34ceb; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#c34ceb; }
.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; }
.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; }
.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; }

View File

@ -0,0 +1 @@
@import url("iosstyle.css");

View File

@ -0,0 +1,43 @@
<!-- will be included in each svg plot -->
<defs>
<linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fff; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#fff; stop-opacity:1"/>
</linearGradient>
<linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#fc3e39; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#fc3e39; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#53d769; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#53d769; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#157efb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#157efb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#c34ceb; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#c34ceb; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
</linearGradient>
<linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
<stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
</linearGradient>
</defs>

View File

@ -0,0 +1,33 @@
/* Author: Volker
Edit: fhainz
*/
.background { fill:#e5e5e5; }
text { font-family: Helvetica; font-weight:300; font-size:12px; fill:#343434;}
text.title {font-family: Helvetica; font-weight:300; font-size:16px; fill:#343434;}
text.copy { text-decoration:underline; stroke:none; fill:blue;}
text.paste { text-decoration:underline; stroke:none; fill:blue;}
polyline { stroke:black; fill:none; }
.border { stroke:black; fill:url(#gr_bg);}
.vgrid { stroke:gray; stroke-dasharray:2,6;}
.hgrid { stroke:gray; stroke-dasharray:2,6;}
.pasted { stroke:black; stroke-dasharray:1,1;}
.l0 { stroke:#fc3e39; } text.l0 { stroke:none; fill:#fc3e39; }
.l1 { stroke:#53d769; } text.l1 { stroke:none; fill:#53d769; }
.l2 { stroke:#157efb; } text.l2 { stroke:none; fill:#157efb; }
.l3 { stroke:#c34ceb; } text.l3 { stroke:none; fill:#c34ceb; }
.l4 { stroke:brown; } text.l4 { stroke:none; fill:brown; }
.l5 { stroke:black; } text.l5 { stroke:none; fill:black; }
.l6 { stroke:olive; } text.l6 { stroke:none; fill:olive; }
.l7 { stroke:gray; } text.l7 { stroke:none; fill:gray; }
.l8 { stroke:#f7ab28; } text.l8 { stroke:none; fill:#f7ab28; }
.l0fill{ stroke:#fc3e39; fill:url(#gr_0); } text.l0fill{ stroke:none; fill:#fc3e39; }
.l1fill{ stroke:#53d769; fill:url(#gr_1); } text.l1fill{ stroke:none; fill:#53d769; }
.l2fill{ stroke:#157efb; fill:url(#gr_2); } text.l2fill{ stroke:none; fill:#157efb; }
.l3fill{ stroke:#c34ceb; fill:url(#gr_3); } text.l3fill{ stroke:none; fill:#c34ceb; }
.l4fill{ stroke:#ff0; fill:url(#gr_4); } text.l4fill{ stroke:none; fill:#ff0; }
.l5fill{ stroke:#0ff; fill:url(#gr_5); } text.l5fill{ stroke:none; fill:#0ff; }
.l6fill{ stroke:#000; fill:url(#gr_6); } text.l6fill{ stroke:none; fill:#000; }