From 7246cc39c4306499e09d05dc7808f8f4d680c656 Mon Sep 17 00:00:00 2001
From: Thomas Rientjes <synzvato@protonmail.com>
Date: Wed, 6 Sep 2017 20:20:27 -0400
Subject: [PATCH] Update and refactor options page
---
.../noto-sans}/noto-sans-bold.woff2 | Bin
.../noto-sans}/noto-sans-italic.woff2 | Bin
.../noto-sans}/noto-sans.woff2 | Bin
pages/options/options.css | 72 ++++++++++++++++--
pages/options/options.html | 15 ++--
pages/popup/popup.css | 9 ++-
6 files changed, 80 insertions(+), 16 deletions(-)
rename {pages/popup/fonts => modules/noto-sans}/noto-sans-bold.woff2 (100%)
rename {pages/popup/fonts => modules/noto-sans}/noto-sans-italic.woff2 (100%)
rename {pages/popup/fonts => modules/noto-sans}/noto-sans.woff2 (100%)
diff --git a/pages/popup/fonts/noto-sans-bold.woff2 b/modules/noto-sans/noto-sans-bold.woff2
similarity index 100%
rename from pages/popup/fonts/noto-sans-bold.woff2
rename to modules/noto-sans/noto-sans-bold.woff2
diff --git a/pages/popup/fonts/noto-sans-italic.woff2 b/modules/noto-sans/noto-sans-italic.woff2
similarity index 100%
rename from pages/popup/fonts/noto-sans-italic.woff2
rename to modules/noto-sans/noto-sans-italic.woff2
diff --git a/pages/popup/fonts/noto-sans.woff2 b/modules/noto-sans/noto-sans.woff2
similarity index 100%
rename from pages/popup/fonts/noto-sans.woff2
rename to modules/noto-sans/noto-sans.woff2
diff --git a/pages/options/options.css b/pages/options/options.css
index 3a9a541..d089cfb 100644
--- a/pages/options/options.css
+++ b/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;
}
diff --git a/pages/options/options.html b/pages/options/options.html
index 1b0d133..b028b93 100644
--- a/pages/options/options.html
+++ b/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>
diff --git a/pages/popup/popup.css b/pages/popup/popup.css
index 64c3990..16b762e 100644
--- a/pages/popup/popup.css
+++ b/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');
}
/**
--
GitLab