diff --git a/template/assets/settings.js b/template/assets/settings.js
index f38842a..bfc443e 100644
--- a/template/assets/settings.js
+++ b/template/assets/settings.js
@@ -13,6 +13,7 @@ var Settings = (function () {
this.opacity = parseFloat(getComputedStyle(this.logoEl).opacity) * 100;
this.el = document.createElement("div");
this.spinePlayerLoaded = false;
+ this.invertFilter = true;
}
Settings.prototype.validateConfig = function () {
if (typeof this.logoEl === "string")
@@ -46,6 +47,7 @@ var Settings = (function () {
Settings.prototype.setLogo = function (url, removeInvert) {
this.logoEl.src = url;
this.resizeLogo(this.ratio);
+ if (!this.invertFilter) return;
if (removeInvert) {
this.logoEl.style.filter = "invert(0)";
} else {
@@ -63,6 +65,10 @@ var Settings = (function () {
var opacity = parseFloat(value);
this.logoEl.style.opacity = opacity / 100;
};
+ Settings.prototype.disableInvertFilter = function (el) {
+ this.logoEl.style.filter = "invert(0)";
+ this.invertFilter = false;
+ };
Settings.prototype.positionReset = function () {
if (this.spinePlayerLoaded)
this.spinePlayer.updateViewport(window.operatorSettings.viewport)
diff --git a/template/assets/style.css b/template/assets/style.css
index 5eccfd3..b7a09af 100644
--- a/template/assets/style.css
+++ b/template/assets/style.css
@@ -24,9 +24,12 @@ body {
position: fixed;
left: 0;
top: 0;
+ z-index: -1;
+}
+
+.invert-filter {
filter: invert(1);
opacity: 0.3;
- z-index: -1;
}
.widget-wrapper {
diff --git a/template/index.html b/template/index.html
index 56fac05..897f83d 100644
--- a/template/index.html
+++ b/template/index.html
@@ -13,7 +13,7 @@
-
+