Adjusting alert banner styling

pull/161/head^2
Kevin Payravi 2023-06-30 01:44:20 -05:00
parent 0063c4aa7f
commit b4b7f51a3e
1 changed files with 27 additions and 10 deletions

View File

@ -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');