Adjusting alert banner styling
parent
0063c4aa7f
commit
b4b7f51a3e
37
content.js
37
content.js
|
@ -59,15 +59,13 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
// Output CSS
|
||||
styleString = `
|
||||
#indie-wiki-banner {
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
width: 100%;
|
||||
z-index: 2147483647;
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
background-color: #acdae2;
|
||||
min-height: 40px;
|
||||
line-height: 28px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#indie-wiki-banner-exit {
|
||||
|
@ -76,15 +74,30 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
#indie-wiki-banner a {
|
||||
color: #000080;
|
||||
}
|
||||
#indie-wiki-banner a:hover {
|
||||
color: #000080;
|
||||
}
|
||||
#indie-wiki-banner-controls {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.indie-wiki-banner-link {
|
||||
color: navy;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: navy;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.indie-wiki-banner-big-text {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.indie-wiki-banner-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
@ -117,6 +130,11 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
bannerExit.innerText = '✕';
|
||||
bannerExit.onclick = function () { this.parentElement.remove(); };
|
||||
|
||||
// Output control links container
|
||||
var bannerControls = document.createElement('div');
|
||||
bannerControls.id = 'indie-wiki-banner-controls';
|
||||
banner.appendChild(bannerControls);
|
||||
|
||||
// Output "restore banner" link
|
||||
var bannerRestoreLink = document.createElement('div');
|
||||
bannerRestoreLink.id = 'indie-wiki-banner-restore';
|
||||
|
@ -124,7 +142,7 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
bannerRestoreLink.classList.add('indie-wiki-banner-link-small');
|
||||
bannerRestoreLink.classList.add('indie-wiki-banner-hidden');
|
||||
bannerRestoreLink.innerText = '⎌ Restore banner';
|
||||
banner.appendChild(bannerRestoreLink);
|
||||
bannerControls.appendChild(bannerRestoreLink);
|
||||
bannerRestoreLink.onclick = function (e) {
|
||||
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
|
||||
response.siteSettings.get(id).set('action', 'alert');
|
||||
|
@ -144,7 +162,7 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
bannerDisableLink.classList.add('indie-wiki-banner-link');
|
||||
bannerDisableLink.classList.add('indie-wiki-banner-link-small');
|
||||
bannerDisableLink.innerText = '✕ Disable banner for this wiki'
|
||||
banner.appendChild(bannerDisableLink);
|
||||
bannerControls.appendChild(bannerDisableLink);
|
||||
bannerDisableLink.onclick = function (e) {
|
||||
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
|
||||
response.siteSettings.get(id).set('action', 'disabled');
|
||||
|
@ -165,7 +183,7 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
bannerRedirectLink.classList.add('indie-wiki-banner-link');
|
||||
bannerRedirectLink.classList.add('indie-wiki-banner-link-small');
|
||||
bannerRedirectLink.innerText = '↪ Auto redirect this wiki';
|
||||
banner.appendChild(bannerRedirectLink);
|
||||
bannerControls.appendChild(bannerRedirectLink);
|
||||
bannerRedirectLink.onclick = function (e) {
|
||||
chrome.storage.sync.get({ 'siteSettings': {} }, function (response) {
|
||||
response.siteSettings.get(id).set('action', 'redirect');
|
||||
|
@ -180,10 +198,9 @@ function displayRedirectBanner(url, id, destination, storage) {
|
|||
});
|
||||
}
|
||||
|
||||
banner.appendChild(document.createElement('br'));
|
||||
|
||||
// Output main banner text
|
||||
var bannerText = document.createElement('span');
|
||||
bannerText.classList.add('indie-wiki-banner-big-text');
|
||||
banner.appendChild(bannerText);
|
||||
bannerText.textContent = 'There is an independent wiki covering this topic!'
|
||||
var bannerWikiLink = document.createElement('a');
|
||||
|
|
Loading…
Reference in New Issue