Polish "Displays" Options UI for ChromeOS.

chrome/browser/resources/options2/chromeos/display_options.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+#display-options {
+  background-color: #f0f0f0;
+}
+
+#display-options-content-area {
+  padding: 0;
+}
+
 #display-options-displays-view-host {
-  padding: 20px;
+  padding: 20px 0 20px 0;
 }
 
 #display-options-displays-view {
-  height: 300px;
   position: relative;
 }
 
 #display-configurations {
-  border-top: 1px solid blue;
-  padding-top: 20px;
-  text-align: right;
+  background-color: white;
+  border-top: 1px solid lightgrey;
+  height: 65px;
+  padding: 15px;
+}
+
+/* The arrow at the border #display-configurations to point the focused display.

[James Hawkins, 2012/08/06 16:44:43]

/* First
 * last.
 */

[Jun Mukai, 2012/08/07 00:31:31]

Done.

+   This is achieved by a square rotated by 45-deg, and it has border at the
+   upper-half, which were left/top before the rotation. */
+#display-configuration-arrow {
+  -webkit-transform: rotate(45deg);

[James Hawkins, 2012/08/06 16:44:43]

Won't we need to rotate by -45deg in RTL then?

[Jun Mukai, 2012/08/07 00:31:31]

I checked with arabic language and working fine.  border-left is left in RTL
too.

+  background-color: white;
+  border-left: 1px solid lightgrey;
+  border-top: 1px solid lightgrey;
+  height: 20px;
+  position: absolute;
+  width: 20px;
+  z-index: 1;
+}
+
+#display-options-buttons-container {
+  float: right;
+  z-index: 2;
+}
+
+html[dir=rtl] #display-options-buttons-container {
+  float: left;
+}
+
+
+#selected-display-data-container {
+  float: left;
+  line-height: 200%;
+  z-index: 2;
+}
+
+html[dir=rtl] #selected-display-data-container {
+  float: right;
+}
+
+#selected-display-name {
+  font-weight: bold;
+}
+
+#display-launcher {
+  background-color: lightgrey;
+  bottom: 0;
+  height: 10px;
+  position: absolute;
 }
 
 .displays-display {
-  background-color: white;
-  border: dashed 1px;
+  background: #f0f0f0;
+  border: solid 1px;
+  font-weight: bold;
   position: absolute;
   text-align: center;
   vertical-align: middle;
+  z-index: 2;
 }
 
-.displays-primary {
-  border: solid 1px blue;
+.display-mirrored {
+  border: dashed 1px;
 }
 
 .displays-focused {
-  border: solid 2px;
+  border: solid 2px rgb(0, 138, 255);

[James Hawkins, 2012/08/06 16:44:43]

Be consistent and use hex (hex is used in the rest of the file.

[Jun Mukai, 2012/08/07 00:31:31]

Rather changed to use rgb() in the rest of the file.  Our coding style prefers
rgb() and the linter puts warning for it (grey scale seems one exceptional of
rgb() usage).

+  color: rgb(0, 138, 255);
 }
+
+.display-options-single-button-container {
+  margin: 5px 0 5px 0;
+}
+
+.display-options-button {
+  width: 120px;
+}