Theme Preferences for Distilled Pages

components/dom_distiller/core/css/distilledpage.css

Index: components/dom_distiller/core/css/distilledpage.css
diff --git a/components/dom_distiller/core/css/distilledpage.css b/components/dom_distiller/core/css/distilledpage.css
index 211708b9e762d39f39e0d823f9f8ee7ce17ea6ae..ea664a90590d9b39370325c429c1f7157ab168a0 100644
--- a/components/dom_distiller/core/css/distilledpage.css
+++ b/components/dom_distiller/core/css/distilledpage.css
@@ -72,166 +72,59 @@ th {
 }
 
 /* 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). */
-
-blockquote,
-caption,
-code,
-dd,
-dl,
-fieldset,
-figure,
-form,
-hr,
-legend,
-ol,
-p,
-pre,
-q,
-table,
-td,
-th,
-ul {
-  margin-bottom: 1rem;
-}
-
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.296rem;
-  margin-bottom: 0.444rem;
-}
-
-/* Content. */
-
-/* Margins for Show Original link. */
-
-#showOriginal {
-  margin: auto 1.296rem 1.296rem 1.296rem;
-}
-
-#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;
+/* 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;
 }
 
-q {
-  color: #222;
-  display:block;
-  font-size: 1.5rem;
-  font-style: italic;
-  font-weight: 600;
-  line-height: 1.444;
+.highcontrast {
+  color: #FFF;
+  background-color: #000;
 }
 
-embed,
-img,
-object,
-video {
-  max-width: 100%;
+.sepia {
+  color: #333;
+  background-color: #704214;
 }
 
-/* TODO(sunangel): make images zoomable. */
-
+/* Don't let images bleed out of viewport. */
 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;
+  max-width: 100%;
 }
-
-ol,
-ul {
-  margin-left: 1.296rem;
+/* Margin */
+.margin-x-narrow {
+  width: 95%;
 }
-
-code,
-pre {
-  background-color: #f8f8f8;
-  border: 1px solid #eee;
-  border-radius: 2px;
+.margin-narrow {
+  width: 85%;
 }
-
-code {
-  display: block;
-  padding: .4444rem;
+.margin-medium {
+  width: 75%;
 }
-
-pre code {
-  border: none;
-  padding: 0;
+.margin-wide {
+  width: 55%;
 }
-
-pre {
-  line-height: 1.296rem;
-  overflow-x: scroll;
-  padding: .5em;
+.margin-x-wide {
+  width: 35%;
 }
-
-/* TODO(sunangel): Create loading indicator graphic to replace "Loading...". */
-#loadingIndicator {
-  display: table;
-  margin: 0 auto;
+/* Override html styling attributes */
+table,
+td,
+tr {
+  background-color: transparent !important;
 }
-
 .hidden {
-  display: hidden;
+  display: none;
+}
+.visible {
+  display: block;
 }