Skip to content

Commit

Permalink
CSS cleanup, offline access, bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@vitmalina
vitmalina committed Aug 22, 2011
1 parent 0f555b9 commit 451239e
Show file tree
Hide file tree
Showing 18 changed files with 276 additions and 191 deletions.
52 changes: 7 additions & 45 deletions css/apple.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ div.jsTouch {
padding: 0px !important;
}

div.jsTouch a {
div.jsTouchPanel {
border-left: 2px solid #999999;
overflow: hidden;
background-color: blacl;
}

div.jsTouch a {
cursor: default;
}

Expand All @@ -29,20 +35,6 @@ div.jsTouch h1, div.jsTouch h2 {
text-overflow: ellipsis;
}

div.progress {
position: absolute;
margin: 100px 70px;
text-align: center;
padding: 30px 40px;
background: rgba(0,0,0,0.5);
font-family: "Helvetica Neue", Helvetica;
color: white;
font-weight: bold;
border-radius: 8px;
width: 100px;
z-index: 6;
}

/* TOOLBAR */

div.jsTouch div.toolbar {
Expand Down Expand Up @@ -340,34 +332,4 @@ div.jsTouch div.content ul li:last-child div.label {
div.jsTouch div.content div.field {
padding: 0px 0px 0px 78px;
margin: -5px 0px -3px 0px;
}

div.jsTouch div.content input {
border: 0px;
width: 100%;
font-size: 18px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

div.jsTouch div.content input[type="checkbox"] {
width: 94px !important;
height: 27px !important;
display: block !important;
overflow: hidden !important;
margin: 2px !important;
margin-left: 5px;
position: absolute !important;
border: 0px !important;
-webkit-border-radius: 5px !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-transition: all .20s !important;
background: #fff url(../images/on_off.png) -55px 0 no-repeat !important;
}

div.jsTouch div.content input[type="checkbox"]:checked {
background-position: 0px 0px !important;
}
170 changes: 152 additions & 18 deletions css/core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ body {
margin: 0px;
padding: 0px;
overflow: hidden;
-webkit-user-select: none;
}
.icon {
padding: 0px;
Expand All @@ -16,15 +17,30 @@ body {
border: 2px solid #d1d3d4;
}

div.progress {
position: absolute;
margin: 100px 80px;
text-align: center;
padding: 30px 40px;
background: rgba(40,40,40,0.6);
font-family: "Helvetica Neue", Helvetica;
color: white;
font-weight: bold;
border-radius: 8px;
border: 2px solid rgba(230,230,230,0.7);
width: 100px;
z-index: 6;
}

/* Bottom Footer & Tabs */

div.jsTouch div.footer {
color: white;
text-align: center;
-webkit-box-sizing: border-box;
border-top: 1px solid #2d3642;
padding: 1px;
height: 45px;
padding: 3px;
height: 50px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
color-stop(0,#cccccc),
color-stop(.02,#353535),
Expand Down Expand Up @@ -52,7 +68,7 @@ div.jsTouch div.footer ul li, div.jsTouch div.footer ul li a {
display: inline-block;
-webkit-box-sizing: border-box;
overflow: hidden;
width: 61px;
width: 60px;
height: 40px;
color: #fff;
list-style-type: none;
Expand Down Expand Up @@ -149,7 +165,7 @@ div.overlay .footer {
right: 5px;
bottom: 5px;
width: auto;
height: 32px;
height: 50px;
position: absolute;
overflow: hidden;
text-align: center;
Expand Down Expand Up @@ -247,22 +263,140 @@ div.overlay div.content div.simple-title {

/* Buttons */

.button-black {
display: inline-block;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(104,104,104,1)), color-stop(0.5, rgba(40,40,40,1)), color-stop(0.5, rgba(20,20,20,1)), to(rgba(40,40,40,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

.button-black:hover, .button-gray:hover, .button-navy:hover, .button-blue:hover, .button-red:hover, .button-green:hover {
-webkit-box-shadow: 0px 0px 8px #eee;
border: solid 3px rgb(100,100,100);
opacity: 0.7;
}

.button-gray {
position: relative;
display: inline-block;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(234,234,234,1)), color-stop(0.5, rgba(185,185,185,1)), color-stop(0.5, rgba(166,166,166,1)), to(rgba(167,167,167,1)));
color: #000;
text-shadow: #ccc 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

.button-navy {
display: inline-block;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(29,103,186,1)), color-stop(0.5, rgba(13,70,134,1)), color-stop(0.5, rgba(12,58,110,1)), to(rgba(13,65,120,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

.button-red {
display: inline-block;
padding: 5px 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
cursor: pointer;
margin: 0 1px;
-webkit-border-radius: 5px;
-webkit-tap-highlight-color: rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 2px #aaa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
border: 1px solid #aaa;
height: 17px;
text-shadow: 0px 0px 0px #444444;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(250,50,50,1)), color-stop(0.5, rgba(202,34,38,1)), color-stop(0.5, rgba(184,20,20,1)), to(rgba(230,20,20,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

.button-green {
display: inline-block;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(55,200,55,1)), color-stop(0.5, rgba(23,130,14,1)), color-stop(0.5, rgba(0,113,0,1)), to(rgba(0,150,0,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

.button-blue {
display: inline-block;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 0px 6px #ddd;
border: solid 3px rgb(90,90,90);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(86,213,255,1)), color-stop(0.5, rgba(39,125,255,1)), color-stop(0.5, rgba(0,114,255,1)), to(rgba(0,133,255,1)));
color: #fff;
text-shadow: #000 0 1px 0;
font: bold 16px Helvetica, Sans-serif;
margin: 4px;
padding: 8px;
text-align: center;
text-decoration: none;
opacity: 1;
}

/* INPUT CONTROLS */

div.jsTouch div.content input {
border: 0px;
width: 100%;
font-size: 18px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
color: black;
background-color: transparent;
}

div.jsTouch div.content input[type="checkbox1"] {
width: 94px !important;
height: 28px !important;
display: block !important;
overflow: hidden !important;
margin: 2px !important;
margin-left: 5px;
position: absolute !important;
border: 1px solid #5E5F63 !important;
background-color: black;
-webkit-border-radius: 5px !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-transition: all .20s !important;
background: #fff url(../images/on_off.png) -55px 0 no-repeat !important;
}

div.jsTouch div.content input.checked {
border: 1px solid red;
background-position: 0px 0px !important;
}
55 changes: 9 additions & 46 deletions css/ipad-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ div.jsTouch {
padding: 0px !important;
}

div.jsTouchPanel {
border-left: 2px solid #444444;
overflow: hidden;
background-color: black;
}

div.jsTouch a {
cursor: default;
}
Expand All @@ -28,20 +34,6 @@ div.jsTouch h1, div.jsTouch h2 {
text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 0;
}

div.progress {
position: absolute;
margin: 100px 70px;
text-align: center;
padding: 30px 40px;
background: rgba(0,0,0,0.5);
font-family: "Helvetica Neue", Helvetica;
color: white;
font-weight: bold;
border-radius: 8px;
width: 100px;
z-index: 6;
}

/* TOOLBAR */

div.jsTouch div.toolbar {
Expand Down Expand Up @@ -205,7 +197,7 @@ 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);
-webkit-tap-highlight-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px #222222;
}

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

Expand Down Expand Up @@ -342,34 +334,5 @@ div.jsTouch div.content div.field {
}

div.jsTouch div.content input {
border: 0px;
width: 100%;
font-size: 18px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
-webkit-appearance: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
color: white;
background-color: transparent;
}

div.jsTouch div.content input[type="checkbox"] {
width: 94px !important;
height: 28px !important;
display: block !important;
overflow: hidden !important;
margin: 2px !important;
margin-left: 5px;
position: absolute !important;
border: 1px solid #5E5F63 !important;
background-color: black;
-webkit-border-radius: 5px !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-transition: all .20s !important;
background: #fff url(../images/on_off.png) -55px 0 no-repeat !important;
color: white !important;
}

div.jsTouch div.content input[type="checkbox"]:checked {
background-position: 0px 0px !important;
}
Loading

0 comments on commit 451239e

Please sign in to comment.