filippodb
/
LocalCDN-Firefox-Chrome-Brave
mirror of https://codeberg.org/nobody/LocalCDN.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Small visual improvements on options page

This commit is contained in:
nobody 2020-09-25 07:37:09 +02:00
parent 46f5ffac76
commit 87ad2c3bba
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
pages/base.css
View File

@ -21,7 +21,6 @@ a:hover {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid #aeaeae;
}
#button-copy-rule-set {
@ -29,13 +28,11 @@ a:hover {
padding: 5px;
font-size: 1.3em;
line-height: 2;
background-color: #f0f0f0;
text-align: center;
}
#button-copy-rule-set:hover {
cursor: pointer;
background-color: #c1c1c1;
}
#button-copy-rule-set-icon {
@ -52,6 +49,28 @@ textarea {
margin-top: 20px;
}
.btns {
padding: 5px 10px;
background-color: #f0f0f0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #aeaeae;
font-size: 1em;
line-height: 1.5;
}
.btns:hover {
cursor: pointer;
background-color: #c1c1c1;
}
.btns-active {
background-color: #c4c4c4 !important;
color: #515151 !important;
}
/**
* Checkboxes, Radiobuttons
*/
@ -230,7 +249,7 @@ textarea {
background-color: #434343;
}
#button-copy-rule-set, textarea, {
#button-copy-rule-set, textarea {
border: 1px solid #222;
}
@ -240,14 +259,9 @@ textarea {
}
#button-copy-rule-set {
background-color: #333;
color: #aeaeae;
}
#button-copy-rule-set:hover {
background-color: #2d2d2d;
}
#button-copy-rule-set-icon {
background: url('../../icons/copy-light.svg') no-repeat right center;
background-size: 20px 20px;
@ -271,4 +285,19 @@ textarea {
text-decoration: none;
cursor: pointer;
}
.btns {
background-color: #3c3c3c;
border-color: #616161;
color: #bbb;
}
.btns:hover {
background-color: #616161;
}
.btns-active {
background-color: #9f9f9f !important;
color: #222 !important;
}
}

10
pages/options/options.html
View File

@ -190,7 +190,7 @@
</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<button id="button-copy-rule-set" value="Copy"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
<button id="button-copy-rule-set" value="Copy" class="btns"><span data-i18n-content="copyRuleSet">Copy</span><span id="button-copy-rule-set-icon"></span></button>
</section>
</div>
</div>
@ -256,8 +256,8 @@
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="headerImportExport">Import/Export</div>
<div class="import-export">
<input type="button" id="import-data" value="Import Data" data-i18n-content="labelImportData"/>
<input type="button" id="export-data" value="Export Data" data-i18n-content="labelExportData"/>
<input type="button" id="import-data" class="btns" value="Import Data" data-i18n-content="labelImportData"/>
<input type="button" id="export-data" class="btns" value="Export Data" data-i18n-content="labelExportData"/>
<div class="hidden">
<input id="import-file-picker" type="file" accept="text/plain">
</div>
@ -270,8 +270,8 @@
<div class="option-group">
<section class="option info">
<div>
<input type="button" id="cdn"/>
<input type="button" id="framework"/>
<input type="button" id="cdn" class="btns"/>
<input type="button" id="framework" class="btns"/>
</div>
<ul id="unsupported-frameworks">
<li>Font Awesome are not supported by your browser</li>

9
pages/options/options.js
View File

@ -118,6 +118,7 @@ options._renderOptionsPanel = function () {
let url = chrome.runtime.getURL('icons/action/' + options._optionValues.selectedIcon.toLowerCase() + '/icon38-default.png');
document.getElementById('icon-badge-preview').src = url;
document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
document.getElementById('negate-html-filter-list-warning').addEventListener('click', function () { options._onLinkClick(Links.CODEBERG_HTML_FILTER); });
document.getElementById('link-welcome-page').addEventListener('click', function () { options._onLinkClick(Links.WELCOME); });
@ -299,6 +300,7 @@ options._renderInfoPanel = function () {
}
options._createList('cdn');
document.getElementById('cdn').classList.add('btns-active');
btnFrameworks.addEventListener('click', options._btnCreateList);
btnCDNs.addEventListener('click', options._btnCreateList);
@ -309,6 +311,13 @@ options._renderInfoPanel = function () {
};
options._btnCreateList = function ({ target }) {
if (target.id === 'cdn') {
document.getElementById('cdn').classList.add('btns-active');
document.getElementById('framework').classList.remove('btns-active');
} else {
document.getElementById('cdn').classList.remove('btns-active');
document.getElementById('framework').classList.add('btns-active');
}
options._createList(target.id);
};