Update and refactor options page

pages/options/options.css

@@ -1,25 +1,83 @@
+/**
+ * Sections
+ */
+
+body {
+    color: #555;
+    font-family: 'Noto Sans', Arial, sans-serif !important;
+    font-size: 12px;
+}
+
+/**
+ * Fonts
+ */
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../modules/noto-sans/noto-sans.woff2')
+       format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../../modules/noto-sans/noto-sans-bold.woff2')
+       format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../../modules/noto-sans/noto-sans-italic.woff2')
+       format('woff2');
+}
+
 /**
  * Titles
  */
 
-.option-title {
-    font-weight: bold;
+.title-option {
+    align-items: center;
+    display: flex;
+    font-weight: 600;
 }
 
 /**
  * Controls
  */
 
-.text-input {
-    margin-left: 36px !important;
+.input-checkbox {
+    margin: 0 4px 0 0;
+}
+
+.input-text {
+    margin-left: 29px !important;
 }
 
 /**
  * Miscellaneous
  */
 
-.option-description {
+.description-option {
+    color: #777;
     font-style: italic;
-    margin-bottom: 16px;
-    padding-left: 36px;
+    margin-bottom: 18px;
+    padding-left: 29px;
+}
+
+.label {
+    border-radius: 3px;
+    color: #fff;
+    font-size: 8px;
+    margin-left: 6px;
+    padding: 3px 5px;
+    text-transform: uppercase;
+}
+
+.label-warning {
+    background-color: #ffa500;
 }

pages/options/options.html

@@ -19,20 +19,23 @@
 
         <section>
 
-            <label class="option-title">
-                <input data-option="blockMissing" type="checkbox">
+            <label class="title-option">
+
+                <input class="input-checkbox" data-option="blockMissing" type="checkbox">
                 <span data-i18n-content="blockMissingTitle"></span>
+                <span class="label label-warning">Advanced</span>
+
             </label>
 
-            <div class="option-description" data-i18n-content="blockMissingDescription"></div>
+            <div class="description-option" data-i18n-content="blockMissingDescription"></div>
 
         </section>
 
         <section>
 
-            <div class="option-title" data-i18n-content="domainWhitelistTitle"></div>
-            <input class="text-input" data-option="domainWhitelist" type="text">
-            <div class="option-description" data-i18n-content="domainWhitelistDescription"></div>
+            <div class="title-option" data-i18n-content="domainWhitelistTitle"></div>
+            <input class="input-text" data-option="domainWhitelist" type="text">
+            <div class="description-option" data-i18n-content="domainWhitelistDescription"></div>
 
         </section>
 

pages/popup/popup.css

@@ -47,21 +47,24 @@ footer {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('fonts/noto-sans.woff2') format('woff2');
+  src: url('../../modules/noto-sans/noto-sans.woff2')
+       format('woff2');
 }
 
 @font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 600;
-  src: url('fonts/noto-sans-bold.woff2') format('woff2');
+  src: url('../../modules/noto-sans/noto-sans-bold.woff2')
+       format('woff2');
 }
 
 @font-face {
   font-family: 'Noto Sans';
   font-style: italic;
   font-weight: 400;
-  src: url('fonts/noto-sans-italic.woff2') format('woff2');
+  src: url('../../modules/noto-sans/noto-sans-italic.woff2')
+       format('woff2');
 }
 
 /**