diff --git a/img/bones.png b/img/bones.png index 5e5bdeb..dc32ced 100644 Binary files a/img/bones.png and b/img/bones.png differ diff --git a/img/left-hand.png b/img/left-hand.png index 4247ef3..5a1d1ee 100644 Binary files a/img/left-hand.png and b/img/left-hand.png differ diff --git a/img/lightbase.png b/img/lightbase.png index 5e59223..d758c1b 100644 Binary files a/img/lightbase.png and b/img/lightbase.png differ diff --git a/img/lightoff_inverted.png b/img/lightoff_inverted.png new file mode 100644 index 0000000..06fded8 Binary files /dev/null and b/img/lightoff_inverted.png differ diff --git a/img/lighton_inverted.png b/img/lighton_inverted.png new file mode 100644 index 0000000..19548e0 Binary files /dev/null and b/img/lighton_inverted.png differ diff --git a/img/right-hand.png b/img/right-hand.png index 66ab9e5..ff8d621 100644 Binary files a/img/right-hand.png and b/img/right-hand.png differ diff --git a/img/skull-eyes.png b/img/skull-eyes.png index 723a2b2..6fc2d19 100644 Binary files a/img/skull-eyes.png and b/img/skull-eyes.png differ diff --git a/img/skull.png b/img/skull.png index 6a18ef4..817fd43 100644 Binary files a/img/skull.png and b/img/skull.png differ diff --git a/img/tombstone.png b/img/tombstone.png index 4016f44..53e8440 100644 Binary files a/img/tombstone.png and b/img/tombstone.png differ diff --git a/img/tombstone_invert.png b/img/tombstone_invert.png new file mode 100644 index 0000000..53b26a1 Binary files /dev/null and b/img/tombstone_invert.png differ diff --git a/img/web-bottomright.png b/img/web-bottomright.png index aeef7c6..0008771 100644 Binary files a/img/web-bottomright.png and b/img/web-bottomright.png differ diff --git a/img/web-topleft.png b/img/web-topleft.png index dfb3525..75e624a 100644 Binary files a/img/web-topleft.png and b/img/web-topleft.png differ diff --git a/img/web-topright.png b/img/web-topright.png index a11a1c3..c72caf2 100644 Binary files a/img/web-topright.png and b/img/web-topright.png differ diff --git a/img/wiresbottom.png b/img/wiresbottom.png index 96b36f6..d812ef4 100644 Binary files a/img/wiresbottom.png and b/img/wiresbottom.png differ diff --git a/img/wiresleft.png b/img/wiresleft.png index 6ab8fc7..11d41ad 100644 Binary files a/img/wiresleft.png and b/img/wiresleft.png differ diff --git a/img/wiresright.png b/img/wiresright.png index 7a084ef..2c7cfda 100644 Binary files a/img/wiresright.png and b/img/wiresright.png differ diff --git a/src/css/hues-h.css b/src/css/hues-h.css index faf3dce..057bc67 100644 --- a/src/css/hues-h.css +++ b/src/css/hues-h.css @@ -3,6 +3,9 @@ .hues-h-text { color: #ff3300; } +.inverted .hues-h-text { + color: #00ccff; +} #preloadHelper.hues-h-text { background-color: black; @@ -11,6 +14,9 @@ .hues-h-textfade { color: rgba(255, 51, 0, 0.6); } +.inverted .hues-h-textfade { + color: rgba(0, 204, 255, 0.6); +} .hues-m-beatbar.hues-h-beatbar { border-style: none; @@ -27,6 +33,9 @@ box-shadow: none; padding-top: 21px; } +.inverted .hues-m-beatcenter.hues-h-text { + background-position: -42px 0; +} .hues-m-beatcenter.hues-h-text > span { font-size: 13px; @@ -48,6 +57,13 @@ animation-name: hues-m-beatcenter; animation-fill-mode: forwards; } +.inverted .hues-h-eyes { + /* Set as important to override the other .inverted selector from modern */ + background: none !important; + background-image: url('../img/skull-eyes.png') !important; + box-shadow: none !important; + background-position: -42px 0 !important; +} .hues-h-left-hand { background: url('../img/left-hand.png'); @@ -65,6 +81,9 @@ position: absolute; background-repeat: no-repeat; } +.inverted .hues-h-left-hand, .inverted .hues-h-right-hand { + background-position: -63px 0; +} .hues-m-controls.hues-h-controls { background: none; @@ -84,7 +103,10 @@ background: none; border-style: solid; border-width: 0px 19px 0px 18px; - border-image: url(../img/bones.png) 0 19 0 18 fill repeat stretch; + border-image: url(../img/bones.png) 29 19 0 18 fill repeat stretch; +} +.inverted .hues-m-songtitle.hues-h-text, .inverted .hues-m-imagename.hues-h-text { + border-image-slice: 0 19 29 18 fill; } .hues-m-huename.hues-h-text { @@ -132,39 +154,61 @@ } .hues-h-tombstone { - border-style: solid; - border-width: 22px 40px 0px 42px; - border-image: url(../img/tombstone.png) 22 42 0 42 fill repeat; height: 36px; position: absolute; bottom: 0; left: 0; right: 0; z-index: -10; + + border-style: solid; + border-width: 22px 40px 0px 42px; + border-image: url(../img/tombstone.png) 22 42 0 fill stretch; +} +.inverted .hues-h-tombstone { + border-image: url(../img/tombstone_invert.png) 22 42 0 fill stretch; } .hues-h-text + input[type=range]::-webkit-slider-runnable-track { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-webkit-slider-runnable-track { + background: #00ccff; +} .hues-h-text + input[type=range]::-webkit-slider-thumb { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-webkit-slider-thumb { + background: #00ccff; +} .hues-h-text + input[type=range]::-moz-range-track { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-moz-range-track { + background: #00ccff; +} .hues-h-text + input[type=range]::-moz-range-thumb { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-moz-range-thumb { + background: #00ccff; +} .hues-h-text + input[type=range]::-ms-fill-lower { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-ms-fill-lower { + background: #00ccff; +} .hues-h-text + input[type=range]::-ms-thumb { background: #ff3300; } +.inverted .hues-h-text + input[type=range]::-ms-thumb { + background: #00ccff; +} .hues-h-topleft, .hues-h-topright, .hues-h-bottomright { position: absolute; @@ -185,12 +229,18 @@ width: 269px; height: 237px; } +.inverted .hues-h-topleft { + background-position: -269px 0; +} .hues-h-topright { background-image: url("../img/web-topright.png"); width: 215px; height: 220px; } +.inverted .hues-h-topright { + background-position: -215px 0; +} .hues-h-bottomright { background-image: url("../img/web-bottomright.png"); @@ -198,6 +248,9 @@ width:358px; height: 284px; } +.inverted .hues-h-bottomright { + background-position: -358px 0; +} .hues-h-vignette { background-image: url("../img/vignette.png"); diff --git a/src/css/hues-m.css b/src/css/hues-m.css index bda6d80..a0ea4a2 100644 --- a/src/css/hues-m.css +++ b/src/css/hues-m.css @@ -44,6 +44,9 @@ border-width: 0 4px 4px; border-style: solid; } +.inverted .hues-m-beatbar { + border-color: rgba(255,255,255,0.5); +} .hues-m-beatleft, .hues-m-beatright, .hues-m-songtitle, .hues-m-imagename, .hues-m-huename { color: white; @@ -55,6 +58,10 @@ white-space: nowrap; border-radius: 10px; } +.inverted .hues-m-beatleft, .inverted .hues-m-beatright, +.inverted .hues-m-songtitle, .inverted .hues-m-imagename, .inverted .hues-m-huename { + background: rgba(255,255,255,0.7); +} .hues-m-leftinfo, .hues-m-rightinfo { position: absolute; @@ -64,6 +71,9 @@ bottom: 79px; width: 100px; } +.inverted .hues-m-leftinfo, .inverted .hues-m-rightinfo { + color: rgba(0,0,0, 0.7); +} .hues-m-leftinfo { left: 8px; @@ -106,13 +116,18 @@ height: 40px; width: 40px; color: white; - background: rgb(80,80,80); + background: #505050; font-size: 20px; line-height: 40px; border-radius: 20px; text-align: center; box-shadow: inset 0 0 12px rgba(0,0,0,0.5); } +.inverted .hues-m-beatcenter { + color: black; + background: #afafaf; + box-shadow: inset 0 0 12px rgba(255,255,255,0.5); +} .hues-m-beatcenter > span { animation-duration: 150ms; @@ -145,6 +160,10 @@ border-width: 4px 4px 0; border-style: solid; } +.inverted .hues-m-controls { + color: rgba(0,0,0,0.7); + border-color: rgba(255,255,255,0.5); +} .hues-m-songtitle, .hues-m-imagename, .hues-m-huename { position: absolute; @@ -224,12 +243,17 @@ } .hues-m-prevbutton:hover, .hues-m-nextbutton:hover, .hues-m-actbutton:hover { - background: rgb(100,100,100); + background: #646464; +} +.inverted .hues-m-prevbutton:hover, +.inverted .hues-m-nextbutton:hover, +.inverted .hues-m-actbutton:hover { + background: #9b9b9b; } .hues-m-prevbutton, .hues-m-nextbutton { color: white; - background: rgb(40,40,40); + background: #282828; height: 20px; line-height: 20px; font-size: 12px; @@ -237,6 +261,10 @@ border-radius: 10px; top: 7.5px; } +.inverted .hues-m-prevbutton, .inverted .hues-m-nextbutton { + color: black; + background: #D7D7D7; +} .hues-m-prevbutton { padding: 0 10px 0 0; @@ -255,13 +283,17 @@ width: 35px; left: 17.5px; color: white; - background: rgb(32,32,32); + background: #202020; font-size: 20px; line-height: 35px; border-radius: 20px; text-align: center; z-index: 1; } +.inverted .hues-m-actbutton { + color: black; + background: #DFDFDF; +} .hues-m-huename { bottom: 5px; @@ -299,10 +331,16 @@ border-top-right-radius: 100px; cursor: pointer; } +.inverted .hues-m-hiderestore { + background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.2)); +} .hues-m-hiderestore:hover { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)); } +.inverted .hues-m-hiderestore:hover { +background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.4)); +} .hues-m-hiderestore.hidden { display: block; @@ -374,6 +412,9 @@ input[type=range]::-webkit-slider-runnable-track { border: none; border-radius: 0; } +.inverted input[type=range]::-webkit-slider-runnable-track { + background: rgba(0,0,0,0.7); +} input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; @@ -382,9 +423,12 @@ input[type=range]::-webkit-slider-thumb { height: 12px; width: 4px; border-radius: 0; - background: rgb(255,255,255); + background: white; margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ } +.inverted input[type=range]::-webkit-slider-thumb { + background: white; +} input[type=range]::-moz-range-track { width: 100%; @@ -393,6 +437,9 @@ input[type=range]::-moz-range-track { border: none; border-radius: 0; } +.inverted input[type=range]::-moz-range-track { + background: rgba(0,0,0,0.7); +} input[type=range]::-moz-range-thumb { box-shadow: none; @@ -400,7 +447,10 @@ input[type=range]::-moz-range-thumb { height: 12px; width: 4px; border-radius: 0; - background: rgb(255,255,255); + background: white; +} +.inverted input[type=range]::-moz-range-thumb { + background: black; } input[type=range]::-ms-track { @@ -415,9 +465,15 @@ input[type=range]::-ms-track { input[type=range]::-ms-fill-lower { background: rgba(255,255,255,0.7); } +.inverted input[type=range]::-ms-fill-lower { + background: rgba(0,0,0,0.7); +} input[type=range]::-ms-fill-upper { background: rgba(0,0,0,0.7); } +.inverted input[type=range]::-ms-fill-upper { + background: rgba(255,255,255,0.7); +} input[type=range]::-ms-thumb { box-shadow: none; @@ -425,7 +481,10 @@ input[type=range]::-ms-thumb { height: 12px; width: 4px; border-radius: 0; - background: rgb(255,255,255); + background: white; +} +.inverted input[type=range]::-ms-thumb { + background: black; } @media (min-width: 768px) { diff --git a/src/css/hues-r.css b/src/css/hues-r.css index 5c12990..202007d 100644 --- a/src/css/hues-r.css +++ b/src/css/hues-r.css @@ -1,5 +1,9 @@ /* RetroUI */ +.RetroUI.inverted { + color: white; +} + .hues-r-container { position: absolute; bottom: 0px; diff --git a/src/css/hues-w.css b/src/css/hues-w.css index 20c1a41..1879dca 100644 --- a/src/css/hues-w.css +++ b/src/css/hues-w.css @@ -1,5 +1,9 @@ /* WeedUI */ +.WeedUI.inverted { + color: white; +} + .hues-w-controls { display:flex; align-items:center; @@ -72,6 +76,9 @@ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-duration: 0.5s; } +.inverted .hues-w-beataccent{ + text-shadow: -2px 2px 0px #999; +} @keyframes fallspin { from {transform: rotate(0deg) translate(0px, 0px); diff --git a/src/css/hues-x.css b/src/css/hues-x.css index 02ec58a..4874920 100644 --- a/src/css/hues-x.css +++ b/src/css/hues-x.css @@ -27,8 +27,12 @@ height: 113px; transform-origin: 32px 69px; background-image: url("../img/lightbase.png"); + background-position: 0 0; background-repeat: no-repeat; } +.inverted .hues-x-light { + background-position: -68px 0; +} .hues-x-fade{ transition: opacity 0.1s linear; @@ -47,11 +51,17 @@ opacity: 1; background-image: url("../img/lighton.png"); } +.inverted .hues-x-lighton { + background-image: url("../img/lighton_inverted.png"); +} .hues-x-lightoff { opacity: 0; background-image: url("../img/lightoff.png"); } +.inverted .hues-x-lightoff { + background-image: url("../img/lightoff_inverted.png"); +} .hues-x-lighton.off{ opacity: 0; @@ -65,24 +75,42 @@ position: absolute; background-repeat: no-repeat; } +.hues-x-wiresleft::before, .hues-x-wiresbottom::before, .hues-x-wiresright::before { + content: ''; + position: absolute; + z-index: -1; +} .hues-x-wiresleft, .hues-x-wiresright { height: 100%; + width: 200px; top: 0px; overflow: hidden; } .hues-x-wiresleft { - width: 200px; left: 0px; +} +.hues-x-wiresleft::before { + width: 60px; + height: 1435px; background-image: url("../img/wiresleft.png"); } +.inverted .hues-x-wiresleft::before { + background-position: -60px 0; +} .hues-x-wiresright { - width: 200px; right: 0px; +} +.hues-x-wiresright::before { + right: 0; + width: 58px; + height: 1261px; background-image: url("../img/wiresright.png"); - background-position: 141px 0px; +} +.inverted .hues-x-wiresright::before { + background-position: 58px 0px; } .hues-x-wiresbottomhelper { @@ -95,13 +123,21 @@ .hues-x-wiresbottom { height: 200px; - width:2889px; - background-image: url("../img/wiresbottom.png"); - background-position: 0px 144px; + width:2621px; left:50%; - margin-left: -1444.5px; + margin-left: -1310.5px; overflow: hidden; } +.hues-x-wiresbottom::before { + bottom: 0; + width: 2621px; + height: 49px; + background-image: url("../img/wiresbottom.png"); + background-position: 127px 49px; +} +.inverted .hues-x-wiresbottom::before { + background-position: 127px 0px; +} .hues-x-visualisercontainer { transform: scaleY(-1); diff --git a/src/js/HuesCanvas.js b/src/js/HuesCanvas.js index 1e7a67d..a418291 100644 --- a/src/js/HuesCanvas.js +++ b/src/js/HuesCanvas.js @@ -30,6 +30,7 @@ function HuesCanvas(element, audioContext, core) { core.addEventListener("newimage", this.setImage.bind(this)); core.addEventListener("newcolour", this.setColour.bind(this)); core.addEventListener("beat", this.beat.bind(this)); + core.addEventListener("invert", this.setInvert.bind(this)); core.addEventListener("settingsupdated", this.settingsUpdated.bind(this)); this.core = core; @@ -63,6 +64,8 @@ function HuesCanvas(element, audioContext, core) { this.blackout = false; this.blackoutColour = "#000"; // for the whiteout case we must store this this.blackoutTimeout = null; + + this.invert = false; this.colourFade = false; this.colourFadeStart=0; @@ -98,6 +101,11 @@ function HuesCanvas(element, audioContext, core) { requestAnimationFrame(this.animationLoop.bind(this)); } +HuesCanvas.prototype.setInvert = function(invert) { + this.invert = invert; + this.needsRedraw = true; +} + HuesCanvas.prototype.settingsUpdated = function() { this.setSmartAlign(localStorage["smartAlign"]); this.setBlurAmount(localStorage["blurAmount"]); @@ -133,6 +141,7 @@ HuesCanvas.prototype.redraw = function() { this.context.fillStyle = this.blackoutColour; this.context.fillRect(0,0,width,720); this.needsRedraw = false; + this.drawInvert(); return; } } else { @@ -230,8 +239,18 @@ HuesCanvas.prototype.redraw = function() { } else { this.needsRedraw = false; } + this.drawInvert(); }; +HuesCanvas.prototype.drawInvert = function() { + if(this.invert) { + this.context.globalAlpha = 1; + this.context.globalCompositeOperation = "difference"; + this.context.fillStyle = "#FFF"; + this.context.fillRect(0,0,this.canvas.width,720); + } +} + /* Second fastest method from http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript It stil does millions of ops per second, and isn't ugly like the integer if/else */ @@ -515,7 +534,11 @@ HuesCanvas.prototype.drawSnow = function() { let delta = this.lastSnow - this.audio.currentTime; this.snowContext.clearRect(0, 0, width, height); - this.snowContext.fillStyle = "rgba(255, 255, 255, 0.8)"; + if(this.invert) { + this.snowContext.fillStyle = "rgba(0, 0, 0, 0.8)"; + } else { + this.snowContext.fillStyle = "rgba(255, 255, 255, 0.8)"; + } this.snowContext.beginPath(); for(let i = 0; i < this.maxSnow; i++) { let flake = this.snowflakes[i]; diff --git a/src/js/HuesCore.js b/src/js/HuesCore.js index d4eec4a..5f83d2c 100644 --- a/src/js/HuesCore.js +++ b/src/js/HuesCore.js @@ -727,13 +727,6 @@ HuesCore.prototype.toggleFullAuto = function() { HuesCore.prototype.setInvert = function(invert) { this.invert = invert; - if(invert) { - document.documentElement.style.filter = "invert(100%)"; - document.documentElement.style.webkitFilter = "invert(100%)"; - } else { - document.documentElement.style.filter = ""; - document.documentElement.style.webkitFilter = ""; - } this.callEventListeners("invert", invert); }; @@ -758,6 +751,7 @@ HuesCore.prototype.changeUI = function(index) { this.callEventListeners("newimage", this.currentImage); this.callEventListeners("newcolour", this.colours[this.colourIndex], false); this.callEventListeners("beat", this.getBeatString(), this.getBeatIndex()); + this.callEventListeners("invert", this.invert); } }; diff --git a/src/js/HuesSettings.js b/src/js/HuesSettings.js index 65e8521..e98dfde 100644 --- a/src/js/HuesSettings.js +++ b/src/js/HuesSettings.js @@ -263,7 +263,6 @@ function HuesSettings(defaults) { HuesSettings.prototype.connectCore = function(core) { this.core = core; - core.addEventListener("invert", this.onInvert.bind(this)); core.settingsUpdated(); }; @@ -309,17 +308,6 @@ HuesSettings.prototype.showInfo = function() { document.getElementById("tab-info").click(); }; -// We don't want the settings window inverted, it makes editing annoying -HuesSettings.prototype.onInvert = function(invert) { - if(invert) { - this.window.style.filter = "invert(100%)"; - this.window.style.webkitFilter = "invert(100%)"; - } else { - this.window.style.filter = ""; - this.window.style.webkitFilter = ""; - } -}; - HuesSettings.prototype.initUI = function() { let doc = this.root.ownerDocument; diff --git a/src/js/HuesUI.js b/src/js/HuesUI.js index b54751e..bb475da 100644 --- a/src/js/HuesUI.js +++ b/src/js/HuesUI.js @@ -27,12 +27,12 @@ to put all your own elements under, but make a div underneath so it can be entirely hidden. */ -function HuesUI(parent) { +function HuesUI(parent, name) { if(!parent) { parent = document.getElementById("huesUI"); } this.root = document.createElement("div"); - this.root.className = this.constructor.name; + this.root.className = name ? name : this.constructor.name; parent.appendChild(this.root); this.root.style.display = "none"; @@ -159,6 +159,7 @@ HuesUI.prototype.initUI = function() { this.addCoreCallback("newcolour", this.newColour.bind(this)); this.addCoreCallback("blurupdate", this.blurUpdated.bind(this)); this.addCoreCallback("time", this.updateTime.bind(this)); + this.addCoreCallback("invert", this.invert.bind(this)); this.resizeHandler = this.resize.bind(this); }; @@ -259,11 +260,19 @@ HuesUI.prototype.intToHex = function(num, pad) { return prefix + "0x" + str; }; +HuesUI.prototype.invert = function(invert) { + if (invert) { + this.root.classList.add("inverted"); + } else { + this.root.classList.remove("inverted"); + } +} + /* Individual UIs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -function RetroUI() { +function RetroUI(parent, name) { this.container = null; this.mode = null; this.beatBar = null; @@ -273,7 +282,7 @@ function RetroUI() { this.imageModeAuto = null; this.subControls = null; - HuesUI.call(this); + HuesUI.call(this, parent, name ? name : "RetroUI"); } RetroUI.prototype = Object.create(HuesUI.prototype); @@ -422,8 +431,8 @@ RetroUI.prototype.resize = function() { this.core.resizeVisualiser(); }; -function WeedUI() { - RetroUI.call(this); +function WeedUI(parent, name) { + RetroUI.call(this, parent, name ? name : "WeedUI"); this.xVariance = 10; this.yVariance = 20; @@ -502,7 +511,7 @@ WeedUI.prototype.removeBeat = function(element) { this.root.removeChild(element); }; -function ModernUI() { +function ModernUI(parent, name) { this.beatBar = null; this.beatLeft = null; this.beatRight = null; @@ -518,7 +527,7 @@ function ModernUI() { this.currentBeat = "."; - HuesUI.call(this); + HuesUI.call(this, parent, name ? name : "ModernUI"); this.hidden = 0; // we have a 3 stage hide } @@ -787,9 +796,11 @@ ModernUI.prototype.newImage = function(image) { this.resizeImage(); }; -function XmasUI() { - ModernUI.call(this); - +function XmasUI(parent, name) { + ModernUI.call(this, parent, name ? name : "XmasUI"); + // This will cache our inverted lights images + this.invert(true); + this.controls.removeChild(this.leftBox); this.controls.removeChild(this.rightBox); this.controls.removeChild(this.rightInfo); @@ -883,8 +894,8 @@ XmasUI.prototype.lightFadeOut = function(light) { XmasUI.prototype.lightRecolour = function(light) { let hue = Math.floor(Math.random() * 7) * -56; - light.on.style.backgroundPosition = hue + "px, 0, center"; - light.off.style.backgroundPosition = hue + "px, 0, center"; + light.on.style.backgroundPosition = hue + "px 0"; + light.off.style.backgroundPosition = hue + "px 0"; }; XmasUI.prototype.randomLight = function(light) { @@ -936,8 +947,10 @@ XmasUI.prototype.newColour = function(colour) {}; XmasUI.prototype.blurUpdated = function(x, y) {}; XmasUI.prototype.updateTime = function(time) {}; -function HalloweenUI() { - ModernUI.call(this); +function HalloweenUI(parent, name) { + ModernUI.call(this, parent, name ? name : "HalloweenUI"); + // This will cache our inverted tombstone image + this.invert(true); } HalloweenUI.prototype = Object.create(ModernUI.prototype); @@ -1010,8 +1023,6 @@ HalloweenUI.prototype.initUI = function() { this.vignette = document.createElement("div"); this.vignette.className = "hues-h-vignette"; this.root.appendChild(this.vignette); - - this.addCoreCallback("invert", this.invert.bind(this)); }; HalloweenUI.prototype.beat = function(beats, index) { @@ -1024,16 +1035,6 @@ HalloweenUI.prototype.beat = function(beats, index) { } }; -HalloweenUI.prototype.invert = function(invert) { - if(invert) { - this.vignette.style.filter = "invert(100%)"; - this.vignette.style.webkitFilter = "invert(100%)"; - } else { - this.vignette.style.filter = ""; - this.vignette.style.webkitFilter = ""; - } -}; - HalloweenUI.prototype.connectCore = function(core) { ModernUI.prototype.connectCore.call(this, core);