--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -113,8 +113,414 @@ body.light > .container > .content block
color: #898989 !important;
border-left-color: #d0d0d0 !important;
}
body.dark > .container > .content blockquote {
color: #aaaaaa !important;
border-left-color: #777777 !important;
}
+
+#reader-message {
+ margin-top: 40px;
+ display: none;
+ text-align: center;
+ width: 100%;
+ font-size: 0.9em;
+}
+
+.header {
+ text-align: start;
+ display: none;
+}
+
+.domain,
+.credits {
+ font-size: 0.9em;
+ font-family: sans-serif;
+}
+
+.domain {
+ margin-top: 10px;
+ padding-bottom: 10px;
+ color: #00acff !important;
+ text-decoration: none;
+}
+
+.domain-border {
+ margin-top: 15px;
+ border-bottom: 1.5px solid #777777;
+ width: 50%;
+}
+
+.header > h1 {
+ font-size: 1.33em;
+ font-weight: 700;
+ 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;
+}
+
+/*======= Controls toolbar =======*/
+
+.toolbar {
+ font-family: sans-serif;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ bottom: 0;
+ list-style: none;
+ pointer-events: none;
+ transition: opacity 420ms linear;
+}
+
+.toolbar > * {
+ float: right;
+}
+
+.button {
+ width: 56px;
+ height: 56px;
+ display: block;
+ background-position: center;
+ background-size: 26px 16px;
+ background-repeat: no-repeat;
+ background-color: #0979D9;
+ border-radius: 10000px;
+ margin: 20px;
+ border: 0;
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
+}
+
+.button:active {
+ background-color: #086ACC;
+}
+
+/* Remove dotted border when button is focused */
+.button::-moz-focus-inner,
+.dropdown-popup > div > button::-moz-focus-inner {
+ border: 0;
+}
+
+.button[hidden],
+.toolbar[hidden] {
+ display: none;
+}
+
+.dropdown-toggle,
+#reader-popup {
+ pointer-events: auto;
+}
+
+.dropdown {
+ left: 0;
+ text-align: center;
+ display: inline-block;
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+}
+
+/*======= Font style popup =======*/
+
+.dropdown-popup {
+ position: absolute;
+ left: 0;
+ width: calc(100% - 30px);
+ margin: 15px;
+ z-index: 1000;
+ background: #EBEBF0;
+ visibility: hidden;
+ border: 0;
+ border-radius: 4px;
+ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
+ -moz-user-select: none;
+}
+
+/* Only used on desktop */
+.dropdown-popup > hr,
+.dropdown-arrow,
+#font-type-buttons > button > .name,
+#content-width-buttons,
+#line-height-buttons {
+ display: none;
+}
+
+.open > .dropdown-popup {
+ visibility: visible;
+ bottom: 0;
+}
+
+#font-type-buttons,
+#font-size-buttons,
+#color-scheme-buttons {
+ display: flex;
+ flex-direction: row;
+}
+
+#font-type-buttons > button,
+#color-scheme-buttons > button {
+ text-align: center;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button {
+ width: 50%;
+ background-color: transparent;
+ border: 0;
+}
+
+#font-type-buttons > button {
+ font-size: 24px;
+ color: #AFB1B3;
+ padding: 15px 0;
+}
+
+#font-type-buttons > button:active,
+#font-type-buttons > button.selected {
+ color: #222222;
+}
+
+#font-size-sample {
+ flex: 0;
+ font-size: 24px;
+ color: #000000;
+ margin: 0 30px;
+ padding: 0 10px;
+}
+
+.serif-button {
+ font-family: serif;
+}
+
+.minus-button,
+.plus-button {
+ background-color: transparent;
+ border: 0;
+ height: 60px;
+ background-size: 18px 18px;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.minus-button {
+ background-size: 24px 6px;
+ margin-left: 50px;
+ padding: 0 5px;
+}
+
+.plus-button {
+ background-size: 24px 24px;
+ margin-right: 50px;
+ padding: 0 5px;
+}
+
+#color-scheme-buttons > button {
+ width: 33%;
+ border-radius: 4px;
+ border: 1px solid #BFBFBF;
+ padding: 10px;
+ margin: 15px 10px;
+ font-size: 14px;
+}
+
+#color-scheme-buttons > button:active,
+#color-scheme-buttons > button.selected {
+ border: 2px solid #0A84FF;
+}
+
+.dark-button {
+ color: #eeeeee;
+ background-color: #333333;
+}
+
+.auto-button {
+ color: #000000;
+ background-color: transparent;
+}
+
+.light-button {
+ color: #333333;
+ background-color: #ffffff;
+}
+
+/*======= Toolbar icons =======*/
+
+/* desktop-only controls */
+.close-button {
+ display: none;
+}
+
+.style-button {
+ background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
+}
+
+.minus-button {
+ background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
+}
+
+.plus-button {
+ background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
+}
+
+@media screen and (min-resolution: 2dppx) {
+ .style-button {
+ background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
+ }
+
+ .minus-button {
+ background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
+ }
+
+ .plus-button {
+ background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
+ }
+}
+
+@media screen and (min-resolution: 3dppx) {
+ .style-button {
+ background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
+ }
+
+ .minus-button {
+ background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
+ }
+
+ .plus-button {
+ background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
+ }
+}
+
+@media screen and (min-width: 960px) {
+ .dropdown-popup {
+ width: 350px;
+ left: auto;
+ right: 0;
+ }
+}
+
+/*======= Article content =======*/
+
+/* Note that any class names from the original article that we want to match on
+ * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that
+ * Readability.js doesn't strip them out */
+
+#moz-reader-content {
+ display: none;
+ font-size: 1em;
+}
+
+#moz-reader-content a {
+ text-decoration: underline !important;
+ font-weight: normal;
+}
+
+#moz-reader-content a,
+#moz-reader-content a:visited,
+#moz-reader-content a:hover,
+#moz-reader-content a:active {
+ color: #00acff !important;
+}
+
+#moz-reader-content * {
+ max-width: 100% !important;
+ height: auto !important;
+}
+
+#moz-reader-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 */
+#moz-reader-content .wp-caption,
+#moz-reader-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 */
+#moz-reader-content p > img:only-child,
+#moz-reader-content p > a:only-child > img:only-child,
+#moz-reader-content .wp-caption img,
+#moz-reader-content figure img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Account for body padding to make image full width */
+#moz-reader-content img[moz-reader-full-width] {
+ width: calc(100% + 40px);
+ margin-left: -20px;
+ margin-right: -20px;
+ max-width: none !important;
+}
+
+/* Image caption text */
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+ font-size: 0.9em;
+ font-family: sans-serif;
+ margin: 0px !important;
+ padding-top: 4px !important;
+}
+
+/* Ensure all pre-formatted code inside the reader content
+ are properly wrapped inside content width */
+#moz-reader-content code,
+#moz-reader-content pre {
+ white-space: pre-wrap !important;
+ margin-bottom: 20px !important;
+}
+
+#moz-reader-content blockquote {
+ margin: 0px !important;
+ margin-bottom: 20px !important;
+ padding: 0px !important;
+ padding-inline-start: 16px !important;
+ border: 0px !important;
+ border-left: 2px solid !important;
+}
+
+#moz-reader-content ul,
+#moz-reader-content ol {
+ margin: 0px !important;
+ margin-bottom: 20px !important;
+ padding: 0px !important;
+ line-height: 1.5em;
+}
+
+#moz-reader-content ul {
+ padding-inline-start: 30px !important;
+ list-style: disc !important;
+}
+
+#moz-reader-content ol {
+ padding-inline-start: 35px !important;
+ list-style: decimal !important;
+}
+
+/* Hide elements with common "hidden" class names */
+#moz-reader-content .visually-hidden,
+#moz-reader-content .visuallyhidden,
+#moz-reader-content .hidden,
+#moz-reader-content .invisible,
+#moz-reader-content .sr-only {
+ display: none;
+}
deleted file mode 100644
--- a/mobile/android/themes/core/aboutReaderContent.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/* 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/. */
-
-#moz-reader-content {
- display: none;
- font-size: 1em;
-}
-
-a {
- text-decoration: underline !important;
- font-weight: normal;
-}
-
-a,
-a:visited,
-a:hover,
-a:active {
- color: #00acff !important;
-}
-
-* {
- max-width: 100% !important;
- height: auto !important;
-}
-
-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 */
-.wp-caption,
-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 */
-p > img:only-child,
-p > a:only-child > img:only-child,
-.wp-caption img,
-figure img {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-/* Account for body padding to make image full width */
-img[moz-reader-full-width] {
- width: calc(100% + 40px);
- margin-left: -20px;
- margin-right: -20px;
- max-width: none !important;
-}
-
-/* Image caption text */
-.caption,
-.wp-caption-text,
-figcaption {
- font-size: 0.9em;
- font-family: sans-serif;
- margin: 0px !important;
- padding-top: 4px !important;
-}
-
-/* Ensure all pre-formatted code inside the reader content
- are properly wrapped inside content width */
-code,
-pre {
- white-space: pre-wrap !important;
- margin-bottom: 20px !important;
-}
-
-blockquote {
- margin: 0px !important;
- margin-bottom: 20px !important;
- padding: 0px !important;
- padding-inline-start: 16px !important;
- border: 0px !important;
- border-left: 2px solid !important;
-}
-
-ul,
-ol {
- margin: 0px !important;
- margin-bottom: 20px !important;
- padding: 0px !important;
- line-height: 1.5em;
-}
-
-ul {
- padding-inline-start: 30px !important;
- list-style: disc !important;
-}
-
-ol {
- padding-inline-start: 35px !important;
- list-style: decimal !important;
-}
-
-/* Hide elements with common "hidden" class names */
-.visually-hidden,
-.visuallyhidden,
-.hidden,
-.invisible,
-.sr-only {
- display: none;
-}
deleted file mode 100644
--- a/mobile/android/themes/core/aboutReaderControls.css
+++ /dev/null
@@ -1,292 +0,0 @@
-/* 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/. */
-
-#reader-message {
- margin-top: 40px;
- display: none;
- text-align: center;
- width: 100%;
- font-size: 0.9em;
-}
-
-.header {
- text-align: start;
- display: none;
-}
-
-.domain,
-.credits {
- font-size: 0.9em;
- font-family: sans-serif;
-}
-
-.domain {
- margin-top: 10px;
- padding-bottom: 10px;
- color: #00acff !important;
- text-decoration: none;
-}
-
-.domain-border {
- margin-top: 15px;
- border-bottom: 1.5px solid #777777;
- width: 50%;
-}
-
-.header > h1 {
- font-size: 1.33em;
- font-weight: 700;
- 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;
-}
-
-/*======= Controls toolbar =======*/
-
-.toolbar {
- font-family: sans-serif;
- position: fixed;
- width: 100%;
- left: 0;
- margin: 0;
- padding: 0;
- bottom: 0;
- list-style: none;
- pointer-events: none;
- transition: opacity 420ms linear;
-}
-
-.toolbar > * {
- float: right;
-}
-
-.button {
- width: 56px;
- height: 56px;
- display: block;
- background-position: center;
- background-size: 26px 16px;
- background-repeat: no-repeat;
- background-color: #0979D9;
- border-radius: 10000px;
- margin: 20px;
- border: 0;
- box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
-}
-
-.button:active {
- background-color: #086ACC;
-}
-
-/* Remove dotted border when button is focused */
-.button::-moz-focus-inner,
-.dropdown-popup > div > button::-moz-focus-inner {
- border: 0;
-}
-
-.button[hidden],
-.toolbar[hidden] {
- display: none;
-}
-
-.dropdown-toggle,
-#reader-popup {
- pointer-events: auto;
-}
-
-.dropdown {
- left: 0;
- text-align: center;
- display: inline-block;
- list-style: none;
- margin: 0px;
- padding: 0px;
-}
-
-/*======= Font style popup =======*/
-
-.dropdown-popup {
- position: absolute;
- left: 0;
- width: calc(100% - 30px);
- margin: 15px;
- z-index: 1000;
- background: #EBEBF0;
- visibility: hidden;
- border: 0;
- border-radius: 4px;
- box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.40);
- -moz-user-select: none;
-}
-
-/* Only used on desktop */
-.dropdown-popup > hr,
-.dropdown-arrow,
-#font-type-buttons > button > .name,
-#content-width-buttons,
-#line-height-buttons {
- display: none;
-}
-
-.open > .dropdown-popup {
- visibility: visible;
- bottom: 0;
-}
-
-#font-type-buttons,
-#font-size-buttons,
-#color-scheme-buttons {
- display: flex;
- flex-direction: row;
-}
-
-#font-type-buttons > button,
-#color-scheme-buttons > button {
- text-align: center;
-}
-
-#font-type-buttons > button,
-#font-size-buttons > button {
- width: 50%;
- background-color: transparent;
- border: 0;
-}
-
-#font-type-buttons > button {
- font-size: 24px;
- color: #AFB1B3;
- padding: 15px 0;
-}
-
-#font-type-buttons > button:active,
-#font-type-buttons > button.selected {
- color: #222222;
-}
-
-#font-size-sample {
- flex: 0;
- font-size: 24px;
- color: #000000;
- margin: 0 30px;
- padding: 0 10px;
-}
-
-.serif-button {
- font-family: serif;
-}
-
-.minus-button,
-.plus-button {
- background-color: transparent;
- border: 0;
- height: 60px;
- background-size: 18px 18px;
- background-repeat: no-repeat;
- background-position: center;
-}
-
-.minus-button {
- background-size: 24px 6px;
- margin-left: 50px;
- padding: 0 5px;
-}
-
-.plus-button {
- background-size: 24px 24px;
- margin-right: 50px;
- padding: 0 5px;
-}
-
-#color-scheme-buttons > button {
- width: 33%;
- border-radius: 4px;
- border: 1px solid #BFBFBF;
- padding: 10px;
- margin: 15px 10px;
- font-size: 14px;
-}
-
-#color-scheme-buttons > button:active,
-#color-scheme-buttons > button.selected {
- border: 2px solid #0A84FF;
-}
-
-.dark-button {
- color: #eeeeee;
- background-color: #333333;
-}
-
-.auto-button {
- color: #000000;
- background-color: transparent;
-}
-
-.light-button {
- color: #333333;
- background-color: #ffffff;
-}
-
-/*======= Toolbar icons =======*/
-
-/* desktop-only controls */
-.close-button {
- display: none;
-}
-
-.style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
-}
-
-.minus-button {
- background-image: url('chrome://browser/skin/images/reader-minus-hdpi.png');
-}
-
-.plus-button {
- background-image: url('chrome://browser/skin/images/reader-plus-hdpi.png');
-}
-
-@media screen and (min-resolution: 2dppx) {
- .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
- }
-
- .minus-button {
- background-image: url('chrome://browser/skin/images/reader-minus-xhdpi.png');
- }
-
- .plus-button {
- background-image: url('chrome://browser/skin/images/reader-plus-xhdpi.png');
- }
-}
-
-@media screen and (min-resolution: 3dppx) {
- .style-button {
- background-image: url('chrome://browser/skin/images/reader-style-icon-xxhdpi.png');
- }
-
- .minus-button {
- background-image: url('chrome://browser/skin/images/reader-minus-xxhdpi.png');
- }
-
- .plus-button {
- background-image: url('chrome://browser/skin/images/reader-plus-xxhdpi.png');
- }
-}
-
-@media screen and (min-width: 960px) {
- .dropdown-popup {
- width: 350px;
- left: auto;
- right: 0;
- }
-}
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -10,28 +10,24 @@ chrome.jar:
skin/about.css (about.css)
skin/aboutAccounts.css (aboutAccounts.css)
skin/aboutAddons.css (aboutAddons.css)
skin/aboutBase.css (aboutBase.css)
skin/aboutDownloads.css (aboutDownloads.css)
skin/aboutMemory.css (aboutMemory.css)
skin/aboutPrivateBrowsing.css (aboutPrivateBrowsing.css)
skin/aboutReader.css (aboutReader.css)
- skin/aboutReaderContent.css (aboutReaderContent.css)
- skin/aboutReaderControls.css (aboutReaderControls.css)
skin/aboutSupport.css (aboutSupport.css)
skin/config.css (config.css)
skin/defines.css (defines.css)
skin/netError.css (netError.css)
skin/spinner.css (spinner.css)
% override chrome://global/skin/about.css chrome://browser/skin/about.css
% override chrome://global/skin/aboutMemory.css chrome://browser/skin/aboutMemory.css
% override chrome://global/skin/aboutReader.css chrome://browser/skin/aboutReader.css
-% override chrome://global/skin/aboutReaderContent.css chrome://browser/skin/aboutReaderContent.css
-% override chrome://global/skin/aboutReaderControls.css chrome://browser/skin/aboutReaderControls.css
% override chrome://global/skin/aboutSupport.css chrome://browser/skin/aboutSupport.css
% override chrome://global/skin/netError.css chrome://browser/skin/netError.css
skin/aboutLogins.css (aboutLogins.css)
skin/images/search.png (images/search.png)
skin/images/lock.png (images/lock.png)
skin/images/textfield.png (images/textfield.png)
--- a/toolkit/components/narrate/NarrateControls.jsm
+++ b/toolkit/components/narrate/NarrateControls.jsm
@@ -36,23 +36,19 @@ function NarrateControls(mm, win, langua
}
return result;
}
let dropdown = win.document.createElement("ul");
dropdown.className = "dropdown";
dropdown.id = "narrate-dropdown";
// We need inline svg here for the animation to work (bug 908634 & 1190881).
- // The style animation can't be scoped (bug 830056).
// eslint-disable-next-line no-unsanitized/property
dropdown.innerHTML =
- localize`<style scoped>
- @import url("chrome://global/skin/narrateControls.css");
- </style>
- <li>
+ localize`<li>
<button class="dropdown-toggle button" id="narrate-toggle"
title="${"narrate"}" hidden>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24" height="24" viewBox="0 0 24 24">
<style>
@keyframes grow {
0% { transform: scaleY(1); }
--- a/toolkit/components/printing/content/simplifyMode.css
+++ b/toolkit/components/printing/content/simplifyMode.css
@@ -1,17 +1,17 @@
/* 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/. */
/* This file defines specific rules for print preview when using simplify mode.
* Some of these rules (styling for title and author on the header element)
- * already exist on aboutReaderControls.css, however, we decoupled it from the
- * original file so we don't need to load a bunch of extra queries that will not
- * take effect when using the simplify page checkbox. */
+ * already exist in aboutReader.css, however, we decoupled it from the original
+ * file so we don't need to load a bunch of extra queries that will not take
+ * effect when using the simplify page checkbox. */
body {
padding-top: 0px;
padding-bottom: 0px;
}
#container {
max-width: 100%;
@@ -24,9 +24,9 @@ body {
margin: 30px 0;
}
.header > .credits {
font-size: 0.9em;
line-height: 1.48em;
margin: 0 0 30px 0;
font-style: italic;
-}
\ No newline at end of file
+}
--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -8,49 +8,37 @@
<link rel="stylesheet" href="chrome://global/skin/aboutReader.css" type="text/css"/>
<script type="text/javascript" src="chrome://global/content/reader/aboutReader.js"></script>
</head>
<body>
<div id="container" class="container">
<div id="reader-header" class="header">
- <style scoped>
- @import url("chrome://global/skin/aboutReaderControls.css");
- </style>
<a id="reader-domain" class="domain"></a>
<div class="domain-border"></div>
<h1 id="reader-title"></h1>
<div id="reader-credits" class="credits"></div>
<div id="meta-data" class="meta-data">
<div id="reader-estimated-time"></div>
</div>
</div>
<hr>
<div class="content">
- <style scoped>
- @import url("chrome://global/skin/aboutReaderContent.css");
- </style>
<div id="moz-reader-content"></div>
</div>
<div>
- <style scoped>
- @import url("chrome://global/skin/aboutReaderControls.css");
- </style>
<div id="reader-message"></div>
</div>
</div>
<ul id="reader-toolbar" class="toolbar">
- <style scoped>
- @import url("chrome://global/skin/aboutReaderControls.css");
- </style>
<li><button id="close-button" class="button close-button"/></li>
<ul id="style-dropdown" class="dropdown">
<li><button class="dropdown-toggle button style-button"/></li>
<li id="reader-popup" class="dropdown-popup">
<div id="font-type-buttons"></div>
<hr>
<div id="font-size-buttons">
<button id="font-size-minus" class="minus-button"/>
--- a/toolkit/content/browser-content.js
+++ b/toolkit/content/browser-content.js
@@ -672,22 +672,16 @@ var Printing = {
// Display header element
headerElement.style.display = "block";
// Create content div and append it to container
let contentElement = content.document.createElement("div");
contentElement.setAttribute("class", "content");
containerElement.appendChild(contentElement);
- // Create style element for content div and import aboutReaderContent.css
- let controlContentStyle = content.document.createElement("style");
- controlContentStyle.setAttribute("scoped", "");
- controlContentStyle.textContent = "@import url(\"chrome://global/skin/aboutReaderContent.css\");";
- contentElement.appendChild(controlContentStyle);
-
// Jam the article's content into content div
let readerContent = content.document.createElement("div");
readerContent.setAttribute("id", "moz-reader-content");
contentElement.appendChild(readerContent);
let articleUri = Services.io.newURI(article.url);
let parserUtils = Cc["@mozilla.org/parserutils;1"].getService(Ci.nsIParserUtils);
let contentFragment = parserUtils.parseFragment(article.content,
--- a/toolkit/themes/shared/aboutReader.css
+++ b/toolkit/themes/shared/aboutReader.css
@@ -158,8 +158,581 @@ body.loaded .toolbar {
body:not(.loaded) .toolbar:-moz-locale-dir(ltr) {
transform: translateX(-100%);
}
body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
transform: translateX(100%);
}
+
+.light-button {
+ color: #333333;
+ background-color: #ffffff;
+}
+
+.dark-button {
+ color: #eeeeee;
+ background-color: #333333;
+}
+
+.sepia-button {
+ color: #5b4636;
+ background-color: #f4ecd8;
+}
+
+.sans-serif-button {
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+.serif-button {
+ font-family: Georgia, "Times New Roman", serif;
+}
+
+/* Loading/error message */
+
+#reader-message {
+ margin-top: 40px;
+ display: none;
+ text-align: center;
+ width: 100%;
+ font-size: 0.9em;
+}
+
+/* Header */
+
+.header {
+ text-align: start;
+ display: none;
+}
+
+.domain {
+ font-size: 0.9em;
+ line-height: 1.48em;
+ padding-bottom: 4px;
+ font-family: Helvetica, Arial, sans-serif;
+ text-decoration: none;
+ border-bottom: 1px solid;
+ color: #0095dd;
+}
+
+.header > h1 {
+ font-size: 1.6em;
+ line-height: 1.25em;
+ width: 100%;
+ margin: 30px 0;
+ padding: 0;
+}
+
+.header > .credits {
+ font-size: 0.9em;
+ line-height: 1.48em;
+ margin: 0 0 10px 0;
+ padding: 0;
+ font-style: italic;
+}
+
+.header > .meta-data {
+ font-size: 0.65em;
+ margin: 0 0 15px 0;
+}
+
+/*======= Controls toolbar =======*/
+
+.toolbar {
+ font-family: Helvetica, Arial, sans-serif;
+ position: fixed;
+ height: 100%;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ background-color: #fbfbfb;
+ -moz-user-select: none;
+ border-right: 1px solid #b5b5b5;
+ z-index: 1;
+}
+
+.button {
+ display: block;
+ background-size: 24px 24px;
+ background-repeat: no-repeat;
+ color: #333;
+ background-color: #fbfbfb;
+ height: 40px;
+ padding: 0;
+}
+
+.toolbar .button {
+ width: 40px;
+ background-position: center;
+ margin-right: -1px;
+ border-top: 0;
+ border-left: 0;
+ border-right: 1px solid #b5b5b5;
+ border-bottom: 1px solid #c1c1c1;
+}
+
+.button[hidden] {
+ display: none;
+}
+
+.dropdown {
+ text-align: center;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.dropdown li {
+ margin: 0;
+ padding: 0;
+}
+
+/*======= Popup =======*/
+
+.dropdown-popup {
+ min-width: 300px;
+ text-align: start;
+ position: absolute;
+ left: 48px; /* offset to account for toolbar width */
+ z-index: 1000;
+ background-color: #fbfbfb;
+ visibility: hidden;
+ border-radius: 4px;
+ border: 1px solid #b5b5b5;
+ border-bottom-width: 0;
+ box-shadow: 0 1px 3px #c1c1c1;
+}
+
+.keep-open .dropdown-popup {
+ z-index: initial;
+}
+
+.dropdown-popup > hr {
+ display: none;
+}
+
+.open > .dropdown-popup {
+ visibility: visible;
+}
+
+.dropdown-arrow {
+ position: absolute;
+ top: 30px; /* offset arrow from top of popup */
+ left: -16px;
+ width: 16px;
+ height: 24px;
+ background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
+ display: block;
+}
+
+/*======= Font style popup =======*/
+
+#font-type-buttons,
+#font-size-buttons,
+#color-scheme-buttons,
+#content-width-buttons,
+#line-height-buttons {
+ display: flex;
+ flex-direction: row;
+}
+
+#font-type-buttons > button:first-child {
+ border-top-left-radius: 3px;
+}
+#font-type-buttons > button:last-child {
+ border-top-right-radius: 3px;
+}
+#color-scheme-buttons > button:first-child {
+ border-bottom-left-radius: 3px;
+}
+#color-scheme-buttons > button:last-child {
+ border-bottom-right-radius: 3px;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button,
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+ text-align: center;
+ border: 0;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+ width: 50%;
+ background-color: transparent;
+ border-left: 1px solid #B5B5B5;
+ border-bottom: 1px solid #B5B5B5;
+}
+
+#color-scheme-buttons > button {
+ width: 33.33%;
+ font-size: 14px;
+}
+
+#color-scheme-buttons > .dark-button {
+ margin-top: -1px;
+ height: 61px;
+}
+
+#font-type-buttons > button:first-child,
+#font-size-buttons > button:first-child,
+#content-width-buttons > button:first-child,
+#line-height-buttons > button:first-child {
+ border-left: 0;
+}
+
+#font-type-buttons > button {
+ display: inline-block;
+ font-size: 62px;
+ height: 100px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+ height: 60px;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected,
+#color-scheme-buttons > button:active:hover,
+#color-scheme-buttons > button.selected {
+ box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+ border-bottom: 1px solid #FC6420;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > button > .description {
+ color: #666;
+ font-size: 12px;
+ margin-top: -5px;
+}
+
+/* Font sizes are different per-platform, so we need custom CSS to line them up. */
+%ifdef XP_MACOSX
+#font-type-buttons > .sans-serif-button > .name {
+ margin-top: 10px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+ margin-top: -4px;
+}
+
+#font-type-buttons > .serif-button > .name {
+ font-size: 63px;
+}
+%elifdef XP_WIN
+#font-type-buttons > .sans-serif-button > .name {
+ margin-top: 2px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+ margin-top: -4px;
+}
+
+#font-type-buttons > .serif-button > .name {
+ font-size: 63px;
+}
+%else
+#font-type-buttons > .sans-serif-button > .name {
+ margin-top: 5px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+ margin-top: -8px;
+}
+
+#font-type-buttons > .serif-button > .name {
+ font-size: 70px;
+}
+%endif
+
+.button:hover,
+#font-size-buttons > button:hover,
+#font-type-buttons > button:hover,
+#content-width-buttons > button:hover,
+#line-height-buttons > button:hover {
+ background-color: #ebebeb;
+}
+
+.dropdown.open,
+.button:active,
+#font-size-buttons > button:active,
+#font-size-buttons > button.selected,
+#content-width-buttons > button:active,
+#content-width-buttons > button.selected,
+#line-height-buttons > button:active,
+#line-height-buttons > button.selected {
+ background-color: #dadada;
+}
+
+/* Only used on Android */
+#font-size-sample {
+ display: none;
+}
+
+.minus-button,
+.plus-button,
+.content-width-minus-button,
+.content-width-plus-button,
+.line-height-minus-button,
+.line-height-plus-button {
+ background-color: transparent;
+ border: 0;
+ background-size: 18px 18px;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+/*======= Toolbar icons =======*/
+
+.close-button {
+ background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+ -moz-context-properties: fill;
+ fill: #808080;
+ height: 68px;
+ background-position: center 8px;
+}
+
+.close-button:hover {
+ fill: #fff;
+ background-color: #d94141;
+ border-bottom: 1px solid #d94141;
+ border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+ background-color: #AE2325;
+ border-bottom: 1px solid #AE2325;
+ border-right: 1px solid #AE2325;
+}
+
+.style-button {
+ background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
+}
+
+.minus-button {
+ background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
+}
+
+.plus-button {
+ background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
+}
+
+.content-width-minus-button {
+ background-size: 42px 16px;
+ background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
+}
+
+.content-width-plus-button {
+ background-size: 44px 16px;
+ background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
+}
+
+.line-height-minus-button {
+ background-size: 34px 14px;
+ background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
+}
+
+.line-height-plus-button {
+ background-size: 34px 24px;
+ background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
+}
+
+@media print {
+ .toolbar {
+ display: none !important;
+ }
+}
+
+/*======= Article content =======*/
+
+/* Note that any class names from the original article that we want to match on
+ * must be added to CLASSES_TO_PRESERVE in ReaderMode.jsm, so that
+ * Readability.js doesn't strip them out */
+
+#moz-reader-content {
+ display: none;
+ font-size: 1em;
+ line-height: 1.6em;
+}
+
+#moz-reader-content.line-height1 {
+ line-height: 1em;
+}
+
+#moz-reader-content.line-height2 {
+ line-height: 1.2em;
+}
+
+#moz-reader-content.line-height3 {
+ line-height: 1.4em;
+}
+
+#moz-reader-content.line-height4 {
+ line-height: 1.6em;
+}
+
+#moz-reader-content.line-height5 {
+ line-height: 1.8em;
+}
+
+#moz-reader-content.line-height6 {
+ line-height: 2.0em;
+}
+
+#moz-reader-content.line-height7 {
+ line-height: 2.2em;
+}
+
+#moz-reader-content.line-height8 {
+ line-height: 2.4em;
+}
+
+#moz-reader-content.line-height9 {
+ line-height: 2.6em;
+}
+
+@media print {
+ #moz-reader-content p,
+ #moz-reader-content code,
+ #moz-reader-content pre,
+ #moz-reader-content blockquote,
+ #moz-reader-content ul,
+ #moz-reader-content ol,
+ #moz-reader-content li,
+ #moz-reader-content figure,
+ #moz-reader-content .wp-caption {
+ margin: 0 0 10px 0 !important;
+ padding: 0 !important;
+ }
+}
+
+#moz-reader-content h1,
+#moz-reader-content h2,
+#moz-reader-content h3 {
+ font-weight: bold;
+}
+
+#moz-reader-content h1 {
+ font-size: 1.6em;
+ line-height: 1.25em;
+}
+
+#moz-reader-content h2 {
+ font-size: 1.2em;
+ line-height: 1.51em;
+}
+
+#moz-reader-content h3 {
+ font-size: 1em;
+ line-height: 1.66em;
+}
+
+#moz-reader-content a:link {
+ text-decoration: underline;
+ font-weight: normal;
+}
+
+#moz-reader-content a:link,
+#moz-reader-content a:link:hover,
+#moz-reader-content a:link:active {
+ color: #0095dd;
+}
+
+#moz-reader-content a:visited {
+ color: #c2e;
+}
+
+#moz-reader-content * {
+ max-width: 100%;
+ height: auto;
+}
+
+#moz-reader-content p,
+#moz-reader-content p,
+#moz-reader-content code,
+#moz-reader-content pre,
+#moz-reader-content blockquote,
+#moz-reader-content ul,
+#moz-reader-content ol,
+#moz-reader-content li,
+#moz-reader-content figure,
+#moz-reader-content .wp-caption {
+ margin: -10px -10px 20px -10px;
+ padding: 10px;
+ border-radius: 5px;
+}
+
+#moz-reader-content li {
+ margin-bottom: 0;
+}
+
+#moz-reader-content li > ul,
+#moz-reader-content li > ol {
+ margin-bottom: -10px;
+}
+
+#moz-reader-content p > img:only-child,
+#moz-reader-content p > a:only-child > img:only-child,
+#moz-reader-content .wp-caption img,
+#moz-reader-content figure img {
+ display: block;
+}
+
+#moz-reader-content img[moz-reader-center] {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text
+#moz-reader-content figcaption {
+ font-size: 0.9em;
+ line-height: 1.48em;
+ font-style: italic;
+}
+
+#moz-reader-content code,
+#moz-reader-content pre {
+ white-space: pre-wrap;
+}
+
+#moz-reader-content blockquote {
+ padding: 0;
+ padding-inline-start: 16px;
+}
+
+#moz-reader-content ul,
+#moz-reader-content ol {
+ padding: 0;
+}
+
+#moz-reader-content ul {
+ padding-inline-start: 30px;
+ list-style: disc;
+}
+
+#moz-reader-content ol {
+ padding-inline-start: 30px;
+ list-style: decimal;
+}
+
+/* Hide elements with common "hidden" class names */
+#moz-reader-content .visually-hidden,
+#moz-reader-content .visuallyhidden,
+#moz-reader-content .hidden,
+#moz-reader-content .invisible,
+#moz-reader-content .sr-only {
+ display: none;
+}
deleted file mode 100644
--- a/toolkit/themes/shared/aboutReaderContent.css
+++ /dev/null
@@ -1,178 +0,0 @@
-/* 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/. */
-
-#moz-reader-content {
- display: none;
- font-size: 1em;
- line-height: 1.6em;
-}
-
-#moz-reader-content.line-height1 {
- line-height: 1em;
-}
-
-#moz-reader-content.line-height2 {
- line-height: 1.2em;
-}
-
-#moz-reader-content.line-height3 {
- line-height: 1.4em;
-}
-
-#moz-reader-content.line-height4 {
- line-height: 1.6em;
-}
-
-#moz-reader-content.line-height5 {
- line-height: 1.8em;
-}
-
-#moz-reader-content.line-height6 {
- line-height: 2.0em;
-}
-
-#moz-reader-content.line-height7 {
- line-height: 2.2em;
-}
-
-#moz-reader-content.line-height8 {
- line-height: 2.4em;
-}
-
-#moz-reader-content.line-height9 {
- line-height: 2.6em;
-}
-
-@media print {
- p,
- code,
- pre,
- blockquote,
- ul,
- ol,
- li,
- figure,
- .wp-caption {
- margin: 0 0 10px 0 !important;
- padding: 0 !important;
- }
-}
-
-h1,
-h2,
-h3 {
- font-weight: bold;
-}
-
-h1 {
- font-size: 1.6em;
- line-height: 1.25em;
-}
-
-h2 {
- font-size: 1.2em;
- line-height: 1.51em;
-}
-
-h3 {
- font-size: 1em;
- line-height: 1.66em;
-}
-
-a:link {
- text-decoration: underline;
- font-weight: normal;
-}
-
-a:link,
-a:link:hover,
-a:link:active {
- color: #0095dd;
-}
-
-a:visited {
- color: #c2e;
-}
-
-* {
- max-width: 100%;
- height: auto;
-}
-
-p,
-code,
-pre,
-blockquote,
-ul,
-ol,
-li,
-figure,
-.wp-caption {
- margin: -10px -10px 20px -10px;
- padding: 10px;
- border-radius: 5px;
-}
-
-li {
- margin-bottom: 0;
-}
-
-li > ul,
-li > ol {
- margin-bottom: -10px;
-}
-
-p > img:only-child,
-p > a:only-child > img:only-child,
-.wp-caption img,
-figure img {
- display: block;
-}
-
-img[moz-reader-center] {
- margin-left: auto;
- margin-right: auto;
-}
-
-.caption,
-.wp-caption-text,
-figcaption {
- font-size: 0.9em;
- line-height: 1.48em;
- font-style: italic;
-}
-
-code,
-pre {
- white-space: pre-wrap;
-}
-
-blockquote {
- padding: 0;
- padding-inline-start: 16px;
-}
-
-ul,
-ol {
- padding: 0;
-}
-
-ul {
- padding-inline-start: 30px;
- list-style: disc;
-}
-
-ol {
- padding-inline-start: 30px;
- list-style: decimal;
-}
-
-/* Hide elements with common "hidden" class names */
-.visually-hidden,
-.visuallyhidden,
-.hidden,
-.invisible,
-.sr-only {
- display: none;
-}
deleted file mode 100644
--- a/toolkit/themes/shared/aboutReaderControls.css
+++ /dev/null
@@ -1,394 +0,0 @@
-/* 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/. */
-
-.light-button {
- color: #333333;
- background-color: #ffffff;
-}
-
-.dark-button {
- color: #eeeeee;
- background-color: #333333;
-}
-
-.sepia-button {
- color: #5b4636;
- background-color: #f4ecd8;
-}
-
-.sans-serif-button {
- font-family: Helvetica, Arial, sans-serif;
-}
-
-.serif-button {
- font-family: Georgia, "Times New Roman", serif;
-}
-
-/* Loading/error message */
-
-#reader-message {
- margin-top: 40px;
- display: none;
- text-align: center;
- width: 100%;
- font-size: 0.9em;
-}
-
-/* Header */
-
-.header {
- text-align: start;
- display: none;
-}
-
-.domain {
- font-size: 0.9em;
- line-height: 1.48em;
- padding-bottom: 4px;
- font-family: Helvetica, Arial, sans-serif;
- text-decoration: none;
- border-bottom: 1px solid;
- color: #0095dd;
-}
-
-.header > h1 {
- font-size: 1.6em;
- line-height: 1.25em;
- width: 100%;
- margin: 30px 0;
- padding: 0;
-}
-
-.header > .credits {
- font-size: 0.9em;
- line-height: 1.48em;
- margin: 0 0 10px 0;
- padding: 0;
- font-style: italic;
-}
-
-.header > .meta-data {
- font-size: 0.65em;
- margin: 0 0 15px 0;
-}
-
-/*======= Controls toolbar =======*/
-
-.toolbar {
- font-family: Helvetica, Arial, sans-serif;
- position: fixed;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- list-style: none;
- background-color: #fbfbfb;
- -moz-user-select: none;
- border-right: 1px solid #b5b5b5;
- z-index: 1;
-}
-
-.button {
- display: block;
- background-size: 24px 24px;
- background-repeat: no-repeat;
- color: #333;
- background-color: #fbfbfb;
- height: 40px;
- padding: 0;
-}
-
-.toolbar .button {
- width: 40px;
- background-position: center;
- margin-right: -1px;
- border-top: 0;
- border-left: 0;
- border-right: 1px solid #b5b5b5;
- border-bottom: 1px solid #c1c1c1;
-}
-
-.button[hidden] {
- display: none;
-}
-
-.dropdown {
- text-align: center;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.dropdown li {
- margin: 0;
- padding: 0;
-}
-
-/*======= Popup =======*/
-
-.dropdown-popup {
- min-width: 300px;
- text-align: start;
- position: absolute;
- left: 48px; /* offset to account for toolbar width */
- z-index: 1000;
- background-color: #fbfbfb;
- visibility: hidden;
- border-radius: 4px;
- border: 1px solid #b5b5b5;
- border-bottom-width: 0;
- box-shadow: 0 1px 3px #c1c1c1;
-}
-
-.keep-open .dropdown-popup {
- z-index: initial;
-}
-
-.dropdown-popup > hr {
- display: none;
-}
-
-.open > .dropdown-popup {
- visibility: visible;
-}
-
-.dropdown-arrow {
- position: absolute;
- top: 30px; /* offset arrow from top of popup */
- left: -16px;
- width: 16px;
- height: 24px;
- background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
- display: block;
-}
-
-/*======= Font style popup =======*/
-
-#font-type-buttons,
-#font-size-buttons,
-#color-scheme-buttons,
-#content-width-buttons,
-#line-height-buttons {
- display: flex;
- flex-direction: row;
-}
-
-#font-type-buttons > button:first-child {
- border-top-left-radius: 3px;
-}
-#font-type-buttons > button:last-child {
- border-top-right-radius: 3px;
-}
-#color-scheme-buttons > button:first-child {
- border-bottom-left-radius: 3px;
-}
-#color-scheme-buttons > button:last-child {
- border-bottom-right-radius: 3px;
-}
-
-#font-type-buttons > button,
-#font-size-buttons > button,
-#color-scheme-buttons > button,
-#content-width-buttons > button,
-#line-height-buttons > button {
- text-align: center;
- border: 0;
-}
-
-#font-type-buttons > button,
-#font-size-buttons > button,
-#content-width-buttons > button,
-#line-height-buttons > button {
- width: 50%;
- background-color: transparent;
- border-left: 1px solid #B5B5B5;
- border-bottom: 1px solid #B5B5B5;
-}
-
-#color-scheme-buttons > button {
- width: 33.33%;
- font-size: 14px;
-}
-
-#color-scheme-buttons > .dark-button {
- margin-top: -1px;
- height: 61px;
-}
-
-#font-type-buttons > button:first-child,
-#font-size-buttons > button:first-child,
-#content-width-buttons > button:first-child,
-#line-height-buttons > button:first-child {
- border-left: 0;
-}
-
-#font-type-buttons > button {
- display: inline-block;
- font-size: 62px;
- height: 100px;
-}
-
-#font-size-buttons > button,
-#color-scheme-buttons > button,
-#content-width-buttons > button,
-#line-height-buttons > button {
- height: 60px;
-}
-
-#font-type-buttons > button:active:hover,
-#font-type-buttons > button.selected,
-#color-scheme-buttons > button:active:hover,
-#color-scheme-buttons > button.selected {
- box-shadow: inset 0 -3px 0 0 #fc6420;
-}
-
-#font-type-buttons > button:active:hover,
-#font-type-buttons > button.selected {
- border-bottom: 1px solid #FC6420;
-}
-
-/* Make the serif button content the same size as the sans-serif button content. */
-#font-type-buttons > button > .description {
- color: #666;
- font-size: 12px;
- margin-top: -5px;
-}
-
-/* Font sizes are different per-platform, so we need custom CSS to line them up. */
-%ifdef XP_MACOSX
-#font-type-buttons > .sans-serif-button > .name {
- margin-top: 10px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
- margin-top: -4px;
-}
-
-#font-type-buttons > .serif-button > .name {
- font-size: 63px;
-}
-%elifdef XP_WIN
-#font-type-buttons > .sans-serif-button > .name {
- margin-top: 2px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
- margin-top: -4px;
-}
-
-#font-type-buttons > .serif-button > .name {
- font-size: 63px;
-}
-%else
-#font-type-buttons > .sans-serif-button > .name {
- margin-top: 5px;
-}
-
-#font-type-buttons > .sans-serif-button > .description {
- margin-top: -8px;
-}
-
-#font-type-buttons > .serif-button > .name {
- font-size: 70px;
-}
-%endif
-
-.button:hover,
-#font-size-buttons > button:hover,
-#font-type-buttons > button:hover,
-#content-width-buttons > button:hover,
-#line-height-buttons > button:hover {
- background-color: #ebebeb;
-}
-
-.dropdown.open,
-.button:active,
-#font-size-buttons > button:active,
-#font-size-buttons > button.selected,
-#content-width-buttons > button:active,
-#content-width-buttons > button.selected,
-#line-height-buttons > button:active,
-#line-height-buttons > button.selected {
- background-color: #dadada;
-}
-
-/* Only used on Android */
-#font-size-sample {
- display: none;
-}
-
-.minus-button,
-.plus-button,
-.content-width-minus-button,
-.content-width-plus-button,
-.line-height-minus-button,
-.line-height-plus-button {
- background-color: transparent;
- border: 0;
- background-size: 18px 18px;
- background-repeat: no-repeat;
- background-position: center;
-}
-
-/*======= Toolbar icons =======*/
-
-.close-button {
- background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
- -moz-context-properties: fill;
- fill: #808080;
- height: 68px;
- background-position: center 8px;
-}
-
-.close-button:hover {
- fill: #fff;
- background-color: #d94141;
- border-bottom: 1px solid #d94141;
- border-right: 1px solid #d94141;
-}
-
-.close-button:hover:active {
- background-color: #AE2325;
- border-bottom: 1px solid #AE2325;
- border-right: 1px solid #AE2325;
-}
-
-.style-button {
- background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
-}
-
-.minus-button {
- background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
-}
-
-.plus-button {
- background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
-}
-
-.content-width-minus-button {
- background-size: 42px 16px;
- background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
-}
-
-.content-width-plus-button {
- background-size: 44px 16px;
- background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
-}
-
-.line-height-minus-button {
- background-size: 34px 14px;
- background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
-}
-
-.line-height-plus-button {
- background-size: 34px 24px;
- background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
-}
-
-@media print {
- .toolbar {
- display: none !important;
- }
-}
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -10,19 +10,17 @@
toolkit.jar:
% skin global classic/1.0 %skin/classic/global/
% skin help classic/1.0 %skin/classic/help/
% skin mozapps classic/1.0 %skin/classic/mozapps/
skin/classic/global/about.css (../../shared/about.css)
skin/classic/global/aboutCache.css (../../shared/aboutCache.css)
skin/classic/global/aboutCacheEntry.css (../../shared/aboutCacheEntry.css)
skin/classic/global/aboutMemory.css (../../shared/aboutMemory.css)
- skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
- skin/classic/global/aboutReaderContent.css (../../shared/aboutReaderContent.css)
-* skin/classic/global/aboutReaderControls.css (../../shared/aboutReaderControls.css)
+* skin/classic/global/aboutReader.css (../../shared/aboutReader.css)
skin/classic/global/aboutRights.css (../../shared/aboutRights.css)
skin/classic/global/aboutLicense.css (../../shared/aboutLicense.css)
skin/classic/global/aboutSupport.css (../../shared/aboutSupport.css)
skin/classic/global/appPicker.css (../../shared/appPicker.css)
skin/classic/global/config.css (../../shared/config.css)
skin/classic/global/datetimeinputpickers.css (../../shared/datetimeinputpickers.css)
skin/classic/global/datetimepopup.css (../../shared/datetimepopup.css)
skin/classic/global/passwordmgr.css (../../shared/passwordmgr.css)
@@ -45,17 +43,16 @@ toolkit.jar:
skin/classic/global/icons/spinner-arrow-up.svg (../../shared/icons/spinner-arrow-up.svg)
skin/classic/global/icons/arrow-dropdown-12.svg (../../shared/icons/arrow-dropdown-12.svg)
skin/classic/global/icons/arrow-dropdown-16.svg (../../shared/icons/arrow-dropdown-16.svg)
skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg)
skin/classic/global/illustrations/about-rights.svg (../../shared/illustrations/about-rights.svg)
skin/classic/global/icons/blocked.svg (../../shared/incontent-icons/blocked.svg)
skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg)
skin/classic/global/narrate.css (../../shared/narrate.css)
- skin/classic/global/narrateControls.css (../../shared/narrateControls.css)
skin/classic/global/narrate/arrow.svg (../../shared/narrate/arrow.svg)
skin/classic/global/narrate/back.svg (../../shared/narrate/back.svg)
skin/classic/global/narrate/fast.svg (../../shared/narrate/fast.svg)
skin/classic/global/narrate/forward.svg (../../shared/narrate/forward.svg)
skin/classic/global/narrate/slow.svg (../../shared/narrate/slow.svg)
skin/classic/global/narrate/start.svg (../../shared/narrate/start.svg)
skin/classic/global/narrate/stop.svg (../../shared/narrate/stop.svg)
skin/classic/global/menu/shared-menu-check-active.svg (../../shared/menu-check-active.svg)
--- a/toolkit/themes/shared/narrate.css
+++ b/toolkit/themes/shared/narrate.css
@@ -39,8 +39,195 @@ body.light .narrate-word-highlight {
body.sepia .narrate-word-highlight {
border-bottom-color: #bdb5a5;
}
body.dark .narrate-word-highlight {
border-bottom-color: #6f6f6f;
}
+
+#narrate-dropdown {
+ --border-color: #e5e5e5;
+}
+
+#narrate-toggle > svg {
+ display: block;
+ margin: 0 8px;
+}
+
+.dropdown-popup button {
+ background-color: transparent;
+}
+
+.dropdown-popup button:hover:not(:disabled) {
+ background-color: #eaeaea;
+}
+
+.narrate-row {
+ display: flex;
+ align-items: center;
+ min-height: 40px;
+ box-sizing: border-box;
+}
+
+.narrate-row:not(:first-child) {
+ border-top: 1px solid var(--border-color);
+}
+
+/* Control buttons */
+
+#narrate-control > button {
+ background-size: 24px 24px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ height: 64px;
+ width: 100px;
+ border: none;
+ color: #666;
+ box-sizing: border-box;
+}
+
+#narrate-control > button:not(:first-child) {
+ border-left: 1px solid var(--border-color);
+}
+
+#narrate-skip-previous {
+ border-top-left-radius: 3px;
+ background-image: url("chrome://global/skin/narrate/back.svg");
+ -moz-context-properties: fill;
+ fill: rgb(128 128 128);
+}
+
+#narrate-skip-next {
+ border-top-right-radius: 3px;
+ background-image: url("chrome://global/skin/narrate/forward.svg");
+ -moz-context-properties: fill;
+ fill: rgb(128 128 128);
+}
+
+#narrate-skip-previous:disabled,
+#narrate-skip-next:disabled {
+ fill: rgb(128 128 128 / 50%);
+}
+
+#narrate-start-stop {
+ background-image: url("chrome://global/skin/narrate/start.svg");
+}
+
+#narrate-dropdown.speaking #narrate-start-stop {
+ background-image: url("chrome://global/skin/narrate/stop.svg");
+}
+
+/* Rate control */
+
+#narrate-rate::before, #narrate-rate::after {
+ content: '';
+ width: 48px;
+ height: 40px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 24px auto;
+}
+
+#narrate-rate::before {
+ background-image: url("chrome://global/skin/narrate/slow.svg");
+}
+
+#narrate-rate::after {
+ background-image: url("chrome://global/skin/narrate/fast.svg");
+}
+
+#narrate-rate-input {
+ margin: 0 1px;
+ flex-grow: 1;
+}
+
+#narrate-rate-input::-moz-range-track {
+ background-color: #979797;
+ height: 2px;
+}
+
+#narrate-rate-input::-moz-range-progress {
+ background-color: #2EA3FF;
+ height: 2px;
+}
+
+#narrate-rate-input::-moz-range-thumb {
+ background-color: #808080;
+ height: 16px;
+ width: 16px;
+ border-radius: 8px;
+ border-width: 0;
+}
+
+#narrate-rate-input:active::-moz-range-thumb {
+ background-color: #2EA3FF;
+}
+
+/* Voice selection */
+
+.voiceselect {
+ width: 100%;
+}
+
+.voiceselect > button.select-toggle,
+.voiceselect > .options > button.option {
+ -moz-appearance: none;
+ border: none;
+ width: 100%;
+ min-height: 40px;
+}
+
+.voiceselect.open > button.select-toggle {
+ border-bottom: 1px solid var(--border-color);
+}
+
+.voiceselect > button.select-toggle::after {
+ content: '';
+ background-image: url("chrome://global/skin/narrate/arrow.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ display: inline-block;
+ width: 1.5em;
+ height: 1em;
+ vertical-align: middle;
+}
+
+.voiceselect > .options > button.option:not(:first-child) {
+ border-top: 1px solid var(--border-color);
+}
+
+.voiceselect > .options > button.option {
+ box-sizing: border-box;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:focus {
+ background-color: #eaeaea;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
+ background-color: transparent;
+}
+
+.voiceselect > .options > button.option::-moz-focus-inner {
+ outline: none;
+ border: 0;
+}
+
+.voiceselect > .options {
+ display: none;
+ overflow-y: auto;
+}
+
+.voiceselect.open > .options {
+ display: block;
+}
+
+.current-voice {
+ color: #7f7f7f;
+}
+
+.voiceselect:not(.open) > button,
+.voiceselect .option:last-child {
+ border-radius: 0 0 3px 3px;
+}
deleted file mode 100644
--- a/toolkit/themes/shared/narrateControls.css
+++ /dev/null
@@ -1,186 +0,0 @@
-:scope {
- --border-color: #e5e5e5;
-}
-
-#narrate-toggle > svg {
- display: block;
- margin: 0 8px;
-}
-
-.dropdown-popup button {
- background-color: transparent;
-}
-
-.dropdown-popup button:hover:not(:disabled) {
- background-color: #eaeaea;
-}
-
-.narrate-row {
- display: flex;
- align-items: center;
- min-height: 40px;
- box-sizing: border-box;
-}
-
-.narrate-row:not(:first-child) {
- border-top: 1px solid var(--border-color);
-}
-
-/* Control buttons */
-
-#narrate-control > button {
- background-size: 24px 24px;
- background-repeat: no-repeat;
- background-position: center center;
- height: 64px;
- width: 100px;
- border: none;
- color: #666;
- box-sizing: border-box;
-}
-
-#narrate-control > button:not(:first-child) {
- border-left: 1px solid var(--border-color);
-}
-
-#narrate-skip-previous {
- border-top-left-radius: 3px;
- background-image: url("chrome://global/skin/narrate/back.svg");
- -moz-context-properties: fill;
- fill: rgb(128 128 128);
-}
-
-#narrate-skip-next {
- border-top-right-radius: 3px;
- background-image: url("chrome://global/skin/narrate/forward.svg");
- -moz-context-properties: fill;
- fill: rgb(128 128 128);
-}
-
-#narrate-skip-previous:disabled,
-#narrate-skip-next:disabled {
- fill: rgb(128 128 128 / 50%);
-}
-
-#narrate-start-stop {
- background-image: url("chrome://global/skin/narrate/start.svg");
-}
-
-#narrate-dropdown.speaking #narrate-start-stop {
- background-image: url("chrome://global/skin/narrate/stop.svg");
-}
-
-/* Rate control */
-
-#narrate-rate::before, #narrate-rate::after {
- content: '';
- width: 48px;
- height: 40px;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 24px auto;
-}
-
-#narrate-rate::before {
- background-image: url("chrome://global/skin/narrate/slow.svg");
-}
-
-#narrate-rate::after {
- background-image: url("chrome://global/skin/narrate/fast.svg");
-}
-
-#narrate-rate-input {
- margin: 0 1px;
- flex-grow: 1;
-}
-
-#narrate-rate-input::-moz-range-track {
- background-color: #979797;
- height: 2px;
-}
-
-#narrate-rate-input::-moz-range-progress {
- background-color: #2EA3FF;
- height: 2px;
-}
-
-#narrate-rate-input::-moz-range-thumb {
- background-color: #808080;
- height: 16px;
- width: 16px;
- border-radius: 8px;
- border-width: 0;
-}
-
-#narrate-rate-input:active::-moz-range-thumb {
- background-color: #2EA3FF;
-}
-
-/* Voice selection */
-
-.voiceselect {
- width: 100%;
-}
-
-.voiceselect > button.select-toggle,
-.voiceselect > .options > button.option {
- -moz-appearance: none;
- border: none;
- width: 100%;
- min-height: 40px;
-}
-
-.voiceselect.open > button.select-toggle {
- border-bottom: 1px solid var(--border-color);
-}
-
-.voiceselect > button.select-toggle::after {
- content: '';
- background-image: url("chrome://global/skin/narrate/arrow.svg");
- background-position: center;
- background-repeat: no-repeat;
- background-size: 12px 12px;
- display: inline-block;
- width: 1.5em;
- height: 1em;
- vertical-align: middle;
-}
-
-.voiceselect > .options > button.option:not(:first-child) {
- border-top: 1px solid var(--border-color);
-}
-
-.voiceselect > .options > button.option {
- box-sizing: border-box;
-}
-
-.voiceselect > .options:not(.hovering) > button.option:focus {
- background-color: #eaeaea;
-}
-
-.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
- background-color: transparent;
-}
-
-.voiceselect > .options > button.option::-moz-focus-inner {
- outline: none;
- border: 0;
-}
-
-.voiceselect > .options {
- display: none;
- overflow-y: auto;
-}
-
-.voiceselect.open > .options {
- display: block;
-}
-
-.current-voice {
- color: #7f7f7f;
-}
-
-.voiceselect:not(.open) > button,
-.option:last-child {
- border-radius: 0 0 3px 3px;
-}