Skip to content

Commit

Permalink
CSS updates for chrome
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Aug 23, 2011
1 parent 451239e commit 52fa7f0
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 31 deletions.
16 changes: 8 additions & 8 deletions css/apple.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ div.jsTouch h1, div.jsTouch h2 {
padding: 10px 15px 0px 15px;
font-size: 16px;
font-weight: bold;
text-shadow: rgba(220, 220, 220, 0.4) 1px 1px 0;
text-shadow: rgba(250, 250, 250, 1) 1px 1px 1px;
text-overflow: ellipsis;
}

Expand Down Expand Up @@ -63,7 +63,7 @@ div.jsTouch div.toolbar h1{
line-height: 1em;
font-size: 20px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
text-overflow: ellipsis;
text-align: center;
}
Expand All @@ -89,7 +89,7 @@ div.jsTouch div.toolbar h1{
border: 1px solid #5b6572;
-webkit-box-shadow: 0px 1px 0px #bbb;
height: 17px;
text-shadow: 0px 0px 0px #444444;
text-shadow: #444444 1px 1px 1px;
}

.button.clicked {
Expand Down Expand Up @@ -158,7 +158,7 @@ div.jsTouch div.content {
-webkit-transition-duration: 0;
-webkit-transform: translate3d(0, 0, 0);
color: black;
text-shadow: 1px 1px 0px #efefef;
text-shadow: #efefef 1px 1px 1px;
position: absolute;
left: 0px;
top: 0px;
Expand Down Expand Up @@ -230,7 +230,7 @@ div.jsTouch div.content ul.edgetoedge li a{

div.jsTouch div.content ul li a.clicked {
color: white;
text-shadow: 1px 1px 0px #555;
text-shadow: #333333 1px 1px 1px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1faeef), to(#187bc8));
}

Expand Down Expand Up @@ -266,7 +266,7 @@ div.jsTouch div.content ul li span.count {
width: 15px;
text-align: center;
color: white;
text-shadow: 1px 1px 0px #888888;
text-shadow: #888888 1px 1px 1px;
-webkit-box-shadow: 0 0 4px #777777
}

Expand All @@ -289,7 +289,7 @@ div.jsTouch div.content div.edgetoedge-title {
border-top: 1px solid #647A96;
border-bottom: 1px solid #647A96;
color: #ffffff;
text-shadow: 1px 1px 0px #333333;
text-shadow: #333333 1px 1px 1px;
}

/* FORMS */
Expand All @@ -316,7 +316,7 @@ div.jsTouch div.content div.label {
font-size: 13px;
font-weight: bold;
color: #414b5a;
text-shadow: 1px 1px 0px #ffffff;
text-shadow: #ffffff 1px 1px 1px;
text-align: right;
border-right: 1px solid #e2efef;
}
Expand Down
20 changes: 9 additions & 11 deletions css/ipad-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ div.jsTouch h1, div.jsTouch h2 {
padding: 10px 15px 0px 15px;
font-size: 16px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 0;
text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
}

/* TOOLBAR */
Expand All @@ -42,7 +42,7 @@ div.jsTouch div.toolbar {
padding: 10px;
height: 45px;
margin-bottom: 5px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ADADAD), color-stop(.5,#3F3F3F), color-stop(.5,#000000), color-stop(1,#555555));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777777), color-stop(.5,#333333), color-stop(.5,#000000), color-stop(1,#343434));
-webkit-box-shadow: 0px 1px 1px #aaaaaa;
overflow: hidden;
position: absolute;
Expand All @@ -62,7 +62,7 @@ div.jsTouch div.toolbar h1{
line-height: 1em;
font-size: 20px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0;
text-shadow: rgba(0, 0, 0, 0.5) 1px -1px 1px;
text-overflow: ellipsis;
text-align: center;
}
Expand All @@ -88,7 +88,7 @@ div.jsTouch div.toolbar h1{
border: 1px solid #222222;
-webkit-box-shadow: 0px 1px 0px #666666;
height: 17px;
text-shadow: 1px 1px 0px #444444;
text-shadow: #444444 1px 1px 1px;
}

.button.clicked {
Expand Down Expand Up @@ -157,7 +157,7 @@ div.jsTouch div.content {
-webkit-transition-duration: 0;
-webkit-transform: translate3d(0, 0, 0);
color: #ffffff;
text-shadow: 1px 1px 0px #333333;
text-shadow: #333333 1px 1px 1px;
position: absolute;
left: 0px;
top: 0px;
Expand Down Expand Up @@ -185,7 +185,6 @@ div.jsTouch div.content ul.rounded li {
padding: 10px;
margin: 0px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575859), to(#424344));
text-shadow: 1px 1px 0px #222222;
}

div.jsTouch div.content ul.rounded li a{
Expand All @@ -197,8 +196,8 @@ div.jsTouch div.content ul.rounded li a{
display: block;
padding: 12px 10px 12px 10px;
margin: -10px;
-webkit-tap-highlight-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px #222222;
-webkit-tap-highlight-color: rgba(0,0,0,0.5);
text-shadow: #222222 1px 1px 1px;
}

div.jsTouch div.content ul.edgetoedge {
Expand All @@ -214,7 +213,6 @@ div.jsTouch div.content ul.edgetoedge li {
padding: 10px;
margin: 0px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575859), to(#424344));
text-shadow: 1px 1px 0px #222222;
border-bottom: 1px solid #777777;
}

Expand All @@ -228,7 +226,7 @@ div.jsTouch div.content ul.edgetoedge li a{
padding: 12px 10px 12px 10px;
margin: -10px;
-webkit-tap-highlight-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px #222222;
text-shadow: #222222 1px 1px 1px;
}


Expand Down Expand Up @@ -315,7 +313,7 @@ div.jsTouch div.content div.label {
font-size: 13px;
font-weight: bold;
color: #cecece;
text-shadow: 1px 1px 0px #333333;
text-shadow: #222222 1px 1px 1px;
text-align: right;
border-right: 1px solid #333333;
}
Expand Down
20 changes: 10 additions & 10 deletions css/ipad-light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@ div.jsTouch h1 {
}

div.jsTouch h1, div.jsTouch h2 {
color: #000;
color: #666666;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 10px 15px 0px 15px;
font-size: 16px;
font-weight: bold;
text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 0;
text-shadow: rgba(255, 255, 255, 1) 2px 2px 2px;
}

/* TOOLBAR */
Expand All @@ -44,7 +44,7 @@ div.jsTouch div.toolbar {
margin-bottom: 5px;
/* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), color-stop(0.5, #dfe1e6), color-stop(1, #a8acb9)); */
/* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2e9f9), color-stop(1, #65a6d2)); */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4d9dd), color-stop(1, #9ca0a2));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d4d9dd), color-stop(0.5, #abafb0), color-stop(0.5, #9ca0a2), color-stop(1, #aab0b2));
-webkit-box-shadow: 0px 0px 4px #bbb;
overflow: hidden;
position: absolute;
Expand All @@ -64,7 +64,7 @@ div.jsTouch div.toolbar h1{
line-height: 1em;
font-size: 20px;
font-weight: bold;
text-shadow: 1px 1px 0 #888;
text-shadow: #444444 1px 1px 1px;
text-overflow: ellipsis;
text-align: center;
}
Expand All @@ -90,7 +90,7 @@ div.jsTouch div.toolbar h1{
border: 1px solid #555555;
-webkit-box-shadow: 0px 1px 0px #cccccc;
height: 17px;
text-shadow: 1px 1px 0px #666666;
text-shadow: #666666 1px 1px 1px;
}

.button:hover, .button.clicked {
Expand Down Expand Up @@ -160,7 +160,7 @@ div.jsTouch div.content {
-webkit-transition-duration: 0;
-webkit-transform: translate3d(0, 0, 0);
color: black;
text-shadow: 1px 1px 0px #eeeeee;
text-shadow: #ffffff 1px 1px 1px;
position: absolute;
left: 0px;
top: 0px;
Expand Down Expand Up @@ -233,7 +233,7 @@ div.jsTouch div.content ul li a {
}
div.jsTouch div.content ul li a.clicked {
color: white;
text-shadow: 1px 1px 0px #555;
text-shadow: #555555 1px 1px 1px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1faeef), to(#187bc8));
}

Expand Down Expand Up @@ -271,7 +271,7 @@ div.jsTouch div.content ul li span.count {
width: 15px;
text-align: center;
color: white;
text-shadow: 1px 1px 0px #888888;
text-shadow: #888888 1px 1px 1px;
-webkit-box-shadow: 0 0 4px #555555
}

Expand All @@ -294,7 +294,7 @@ div.jsTouch div.content div.edgetoedge-title {
border-top: 1px solid #456f9a;
border-bottom: 1px solid #456f9a;
color: #ffffff;
text-shadow: 1px 1px 0px #666666;
text-shadow: #666666 1px 1px 1px;
}

/* FORMS */
Expand All @@ -321,7 +321,7 @@ div.jsTouch div.content div.label {
font-size: 13px;
font-weight: bold;
color: #555555;
text-shadow: 1px 1px 0px #cccccc;
text-shadow: #cccccc 1px 1px 1px;
text-align: right;
border-right: 1px solid #e2efef;
}
Expand Down
2 changes: 1 addition & 1 deletion index.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html manifest="manifest.php"><head> <title>Web 2.0 Touch</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="images/iphone_startup.png" /> <link rel="apple-touch-icon" href="images/iphone_icon.png" /> <link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css"> <link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css"> <script type="text/javascript" src="includes/jquery.js"></script> <script type="text/javascript" src="includes/jsTouch.js"></script> <script type="text/javascript" src="includes/iscroll.js"></script> <script type="text/javascript"> var myTouch; var myTouch2; $(document).ready(function () { myTouch = jsTouch.init('myTouch', { width: 320, page: 'pages/home.php' } ); myTouch2 = jsTouch.init('myTouch2', { width: -320, page: 'pages/home.php' } ); // unload page event //window.onbeforeunload = function() { return 'All unsaved data will be lost.'; } jsTouch.resize(); }); // prevent default scroll document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script></head><body style="background-image: url(images/iphone_startup.png);"> <div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"> </div> <div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;"> </div> </body></html>
<!DOCTYPE html><html manifest="manifest.php1"><head> <title>Web 2.0 Touch</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-startup-image" href="images/iphone_startup.png" /> <link rel="apple-touch-icon" href="images/iphone_icon.png" /> <link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css"> <link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css"> <script type="text/javascript" src="includes/jquery.js"></script> <script type="text/javascript" src="includes/jsTouch.js"></script> <script type="text/javascript" src="includes/iscroll.js"></script> <script type="text/javascript"> var myTouch; var myTouch2; $(document).ready(function () { myTouch = jsTouch.init('myTouch', { width: 320, page: 'pages/home.php' } ); myTouch2 = jsTouch.init('myTouch2', { width: -320, page: 'pages/home.php' } ); // unload page event //window.onbeforeunload = function() { return 'All unsaved data will be lost.'; } jsTouch.resize(); }); // prevent default scroll document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); </script></head><body style="background-image: url(images/iphone_startup.png);"> <div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;"> </div> <div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;"> </div> </body></html>
Expand Down
2 changes: 1 addition & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
## Web 2.0 TouchJava Script mini framework for Touch devices (iPhone, iPad, Android and other webkit compatible). I have originally started with jqTouch, but soon found it to be limited in features I watned to have and ease of use. ## InstallationDownload and install all files, open index.php in the mobile browser. You are good to get rolling. This mini framework uses 2 open source libaries:* jQuery* iScroll## Demo[http://web20boom.com/touch](http://web20boom.com/touch)Video demo is coming soon...
## Web 2.0 TouchJava Script mini framework for Touch devices (iPhone, iPad, Android and other webkit compatible). I have originally started with jqTouch, but soon found it to be limited in features I watned to have and ease of use. ## InstallationDownload and install all files, open index.php in the mobile browser. You are good to get rolling. This mini framework uses 2 open source libaries:* jQuery* iScroll## Resourses* [http://web20boom.com/touch](http://web20boom.com/touch) - home page (video demo is here)* [http://web20boom.com/demo/touch](http://web20boom.com/demo/touch) - demo (open on iPhone)
Expand Down

0 comments on commit 52fa7f0

Please sign in to comment.