Improved options page

pages/base.css

@@ -62,7 +62,7 @@ a:hover {
 
 .b-contain span {
     line-height: 1.54;
-    font-size: 1rem;
+    font-size: 0.9rem;
     font-family: inherit;
 }
 

pages/options/options.css

@@ -6,7 +6,7 @@ body {
     color: #555;
     cursor: default;
     font-family: 'Noto Sans', Arial, sans-serif !important;
-    font-size: 14px;
+    font-size: 0.9rem;
     margin-top: -15px;
     padding: 10px !important;
 }
@@ -91,7 +91,6 @@ body {
     align-items: center;
     display: flex;
     font-weight: 600;
-    font-size: 1rem;
 }
 
 /**
@@ -190,6 +189,7 @@ body {
     color: #777;
     font-style: italic;
     padding-left: 1.8rem;
+    font-size: 0.8rem;
 }
 
 .badge {
@@ -269,20 +269,31 @@ body {
 
 #block-google-fonts {
     padding-left: 1.8rem;
+    padding-bottom: 0px;
+    padding-top: 0.5rem;
 }
 
-.bgf-slideup, .bgf-slidedown {
-    max-height: 0px;
-    overflow-y: hidden;
-    padding-bottom: 0px;
-    -webkit-transition: max-height 0.8s ease-in-out;
-    -moz-transition: max-height 0.8s ease-in-out;
-    -o-transition: max-height 0.8s ease-in-out;
-    transition: max-height 0.8s ease-in-out;
+#block-google-fonts-desc {
+    padding-left: 0px;
 }
-.bgf-slidedown {
-    padding-top: .5rem;
-    max-height: 100px;
+
+.option-disabled > .title-option > .b-contain,
+.b-contain input[type="checkbox"]:disabled ~ .b-input {
+    cursor: default !important;
+}
+
+.option-disabled {
+    color: gray !important;
+}
+
+.option-disabled > .title-option > .b-contain > .b-input {
+    background: gray !important;
+    cursor: default;
+}
+
+.option-disabled > .title-option > .b-contain input:checked ~ .b-input {
+    background: gray !important;
+    border-color: gray !important;
 }
 
 /**

pages/options/options.html

@@ -47,15 +47,15 @@
                     <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
                 </div>
                 <div class="description-option" data-i18n-content="blockMissingDescription"></div>
-                <div id="block-google-fonts" class="option bgf-slideup">
+                <div id="block-google-fonts" class="option option-disabled">
                     <div class="title-option">
                         <label class="b-contain">
-                            <input data-option="blockGoogleFonts" type="checkbox">
+                            <input id="block-google-fonts-chk" data-option="blockGoogleFonts" type="checkbox">
                             <span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
                             <div class="b-input"></div>
                         </label>
                     </div>
-                    <div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
+                    <div id="block-google-fonts-desc" class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
                 </div>
             </section>
             <section class="option">

pages/options/options.js

@@ -370,11 +370,11 @@ options._updatesDomainLists = function(changes) {
 
 options._displayBlockGoogleFonts = function(value) {
     if (value === true) {
-        document.getElementById('block-google-fonts').classList.add('bgf-slideup');
-        document.getElementById('block-google-fonts').classList.remove('bgf-slidedown');
+        document.getElementById('block-google-fonts').classList.add('option-disabled');
+        document.getElementById('block-google-fonts-chk').disabled = true;
     } else {
-        document.getElementById('block-google-fonts').classList.add('bgf-slidedown');
-        document.getElementById('block-google-fonts').classList.remove('bgf-slideup');
+        document.getElementById('block-google-fonts').classList.remove('option-disabled');
+        document.getElementById('block-google-fonts-chk').disabled = false;
     }
 };