Refactor print preview web ui

chrome/browser/resources/print_preview/print_preview.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. */
 
 html {
   height: 100%;
 }
 
 body {
+  display: -webkit-box;
   height: 100%;
   margin: 0;
-  overflow: hidden;
 }
 
 /* Header */
 
 header {
   -webkit-padding-end: 14px;
   -webkit-padding-start: 16px;
+  background-color: #F1F1F1;
 }
 
 #print-preview #navbar-container {
   -webkit-border-end: 1px solid rgb(198, 201, 206);
   -webkit-box-orient: vertical;
   -webkit-user-select: none;
-  background-color: #f1f1f1;
-  bottom: 0;
+  background-color: white;
   display: -webkit-box;
-  /* We set both left and right for the sake of RTL. */
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
+  position: relative;
   width: 310px;
   z-index: 2;
 }
 
 #navbar-content-title {
   color: #333;
   font-size: 200%;
   font-weight: normal;
   margin: 0;
   padding-bottom: 14px;
   padding-top: 13px;
   text-shadow: white 0 1px 2px;
 }
 
-#print-header {
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-
-#print-summary {
-  color: rgb(83, 99, 125);
-  display: block;
-  min-height: 30px;
-}
-
 /* Settings */
 
 #settings {
-  -webkit-box-flex: 1;
   -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3);
   background: white;
   overflow-y: auto;
   padding-top: 2px;
+  width: 100%;
 }
 
 .two-column {
   display: table-row;
 }
 
 .right-column {
   -webkit-padding-end: 16px;
   display: table-cell;
   width: auto;
 }
 
 .right-column .checkbox,
 .right-column .radio {
   margin: 0;
 }
 
 .right-column > *:not(:first-child):not(.hint),
 .right-column > .collapsible > *:not(:first-child):not(.hint) {
   margin-top: 8px;
 }
 
 .two-column h1 {
+  -webkit-padding-end: 16px;
   -webkit-padding-start: 16px;
   display: table-cell;
   font-size: 1.1em;
-  width: 86px;
 }
 
 .two-column.visible h1,
 .two-column.visible .right-column {
   border-bottom: 1px solid #dcdcdc;
   padding-bottom: 10px;
   padding-top: 10px;
 }
 
 .two-column:not(.visible) select {
   border-top-width: 0;
   margin-top: 0;
   padding-top: 0;
 }
 
 p {
   -webkit-line-box-contain: block;
   margin: 0;
   margin-bottom: 10px;
 }
 
 h1 {
   color: #808080;
   font-weight: 300;
 }
 
-.preview-link-button {
-  -webkit-padding-start: 16px;
+#print-preview .navbar-link {
+  -webkit-margin-start: 16px;
+  margin-top: 10px;
   outline: 0;
-  padding-top: 10px;
+  padding: 0;
   text-align: start;
   text-decoration: none;
 }
 
-.preview-link-button:hover:not(:disabled) {
+#print-preview .navbar-link:hover:not(:disabled) {
   text-decoration: underline;
 }
 
-.preview-link-button:disabled {
+#print-preview .navbar-link:disabled {
   color: rgba(0, 0, 0, .5);
   cursor: default;
   text-shadow: none;
 }
 
 button.loading {
   cursor: progress;
 }
 
 #print-preview button.default {
@@ skipping 91 matching lines @@
   height: 0 !important;
   opacity: 0;
   overflow: hidden;
   padding-top: 0;
   position: static;
   visibility: visible;
 }
 
 /* Individual settings sections  */
 
-#print-pages-div {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
-}
-
-#individual-pages {
-  -webkit-box-flex: 1;
-  -webkit-margin-start: 5px;
-  display: block;
-}
-
-#collate-option {
- -webkit-padding-start: 16px;
-  display: inline-block;
-}
-
-#copies {
-  position: relative;
-  width: 2.75em;
-}
-
-#copies.invalid {
-  background: rgb(255, 240, 240);
-  color: rgb(140, 20, 20);
-}
-
-#increment,
-#decrement {
-  -webkit-padding-end: 0;
-  -webkit-padding-start: 0;
-  font-weight: 600;
-  margin: 0;
-  min-width: 0;
-  position: relative;
-  width: 2em;
-}
-
-#increment:focus,
-#decrement:focus,
-#copies:focus {
-  z-index: 1;
-}
-
-#increment {
-  -webkit-margin-start: -5px;
-  border-radius: 0;
-}
-
-#decrement {
-  -webkit-margin-start: -5px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 3px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 3px;
-}
-
-html[dir='rtl'] #decrement {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 0;
-}
-
-#system-dialog-link {
-  -webkit-margin-start: 16px;
-  margin-top: 10px;
-  padding: 0;
-}
-
-/* PDF view */
-
-#mainview {
-  -webkit-margin-start: 310px;
-  -webkit-padding-start: 0;
-  -webkit-user-select: none;
-  background-color: #ccc;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-}
-
-#pdf-viewer {
-  /* pluginFadeInTransitionDuration = 200ms */
-  -webkit-transition: opacity 200ms linear;
-  /* pluginFadeInTransitionDelay = overlayFadeOutTransitionDuration = 100ms */
-  -webkit-transition-delay: 100ms;
-  height: 100%;
-  opacity: 1;
-  width: 100%;
-}
-
-#pdf-viewer.invisible {
-  /* pluginFadeOutTransitionDuration = 100ms */
-  -webkit-transition: opacity 100ms linear;
-  /* pluginFadeOutTransitionDelay = 250ms */
-  -webkit-transition-delay: 250ms;
-  opacity: 0;
-}
-
-#no-plugin {
-  padding: 20px;
-}
-
 /* TODO(estade): this should be in a shared location but I'm afraid of the
  * damage it could do. */
 [hidden] {
   display: none !important;
 }
 
-#overlay-layer {
-  -webkit-transition: opacity 200ms linear;
-  /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay +
-   *     pluginFadeOutTransitionDuration = 350ms */
-  -webkit-transition-delay: 350ms;
-  -webkit-user-select: none;
-  background: #ccc;
-  height: 100%;
-  margin: 0;
-  opacity: 1;
-  position: absolute;
-  width: 100%;
-}
-
-#overlay-layer.invisible {
-  /* overlayFadeOutTransitionDuration = 100ms */
-  -webkit-transition: opacity 100ms linear;
-  opacity: 0;
-  pointer-events: none;
-}
-
-#messages {
-  color: #404040;
-  font-size: 1.1em;
-  position: relative;
-  text-align: center;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-  top: 50%;
-}
-
 @-webkit-keyframes dancing-dots-jump {
   0% { top: 0; }
   55% { top: 0; }
   60% { top: -10px; }
   80% { top: 3px; }
   90% { top: -2px; }
   95% { top: 1px; }
   100% { top: 0; }
 }
 
-#loading {
-  -webkit-margin-end: -3px;
-}
-
-.message-with-dots span span {
+span.jumping-dots > span {
   -webkit-animation: dancing-dots-jump 1800ms infinite;
   padding: 1px;
   position: relative;
 }
 
-.message-with-dots span span:nth-child(2) {
+span.jumping-dots > span:nth-child(2) {
   -webkit-animation-delay: 100ms;
 }
 
-.message-with-dots span span:nth-child(3) {
+span.jumping-dots > span:nth-child(3) {
   -webkit-animation-delay: 300ms;
 }
 
-#error-action-area {
-  margin-top: 10px;
-}
-
 /* TODO(estade): unfork this code. */
 .button-strip {
 <if expr="not pp_ifdef('toolkit_views')">
   -webkit-box-direction: reverse;
 </if>
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
 
 #print-preview .button-strip button {
   -webkit-margin-start: 4px;
   display: block;
 }
+
+#link-container {
+  -webkit-box-flex: 1;
+}