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.
+ */
+
+#preview-area .margin-control {
+  -webkit-transition: opacity 150ms linear;
+  position: absolute;
+}
+
+#preview-area .margin-control.invisible {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#preview-area .margin-control.margin-control-top,
+#preview-area .margin-control.margin-control-bottom {
+  cursor: ns-resize;
+  padding: 8px 0;
+  width: 100%;
+}
+
+#preview-area .margin-control.margin-control-left,
+#preview-area .margin-control.margin-control-right {
+  cursor: ew-resize;
+  height: 100%;
+  padding: 0 8px;
+}
+
+#preview-area .margin-control.margin-control-disabled {
+  cursor: default;
+}
+
+#preview-area .margin-control.margin-control-animated {
+  -webkit-transition:
+      opacity 150ms linear, top 150ms ease-in-out, left 150ms ease-in-out;
+}
+
+#preview-area .margin-control-line {
+  border-color: rgb(64, 128, 250);
+  border-width: 2px;
+}
+
+#preview-area .margin-control-disabled .margin-control-line  {
+  border-color: gray;
+}
+
+#preview-area .margin-control-top .margin-control-line,
+#preview-area .margin-control-bottom .margin-control-line {
+  border-style: dashed none none none;
+  width: 100%;
+}
+
+#preview-area .margin-control-left .margin-control-line,
+#preview-area .margin-control-right .margin-control-line {
+  border-style: none none none dashed;
+  height: 100%;
+}
+
+#preview-area .margin-control-textbox {
+  background-color: #2a2a2a;
+  color: white;
+  position: absolute;
+  width: 60px;
+}
+
+#preview-area .margin-control-textbox.invalid {
+  background-color: rgb(193, 27, 23);
+}
+
+#preview-area .margin-control-top .margin-control-textbox {
+  left: 50%;
+  top: 0;
+}
+
+#preview-area .margin-control-right .margin-control-textbox {
+  right: 0;
+  top: 50%;
+}
+
+#preview-area .margin-control-bottom .margin-control-textbox {
+  bottom: 0;
+  right: 50%;
+}
+
+#preview-area .margin-control-left .margin-control-textbox {
+  bottom: 50%;
+  left: 0;
+}