Theme Preferences for Distilled Pages

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 psuedo-elements not selectable by *. */
 
 *,
 *::after,
 *::before {
@@ skipping 53 matching lines @@
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 td,
 th {
   padding: 0;
 }
 
 /* Base typography. */

[nyquist, 2014/06/26 20:39:58]

I don't think this is rebased correctly. It seems like your CL is deleting all
the new CSS code.

[smaslo, 2014/06/27 18:33:17]

I copied the file from master and added then readded my changes so the CSS.

On 2014/06/26 20:39:58, nyquist wrote:

-
 body,
 html {
-  color: #333;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   line-height: 1.4;
-  text-rendering: optimizeLegibility;
-  overflow-x: hidden;
 }
 
-/* Define vertical rhythm (baseline grid of 4px). */
+/* Classes for highcontrast, sepia, and normal */
+.normal {

[nyquist, 2014/06/26 20:39:58]

How about .light or .day?
And then correspondingly .dark or .night?

My concern is that very-dark-grey-on-white is also kind of high contrast in a
sense.

[smaslo, 2014/06/27 18:33:17]

Done.

+  color: #333;
+  background-color: #FFF;
+}
 
-blockquote,
-caption,
-code,
-dd,
-dl,
-fieldset,
-figure,
-form,
-hr,
-legend,
-ol,
-p,
-pre,
-q,
+.highcontrast {
+  color: #FFF;
+  background-color: #000;
+}
+
+.sepia {
+  color: #333;
+  background-color: #704214;
+}
+
+/* Don't let images bleed out of viewport. */
+img {
+  height: auto;
+  max-width: 100%;
+}
+/* Margin */
+.margin-x-narrow {
+  width: 95%;
+}
+.margin-narrow {
+  width: 85%;
+}
+.margin-medium {
+  width: 75%;
+}
+.margin-wide {
+  width: 55%;
+}
+.margin-x-wide {
+  width: 35%;
+}
+/* Override html styling attributes */
 table,
 td,
-th,
-ul {
-  margin-bottom: 1rem;
+tr {
+  background-color: transparent !important;
 }
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.296rem;
-  margin-bottom: 0.444rem;
+.hidden {
+  display: none;
 }
-
-/* Content. */
-
-/* Margins for Show Original link. */
-
-#showOriginal {
-  margin: auto 1.296rem 1.296rem 1.296rem;
+.visible {
+  display: block;
 }
-
-#content {
-  margin-top: 1.296rem;
-}
-
-/* Main margins. */
-
-#mainContent {
-  margin: 1.296rem 1.296rem auto;
-}
-
-a {
-  color: #222;
-}
-
-blockquote {
-  border-left: 4px solid #eee;
-  padding-left: 1em;
-}
-
-cite {
-  color: rgba(0, 0, 0, .54);
-  font-style: italic;
-}
-
-hr {
-  background-color: #e4dfdf;
-  border: none;
-  height: 1px;
-  margin: inherit auto;
-  width: 75%;
-}
-
-h1 {
-  font-size: 1.7rem;
-  line-height: 1.9rem;
-  margin-bottom: 0.444rem;
-}
-
-q {
-  color: #222;
-  display:block;
-  font-size: 1.5rem;
-  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;
-}
-
-/* TODO(nyquist): set these classes directly in the dom distiller. */
-
-embed+[class*='caption'],
-figcaption,
-img+[class*='caption'],
-object+[class*='caption'],
-video+[class*='caption'] {
-  color: rgba(0,0,0,.54);
-  display: table;
-  font-style: italic;
-  margin: 0 auto;
-}
-
-ol,
-ul {
-  margin-left: 1.296rem;
-}
-
-code,
-pre {
-  background-color: #f8f8f8;
-  border: 1px solid #eee;
-  border-radius: 2px;
-}
-
-code {
-  display: block;
-  padding: .4444rem;
-}
-
-pre code {
-  border: none;
-  padding: 0;
-}
-
-pre {
-  line-height: 1.296rem;
-  overflow-x: scroll;
-  padding: .5em;
-}
-
-/* TODO(sunangel): Create loading indicator graphic to replace "Loading...". */
-#loadingIndicator {
-  display: table;
-  margin: 0 auto;
-}
-
-.hidden {
-  display: hidden;
-}