Settings page embellished

pages/options/options.css

@@ -86,6 +86,10 @@ body {
     max-width: 320px;
 }
 
+input[type=radio] {
+    margin: 10px 10px 10px 0px;
+}
+
 /**
  * Icons
  */
@@ -145,6 +149,9 @@ body {
 
 #button-copy-rule-set {
     display: none;
+    padding: 5px;
+    margin-left: 29px;
+    font-size: 1.3em;
 }
 
 /**
@@ -204,6 +211,13 @@ body {
 
 #generated-rules {
     display: none;
+    margin-left: 29px;
+}
+
+.ruleset-generator {
+    display: flex;
+    align-items: center;
+    margin-left: 29px;
 }
 
 /**

pages/options/options.html

@@ -130,11 +130,12 @@
 
         <section class="option">
             <div class="title-option" data-i18n-content="generateRuleSetTitle"></div>
-            <div>
+            <div class="description-option">In case you're using uBlock or uMatrix you can generate the rules here. You have to add these rules manually in uBlock or uMatrix.</div>
+            <div class="ruleset-generator">
                 <input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
                 <label for="generate-ublock-rules">uBlock</label>
             </div>
-            <div>
+            <div class="ruleset-generator">
                 <input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
                 <label for="generate-umatrix-rules">uMatrix</label>
             </div>