Make settings page more touch friendly (font-size, checkbox, radio, adding language page).

chrome/browser/resources/options/options_page.css

 .hbox {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
 }
 
 .vbox {
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 
 .stretch {
-  -webkit-box-flex: 1;  
+  -webkit-box-flex: 1;
 }
 
 .frozen,
 .subpage-sheet-container.frozen {
   position: fixed;
 }
 
 #search-field {
   font-size: inherit;
   margin: 0;
 }
 
+<if expr="pp_ifdef('touchui')">
+/* Fix the width issue of search box after increase font size. */

[Rick Byers, 2011/10/31 15:18:18]

Update this comment

[bshe, 2011/10/31 21:41:18]

Done.

+#search-field {
+  font-size: 13px;
+  -webkit-transform: scaleY(1.2);
+}
+
+/*
+ * In TOUCH_UI builds, make the radio/checkbox input boxes in
+ * options/preference pages easier to touch.
+ */
+div.radio > label > span,
+div.checkbox > label > span {
+  padding-left: 5px;

[Rick Byers, 2011/10/31 15:18:18]

use -webkit-padding-start so this still works for RTL layout

[bshe, 2011/10/31 21:41:18]

Done.

+}
+
+div.radio > label > input,
+div.checkbox > label > input {
+  -webkit-transform: scale(1.4);
+}
+
+/*
+ * Overwrite the font-size rule in shared_options.css file.
+ * 16 px font-size proved to be more touch friendly. It increases the touchable
+ * area for buttons and input boxes.
+ */
+body {
+  font-size: 16px;
+}
+</if>
+
+
 .overlay {
   -webkit-box-align: center;
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   -webkit-transition: 0.25s opacity;
   background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                       rgba(127, 127, 127, 0.5) 35%,
                                       rgba(0, 0, 0, 0.7));
   bottom: 0;
   display: -webkit-box;
@@ skipping 566 matching lines @@
   display: table-cell;
   vertical-align: baseline;
   border-bottom: 1px solid #eeeeee;
 }
 
 /* do not display a border after the last section in the table */
 .displaytable:not([searching='true']) > section:last-child > *  {
   border-bottom: none;
 }