Bug 778582 - Part 2. r=lucasr f=mfinkle
authorBrian Nicholson <bnicholson@mozilla.com>
Thu, 23 Aug 2012 00:06:17 -0700
changeset 105314 e106316f41e485ed04d63fafa6ebce0c9376cdc6
parent 105313 950379788e3365fb8bfdb06e4db3da42b3c8c625
child 105315 726f7f71fd458c1f8bb7b5df019a95e30ea7a28a
push id55
push usershu@rfrn.org
push dateThu, 30 Aug 2012 01:33:09 +0000
reviewerslucasr
bugs778582
milestone17.0a1
Bug 778582 - Part 2. r=lucasr f=mfinkle
mobile/android/chrome/content/aboutReaderContent.html
mobile/android/themes/core/aboutReader.css
mobile/android/themes/core/aboutReaderContent.css
mobile/android/themes/core/content.css
mobile/android/themes/core/jar.mn
--- a/mobile/android/chrome/content/aboutReaderContent.html
+++ b/mobile/android/chrome/content/aboutReaderContent.html
@@ -1,13 +1,15 @@
 <!doctype html>
 <html>
 <head>
   <!-- make links load outside of frame -->
   <base target="_parent" />
+
+  <link rel="stylesheet" href="chrome://browser/skin/aboutReaderContent.css" type="text/css"/>
 </head>
 <body>
   <div id="reader-header" class="header">
     <div id="reader-domain" class="domain"></div>
     <h1 id="reader-title"></h1>
     <div id="reader-credits" class="credits"></div>
   </div>
   <div id="reader-content" class="content"></div>
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -1,337 +1,30 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %include defines.inc
 
-@font-face {
-  font-family: 'OpenSansRegular';
-  src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+body {
+  font-family: "OpenSansRegular","Droid Sans",sans-serif;
 }
 
-@font-face {
-  font-family: 'OpenSansLight';
-  src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-html {
-  -moz-text-size-adjust: none;
-}
-
-body {
-  font-family: "OpenSansRegular","Droid Sans",sans-serif;
-  margin-top: 20px;
-  margin-bottom: 20px;
+#frame {
+  border: 0;
+  width: 100%;
 }
 
 .light {
   background-color: #ffffff;
-  color: #222222;
 }
 
 .dark {
   background-color: #000000;
-  color: #eeeeee;
-}
-
-.header {
-  text-align: left;
-  display: none;
-}
-
-.header > .domain {
-  margin-top: 10px;
-  padding-bottom: 10px;
-  border-bottom: 2px solid; 
-}
-
-.header > h1 {
-  font-family: "OpenSansLight","Droid Sans",sans-serif;
-  font-weight: normal;
-  line-height: 1.1em;
-  width: 100%;
-  margin: 0px;
-  margin-top: 32px;
-  margin-bottom: 16px;
-  padding: 0px;
-}
-
-.header > .credits {
-  padding: 0px;
-  margin: 0px;
-  margin-bottom: 32px;
-}
-
-.light > .header > .domain {
-  color: #ee7600;
-  border-bottom-color: #d0d0d0; 
-}
-
-.light > .header > h1 {
-  color: #222222;
-}
-
-.light > .header > .credits {
-  color: #898989;
-}
-
-.dark > .header > .domain {
-  color: #ff9400;
-  border-bottom-color: #777777; 
-}
-
-.dark > .header > h1 {
-  color: #eeeeee;
-}
-
-.dark > .header > .credits {
-  color: #aaaaaa;
-}
-
-.font-size1 > .header > h1 {
-  font-size: 23px;
-}
-
-.font-size2 > .header > h1 {
-  font-size: 25px;
-}
-
-.font-size3 > .header > h1 {
-  font-size: 27px;
-}
-
-.font-size4 > .header > h1 {
-  font-size: 29px;
-}
-
-.font-size5 > .header > h1 {
-  font-size: 31px;
-}
-
-.font-size6 > .header > h1 {
-  font-size: 33px;
-}
-
-.font-size7 > .header > h1 {
-  font-size: 35px;
-}
-
-/* This covers caption, domain, and credits
-   texts in the reader UI */
-.font-size1 > .content .wp-caption-text,
-.font-size1 > .content figcaption,
-.font-size1 > .header > .domain,
-.font-size1 > .header > .credits {
-  font-size: 6px;
-}
-
-.font-size2 > .content .wp-caption-text,
-.font-size2 > .content figcaption,
-.font-size2 > .header > .domain,
-.font-size2 > .header > .credits {
-  font-size: 8px;
-}
-
-.font-size3 > .content .wp-caption-text,
-.font-size3 > .content figcaption,
-.font-size3 > .header > .domain,
-.font-size3 > .header > .credits {
-  font-size: 11px;
-}
-
-.font-size4 > .content .wp-caption-text,
-.font-size4 > .content figcaption,
-.font-size4 > .header > .domain,
-.font-size4 > .header > .credits {
-  font-size: 13px;
-}
-
-.font-size5 > .content .wp-caption-text,
-.font-size5 > .content figcaption,
-.font-size5 > .header > .domain,
-.font-size5 > .header > .credits {
-  font-size: 15px;
-}
-
-.font-size6 > .content .wp-caption-text,
-.font-size6 > .content figcaption,
-.font-size6 > .header > .domain,
-.font-size6 > .header > .credits {
-  font-size: 17px;
-}
-
-.font-size7 > .content .wp-caption-text,
-.font-size7 > .content figcaption,
-.font-size7 > .header > .domain,
-.font-size7 > .header > .credits {
-  font-size: 19px;
-}
-
-.content {
-  display: none;
-}
-
-.content a {
-  text-decoration: underline !important;
-  font-weight: normal;
-}
-
-.light > .content a,
-.light > .content a:visited,
-.light > .content a:hover,
-.light > .content a:active {
-  color: #ee6700 !important;
-}
-
-.dark > .content a,
-.dark > .content a:visited,
-.dark > .content a:hover,
-.dark > .content a:active {
-  color: #ff9400 !important;
-}
-
-.content * {
-  max-width: 100% !important;
-  height: auto !important;
-}
-
-.content p {
-  line-height: 1.4em !important;
-  margin: 0px !important;
-  margin-bottom: 20px !important;
-}
-
-/* Covers all images showing edge-to-edge using a 
-   an optional caption text */
-.content .wp-caption,
-.content figure {
-  display: block !important;
-  width: 100% !important;
-  margin: 0px !important;
-  margin-bottom: 32px !important;
-}
-
-/* Images marked to be shown edge-to-edge with an
-   optional captio ntext */
-.content p > img:only-child,
-.content p > a:only-child > img:only-child,
-.content .wp-caption img,
-.content figure img {
-  max-width: none !important;
-  height: auto !important;
-  display: block !important;
-  margin-top: 0px !important;
-  margin-bottom: 32px !important;
-}
-
-/* If image is place inside one of these blocks
-   there's no need to add margin at the bottom */
-.content .wp-caption img,
-.content figure img {
-  margin-bottom: 0px !important;
-}
-
-/* Image caption text */
-.content .caption,
-.content .wp-caption-text,
-.content figcaption {
-  margin: 0px !important;
-  padding-top: 4px !important;
-}
-
-.light > .content .caption,
-.light > .content .wp-caption-text,
-.light > .content figcaption {
-  color: #898989;
-}
-
-.dark > .content .caption,
-.dark > .content .wp-caption-text,
-.dark > .content figcaption {
-  color: #aaaaaa;
-}
-
-/* Ensure all pre-formatted code inside the reader content
-   are properly wrapped inside content width */
-.content code,
-.content pre {
-  white-space: pre-wrap !important;
-  margin-bottom: 20px !important;
-}
-
-.content blockquote {
-  margin: 0px !important;
-  margin-bottom: 20px !important;
-  padding: 0px !important;
-  padding-left: 16px !important;
-  border: 0px !important;
-  border-left: 2px solid !important;
-}
-
-.light > .content blockquote {
-  color: #898989 !important;
-  border-left-color: #d0d0d0 !important;
-}
-
-.dark > .content blockquote {
-  color: #aaaaaa !important;
-  border-left-color: #777777 !important;
-}
-
-.content ul,
-.content ol {
-  margin: 0px !important;
-  margin-bottom: 20px !important;
-  padding: 0px !important;
-  line-height: 1.5em;
-}
-
-.content ul {
-  padding-left: 30px !important;
-  list-style: disk !important;
-}
-
-.content ol {
-  padding-left: 35px !important;
-  list-style: decimal !important;
-}
-
-.font-size1 > .content {
-  font-size: 10px !important;
-}
-
-.font-size2 > .content {
-  font-size: 12px !important;
-}
-
-.font-size3 > .content {
-  font-size: 14px !important;
-}
-
-.font-size4 > .content {
-  font-size: 16px !important;
-}
-
-.font-size5 > .content {
-  font-size: 18px !important;
-}
-
-.font-size6 > .content {
-  font-size: 20px !important;
-}
-
-.font-size7 > .content {
-  font-size: 22px !important;
 }
 
 .toolbar {
   font-family: "Droid Sans",helvetica,arial,clean,sans-serif;
   -moz-transition-property: visibility opacity;
   -moz-transition-duration: 0.7s;
   visibility: visible;
   opacity: 1.0;
new file mode 100644
--- /dev/null
+++ b/mobile/android/themes/core/aboutReaderContent.css
@@ -0,0 +1,309 @@
+html {
+  -moz-text-size-adjust: none;
+}
+
+body {
+  font-family: "OpenSansRegular","Droid Sans",sans-serif;
+  margin: 0;
+  padding-top: 20px;
+  padding-bottom: 20px;
+} 
+
+.light {
+  color: #222222;
+}
+
+.dark {
+  color: #eeeeee;
+}
+
+.header {
+  text-align: left;
+  display: none;
+}
+
+.header > .domain {
+  margin-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid; 
+}
+
+.header > h1 {
+  font-family: "OpenSansLight","Droid Sans",sans-serif;
+  font-weight: normal;
+  line-height: 1.1em;
+  width: 100%;
+  margin: 0px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  padding: 0px;
+}
+
+.header > .credits {
+  padding: 0px;
+  margin: 0px;
+  margin-bottom: 32px;
+}
+
+.light > .header > .domain {
+  color: #ee7600;
+  border-bottom-color: #d0d0d0; 
+}
+
+.light > .header > h1 {
+  color: #222222;
+}
+
+.light > .header > .credits {
+  color: #898989;
+}
+
+.dark > .header > .domain {
+  color: #ff9400;
+  border-bottom-color: #777777; 
+}
+
+.dark > .header > h1 {
+  color: #eeeeee;
+}
+
+.dark > .header > .credits {
+  color: #aaaaaa;
+}
+
+.font-size1 > .header > h1 {
+  font-size: 23px;
+}
+
+.font-size2 > .header > h1 {
+  font-size: 25px;
+}
+
+.font-size3 > .header > h1 {
+  font-size: 27px;
+}
+
+.font-size4 > .header > h1 {
+  font-size: 29px;
+}
+
+.font-size5 > .header > h1 {
+  font-size: 31px;
+}
+
+.font-size6 > .header > h1 {
+  font-size: 33px;
+}
+
+.font-size7 > .header > h1 {
+  font-size: 35px;
+}
+
+/* This covers caption, domain, and credits
+   texts in the reader UI */
+.font-size1 > .content .wp-caption-text,
+.font-size1 > .content figcaption,
+.font-size1 > .header > .domain,
+.font-size1 > .header > .credits {
+  font-size: 6px;
+}
+
+.font-size2 > .content .wp-caption-text,
+.font-size2 > .content figcaption,
+.font-size2 > .header > .domain,
+.font-size2 > .header > .credits {
+  font-size: 8px;
+}
+
+.font-size3 > .content .wp-caption-text,
+.font-size3 > .content figcaption,
+.font-size3 > .header > .domain,
+.font-size3 > .header > .credits {
+  font-size: 11px;
+}
+
+.font-size4 > .content .wp-caption-text,
+.font-size4 > .content figcaption,
+.font-size4 > .header > .domain,
+.font-size4 > .header > .credits {
+  font-size: 13px;
+}
+
+.font-size5 > .content .wp-caption-text,
+.font-size5 > .content figcaption,
+.font-size5 > .header > .domain,
+.font-size5 > .header > .credits {
+  font-size: 15px;
+}
+
+.font-size6 > .content .wp-caption-text,
+.font-size6 > .content figcaption,
+.font-size6 > .header > .domain,
+.font-size6 > .header > .credits {
+  font-size: 17px;
+}
+
+.font-size7 > .content .wp-caption-text,
+.font-size7 > .content figcaption,
+.font-size7 > .header > .domain,
+.font-size7 > .header > .credits {
+  font-size: 19px;
+}
+
+.content {
+  display: none;
+}
+
+.content a {
+  text-decoration: underline !important;
+  font-weight: normal;
+}
+
+.light > .content a,
+.light > .content a:visited,
+.light > .content a:hover,
+.light > .content a:active {
+  color: #ee6700 !important;
+}
+
+.dark > .content a,
+.dark > .content a:visited,
+.dark > .content a:hover,
+.dark > .content a:active {
+  color: #ff9400 !important;
+}
+
+.content * {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+.content p {
+  line-height: 1.4em !important;
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+}
+
+/* Covers all images showing edge-to-edge using a 
+   an optional caption text */
+.content .wp-caption,
+.content figure {
+  display: block !important;
+  width: 100% !important;
+  margin: 0px !important;
+  margin-bottom: 32px !important;
+}
+
+/* Images marked to be shown edge-to-edge with an
+   optional captio ntext */
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+  max-width: none !important;
+  height: auto !important;
+  display: block !important;
+  margin-top: 0px !important;
+  margin-bottom: 32px !important;
+}
+
+/* If image is place inside one of these blocks
+   there's no need to add margin at the bottom */
+.content .wp-caption img,
+.content figure img {
+  margin-bottom: 0px !important;
+}
+
+/* Image caption text */
+.content .caption,
+.content .wp-caption-text,
+.content figcaption {
+  margin: 0px !important;
+  padding-top: 4px !important;
+}
+
+.light > .content .caption,
+.light > .content .wp-caption-text,
+.light > .content figcaption {
+  color: #898989;
+}
+
+.dark > .content .caption,
+.dark > .content .wp-caption-text,
+.dark > .content figcaption {
+  color: #aaaaaa;
+}
+
+/* Ensure all pre-formatted code inside the reader content
+   are properly wrapped inside content width */
+.content code,
+.content pre {
+  white-space: pre-wrap !important;
+  margin-bottom: 20px !important;
+}
+
+.content blockquote {
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+  padding: 0px !important;
+  padding-left: 16px !important;
+  border: 0px !important;
+  border-left: 2px solid !important;
+}
+
+.light > .content blockquote {
+  color: #898989 !important;
+  border-left-color: #d0d0d0 !important;
+}
+
+.dark > .content blockquote {
+  color: #aaaaaa !important;
+  border-left-color: #777777 !important;
+}
+
+.content ul,
+.content ol {
+  margin: 0px !important;
+  margin-bottom: 20px !important;
+  padding: 0px !important;
+  line-height: 1.5em;
+}
+
+.content ul {
+  padding-left: 30px !important;
+  list-style: disk !important;
+}
+
+.content ol {
+  padding-left: 35px !important;
+  list-style: decimal !important;
+}
+
+.font-size1 > .content {
+  font-size: 10px !important;
+}
+
+.font-size2 > .content {
+  font-size: 12px !important;
+}
+
+.font-size3 > .content {
+  font-size: 14px !important;
+}
+
+.font-size4 > .content {
+  font-size: 16px !important;
+}
+
+.font-size5 > .content {
+  font-size: 18px !important;
+}
+
+.font-size6 > .content {
+  font-size: 20px !important;
+}
+
+.font-size7 > .content {
+  font-size: 22px !important;
+}
+
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -3,16 +3,30 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %include defines.inc
 
 @namespace url("http://www.w3.org/1999/xhtml");
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+@font-face {
+  font-family: 'OpenSansRegular';
+  src: url('chrome://browser/skin/fonts/opensans-regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'OpenSansLight';
+  src: url('chrome://browser/skin/fonts/opensans-light.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 ::-moz-selection {
   background-color: @color_background_highlight@;
   color: @color_text_highlight@;
 }
 
 /* Style the scrollbars */
 html xul|scrollbar {
   display: none;
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -7,16 +7,17 @@
 chrome.jar:
 % skin browser classic/1.0 %skin/
   skin/aboutPage.css                        (aboutPage.css)
   skin/about.css                            (about.css)
   skin/aboutAddons.css                      (aboutAddons.css)
   skin/aboutApps.css                        (aboutApps.css)
 * skin/aboutDownloads.css                   (aboutDownloads.css)
 * skin/aboutReader.css                      (aboutReader.css)
+  skin/aboutReaderContent.css               (aboutReaderContent.css)
 * skin/browser.css                          (browser.css)
 * skin/content.css                          (content.css)
   skin/config.css                           (config.css)
   skin/touchcontrols.css                    (touchcontrols.css)
   skin/netError.css                         (netError.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css