a11y: clarity reading options button styling

Author: StephDriver

src/themes/clean/assets/css/clean.css

@@ -579,9 +579,14 @@ a[href^="http"] {
   background-color: var(--bg-body);
 }
 
+#reading-options .btn-background {
+    min-width: 3rem;
+}
+
 .btn-opt {
-    border: 1px solid #1C304A;
-    background: #f1f1f1;
+  background-color: inherit;
+  color: inherit;
+  border: 1px solid var(--brand-primary);
 }
 
 .dyslexia-friendly{

src/themes/clean/templates/elements/journal/reading.html

@@ -2,7 +2,7 @@
     <h2 class="sr-only">{% trans 'Text display options' %}</h2>
     <div class="btn-group-horizontal">
         <button
-            class="btn btn-opt"
+            class="btn-background"
             type="button"
             onclick="resizeText(-1)"
             aria-label="{% trans 'decrease text size' %}"
@@ -11,7 +11,7 @@ <h2 class="sr-only">{% trans 'Text display options' %}</h2>
             <span style="font-size: xx-small">Aa -</span>
         </button>
         <button
-            class="btn btn-opt"
+            class="btn-background"
             type="button"
             onclick="resizeText(1)"
             aria-label="{% trans 'increase text size' %}"
@@ -20,7 +20,7 @@ <h2 class="sr-only">{% trans 'Text display options' %}</h2>
             Aa +
         </button>
         <button
-            class="btn btn-opt"
+            class="btn-background"
             id="dyslexia-mode"
             type="button"
             onclick="toggleDyslexia()"