Skip to content
Snippets Groups Projects
Verified Commit 7246cc39 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Update and refactor options page

parent 1a82d81f
No related branches found
No related tags found
No related merge requests found
File moved
/**
* 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;
}
......@@ -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>
......
......@@ -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');
}
/**
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment