second part of syncing LCARStrek with Firefox 55 browser windows theme changes

[themes.git] / EarlyBlue / global / aboutReaderControls.css

diff --git a/EarlyBlue/global/aboutReaderControls.css b/EarlyBlue/global/aboutReaderControls.css
index 6f86c5783cd50f332eb9d2218ff6aff90c06d144..2a4b66e5414aa0766e3704bb738ffd9cae7a7e40 100644 (file)
--- a/EarlyBlue/global/aboutReaderControls.css
+++ b/EarlyBlue/global/aboutReaderControls.css
@@ -63,11 +63,16 @@
 .header > .credits {
   font-size: 0.9em;
   line-height: 1.48em;
-  margin: 0 0 30px 0;
+  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 {
@@ -82,6 +87,7 @@
   background-color: #fbfbfb;
   -moz-user-select: none;
   border-right: 1px solid #b5b5b5;
+  z-index: 1;
 }
 
 .button {
@@ -133,7 +139,7 @@
   border-radius: 4px;
   border: 1px solid #b5b5b5;
   border-bottom-width: 0;
-  box-shadow: 0 1px 12px #666;
+  box-shadow: 0 1px 3px #c1c1c1;
 }
 
 .keep-open .dropdown-popup {
@@ -152,7 +158,7 @@
   position: absolute;
   top: 30px; /* offset arrow from top of popup */
   left: -16px;
-  width: 24px;
+  width: 16px;
   height: 24px;
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
   display: block;
@@ -251,6 +257,19 @@
 }
 
 /* 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;
 }
@@ -262,6 +281,19 @@
 #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,
@@ -292,7 +324,7 @@
 .content-width-minus-button,
 .content-width-plus-button,
 .line-height-minus-button,
-.line-height-plus-button  {
+.line-height-plus-button {
   background-color: transparent;
   border: 0;
   background-size: 18px 18px;
@@ -303,20 +335,21 @@
 /*======= Toolbar icons =======*/
 
 .close-button {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
+  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 {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  fill: #fff;
   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;
@@ -334,14 +367,6 @@
   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 }
 
-#pocket-button {
-  background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
-}
-
-#pocket-button:hover:active {
-  background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
-}
-
 .content-width-minus-button {
   background-size: 42px 16px;
   background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");