Refactor print preview web ui

chrome/browser/resources/print_preview/previewarea/margin_control.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.
+ */
+
+.margin-control {
+  -webkit-transition: opacity 150ms linear;
+  position: absolute;
+}
+
+.margin-control.invisible {
+  opacity: 0;
+}
+
+.margin-control.margin-control-top,
+.margin-control.margin-control-bottom {
+  cursor: ns-resize;
+  padding: 8px 0;
+  width: 100%;
+}
+
+.margin-control.margin-control-left,
+.margin-control.margin-control-right {
+  cursor: ew-resize;
+  height: 100%;
+  padding: 0 8px;
+}
+
+.margin-control-top .margin-control-line,
+.margin-control-bottom .margin-control-line {
+  border-top: 2px dashed rgb(64, 128, 250);
+  width: 100%;
+}
+
+.margin-control-left .margin-control-line,
+.margin-control-right .margin-control-line {
+  border-left: 2px dashed rgb(64, 128, 250);
+  height: 100%;
+}
+
+.margin-control-textbox {
+  position: absolute;
+  width: 60px;
+}
+
+.margin-control-textbox.invalid {
+  background-color: rgb(193, 27, 23);
+}
+
+.margin-control-top .margin-control-textbox {
+  left: 50%;
+  top: 0;
+}
+
+.margin-control-right .margin-control-textbox {
+  right: 0;
+  top: 50%;
+}
+
+.margin-control-bottom .margin-control-textbox {
+  bottom: 0;
+  right: 50%;
+}
+
+.margin-control-left .margin-control-textbox {
+  bottom: 50%;
+  left: 0;
+}