Print Preview: Changing the structure of the html/css.

chrome/browser/resources/print_preview/print_preview.css

 /* Copyright (c) 2011 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 {
-  background: white;
   display: -webkit-box;
   height: 100%;
   margin: 0;
   overflow: hidden;
 }
 
 #main {
   display: block;
-  margin-bottom: -49px;
-  min-height: 100%;
-}
-
-#main::before {
-  content: '';
-  display: block;
-  height: 72px;
-  padding-top: 14px;
-}
-
-body #main {
   margin-bottom: 0;
   min-height: 0;
-}
-
-body #main::after {
-  content: '';
-  display: block;
+  padding-top: 10px;
 }
 
 /* Layout: Sidebar */
 
 #sidebar {
   -webkit-user-select: none;
   border-right: 1px solid #a0a0a0;
-  background: white;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
-  position: relative;
   width: 310px;
-  z-index: 2000;
 }
 
 html[dir='rtl'] #sidebar {
   border-left: 1px solid #a0a0a0;
   border-right-width: 0;
 }
 
-#sidebar header {
-  width: 310px;
-}
-
-#sidebar header > h1 {
-  -webkit-padding-start: 16px;
-}
-
-#system-dialog-div {
-  -webkit-padding-start: 16px;
-  font-size: 13px;
-  line-height: 22px;
-}
-
 /* Header */
 
 header {
   -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .1);
-  background-clip: border-box;
   background-image: none,
                     -webkit-linear-gradient(#dcdcdc, #f0f0f0);
-  background-origin: border-box;
-  background-position: 80px 26px, 0 0;
-  background-repeat: no-repeat;
-  background-size: 26px, 100%;
   border-bottom: 1px solid rgba(255, 255, 255, .5);
-  display: block;
-  margin: 0 0 -73px 0;
-  min-height: 72px;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 1;
-}
-
-body header {
- position: relative;
 }
 
 header > h1 {
   -webkit-font-smoothing: antialiased;
-  -webkit-margin-start: -1px;
-  -webkit-padding-start: 118px;
+  -webkit-padding-start: 16px;
   color: #000;
   font-size: 26px;
   font-weight: 600;
   letter-spacing: -1px;
   margin: 0;
-  padding-top: 22px;
+  padding-top: 14px;
   text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
 }
 
-body header > h1 {
-  line-height: 32px;
-  padding-top: 14px;
+.two-column {
+  display: table-row;
+  font-size: 13px;
+  line-height: 22px;
 }
 
-.two-column {
+.right-column {
   -webkit-padding-end: 16px;
-  -webkit-padding-start: 118px;
-  font-size: 13px;
-  line-height: 22px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  max-width: 616px;
-  position: relative;
+  display: table-cell;
+  width: auto;
+}
+
+.two-column h1 {
+  -webkit-padding-start: 16px;
+  display: table-cell;
+  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;
 }
 
 #print-header {
   -webkit-padding-start: 16px;
   font-size: 13px;
   line-height: 22px;
   margin-bottom: 10px;
   margin-top: 10px;
-  max-width: 616px;
-  position: relative;
-}
-
-#destination-option {
-  -webkit-line-box-contain: block;
-  max-height: 22px;
 }
 
 p {
   -webkit-line-box-contain: block;
   margin: 0;
   margin-bottom: 10px;
 }
 
 h1 {
   color: #808080;
   font-size: 100%;
   font-weight: 300;
-  margin: 0;
-}
-
-.two-column h1 {
-  -webkit-margin-start: -118px;
-  -webkit-padding-end: 16px;
-  -webkit-padding-start: 16px;
-  display: inline-block;
-  float: left;
-  width: 86px;
-}
-
-html[dir='rtl'] .two-column h1 {
-  float:right;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid #dcdcdc;
-  height: 3px;
-  margin: 14px 0 10px 0;
-}
-
-hr.bigger {
-  margin-bottom: 20px;
-  margin-top: 24px;
-}
-
-hr.invisible {
-  visibility: hidden;
 }
 
 /* TODO(jhawkins): Remove this specialization once all WebUI shares the same
  * link-button styling.
  */
 #system-dialog-link {
-  -webkit-padding-start: 0;
+  -webkit-padding-start: 16px;
   -webkit-transition: text-shadow 150ms;
   color: #4080fa;
   outline: 0;
+  padding-top: 10px;
   text-decoration: none;
   text-shadow: 0 0 1px white;
 }
 
 #system-dialog-link:hover {
   text-shadow: 0 0 1px rgba(85, 143, 250, .75);
 }
 
 #system-dialog-link:active {
   color: #4080fa;
@@ skipping 293 matching lines @@
 
 span.hint.closing {
   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
   background: transparent;
   height: 0 !important;
   margin-bottom: 0;
   margin-top: 0;
   opacity: 0;
 }
 
-.option {
+.collapsible {
   -webkit-transition: color 200ms;
-  background: white;
-  display: block;
   height: 0;
-  margin-bottom: 0;
-  margin: 0;
   overflow: hidden;
 }
 
-.option.visible {
+.collapsible.visible {
   -webkit-animation-duration: 200ms;
   -webkit-animation-fill-mode: forwards;
   height: auto;
-  margin-bottom: -10px;
-  margin-top: 5px;
-  padding-bottom: 5px;
 }
 
-.option:not(.visible) + hr {
-  display: none;
-}
-
-.option.closing {
+.collapsible.closing {
   -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
-  background: transparent;
   height: 0 !important;
-  margin-bottom: 0;
-  margin-top: 0;
   opacity: 0;
 }
 
 
 select {
   -webkit-box-shadow: inset 0 1px 2px white,
                       0 1px 2px rgba(0, 0, 0, .2);
   -webkit-appearance: none;
   -webkit-padding-end: 20px;
   -webkit-padding-start: 14px;
@@ skipping 233 matching lines @@
   margin-top: 10px;
 }
 
 input[disabled] + label {
   color: gray;
 }
 
 #error-action-area {
   margin-top: 10px;
 }