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

chrome/browser/resources/options/options_page.css

Index: chrome/browser/resources/options/options_page.css
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index d6dc054df8e359977e906c771b318a18d48612d0..a6ebc82473dca635892e0c2ce0ac12a0c5d6668b 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -9,7 +9,7 @@
 }
 
 .stretch {
-  -webkit-box-flex: 1;  
+  -webkit-box-flex: 1;
 }
 
 .frozen,
@@ -22,6 +22,44 @@
   margin: 0;
 }
 
+<if expr="pp_ifdef('touchui')">
+/*
+ * Add padding to increase the touchable area of search box. Use original font
+ * size to avoid the width of search box exceeding the width of navbar.
+ */
+#search-field {
+  font-size: 13px;
+  padding: 5px;
+}
+#search-field::-webkit-search-cancel-button {
+  -webkit-transform: scale(1.5);
+}
+
+/*
+ * 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 {
+  -webkit-padding-start: 5px;
+}
+
+label > input[type="checkbox"],

[Rick Byers, 2011/11/01 17:06:10]

style nit: remove quotes
(looks like we're not consistent with this - in this file we have single quotes,
double quotes and no quotes, let's just go with no quotes for new code since
it's unnecessary extra characters).

[bshe, 2011/11/01 19:23:46]

Done.

+label > input[type="radio"] {
+  -webkit-transform: scale(1.4);
+}
+
+/*
+ * Override 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;