body {
padding: 64px 0;
max-width: 660px;
- margin-left: auto;
- margin-right: auto;
+ margin: 0 auto;
+}
+
+@media (max-width: 785px) {
+ body {
+ padding-top: 64px;
+ -moz-padding-end: 0;
+ padding-bottom: 64px;
+ -moz-padding-start: 51px;
+ }
+}
+
+body.loaded {
+ transition: color 0.4s, background-color 0.4s;
}
.light,
background-color: #f0ece7;
}
-.sans-serif {
+.sans-serif,
+.sans-serif .remove-button {
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
}
-.serif {
+.serif,
+.serif .remove-button {
font-family: "Charis SIL", Georgia, "Times New Roman", serif;
}
display: none;
text-align: center;
width: 100%;
- font-size: 0.9rem;
+ font-size: 0.9em;
}
/* Header */
}
.domain {
- font-size: 0.9rem;
- line-height: 1.33rem;
+ font-size: 0.9em;
+ line-height: 1.48em;
padding-bottom: 4px;
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
text-decoration: none;
}
.header > h1 {
- font-size: 1.33rem;
- line-height: 1.66rem;
+ font-size: 1.33em;
+ line-height: 1.25em;
width: 100%;
margin: 30px 0;
padding: 0;
}
.header > .credits {
- font-size: 0.9rem;
- line-height: 1.33rem;
+ font-size: 0.9em;
+ line-height: 1.48em;
margin: 0 0 30px 0;
padding: 0;
font-style: italic;
/* Content */
-.content {
+#moz-reader-content {
display: none;
- font-size: 1rem;
- line-height: 1.44rem;
+ font-size: 1em;
+ line-height: 1.6em;
}
.content h1,
font-weight: bold;
}
-.content h1 {
- font-size: 1.33rem;
- line-height: 1.66rem;
+#moz-reader-content h1 {
+ font-size: 1.33em;
+ line-height: 1.25em;
}
-.content h2 {
- font-size: 1.1rem;
- line-height: 1.66rem;
+#moz-reader-content h2 {
+ font-size: 1.1em;
+ line-height: 1.51em;
}
-.content h3 {
- font-size: 1rem;
- line-height: 1.66rem;
+#moz-reader-content h3 {
+ font-size: 1em;
+ line-height: 1.66em;
}
.content a {
}
.content p,
-.content img,
.content code,
.content pre,
.content blockquote,
.content ul,
.content ol,
-.content li {
+.content li,
+.content figure,
+.content .wp-caption {
margin: 0 0 30px 0;
}
-.content .wp-caption,
-.content figure {
- margin: 0 30px 30px 30px;
+.content p > img:only-child,
+.content p > a:only-child > img:only-child,
+.content .wp-caption img,
+.content figure img {
+ display: block;
+}
+
+.content img[moz-reader-center] {
+ margin-left: auto;
+ margin-right: auto;
}
-.content .caption,
-.content .wp-caption-text,
-.content figcaption {
- font-size: 0.9rem;
- line-height: 1.33rem;
+#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;
}
.dark > .container > .content blockquote {
-moz-border-start: 2px solid #eeeeee;
}
+.dark *::-moz-selection {
+ background-color: #FFFFFF;
+ color: #0095DD;
+}
+.dark a::-moz-selection {
+ color: #DD4800;
+}
.content ul,
.content ol {
.content ul {
-moz-padding-start: 30px;
- list-style: disk;
+ list-style: disc;
}
.content ol {
font-family: "Fira Sans", Helvetica, Arial, sans-serif;
position: fixed;
height: 100%;
- top: 0px;
- left: 0px;
+ top: 0;
+ left: 0;
margin: 0;
padding: 0;
list-style: none;
- background-color: #FBFBFB;
+ background-color: #fbfbfb;
-moz-user-select: none;
- border-right: 1px solid #B5B5B5;
+ border-right: 1px solid #b5b5b5;
}
.button {
- color: white;
display: block;
- background-position: center;
background-size: 24px 24px;
background-repeat: no-repeat;
- background-color: transparent;
+ 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: 0;
+ border-right: 1px solid #b5b5b5;
border-bottom: 1px solid #c1c1c1;
- padding: 0;
}
.button[hidden] {
.dropdown {
text-align: center;
list-style: none;
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
}
.dropdown li {
- margin: 0px;
- padding: 0px;
+ margin: 0;
+ padding: 0;
}
/*======= Font style popup =======*/
.dropdown-popup {
- min-width: 250px;
+ min-width: 300px;
text-align: start;
position: absolute;
left: 48px; /* offset to account for toolbar width */
z-index: 1000;
- background-color: #FBFBFB;
+ background-color: #fbfbfb;
visibility: hidden;
border-radius: 4px;
- border: 1px 1px 0 1px solid #B5B5B5;
- box-shadow: 0px 1px 12px #666;
+ border: 1px 1px 0 1px solid #b5b5b5;
+ box-shadow: 0 1px 12px #666;
}
.dropdown-popup > hr {
- width: 100%;
- height: 0px;
- border: 0px;
- border-top: 1px solid #B5B5B5;
- margin: 0;
+ display: none;
}
.open > .dropdown-popup {
#font-size-buttons > button,
#color-scheme-buttons > button {
text-align: center;
- border-left: 1px solid #B5B5B5;
- border-right: 0;
- border-top: 0;
- border-bottom: 0;
- padding: 10px;
+ border: 0;
}
#font-type-buttons > button,
#font-size-buttons > button {
width: 50%;
background-color: transparent;
+ border-left: 1px solid #B5B5B5;
+ border-bottom: 1px solid #B5B5B5;
}
#color-scheme-buttons > button {
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,
-#color-scheme-buttons > button:first-child {
- border-left: 0px;
+#font-size-buttons > button:first-child {
+ border-left: 0;
}
#font-type-buttons > button {
display: inline-block;
- font-size: 48px;
+ font-size: 58px;
+ height: 100px;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > .serif-button {
+ padding-top: 1px;
+ font-size: 60px;
+}
+
+#font-size-buttons > button,
+#color-scheme-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;
+ box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+ border-bottom: 1px solid #FC6420;
}
#font-type-buttons > button > div {
color: #666;
font-size: 12px;
+ margin-top: -4px;
}
.button:hover,
#font-size-buttons > button:hover,
#font-type-buttons > button:hover {
- background-color: #EBEBEB;
+ background-color: #ebebeb;
}
.dropdown.open,
.button:active,
#font-size-buttons > button:active,
#font-size-buttons > button.selected {
- background-color: #DADADA;
+ background-color: #dadada;
}
/* Only used on Android */
.plus-button {
background-color: transparent;
border: 0;
- height: 50px;
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
}
+.footer {
+ height: 64px;
+ background-color: #ebebeb;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ padding: 12px 0;
+ box-sizing: border-box;
+ box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
+}
+
+.sepia .footer {
+ background-color: #dedad4;
+}
+
+.remove-button {
+ background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
+ margin: 0 auto;
+ border: 1px solid #c1c1c1;
+ background-position: 10px 7px;
+ padding-left: 42px;
+ padding-right: 10px;
+ border-radius: 2px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ font-size: 18px;
+}
+
+
/*======= Toolbar icons =======*/
/* Android-only controls */
}
.close-button {
- background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+ background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
height: 68px;
background-position: center 8px;
}
-.close-button:active,
.close-button:hover {
- background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg");
+ background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
background-color: #d94141;
+ border-bottom: 1px solid #d94141;
+ border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+ background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+ background-color: #AE2325;
+ border-bottom: 1px solid #AE2325;
+ border-right: 1px solid #AE2325;
}
.style-button {
.toolbar {
display: none;
}
+ .footer {
+ display: none;
+ }
}