diff --git a/css/hues-h.css b/css/hues-h.css index d305d15..9ea5d51 100644 --- a/css/hues-h.css +++ b/css/hues-h.css @@ -13,6 +13,56 @@ .hues-m-beatbar.hues-h-beatbar { border-style: none; background: none; + overflow: inherit; +} + +.hues-m-beatcenter.hues-h-text { + background: none; + background-image: url('../img/skull.png'); + top: 0px; + width: 42px; + height: 43px; + box-shadow: none; + padding-top: 21px; +} + +.hues-m-beatcenter.hues-h-text > span { + font-size: 13px; +} + +.hues-h-eyes { + background: none; + background-image: url('../img/skull-eyes.png'); + top: 0px; + width: 42px; + height: 64px; + box-shadow: none; + + -moz-animation-duration: 150ms; + -webkit-animation-duration: 150ms; + animation-duration: 150ms; + -moz-animation-name: hues-m-beatcenter; + -webkit-animation-name: hues-m-beatcenter; + animation-name: hues-m-beatcenter; + -moz-animation-fill-mode: forwards; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +.hues-h-left-hand, .hues-h-right-hand { + width: 63px; + height: 42px; + position: absolute; +} + +.hues-h-left-hand { + background: url('../img/left-hand.png'); + left: -15px; +} + +.hues-h-right-hand { + background: url('../img/right-hand.png'); + right: -15px; } .hues-m-controls.hues-h-controls { diff --git a/img/left-hand.png b/img/left-hand.png new file mode 100644 index 0000000..1b1a5d5 Binary files /dev/null and b/img/left-hand.png differ diff --git a/img/right-hand.png b/img/right-hand.png new file mode 100644 index 0000000..7cea801 Binary files /dev/null and b/img/right-hand.png differ diff --git a/img/skull-eyes.png b/img/skull-eyes.png new file mode 100644 index 0000000..a892595 Binary files /dev/null and b/img/skull-eyes.png differ diff --git a/img/skull.png b/img/skull.png new file mode 100644 index 0000000..f7b195e Binary files /dev/null and b/img/skull.png differ diff --git a/js/HuesUI.js b/js/HuesUI.js index 376fc10..2ef361f 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -972,6 +972,23 @@ HalloweenUI.prototype.initUI = function() { this.root.appendChild(topLeft); this.root.appendChild(topRight); this.root.appendChild(bottomRight); + + var leftHand = document.createElement("div"); + leftHand.className = "hues-h-left-hand"; + this.beatBar.appendChild(leftHand); + var rightHand = document.createElement("div"); + rightHand.className = "hues-h-right-hand"; + this.beatBar.appendChild(rightHand); +} + +HalloweenUI.prototype.beat = function() { + ModernUI.prototype.beat.call(this); + + if (this.currentBeat != ".") { + var eyes = this.beatCenter.ownerDocument.createElement("div"); + eyes.className = "hues-m-beatcenter hues-h-eyes"; + this.beatCenter.appendChild(eyes); + } } // Positions and angles for the Xmas lights