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 3a9a541234bc0f505cb9b8f32cf5bb5f14b2ca19..d089cfb6c17958d47c51f88638777ee6928da611 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 1b0d13335d1a45998f232e57c7d67ee25593dfd9..b028b93beae3bb263cdef810d954766c988ea044 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 64c3990dee18f119074ed37a233067e6443a8edd..16b762e29f581fd030da7f87274d34630ab647eb 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'); } /**