Update reader mode viewer according to specs

components/dom_distiller/core/css/distilledpage.css

 /* Copyright 2014 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. */
 
 /* Set the global 'box-sizing' state to 'border-box'.
  * *::after and *::before used to select pseudo-elements not selectable by *. */
 
 *,
 *::after,
 *::before {
@@ skipping 50 matching lines @@
 
 /* Remove most spacing between table cells. */
 
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 td,
 th {
-  padding: 0;
+  padding: 0.1rem;
 }
 
 /* Base typography. */
 
 html {
   font-size: 14px;
   height: 100%;
 }
 
 body {
   height: 100%;
   line-height: 1.4;
   margin: 0px auto;
   text-rendering: optimizeLegibility;
   transition-property: color, background-color;
   transition-duration: 0.5s;
   transition-timing-function: ease;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
 /* Classes for light, dark and sepia themes.
  * Must agree with classes returned by useTheme() in dom_distiller_viewer.js
  * and with CSS class constants in viewer.cc */
 
 .light {

[cjhopman, 2015/06/19 23:21:18]

These themes don't seem to be in line with the recommendations at
http://www.google.com/design/spec/style/color.html

[wychen, 2015/06/23 18:41:29]

Updated, but not exactly the same as the recommendations.

-  color: #333;
+  color: #424242;
   background-color: #FFF;
 }
 
 .dark {
-  color: #DDD;
+  color: #E0E0E0;
   background-color: #000;
 }
 
 .sepia {
   color: #000;
   background-color: rgb(203, 173, 141);
 }
 
 .serif {
   font-family: serif;
 }
 
 .sans-serif {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
 }
 
 .monospace {
   font-family: monospace;
 }
 
 /* Define vertical rhythm (baseline grid of 4px). */
 
 blockquote,
 caption,
 code,
 dd,
 dl,
 fieldset,
 figure,
 form,
 hr,
 legend,
 ol,
 p,
 pre,
 q,
 table,
 td,
 th,
 ul {
-  margin-bottom: 1rem;
+  margin-bottom: 1.143rem;
 }
 
+h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   line-height: 1.296;
-  margin-bottom: 0.444rem;
+  margin: 1em 0;
 }
 
 /* Content. */
 
 /* Margins for Show Original link. */
 
 #closeReaderView {
   background-color: #FFFFFF;
   border-top: 1px solid #E0E0E0;
   color: #4285F4;
   flex: 0 0 auto;
-  font-family: 'Roboto-Medium', 'Open Sans', sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
   line-height: 14px;
-  margin-top: 24px;
   padding: 24px 16px;
   font-size: 14px;
   text-align: right;
   text-decoration: none;
   text-transform: uppercase;
   width: 100%;
 }
 
 #content {
-  margin: 0.2rem 2.2%;
+  margin: 24px 16px 24px 16px;
 }
 
 #mainContent {
   flex: 1 1 auto;
   margin: 0px auto;
-  max-width: 800px;
+  max-width: 45em;
   width: 100%;
 }
 
 #articleHeader {
-  background-color: rgb(73, 73, 73);
-  color: white;
-  min-height: 90px;
+  margin-top: 24px;
   width: 100%;
 }
 
-#titleCollapse  {
-  display: block;
-  overflow: hidden;
+#titleHolder {
+  font-size: 1.714rem;
+  line-height: 1.333;
+  margin: 0 16px;
 }
 
-#titleCollapse .verticalCenterOuter {
-  min-height: 90px;
-}
-
-#titleHolder {
-  padding: 10px 30px;
-}
-
-.verticalCenterOuter {
-  display: table;
-  height: 100%;
-}
-
-.verticalCenterInner {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-
 /* Link colors for light, dark and sepia themes */
 
 .light a:link,
 .sepia a:link {
   color: #55F;
 }
 
 .dark a:link {
   color: #88F;
 }
 
 .light a:visited,
 .sepia a:visited {
   color: #902290;
 }
 
 .dark a:visited {
   color: #D872D8;
 }
 
 blockquote {
-  border-left: 4px solid #eee;
+  border-left: 4px solid #888;
   padding-left: 1em;
 }
 
 cite {
-  opacity: .54;
+  opacity: .8;
   font-style: italic;
 }
 
 hr {
   opacity: .5;
   border-style: solid;
   height: 1px 0 0 0;
   width: 75%;
 }
 
-h1 {
-  font-size: 1.7rem;
-  line-height: 1.296;
-  margin-bottom: 0.444rem;
-}
 
 q {
   opacity: .8;
   display:block;
   font-style: italic;
   font-weight: 600;
   line-height: 1.444;
 }
 
 embed,
 img,
 object,
 video {
   max-width: 100%;
 }
 
 /* TODO(sunangel): make images zoomable. */
 
 img {
   display: block;
   height: auto;
-  margin: 0 auto 0.6rem auto;
+  margin: 0.6rem auto 0.6rem auto;
 }
 
 /* TODO(nyquist): set these classes directly in the dom distiller. */
 
 embed+[class*='caption'],
 figcaption,
 img+[class*='caption'],
 object+[class*='caption'],
 video+[class*='caption'] {
-  opacity: .54;
+  opacity: .8;
   display: table;
-  font-style: italic;
-  margin: 0 auto;
+  margin-bottom: 1rem;
+  font-size: 0.857rem;
+  line-height: 1.667;
 }
 
 ol,
 ul {
   margin-left: 1.296rem;
 }
 
 .light code,

[cjhopman, 2015/06/19 23:21:18]

Should the colorscheme stuff be all together?

[wychen, 2015/06/23 18:41:29]

Done.

-.light pre,
+.light pre {
+  background-color: #EEE;
+  border-color: #AAA;
+}
+
 .sepia code,
 .sepia pre {
-  background-color: #f8f8f8;
-  border: 1px solid #eee;
-  border-radius: 2px;
+  background-color: rgb(217, 196, 175);
+  border-color: #AAA;
 }
 
 .dark code,
 .dark pre {
   background-color: #333;
-  border: 1px solid #555;
+  border-color: #555;
+}
+
+code, pre {
+  border: 1px solid;
   border-radius: 2px;
 }
 
 pre code {
   border: none;
-  padding: 0;
 }
 
 pre {
   line-height: 1.296;
-  overflow-x: scroll;
   padding: .5em;
+  white-space: pre-wrap;
 }
 
 .hidden {
   display: none;
 }
 
 /* Footer feedback form. */
 #contentWrap {
   display: flex;
   flex-flow: column;
@@ skipping 490 matching lines @@
   border-color: rgb(250,36,36);
 }
 
 #loader.red .circle.red .mask.first .mover {
   background-color: rgb(33,89,189);
 }
 
 #loader.red .circle.red .mask.second .mover {
   background-color: rgb(250,36,36);
 }