[css] tablet style update

cedricss · Jan 10, 2012 · 7908494 · 7908494
1 parent 51a376c
commit 7908494
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/resources/style.css b/resources/style.css
@@ -60,7 +60,7 @@ a img {border: none;}
   margin-top:4px;
 }
 /* Container */
-.container {width:480px;}
+.container {width:460px;}
 #todoapp {padding-top:65px;}
 
 /* Main  content box */
@@ -102,7 +102,7 @@ input, ul#todo_list input[type="checkbox"] {
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 input#new_todo {
-   width:466px;
+   width:446px;
    background:transparent url('/resources/opado-bg-gradient-tile.jpg') repeat-x 0 60%;
    border: 1px solid #600B00;
    color:#BBA;
@@ -129,10 +129,10 @@ ul#todo_list li {
   border-bottom: 1px dashed #4D4D4D;
   border-top: 1px dashed #F7F7F5;
   margin:0;
-  padding:10px 2px 12px 2px;
+  padding:10px 5px 12px 5px;
 }
 ul#todo_list li:first-child {border-top:none;}
-
+ul#todo_list li:hover {background-color:rgba(0,0,0,0.05);}
 ul#todo_list input[type="checkbox"]{
   float:left;
   margin:4px 0;
@@ -188,7 +188,7 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
 /**  Mobile Portrait: width 320px **/
 
 @media only screen and (max-width: 480px) {
-    body {min-height:auto;}
+    body {min-height:auto;width:100%;height:100%;}
     .container, .container-fluid, .footer { width: 300px; }
 
     /* Columns */
@@ -205,25 +205,29 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
     input.xlarge, #login_box input {width:265px;}
     .btn.large {width:277px;font-size:18px;}
     input#new_todo{width:285px;}
-    ul#todo_list input[type="checkbox"]{font-size:16px;}
 
     /* Todo list */
     ul#todo_list .icon.icon-remove {display:inline-block;}
-    ul#todo_list input[type="checkbox"]{margin-right:6px;}
+    ul#todo_list input[type="checkbox"]{font-size:20px;margin: 3px 6px 0 0;-webkit-appearance:checkbox;}
     .well .btn {padding:5px 8px 6px 8px;}
 }
 
 /** Mobile Landscape: width 480px **/
 
 @media only screen and (min-width: 480px) and (max-width: 767px) {
-    body {min-height:auto;}
+    html {height:100%;}
+    body {min-height:auto;width:100%;height:100%;}
+
     .container, .container-fluid, .footer { width: 460px;}
 
     /* Columns */
     .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, 
     .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18, 
     .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{ width: 460px; }
-
-    /* Inputs width */
-    input#new_todo{width:445px;}
 }
+
+/** Tablet **/
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+    html {height:100%;}
+    body {width:100%;height:100%;}
+}