moparisthebest
/
app-UI
mirror of https://github.com/moparisthebest/app-UI
1
0
Fork 0
Code Issues Releases Wiki Activity

add cross-browser CSS prefixes + cleaning + other cross-platform fixes

This commit is contained in:
Contra 2012-09-19 17:15:36 -07:00
parent ebdf914795
commit 2e7fea8531
12 changed files with 750 additions and 582 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
samples/01 - viewnavigator/02 - movie reviews/index.html
View File

@ -18,59 +18,65 @@
<style> <style>
* { * {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
#detail { #detail {
padding:10px; padding: 10px;
} }
.moviePoster { .moviePoster {
float:right; float: right;
width:120px; width: 120px;
height:178px; height: 178px;
overflow:hidden; overflow: hidden;
margin:10px; margin: 10px;
padding:2px; padding: 2px;
border:1px solid #999999; border: 1px solid #999999;
} }
.listSelected { .listSelected {
background-color:#424242; background-color: #424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9)); background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9); background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
color: #FFF; background-image: -moz-linear-gradient(top, #0069d6, #999da9);
font-weight:bold; background-image: -o-linear-gradient(top, #0069d6, #999da9);
} background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
ul,li { -image color: #FFF;
padding:0; font-weight: bold;
margin:0; }
border:0;
} ul,li {
padding: 0;
.viewNavigator_content li { margin: 0;
padding:0 10px; border: 0;
border-bottom:1px solid #ccc; }
height:40px; line-height:40px;
font-weight:normal; .viewNavigator_content li {
cursor:pointer; padding: 0 10px;
white-space: nowrap; border-bottom: 1px solid #ccc;
overflow: hidden; height: 40px;
text-overflow: ellipsis; line-height: 40px;
-o-text-overflow: ellipsis; font-weight: normal;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); cursor: pointer;
} white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style> </style>

31
samples/01 - viewnavigator/03 - multi instance/index.html
View File

@ -15,24 +15,25 @@
<style> <style>
#leftDiv { #leftDiv {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
width:50%; width: 50%;
overflow:hidden; overflow: hidden;
} }
#rightDiv { #rightDiv {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:50%; left: 50%;
right:0px; right: 0px;
width:50%; width: 50%;
border-left:1px solid red; border-left: 1px solid red;
overflow:hidden; overflow: hidden;
} }
</style> </style>
<script> <script>

120
samples/02 - splitviewnavigator/02 - movie reviews/index.html
View File

@ -21,64 +21,70 @@
<style> <style>
* { * {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
#detail { #detail {
padding:10px; padding: 10px;
} }
#defaultView { #defaultView {
text-align:center; text-align: center;
padding-top:100px; padding-top: 100px;
} }
.moviePoster { .moviePoster {
float:right; float: right;
width:120px; width: 120px;
height:178px; height: 178px;
overflow:hidden; overflow: hidden;
margin:10px; margin: 10px;
padding:2px; padding: 2px;
border:1px solid #999999; border: 1px solid #999999;
} }
.listSelected { .listSelected {
background-color:#424242; background-color: #424242;
background-image:-webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9)); background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
background-image:-moz-linear-gradient(top, #0069d6, #999da9);
background-image:-o-linear-gradient(top, #0069d6, #999da9); background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
color: #FFF; background-image: -moz-linear-gradient(top, #0069d6, #999da9);
font-weight:bold; background-image: -o-linear-gradient(top, #0069d6, #999da9);
} background-image: -ms-linear-gradient(top, #0069d6, #999da9);
background-image: linear-gradient(top, #0069d6, #999da9);
ul,li { -image color: #FFF;
padding:0; font-weight: bold;
margin:0; }
border:0;
} ul,li {
padding: 0;
.viewNavigator_contentHolder li { margin: 0;
padding:0 10px; border: 0;
border-bottom:1px solid #ccc; }
height:40px; line-height:40px;
font-weight:normal; .viewNavigator_contentHolder li {
cursor:pointer; padding: 0 10px;
white-space: nowrap; border-bottom: 1px solid #ccc;
overflow: hidden; height: 40px;
text-overflow: ellipsis; line-height: 40px;
-o-text-overflow: ellipsis; font-weight: normal;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis'); cursor: pointer;
} white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
#detail li {
white-space: normal;
overflow: visible;
height: auto;
}
#detail li {
white-space: normal;
overflow: visible;
height:auto;
}
</style> </style>

155
samples/03 - slidingView/03 - swipeview/index.html
View File

@ -16,96 +16,115 @@
body { body {
padding:0; padding: 0;
margin:0; margin: 0;
background:#fff; background: #fff;
-webkit-user-select:none;
-webkit-text-size-adjust:none; -webkit-user-select: none;
color:#333; -moz-user-select: none;
font-family:helvetica; -ms-user-select: none;
font-size:12px; user-select: none;
text-align:center; -webkit-text-size-adjust: none;
color: #333;
font-family: helvetica;
font-size: 12px;
text-align: center;
} }
h1 { h1 {
font-size:2em; font-size: 2em;
padding:20px 0; padding: 20px 0;
margin:0; margin: 0;
} }
#swipeview { #swipeview {
width:100%; width: 100%;
min-width:320px; min-width: 320px;
height:150px; height: 150px;
background:#ddd; background: #ddd;
border-top:1px solid #aaa; border-top: 1px solid #aaa;
border-bottom:1px solid #aaa; border-bottom: 1px solid #aaa;
} }
#nav { #nav {
position:absolute; position: absolute;
z-index:100; z-index: 100;
top:8px; top: 8px;
width:200px; width: 200px;
height:20px; height: 20px;
left:50%; left: 50%;
background:rgba(0,0,0,0.75); background: rgba(0,0,0,0.75);
padding:0; padding: 0;
margin:0 0 0 -100px; margin: 0 0 0 -100px;
-webkit-border-radius:10px; border-radius: 10px;
} }
#nav li { #nav li {
display:block; display: block;
float:left; float: left;
width:14px; width: 14px;
height:14px; line-height:14px; height: 14px;
-webkit-border-radius:7px; line-height: 14px;
background:rgba(255,255,255,0.1); border-radius: 7px;
overflow:hidden; background: rgba(255,255,255,0.1);
padding:0; overflow: hidden;
margin:3px 11px 0 0; padding: 0;
text-align:center; margin: 3px 11px 0 0;
text-align: center;
} }
#nav li#prev { #nav li#prev {
margin-left:5px; margin-left: 5px;
background:transparent; background: transparent;
} }
#nav li#next { #nav li#next {
margin-right:0; margin-right: 0;
background:transparent; background: transparent;
} }
#nav li.selected { #nav li.selected {
background:rgba(255,255,255,0.4); background: rgba(255,255,255,0.4);
} }
#swipeview-slider > div { #swipeview-slider > div {
position:relative; position: relative;
display:-webkit-box;
-webkit-box-orient:vertical; -moz-box-orient: vertical;
-webkit-box-pack:center; -ms-box-orient: vertical;
-webkit-box-align:center; box-orient: vertical;
overflow:hidden;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden;
} }
#swipeview-slider span { #swipeview-slider span {
-webkit-box-sizing:border-box; -webkit-box-sizing: border-box;
display:block; -moz-box-sizing: border-box;
text-align:center; -ms-box-sizing: border-box;
font-size:1.4em; box-sizing: border-box;
padding:0 20px; display: block;
text-align: center;
font-size: 1.4em;
padding: 0 20px;
} }
p { p {
padding:20px; padding: 20px;
margin:0; margin: 0;
font-size:1.4em; font-size: 1.4em;
} }
</style> </style>
<script> <script>

133
samples/03 - slidingView/03 - swipeview/style.css
View File

@ -1,90 +1,107 @@
body { body {
padding:0; padding: 0;
margin:0; margin: 0;
background:#fff; background: #fff;
-webkit-user-select:none;
-webkit-text-size-adjust:none; -webkit-user-select: none;
color:#333; -moz-user-select: none;
font-family:helvetica; -ms-user-select: none;
font-size:12px; user-select: none;
text-align:center; -webkit-text-size-adjust: none;
color: #333;
font-family: helvetica;
font-size: 12px;
text-align: center;
} }
h1 { h1 {
font-size:2em; font-size: 2em;
padding:20px 0; padding: 20px 0;
margin:0; margin: 0;
} }
#wrapper { #wrapper {
width:100%; width: 100%;
min-width:320px; min-width: 320px;
height:150px; height: 150px;
background:#ddd; background: #ddd;
border-top:1px solid #aaa; border-top: 1px solid #aaa;
border-bottom:1px solid #aaa; border-bottom: 1px solid #aaa;
} }
#nav { #nav {
position:absolute; position: absolute;
z-index:100; z-index: 100;
top:8px; top: 8px;
width:200px; width: 200px;
height:20px; height: 20px;
left:50%; left: 50%;
background:rgba(0,0,0,0.75); background: rgba(0,0,0,0.75);
padding:0; padding: 0;
margin:0 0 0 -100px; margin: 0 0 0 -100px;
-webkit-border-radius:10px; border-radius: 10px;
} }
#nav li { #nav li {
display:block; display: block;
float:left; float: left;
width:14px; width: 14px;
height:14px; line-height:14px; height: 14px;
-webkit-border-radius:7px; line-height: 14px;
background:rgba(255,255,255,0.1); border-radius: 7px;
overflow:hidden; background: rgba(255,255,255,0.1);
padding:0; overflow: hidden;
margin:3px 11px 0 0; padding: 0;
text-align:center; margin: 3px 11px 0 0;
text-align: center;
} }
#nav li#prev { #nav li#prev {
margin-left:5px; margin-left: 5px;
background:transparent; background: transparent;
} }
#nav li#next { #nav li#next {
margin-right:0; margin-right: 0;
background:transparent; background: transparent;
} }
#nav li.selected { #nav li.selected {
background:rgba(255,255,255,0.4); background: rgba(255,255,255,0.4);
} }
#swipeview-slider > div { #swipeview-slider > div {
position:relative; position: relative;
display:-webkit-box;
-webkit-box-orient:vertical; -moz-box-orient: vertical;
-webkit-box-pack:center; -ms-box-orient: vertical;
-webkit-box-align:center; box-orient: vertical;
overflow:hidden;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-box-align: center;
box-align: center;
overflow: hidden;
} }
#swipeview-slider span { #swipeview-slider span {
-webkit-box-sizing:border-box; -webkit-box-sizing: border-box;
display:block; -moz-box-sizing: border-box;
text-align:center; -ms-box-sizing: border-box;
font-size:1.4em; box-sizing: border-box;
padding:0 20px; display: block;
text-align: center;
font-size: 1.4em;
padding: 0 20px;
} }
p { p {
padding:20px; padding: 20px;
margin:0; margin: 0;
font-size:1.4em; font-size: 1.4em;
} }

43
samples/03 - slidingView/04 - oridomi/index.html
View File

@ -58,30 +58,31 @@
<style> <style>
body { body {
background: #ccc; background: #ccc;
} }
#sidebar { #sidebar {
width:400px; width: 400px;
height:100%; height: 100%;
padding:10px; padding: 10px;
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g'); background-image: url('https://encrypted-tbn3.google.com/images?q=tbn: ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
background-color: red; background-color: red;
padding:10px; padding: 10px;
font-size:36pt; font-size: 36pt;
} }
#body { #body {
background-color: #555; background-color: #555;
padding:10px; padding: 10px;
text-align:center; text-align: center;
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA'); background-image: url('https://encrypted-tbn2.google.com/images?q=tbn: ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
} }
a {
color: white;
}
a{
color:white;
}
</style> </style>
</head> </head>

44
samples/03 - slidingView/05 - oridomi w viewnav/index.html
View File

@ -20,28 +20,28 @@
<style> <style>
body { body {
background: #eee; background: #eee;
padding:0px; padding: 0px;
overflow:hidden; overflow: hidden;
border-left:1px solid black; border-left: 1px solid black;
} }
#sidebar { #sidebar {
width:420px; width: 420px;
padding:0px; padding: 0px;
overflow:hidden; overflow: hidden;
height:100%; height: 100%;
} }
#sidebar .viewNavigator_header { #sidebar .viewNavigator_header {
background: #333; background: #333;
} }
#sidebar .viewNavigator_contentHolder, #sidebar .viewNavigator_contentHolder,#sidebar .viewNavigator_content {
#sidebar .viewNavigator_content { background: #bbb;
background: #bbb; }
}
</style> </style>

198
samples/04 - browser history/index.html
View File

@ -17,106 +17,106 @@
<style> <style>
body,ul,li,header,nav,aside,section,article,p,a { body,ul,li,header,nav,aside,section,article,p,a {
padding:0; padding: 0;
margin:0; margin: 0;
border:0; border: 0;
} }
body { body {
font: normal 1.25em Helvetica; font: normal 1.25em Helvetica;
background: #333; background: #333;
} }
object{ object {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
#iframeWrapper { #iframeWrapper {
width: 100%; width: 100%;
height:100%; height: 100%;
overflow: scroll; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
iframe { iframe {
width: 100%; width: 100%;
min-height:100%; min-height: 100%;
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
border: none; border: none;
overflow: scroll; overflow: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.viewNavigator_header {
.viewNavigator_header { background-color: #333;
background-color: #333; background: url("./assets/header_bg_wood.png") repeat;
background: url("./assets/header_bg_wood.png") repeat; font: bold 1em Helvetica;
font: bold 1em Helvetica; }
}
.viewNavigator_content {
.viewNavigator_content { border-top: 2px solid #666;
border-top: 2px solid #666; background-color: #333;
background-color: #333; }
}
.viewNavigator_contentHolder {
.viewNavigator_contentHolder { background-color: #333;
background-color: #333; }
}
.viewNavigator_header_title {
.viewNavigator_header_title { max-width: 100%;
max-width:100%; text-shadow: 1px 2px #777;
text-shadow: 1px 2px #777; }
}
.headerButton {
.headerButton { -webkit-box-shadow: inset 0px 1px 0px 0px #999;
-webkit-box-shadow:inset 0px 1px 0px 0px #999; box-shadow: inset 0px 1px 0px 0px #999;
box-shadow:inset 0px 1px 0px 0px #999; background-color: rgba(128,128,128,0.65);
background-color:rgba(128,128,128,0.65); border-radius: 6px;
-moz-border-radius:6px; border: 1px solid #777;
-webkit-border-radius:6px; display: inline-block;
border-radius:6px; color: #ffffff;
border:1px solid #777; font-family: arial;
display:inline-block; font-size: 15px;
color:#ffffff; font-weight: bold;
font-family:arial; padding: 6px 24px;
font-size:15px; text-decoration: none;
font-weight:bold; text-shadow: 1px 1px 0px #736d73;
padding:6px 24px; padding: 6px;
text-decoration:none; padding-top: 5px;
text-shadow:1px 1px 0px #736d73; padding-bottom: 4px;
padding: 6px; }
padding-top:5px;
padding-bottom:4px; .headerButton:active {
}.headerButton:active { position: relative;
position:relative; top: 1px;
top:1px; }
}
.listItem {
padding: 0 10px;
background-color: #222;
color: white;
border-bottom: 1px solid #888;
border-bottom: 1px solid #444;
height: 40px;
line-height: 40px;
font-weight: bold;
cursor: pointer;
text-shadow: 1px 2px #777;
display: block;
text-decoration: none;
}
.oddRow {
background-color: #333;
}
.listSelected {
background: #015FE6;
background-color: #015FE6;
color: #FFF;
font-weight: bold;
}
.listItem {
padding:0 10px;
background-color: #222;
color:white;
border-bottom:1px solid #888;
border-bottom:1px solid #444;
height:40px; line-height:40px;
font-weight:bold;
cursor:pointer;
text-shadow: 1px 2px #777;
display:block;
text-decoration:none;
}
.oddRow {
background-color: #333;
}
.listSelected {
background:#015FE6;
background-color:#015FE6;
color: #FFF;
font-weight:bold;
}
</style> </style>

91
src/libs/css/activityIndicator.css
View File

File diff suppressed because one or more lines are too long

76
src/slidingview/slidingview.css
View File

@ -11,58 +11,72 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/ */
* { * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
input, input,textarea {
textarea {
-webkit-touch-callout: auto; -webkit-touch-callout: auto;
-webkit-user-select: auto; -webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
} }
body { body {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
background-color:#555; background-color: #555;
overflow:hidden; overflow: hidden;
} }
.slidingview_sidebar { .slidingview_sidebar {
position:absolute; position: absolute;
width:250px; width: 250px;
left:0px; left: 0px;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
overflow:hidden; -moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden;
} }
.slidingview_body { .slidingview_body {
position:absolute; position: absolute;
left:0px; left: 0px;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
overflow:hidden; -moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
overflow: hidden;
} }
.slidingview_wrapper { .slidingview_wrapper {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }

90
src/splitviewnavigator/splitviewnavigator.css
View File

@ -12,72 +12,80 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
.splitViewNavigator_root { .splitViewNavigator_root {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
} }
.splitViewNavigator_sidebar { .splitViewNavigator_sidebar {
position:absolute; position: absolute;
overflow:hidden; overflow: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
border-right:1px solid #999; -moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
border-right: 1px solid #999;
} }
.splitViewNavigator_body { .splitViewNavigator_body {
position:absolute; position: absolute;
background:white; background: white;
overflow:hidden; overflow: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.content_overlay_visible { .content_overlay_visible {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
} }
.content_overlay_hidden { .content_overlay_hidden {
position:absolute; position: absolute;
top:-1px; top: -1px;
left:-1px; left: -1px;
width:0px; width: 0px;
height:0px; height: 0px;
display:none; display: none;
} }
.sidebar_portrait { .sidebar_portrait {
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:-240px; left: -240px;
width:240px; width: 240px;
} }
.body_portrait { .body_portrait {
top:0px; top: 0px;
bottom:0px; bottom: 0px;
right:0px; right: 0px;
left:0px; left: 0px;
} }
.sidebar_landscape { .sidebar_landscape {
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
width:240px; width: 240px;
} }
.body_landscape { .body_landscape {
top:0px; top: 0px;
bottom:0px; bottom: 0px;
right:0px; right: 0px;
left:240px; left: 240px;
} }

241
src/viewnavigator/viewnavigator.css
View File

@ -12,193 +12,208 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
* { * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
input, input,textarea {
textarea {
-webkit-touch-callout: auto; -webkit-touch-callout: auto;
-webkit-user-select: auto;
}
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
body { body {
position:absolute; position: absolute;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_root { .viewNavigator_root {
width:100%; width: 100%;
height:100%; height: 100%;
background-color:666666; background-color: 666666;
overflow:hidden; overflow: hidden;
} }
.viewNavigator_header { .viewNavigator_header {
position:absolute; position: absolute;
width:100%; width: 100%;
height:46px; height: 46px;
overflow:hide; overflow: hide;
padding:0px; padding: 0px;
background: rgb(167,207,223); /* Old browsers */ background: rgb(167,207,223); /* Old browsers */
background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */ background: -o-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
background: linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* W3C */ background: linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_header_backlink { .viewNavigator_header_backlink {
position:absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
z-index:2; z-index: 2;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
max-width:30%; text-overflow: ellipsis;
max-width: 30%;
} }
.viewNavigator_header_title { .viewNavigator_header_title {
position: absolute;
position:absolute; top: 12px;
top:12px; left: 0%;
left:0%; right: 0%;
right:0%; margin-left: auto;
margin-left:auto; margin-right: auto;
margin-right:auto; text-align: center;
text-align:center;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
max-width:48%; text-overflow: ellipsis;
max-width: 48%;
} }
.viewNavigator_headerContent { .viewNavigator_headerContent {
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
position:absolute; -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
position: absolute;
} }
.viewNavigator_content { .viewNavigator_content {
position:absolute; position: absolute;
top:46px; top: 46px;
left:0px; left: 0px;
right:0px; right: 0px;
bottom:0px; bottom: 0px;
overflow:hidden; overflow: hidden;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* ANDROID BUG WORKAROUND */ /* ANDROID BUG WORKAROUND */
.viewNavigator_content select { .viewNavigator_content select {
overflow:auto; overflow: auto;
position:relative; position: relative;
backface-visibility: auto; backface-visibility: auto;
-webkit-backface-visibility: auto; -webkit-backface-visibility: auto;
} }
.viewNavigator_contentHolder > div:first-child { .viewNavigator_contentHolder > div:first-child {
min-height:100%; min-height: 100%;
border-bottom:1px solid #444; border-bottom: 1px solid #444;
border-top:1px solid #444; border-top: 1px solid #444;
} }
.viewNavigator_content div { .viewNavigator_content div {
backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible; -webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: visible; -moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_contentHolder { .viewNavigator_contentHolder {
position:absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
right:0px; right: 0px;
bottom:0px; bottom: 0px;
background-color:white; background-color: white;
overflow:auto; overflow: auto;
padding:0px; padding: 0px;
margin:0px; margin: 0px;
overflow: hidden; overflow: hidden;
-webkit-overflow-scrolling : touch; -webkit-overflow-scrolling: touch;
min-width:100%; min-width: 100%;
min-height:100% min-height: 100% backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
} }
.viewNavigator_backface { .viewNavigator_backface {
/* backface-visibility: hidden; /* backface-visibility: hidden;
-webkit-backface-visibility: hidden;
*/ -webkit-backface-visibility: hidden;
*/
} }
.viewNavigator_backButtonPosition { .viewNavigator_backButtonPosition {
position:absolute; position: absolute;
left: 5px; left: 5px;
top: .6em; top: .6em;
} }
.viewNavigator_backButton .viewNavigator_backButton {
{ cursor: pointer;
cursor:pointer;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
background-color: #ccc; background-color: #ccc;
border-radius: .2em; border-radius: .2em;
padding: 4px 10px; padding: 4px 10px;
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
} }
.viewNavigator_backButton:active .viewNavigator_backButton:active {
{
background-color: #ddd; background-color: #ddd;
} }