1 files changed, 48 insertions, 8 deletions

diff --git a/arc-firefox-theme/chrome/global/aboutReaderControls.css b/arc-firefox-theme/chrome/global/aboutReaderControls.css
index b640e3c..09f8bdc 100644
--- a/arc-firefox-theme/chrome/global/aboutReaderControls.css
+++ b/arc-firefox-theme/chrome/global/aboutReaderControls.css
@@ -162,7 +162,9 @@
 
 #font-type-buttons,
 #font-size-buttons,
-#color-scheme-buttons {
+#color-scheme-buttons,
+#content-width-buttons,
+#line-height-buttons {
   display: flex;
   flex-direction: row;
 }
@@ -182,13 +184,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;
@@ -206,7 +212,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;
 }
 
@@ -217,7 +225,9 @@
 }
 
 #font-size-buttons > button,
-#color-scheme-buttons > button {
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
   height: 60px;
 }
 
@@ -255,14 +265,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;
 }
 
@@ -272,7 +288,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;
@@ -314,6 +334,26 @@
   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;