Put search engine CSS in stylesheet
Instead of injecting CSS rules into the original page's stylesheet, store the IWB styles in a CSS file and add that file to the manifest scripts.pull/716/head
SnorlaxMonster
GitHub
parent
4f6d09d832
commit
029dd60a0d
|
|
@ -0,0 +1,60 @@
|
|||
#indie-wiki-banner-container {
|
||||
font-family: sans-serif;
|
||||
width: 100%;
|
||||
z-index: 2147483647;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.indie-wiki-banner {
|
||||
background-color: #acdae2;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.indie-wiki-banner-exit {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.indie-wiki-banner-controls {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.indie-wiki-banner-big-text {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.indie-wiki-banner-big-text .indie-wiki-banner-link{
|
||||
font-size: 16px;
|
||||
}
|
||||
.indie-wiki-banner-link {
|
||||
font-weight: 600;
|
||||
color: #000080;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.indie-wiki-banner-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #000080;
|
||||
}
|
||||
.indie-wiki-banner-link-small {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
min-width: 180px;
|
||||
}
|
||||
.indie-wiki-banner-disabled {
|
||||
color: #333;
|
||||
cursor: default;
|
||||
}
|
||||
.indie-wiki-banner-disabled:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.indie-wiki-banner-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
.iwb-notice {
|
||||
display: block !important;
|
||||
margin: .5em .5em 1em .5em !important;
|
||||
padding: .5em .5em .5em 1em !important;
|
||||
border-left: 3px solid #FFCC33 !important;
|
||||
font-size: 14px !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-notice a {
|
||||
text-decoration: underline !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-notice button {
|
||||
cursor: pointer !important;
|
||||
display: inline-block !important;
|
||||
padding: 2px 8px !important;
|
||||
margin: 8px 8px 0 0 !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid !important;
|
||||
border-radius: 5px !important;
|
||||
font-size: 12px !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.iwb-hide {
|
||||
display: none !important;
|
||||
}
|
||||
.iwb-show {
|
||||
display: block !important;
|
||||
}
|
||||
.iwb-notice button:hover {
|
||||
outline: 1px solid !important;
|
||||
}
|
||||
.iwb-new-link-container {
|
||||
display: inline-block;
|
||||
font-size: 12px !important;
|
||||
text-decoration: none;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.iwb-new-link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
.iwb-new-link:hover {
|
||||
text-decoration: none;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.iwb-new-link button {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background: #005799;
|
||||
border: 0px solid #fff;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin: .5em 0;
|
||||
font-size: 1.2em;
|
||||
width: fit-content;
|
||||
}
|
||||
.iwb-new-link button:hover {
|
||||
background: #00467a;
|
||||
}
|
||||
.iwb-new-link button * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.iwb-new-link div:first-of-type {
|
||||
display: inline-block;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
margin-right: 10px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
line-height: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
.iwb-new-link img {
|
||||
width: 12px;
|
||||
}
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) {
|
||||
opacity: 60%;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
.iwb-disavow > a:not([class^="iwb-"]):not(.scs_child_rpr),
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a,
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a * {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.iwb-result-controls {
|
||||
display: inline-block;
|
||||
margin: .5em;
|
||||
font-size: 12px;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-result-controls > div {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.iwb-notice .iwb-result-controls {
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
|
@ -280,6 +280,9 @@
|
|||
"scripts/common-functions.js",
|
||||
"scripts/content-search-filtering.js"
|
||||
],
|
||||
"css": [
|
||||
"css/content-search-filtering.css"
|
||||
],
|
||||
"run_at": "document_end"
|
||||
},
|
||||
{
|
||||
|
|
@ -311,6 +314,9 @@
|
|||
"scripts/common-functions.js",
|
||||
"scripts/content-banners.js"
|
||||
],
|
||||
"css": [
|
||||
"css/content-banners.css"
|
||||
],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -104,6 +104,9 @@
|
|||
"scripts/common-functions.js",
|
||||
"scripts/content-banners.js"
|
||||
],
|
||||
"css": [
|
||||
"css/content-banners.css"
|
||||
],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
|
|
@ -358,6 +361,9 @@
|
|||
"scripts/common-functions.js",
|
||||
"scripts/content-search-filtering.js"
|
||||
],
|
||||
"css": [
|
||||
"css/content-search-filtering.css"
|
||||
],
|
||||
"run_at": "document_end"
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,78 +1,6 @@
|
|||
const breezewikiRegex = /breezewiki\.com$|antifandom\.com$|bw\.artemislena\.eu$|breezewiki\.catsarch\.com$|breezewiki\.esmailelbob\.xyz$|breezewiki\.frontendfriendly\.xyz$|bw\.hamstro\.dev$|breeze\.hostux\.net$|breezewiki\.hyperreal\.coffee$|breeze\.mint\.lgbt$|breezewiki\.nadeko\.net$|nerd\.whatever\.social$|breeze\.nohost\.network$|z\.opnxng\.com$|bw\.projectsegfau\.lt$|breezewiki\.pussthecat\.org$|bw\.vern\.cc$|breeze\.whateveritworks\.org$|breezewiki\.woodland\.cafe$/;
|
||||
const currentURL = new URL(document.location);
|
||||
|
||||
function outputCSS() {
|
||||
if (!document.getElementById('iwb-banner-styles')) {
|
||||
styleString = `
|
||||
#indie-wiki-banner-container {
|
||||
font-family: sans-serif;
|
||||
width: 100%;
|
||||
z-index: 2147483647;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.indie-wiki-banner {
|
||||
background-color: #acdae2;
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.indie-wiki-banner-exit {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.indie-wiki-banner-controls {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.indie-wiki-banner-big-text {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.indie-wiki-banner-big-text .indie-wiki-banner-link{
|
||||
font-size: 16px;
|
||||
}
|
||||
.indie-wiki-banner-link {
|
||||
font-weight: 600;
|
||||
color: #000080;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.indie-wiki-banner-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #000080;
|
||||
}
|
||||
.indie-wiki-banner-link-small {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
min-width: 180px;
|
||||
}
|
||||
.indie-wiki-banner-disabled {
|
||||
color: #333;
|
||||
cursor: default;
|
||||
}
|
||||
.indie-wiki-banner-disabled:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.indie-wiki-banner-hidden {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
style = document.createElement('style');
|
||||
style.id = 'iwb-banner-styles';
|
||||
style.textContent = styleString;
|
||||
document.head.append(style);
|
||||
}
|
||||
}
|
||||
|
||||
function outputBannerContainer() {
|
||||
if (!document.getElementById('indie-wiki-banner-container')) {
|
||||
const container = document.createElement('div');
|
||||
|
|
@ -140,8 +68,6 @@ function processBreezeWikiBanner(storage) {
|
|||
|
||||
|
||||
function displayBreezewikiBanner(newUrl) {
|
||||
outputCSS();
|
||||
|
||||
// Output banner
|
||||
let banner = document.createElement('div');
|
||||
banner.id = 'indie-wiki-banner-bw';
|
||||
|
|
@ -177,8 +103,6 @@ function displayBreezewikiBanner(newUrl) {
|
|||
}
|
||||
|
||||
function displayRedirectBanner(newUrl, id, destinationName, destinationLanguage, tags, storage) {
|
||||
outputCSS();
|
||||
|
||||
// Output banner
|
||||
let banner = document.createElement('div');
|
||||
banner.id = 'indie-wiki-banner-redirect';
|
||||
|
|
|
|||
|
|
@ -24,130 +24,6 @@ function addDOMChangeObserver(callback, searchEngine, storage) {
|
|||
domObserver.observe(document.body, config);
|
||||
}
|
||||
|
||||
function insertCSS() {
|
||||
// Output CSS
|
||||
styleString = `
|
||||
.iwb-notice {
|
||||
display: block !important;
|
||||
margin: .5em .5em 1em .5em !important;
|
||||
padding: .5em .5em .5em 1em !important;
|
||||
border-left: 3px solid #FFCC33 !important;
|
||||
font-size: 14px !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-notice a {
|
||||
text-decoration: underline !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-notice button {
|
||||
cursor: pointer !important;
|
||||
display: inline-block !important;
|
||||
padding: 2px 8px !important;
|
||||
margin: 8px 8px 0 0 !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid !important;
|
||||
border-radius: 5px !important;
|
||||
font-size: 12px !important;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
.iwb-hide {
|
||||
display: none !important;
|
||||
}
|
||||
.iwb-show {
|
||||
display: block !important;
|
||||
}
|
||||
.iwb-notice button:hover {
|
||||
outline: 1px solid !important;
|
||||
}
|
||||
.iwb-new-link-container {
|
||||
display: inline-block;
|
||||
font-size: 12px !important;
|
||||
text-decoration: none;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.iwb-new-link {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
.iwb-new-link:hover {
|
||||
text-decoration: none;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.iwb-new-link button {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background: #005799;
|
||||
border: 0px solid #fff;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
margin: .5em 0;
|
||||
font-size: 1.2em;
|
||||
width: fit-content;
|
||||
}
|
||||
.iwb-new-link button:hover {
|
||||
background: #00467a;
|
||||
}
|
||||
.iwb-new-link button * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.iwb-new-link div:first-of-type {
|
||||
display: inline-block;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
margin-right: 10px;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
line-height: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
.iwb-new-link img {
|
||||
width: 12px;
|
||||
}
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) {
|
||||
opacity: 60%;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
.iwb-disavow > a:not([class^="iwb-"]):not(.scs_child_rpr),
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a,
|
||||
.iwb-disavow > *:not([class^="iwb-"]):not(.scs_child_rpr) a * {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
.iwb-result-controls {
|
||||
display: inline-block;
|
||||
margin: .5em;
|
||||
font-size: 12px;
|
||||
color: white !important;
|
||||
mix-blend-mode: difference !important;
|
||||
}
|
||||
.iwb-result-controls > div {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.iwb-notice .iwb-result-controls {
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
`
|
||||
style = document.createElement('style');
|
||||
style.classList.add('iwb-styles');
|
||||
style.textContent = styleString;
|
||||
document.head.append(style);
|
||||
}
|
||||
|
||||
// Function to convert strings to consistent IDs
|
||||
// Used to convert wiki names to element IDs
|
||||
function stringToId(string) {
|
||||
|
|
@ -448,27 +324,6 @@ async function filterSearchResult(matchingSite, searchResult, searchEngine, coun
|
|||
searchFilterSetting = storage.defaultSearchAction;
|
||||
}
|
||||
|
||||
// Output stylesheet if not already done
|
||||
if (!document.querySelector('.iwb-styles')) {
|
||||
const headElement = document.querySelector('head');
|
||||
if (headElement) {
|
||||
insertCSS();
|
||||
} else {
|
||||
// If head element doesn't exist, wait for it via MutationObserver
|
||||
const docObserver = new MutationObserver((mutations, mutationInstance) => {
|
||||
const headElement = document.querySelector('head');
|
||||
if (headElement && !document.querySelector('.iwb-styles')) {
|
||||
insertCSS();
|
||||
mutationInstance.disconnect();
|
||||
}
|
||||
});
|
||||
docObserver.observe(document, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const searchResultContainer = getSearchContainer(searchEngine, searchResult);
|
||||
|
||||
if (searchResultContainer) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue