X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=EarlyBlue%2Fglobal%2FaboutReader.css;h=b852c6092267cf0a7e2db4cb1ecdd177599a2600;hp=27393b2ec0d8a4123454dcc29766384152972524;hb=e6947267ac09872af2aa1c74c74cb00d8581abe4;hpb=dc1be21c61e7ac9def51d132837dc967c5aaa56f

diff --git a/EarlyBlue/global/aboutReader.css b/EarlyBlue/global/aboutReader.css
index 27393b2e..b852c609 100644
--- a/EarlyBlue/global/aboutReader.css
+++ b/EarlyBlue/global/aboutReader.css
@@ -5,8 +5,20 @@
 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,
@@ -27,11 +39,13 @@ body {
   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;
 }
 
@@ -79,7 +93,7 @@ body {
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 /* Header */
@@ -90,8 +104,8 @@ body {
 }
 
 .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;
@@ -109,16 +123,16 @@ body {
 }
 
 .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;
@@ -126,10 +140,10 @@ body {
 
 /* Content */
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
-  line-height: 1.44rem;
+  font-size: 1em;
+  line-height: 1.6em;
 }
 
 .content h1,
@@ -138,19 +152,19 @@ body {
   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 {
@@ -171,26 +185,34 @@ body {
 }
 
 .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;
 }
 
@@ -212,6 +234,13 @@ body {
 .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 {
@@ -220,7 +249,7 @@ body {
 
 .content ul {
   -moz-padding-start: 30px;
-  list-style: disk;
+  list-style: disc;
 }
 
 .content ol {
@@ -234,30 +263,34 @@ body {
   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] {
@@ -267,36 +300,32 @@ body {
 .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 {
@@ -337,17 +366,15 @@ body {
 #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 {
@@ -355,40 +382,62 @@ body {
   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 */
@@ -404,12 +453,40 @@ body {
 .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 */
@@ -418,15 +495,23 @@ body {
 }
 
 .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 {
@@ -460,4 +545,7 @@ body {
   .toolbar {
     display: none;
   }
+  .footer {
+    display: none;
+  }
 }