mirror of
https://github.com/moparisthebest/app-UI
synced 2024-12-21 23:18:52 -05:00
add cross-browser CSS prefixes + cleaning + other cross-platform fixes
This commit is contained in:
Contra
parent
ebdf914795
commit
2e7fea8531
@ -18,59 +18,65 @@
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
#detail {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
.moviePoster {
|
||||
float: right;
|
||||
width: 120px;
|
||||
height: 178px;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
padding: 2px;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
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);
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
.listSelected {
|
||||
background-color: #424242;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -moz-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -o-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -ms-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: linear-gradient(top, #0069d6, #999da9);
|
||||
-image color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.viewNavigator_content li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
height:40px; line-height:40px;
|
||||
font-weight:normal;
|
||||
cursor:pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
ul,li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.viewNavigator_content li {
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
#detail li {
|
||||
-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;
|
||||
}
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -15,24 +15,25 @@
|
||||
<style>
|
||||
|
||||
#leftDiv {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:50%;
|
||||
overflow:hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#rightDiv {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:50%;
|
||||
right:0px;
|
||||
width:50%;
|
||||
border-left:1px solid red;
|
||||
overflow:hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
right: 0px;
|
||||
width: 50%;
|
||||
border-left: 1px solid red;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -21,64 +21,70 @@
|
||||
|
||||
<style>
|
||||
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
* {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#detail {
|
||||
padding:10px;
|
||||
}
|
||||
#detail {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#defaultView {
|
||||
text-align:center;
|
||||
padding-top:100px;
|
||||
}
|
||||
#defaultView {
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.moviePoster {
|
||||
float:right;
|
||||
width:120px;
|
||||
height:178px;
|
||||
overflow:hidden;
|
||||
margin:10px;
|
||||
padding:2px;
|
||||
border:1px solid #999999;
|
||||
}
|
||||
.moviePoster {
|
||||
float: right;
|
||||
width: 120px;
|
||||
height: 178px;
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
padding: 2px;
|
||||
border: 1px solid #999999;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background-color:#424242;
|
||||
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);
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
.listSelected {
|
||||
background-color: #424242;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100, from(#0069d6), to(#999da9));
|
||||
|
||||
ul,li {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
background-image: -webkit-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -moz-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -o-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: -ms-linear-gradient(top, #0069d6, #999da9);
|
||||
background-image: linear-gradient(top, #0069d6, #999da9);
|
||||
-image color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.viewNavigator_contentHolder li {
|
||||
padding:0 10px;
|
||||
border-bottom:1px solid #ccc;
|
||||
height:40px; line-height:40px;
|
||||
font-weight:normal;
|
||||
cursor:pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
|
||||
}
|
||||
ul,li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.viewNavigator_contentHolder li {
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
#detail li {
|
||||
-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;
|
||||
}
|
||||
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -16,96 +16,115 @@
|
||||
|
||||
|
||||
body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
background:#fff;
|
||||
-webkit-user-select:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
color:#333;
|
||||
font-family:helvetica;
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
color: #333;
|
||||
font-family: helvetica;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2em;
|
||||
padding:20px 0;
|
||||
margin:0;
|
||||
font-size: 2em;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#swipeview {
|
||||
width:100%;
|
||||
min-width:320px;
|
||||
height:150px;
|
||||
background:#ddd;
|
||||
border-top:1px solid #aaa;
|
||||
border-bottom:1px solid #aaa;
|
||||
#swipeview {
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
height: 150px;
|
||||
background: #ddd;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
top:8px;
|
||||
width:200px;
|
||||
height:20px;
|
||||
left:50%;
|
||||
background:rgba(0,0,0,0.75);
|
||||
padding:0;
|
||||
margin:0 0 0 -100px;
|
||||
-webkit-border-radius:10px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 8px;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
background: rgba(0,0,0,0.75);
|
||||
padding: 0;
|
||||
margin: 0 0 0 -100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px; line-height:14px;
|
||||
-webkit-border-radius:7px;
|
||||
background:rgba(255,255,255,0.1);
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
margin:3px 11px 0 0;
|
||||
text-align:center;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
border-radius: 7px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 3px 11px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav li#prev {
|
||||
margin-left:5px;
|
||||
background:transparent;
|
||||
margin-left: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#nav li#next {
|
||||
margin-right:0;
|
||||
background:transparent;
|
||||
margin-right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#nav li.selected {
|
||||
background:rgba(255,255,255,0.4);
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
#swipeview-slider > div {
|
||||
position:relative;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-pack:center;
|
||||
-webkit-box-align:center;
|
||||
overflow:hidden;
|
||||
position: relative;
|
||||
|
||||
-moz-box-orient: vertical;
|
||||
-ms-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
-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 {
|
||||
-webkit-box-sizing:border-box;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
padding:0 20px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding:20px;
|
||||
margin:0;
|
||||
font-size:1.4em;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,90 +1,107 @@
|
||||
|
||||
body {
|
||||
padding:0;
|
||||
margin:0;
|
||||
background:#fff;
|
||||
-webkit-user-select:none;
|
||||
-webkit-text-size-adjust:none;
|
||||
color:#333;
|
||||
font-family:helvetica;
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
color: #333;
|
||||
font-family: helvetica;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2em;
|
||||
padding:20px 0;
|
||||
margin:0;
|
||||
font-size: 2em;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width:100%;
|
||||
min-width:320px;
|
||||
height:150px;
|
||||
background:#ddd;
|
||||
border-top:1px solid #aaa;
|
||||
border-bottom:1px solid #aaa;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
height: 150px;
|
||||
background: #ddd;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
top:8px;
|
||||
width:200px;
|
||||
height:20px;
|
||||
left:50%;
|
||||
background:rgba(0,0,0,0.75);
|
||||
padding:0;
|
||||
margin:0 0 0 -100px;
|
||||
-webkit-border-radius:10px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 8px;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
background: rgba(0,0,0,0.75);
|
||||
padding: 0;
|
||||
margin: 0 0 0 -100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#nav li {
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px; line-height:14px;
|
||||
-webkit-border-radius:7px;
|
||||
background:rgba(255,255,255,0.1);
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
margin:3px 11px 0 0;
|
||||
text-align:center;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
border-radius: 7px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 3px 11px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav li#prev {
|
||||
margin-left:5px;
|
||||
background:transparent;
|
||||
margin-left: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#nav li#next {
|
||||
margin-right:0;
|
||||
background:transparent;
|
||||
margin-right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#nav li.selected {
|
||||
background:rgba(255,255,255,0.4);
|
||||
background: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
#swipeview-slider > div {
|
||||
position:relative;
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-box-pack:center;
|
||||
-webkit-box-align:center;
|
||||
overflow:hidden;
|
||||
position: relative;
|
||||
|
||||
-moz-box-orient: vertical;
|
||||
-ms-box-orient: vertical;
|
||||
box-orient: vertical;
|
||||
|
||||
-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 {
|
||||
-webkit-box-sizing:border-box;
|
||||
display:block;
|
||||
text-align:center;
|
||||
font-size:1.4em;
|
||||
padding:0 20px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding:20px;
|
||||
margin:0;
|
||||
font-size:1.4em;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
@ -58,30 +58,31 @@
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width:400px;
|
||||
height:100%;
|
||||
padding:10px;
|
||||
background-image:url('https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
|
||||
background-color: red;
|
||||
padding:10px;
|
||||
font-size:36pt;
|
||||
}
|
||||
#sidebar {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
background-image: url('https://encrypted-tbn3.google.com/images?q=tbn: ANd9GcTqUiE7E5eQ8bhHensKUtTt2hzd61ogIcYppKKYHfCIE1Gr_rMv6g');
|
||||
background-color: red;
|
||||
padding: 10px;
|
||||
font-size: 36pt;
|
||||
}
|
||||
|
||||
#body {
|
||||
background-color: #555;
|
||||
padding:10px;
|
||||
text-align:center;
|
||||
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
|
||||
}
|
||||
#body {
|
||||
background-color: #555;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background-image: url('https://encrypted-tbn2.google.com/images?q=tbn: ANd9GcS_aG-7AMK8jYO8eHxkCVqpBHmZnGsNzCBB873ee-wiJYQ75yUcZA');
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a{
|
||||
color:white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
@ -20,28 +20,28 @@
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
border-left:1px solid black;
|
||||
}
|
||||
body {
|
||||
background: #eee;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width:420px;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
}
|
||||
#sidebar {
|
||||
width: 420px;
|
||||
padding: 0px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#sidebar .viewNavigator_header {
|
||||
background: #333;
|
||||
}
|
||||
#sidebar .viewNavigator_header {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
#sidebar .viewNavigator_contentHolder,#sidebar .viewNavigator_content {
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
#sidebar .viewNavigator_contentHolder,
|
||||
#sidebar .viewNavigator_content {
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -17,106 +17,106 @@
|
||||
<style>
|
||||
|
||||
body,ul,li,header,nav,aside,section,article,p,a {
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0;
|
||||
}
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font: normal 1.25em Helvetica;
|
||||
background: #333;
|
||||
}
|
||||
body {
|
||||
font: normal 1.25em Helvetica;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
object{
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
object {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#iframeWrapper {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#iframeWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height:100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background-color: rgba(0,0,0,0);
|
||||
border: none;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.viewNavigator_header {
|
||||
background-color: #333;
|
||||
background: url("./assets/header_bg_wood.png") repeat;
|
||||
font: bold 1em Helvetica;
|
||||
}
|
||||
|
||||
.viewNavigator_header {
|
||||
background-color: #333;
|
||||
background: url("./assets/header_bg_wood.png") repeat;
|
||||
font: bold 1em Helvetica;
|
||||
}
|
||||
.viewNavigator_content {
|
||||
border-top: 2px solid #666;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.viewNavigator_content {
|
||||
border-top: 2px solid #666;
|
||||
background-color: #333;
|
||||
}
|
||||
.viewNavigator_contentHolder {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.viewNavigator_contentHolder {
|
||||
background-color: #333;
|
||||
}
|
||||
.viewNavigator_header_title {
|
||||
max-width: 100%;
|
||||
text-shadow: 1px 2px #777;
|
||||
}
|
||||
|
||||
.viewNavigator_header_title {
|
||||
max-width:100%;
|
||||
text-shadow: 1px 2px #777;
|
||||
}
|
||||
.headerButton {
|
||||
-webkit-box-shadow: inset 0px 1px 0px 0px #999;
|
||||
box-shadow: inset 0px 1px 0px 0px #999;
|
||||
background-color: rgba(128,128,128,0.65);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #777;
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding: 6px 24px;
|
||||
text-decoration: none;
|
||||
text-shadow: 1px 1px 0px #736d73;
|
||||
padding: 6px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
-webkit-box-shadow:inset 0px 1px 0px 0px #999;
|
||||
box-shadow:inset 0px 1px 0px 0px #999;
|
||||
background-color:rgba(128,128,128,0.65);
|
||||
-moz-border-radius:6px;
|
||||
-webkit-border-radius:6px;
|
||||
border-radius:6px;
|
||||
border:1px solid #777;
|
||||
display:inline-block;
|
||||
color:#ffffff;
|
||||
font-family:arial;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
padding:6px 24px;
|
||||
text-decoration:none;
|
||||
text-shadow:1px 1px 0px #736d73;
|
||||
padding: 6px;
|
||||
padding-top:5px;
|
||||
padding-bottom:4px;
|
||||
}.headerButton:active {
|
||||
position:relative;
|
||||
top:1px;
|
||||
}
|
||||
.headerButton:active {
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.oddRow {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background: #015FE6;
|
||||
background-color: #015FE6;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.listSelected {
|
||||
background:#015FE6;
|
||||
background-color:#015FE6;
|
||||
color: #FFF;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -11,57 +11,71 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
* {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
input,textarea {
|
||||
-webkit-touch-callout: auto;
|
||||
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background-color:#555;
|
||||
overflow:hidden;
|
||||
background-color: #555;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slidingview_sidebar {
|
||||
position:absolute;
|
||||
width:250px;
|
||||
left:0px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
transform: translate3d(0,0,0);
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
|
||||
-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 {
|
||||
position:absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
transform: translate3d(0,0,0);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
|
||||
-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 {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
@ -12,72 +12,80 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
|
||||
.splitViewNavigator_root {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.splitViewNavigator_sidebar {
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
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 {
|
||||
position:absolute;
|
||||
background:white;
|
||||
overflow:hidden;
|
||||
position: absolute;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
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 {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.content_overlay_hidden {
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
left:-1px;
|
||||
width:0px;
|
||||
height:0px;
|
||||
display:none;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar_portrait {
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:-240px;
|
||||
width:240px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: -240px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.body_portrait {
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
left:0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.sidebar_landscape {
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:240px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.body_landscape {
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
right:0px;
|
||||
left:240px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 240px;
|
||||
}
|
||||
@ -12,193 +12,208 @@ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
* {
|
||||
-webkit-touch-callout: none;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
input,textarea {
|
||||
-webkit-touch-callout: auto;
|
||||
-webkit-user-select: auto;
|
||||
}
|
||||
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
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 {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color:666666;
|
||||
overflow:hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: 666666;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewNavigator_header {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:46px;
|
||||
overflow:hide;
|
||||
padding:0px;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
overflow: hide;
|
||||
padding: 0px;
|
||||
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-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: -o-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); /* IE10+ */
|
||||
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 */
|
||||
background: -webkit-linear-gradient(top, rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%);
|
||||
|
||||
backface-visibility: hidden;
|
||||
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%);
|
||||
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 */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
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 {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:2;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
max-width:30%;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
.viewNavigator_header_title {
|
||||
|
||||
position:absolute;
|
||||
top:12px;
|
||||
left:0%;
|
||||
right:0%;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
text-align:center;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0%;
|
||||
right: 0%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
max-width:48%;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 48%;
|
||||
}
|
||||
|
||||
.viewNavigator_headerContent {
|
||||
|
||||
backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
|
||||
position:absolute;
|
||||
-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 {
|
||||
position:absolute;
|
||||
top:46px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
bottom:0px;
|
||||
overflow:hidden;
|
||||
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
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 */
|
||||
.viewNavigator_content select {
|
||||
overflow:auto;
|
||||
position:relative;
|
||||
backface-visibility: auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
backface-visibility: auto;
|
||||
-webkit-backface-visibility: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.viewNavigator_contentHolder > div:first-child {
|
||||
min-height:100%;
|
||||
border-bottom:1px solid #444;
|
||||
border-top:1px solid #444;
|
||||
min-height: 100%;
|
||||
border-bottom: 1px solid #444;
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
.viewNavigator_content div {
|
||||
backface-visibility: visible;
|
||||
-webkit-backface-visibility: visible;
|
||||
|
||||
backface-visibility: visible;
|
||||
-webkit-backface-visibility: visible;
|
||||
-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_contentHolder {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
bottom:0px;
|
||||
background-color:white;
|
||||
overflow:auto;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling : touch;
|
||||
min-width:100%;
|
||||
min-height:100%
|
||||
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-width: 100%;
|
||||
min-height: 100% backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
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 {
|
||||
/* backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
*/
|
||||
/* backface-visibility: hidden;
|
||||
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
.viewNavigator_backButtonPosition {
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: .6em;
|
||||
}
|
||||
|
||||
.viewNavigator_backButton
|
||||
{
|
||||
cursor:pointer;
|
||||
.viewNavigator_backButton {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
background-color: #ccc;
|
||||
border-radius: .2em;
|
||||
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);
|
||||
}
|
||||
|
||||
.viewNavigator_backButton:active
|
||||
{
|
||||
.viewNavigator_backButton:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user