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

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

diff --git a/LCARStrek/global/aboutReaderControls.css b/LCARStrek/global/aboutReaderControls.css
index 005a3b9b42f18ac616b29fcfeed220433639a618..2a4b66e5414aa0766e3704bb738ffd9cae7a7e40 100644 (file)
--- a/LCARStrek/global/aboutReaderControls.css
+++ b/LCARStrek/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 {
@@ -120,7 +126,7 @@
   padding: 0;
 }
 
-/*======= Font style popup =======*/
+/*======= Popup =======*/
 
 .dropdown-popup {
   min-width: 300px;
@@ -133,7 +139,11 @@
   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 {
+  z-index: initial;
 }
 
 .dropdown-popup > hr {
@@ -148,15 +158,19 @@
   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;
 }
 
+/*======= Font style popup =======*/
+
 #font-type-buttons,
 #font-size-buttons,
-#color-scheme-buttons {
+#color-scheme-buttons,
+#content-width-buttons,
+#line-height-buttons {
   display: flex;
   flex-direction: row;
 }
@@ -176,13 +190,17 @@
 
 #font-type-buttons > button,
 #font-size-buttons > button,
-#color-scheme-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 {
+#font-size-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
   width: 50%;
   background-color: transparent;
   border-left: 1px solid #B5B5B5;
@@ -200,7 +218,9 @@
 }
 
 #font-type-buttons > button:first-child,
-#font-size-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;
 }
 
@@ -211,7 +231,9 @@
 }
 
 #font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
   height: 60px;
 }
 
@@ -275,14 +297,20 @@
 
 .button:hover,
 #font-size-buttons > button:hover,
-#font-type-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 {
+#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;
 }
 
@@ -292,7 +320,11 @@
 }
 
 .minus-button,
-.plus-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;
@@ -300,53 +332,24 @@
   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;
-}
-
-.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 */
-.share-button {
-  display: none;
-}
-
 .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;
@@ -356,21 +359,6 @@
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 }
 
-.toggle-button.on {
-  background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
-}
-
-.toggle-button {
-  background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
-}
-
-.list-button {
-  background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
-}
-.list-button.on {
-  background-color: #d9d9d9;
-}
-
 .minus-button {
   background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
 }
@@ -379,19 +367,28 @@
   background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
 }
 
-#pocket-button {
-  background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
+.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");
 }
 
-#pocket-button:hover:active {
-  background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
+.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;
   }
-  .footer {
-    display: none !important;
-  }
 }