Dark Theme for Mixlr
// by @therealtakeshi | |
// Setting up the options for localStorage; | |
var toStore = { | |
emo:false, | |
heart:false, | |
sounds:false, | |
msgLimit:false, | |
msgAllowed:200, | |
colorComment:"#E0A666", | |
colorUsername:"#D18026", | |
colorBackground:"#1E262C", | |
colorActive:"#27AE60", | |
colorInactive:"#C0392B" | |
}; | |
// Puts the options in the localStorage; | |
// if(!localStorage.getItem('mixlr-toolkit')) { | |
// Note the stringify (localStorage only accepts strings); | |
localStorage.setItem('mixlr-toolkit',JSON.stringify(toStore)); | |
// } | |
// Keeps it easy to access localStorage; | |
var opts = JSON.parse(localStorage.getItem('mixlr-toolkit')); | |
// Checks for beta and if found, sets beta to true; | |
// (first self-invoked anon function, woo!); | |
(function () { | |
if (document.getElementById("heading_elements")) { | |
beta = true; | |
} else beta = false; | |
})(); | |
// Helper function to set localStorage; | |
function setIt (table, key, val) { | |
var lsNow = JSON.parse(localStorage.getItem(table)); | |
lsNow[key] = val; | |
localStorage.setItem(table,JSON.stringify(lsNow)); | |
} | |
// Helper function to select element by attribute; | |
function getElements(attribute) { | |
return document.querySelectorAll('[' + attribute + ']'); | |
} | |
// Helper function to update a given element (by id) with given content; | |
function elUpdate(element, content) { | |
document.getElementById(element).innerHTML = content; | |
} | |
// Helper function to play a sound file; | |
// @see: http://stackoverflow.com/questions/15955183/play-mp3-with-javascript-html5 | |
function playSound(el,soundfile) { | |
if (opts.sounds) { | |
if (el.wav) { | |
if(el.wav.paused) el.wav.play(); | |
else el.wav.pause(); | |
} else { | |
el.wav = new Audio(soundfile); | |
el.wav.play(); | |
} | |
} | |
} | |
// Checks if a given element (by id) exists; | |
function elExists(element) { | |
if (typeof (document.getElementById(element)) !== "undefined") { | |
return true; | |
} else { | |
return false; | |
} | |
} | |
// Helper function returns "off" or "on" instead of true/false; | |
function boolText(val) { | |
if (val) return "ON"; | |
if (!val) return "OFF"; | |
} | |
// Toggles the emoticon active state; | |
function emoToggle() { | |
var el = document.getElementById("emo-toggle"); | |
opts.emo = !opts.emo; | |
if (opts.emo) { | |
el.style.color = opts.colorActive; | |
} else { | |
el.style.color = opts.colorInactive; | |
} | |
} | |
// Adds the emoticons toggle button; | |
function addEmo() { | |
var li = document.createElement('li'); | |
var element = document.createElement('a'); | |
li.appendChild(element); | |
li.setAttribute("id","emoticons"); | |
// li.style.color='#b3b3b3'; | |
// li.style.background=opts.colorBackground; | |
// li.style.width='114px'; | |
// li.style.height='32px'; | |
element.className = "toolkit_inactive"; | |
element.setAttribute("id","emo-toggle"); | |
element.setAttribute("title","Isn't :jeff just such a :luchadeer?"); | |
element.appendChild(document.createTextNode('EMOTICONS')); | |
document.getElementById("nav_first").appendChild(li); | |
var a = document.getElementById("emo-toggle"); | |
if (beta) a.style.width = '120px'; | |
a.style.color = opts.colorInactive; | |
a.onclick = emoToggle; | |
} | |
// Toggles the autoheart active state; | |
function heartToggle() { | |
var el = document.getElementById("heart-toggle"); | |
opts.heart = !opts.heart; | |
if (opts.heart) { | |
el.style.color = opts.colorActive; | |
} else { | |
el.style.color = opts.colorInactive; | |
} | |
} | |
// Adds the autoheart toggle button; | |
function addHeart() { | |
var li = document.createElement('li'); | |
var element = document.createElement('a'); | |
li.appendChild(element); | |
li.setAttribute("id","autoheart"); | |
// li.style.color='#b3b3b3'; | |
// li.style.background='"+opts.colorBackground+"'; | |
// li.style.width='114px'; | |
// li.style.height='32px'; | |
element.className = "toolkit_inactive"; | |
element.setAttribute("id","heart-toggle"); | |
element.setAttribute("title","Only runs when broadcast is active."); | |
element.appendChild(document.createTextNode('AUTOHEART')); | |
document.getElementById("nav_first").appendChild(li); | |
var a = document.getElementById("heart-toggle"); | |
if (beta) a.style.width = '120px'; | |
a.style.color = opts.colorInactive; | |
a.onclick = heartToggle; | |
} | |
// Handles the autoheart logic; | |
function heart() { | |
if (opts.heart) { | |
var el = document.getElementsByClassName("action"); | |
if (typeof el !== 'undefined' && typeof el !== null){ | |
el[0].click(); | |
} | |
} | |
} | |
// Starts the emo function, running every 2.5s; | |
// First step checks for opts.heart:true, so shouldn't be too expensive; | |
if (!beta) setInterval(heart,2500); | |
// Helper function to modify blocked users; | |
function modUser () { | |
var el = document.getElementById("blockUser"); | |
var val = document.getElementById("blockUser").value; | |
var index = arr.user.indexOf(val); | |
if (index > -1) { | |
arr.user.splice(index, 1); | |
el.value = this + "Blocked"; | |
} else { | |
arr.user.push(val); | |
el.value = this + "Unblocked"; | |
} | |
window.setTimeout(document.getElementById("blockUser").value = "",1500); | |
} | |
// Adds the User blocking; | |
function addUser() { | |
var li = document.createElement('li'); | |
var element = document.createElement('input'); | |
li.appendChild(element); | |
li.setAttribute("id","li-blockUser"); | |
element.setAttribute("id","blockUser"); | |
element.setAttribute("onkeypress","{if (event.keyCode==13) modUser()}"); | |
element.setAttribute("title","Type username here + Enter to block/unblock"); | |
document.getElementById("nav_first").appendChild(li); | |
} | |
// Adds the message limiting; | |
function addLimit() { | |
var li = document.createElement('li'); | |
var element = document.createElement('a'); | |
li.appendChild(element); | |
li.setAttribute("id","msgLimit"); | |
element.className = "toolkit_inactive"; | |
element.setAttribute("id","limit-toggle"); | |
element.setAttribute("title","Limits the number of messages on-screen."); | |
element.appendChild(document.createTextNode('MSG LIMIT')); | |
document.getElementById("nav_first").appendChild(li); | |
var a = document.getElementById("limit-toggle"); | |
if (beta) a.style.width = '120px'; | |
a.style.color = opts.colorInactive; | |
a.onclick = limitToggle; | |
} | |
if (!document.getElementById("limit-toggle")) addLimit(); | |
// Toggles the autoheart active state; | |
function limitToggle() { | |
var el = document.getElementById("limit-toggle"); | |
opts.msgLimit = !opts.msgLimit; | |
if (opts.msgLimit) { | |
el.style.color = opts.colorActive; | |
} else { | |
el.style.color = opts.colorInactive; | |
} | |
} | |
// Logic for message limiting; | |
function msgLimit() { | |
var selection = $("#comment_list").children().length; | |
for (i = selection; i > opts.msgAllowed; i--) { | |
$("#comment_list:nth-child(2) > li:nth-child("+i+")").remove(); | |
} | |
} | |
// Instantiate the normalRules var; | |
var normalRules = ""; | |
// Main broadcaster name; | |
normalRules += "h1 {color: "+opts.colorComment+"}"; | |
// Broadcaster name and broadcast title; | |
normalRules += "h2 {color: "+opts.colorComment+"}"; | |
// Usernames in comment list; | |
normalRules += "h3 {color: #D18026; font-weight:bold}"; | |
// Header in superfluous header box between comment post box and comment list; | |
normalRules += "h4 {color: #CCC;}"; | |
// Special User block; | |
normalRules += "#blockUser {-webkit-transition: all 3s ease-in-out;-moz-transition: all 3s ease-in-out;-ms-transition: all 3s ease-in-out;-o-transition: all 3s ease-in-out;transition: all 3s ease-in-out;width: 100%;padding: 7px 12px 5px 28px;font-size: 11px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;behavior: url(/PIE.htc?l1351084804);height: 24px;font-family: 'Lucida$ Sans W01 Roman','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;background: black;border: 1px solid #4d4d4d;color: "+opts.colorUsername+";margin-top:8px;margin-left:8px;}"; | |
// | |
// Background for the page; | |
normalRules += "#broadcast_chat {background: url(http://www.bispoke.org/assets/gb/2483078-img_0854.jpg) 50%;background-size:148%}"; | |
// | |
// Top Mixlr bar; | |
normalRules += "header#main_header {background:"+opts.colorBackground+"}"; | |
// Search input itself; | |
normalRules += ".fixed_width #main_search {width: 10%; left: 74%}"; | |
// | |
// Left-side column; | |
normalRules += "#broadcaster_details {color: "+opts.colorComment+"; background: "+opts.colorBackground+"}"; | |
// Links on left-side column (chat, crowd, stage) | |
normalRules += "#broadcaster_details .user_links>li>a.active {background-color: #111920;}"; | |
// Links on left-side column active and hover; | |
normalRules += "#broadcaster_details .user_links>li>a.active:hover {background-color: #18242E;}"; | |
// Links on left-side column hover; | |
normalRules += "#broadcaster_details .user_links>li>a:hover {background-color:#18242E}"; | |
// Share button on left-side column has a special rule; | |
normalRules += "#broadcaster_details>#user_details>time>a.share {background:"+opts.colorBackground+"}"; | |
// MIXLR-TOOLKIT: If element is active; | |
normalRules += ".toolkit_active {color:"+opts.colorActive+"}"; | |
// MIXLR-TOOLKIT: If element is active: hover; | |
normalRules += ".toolkit_active:hover {}"; | |
// MIXLR-TOOLKIT: If element is inactive; | |
normalRules += ".toolkit_inactive {color:"+opts.colorInactive+"}"; | |
// MIXLR-TOOLKIT: If element is inactive: hover; | |
normalRules += ".toolkit_inactive:hover {}"; | |
// | |
// Last broadcast box (two-part box above comment post box); | |
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}"; | |
// Broadcaster info (bottom two-thirds of last broadcast box); | |
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster>.broadcaster_info {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}"; | |
// Broadcaster info hover; | |
normalRules += "#broadcast_chat>.comment_holder>#last_broadcaster>.broadcaster_info:hover {background-color: #1F2B35}"; | |
// | |
// Stupid onload FB share header; | |
normalRules += "#broadcast_chat>.comment_holder header {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+";}"; | |
// Stupid onload FB share body; | |
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+";-webkit-box-shadow: none;box-shadow: none;}"; | |
// Stupid onload FB share body hover; | |
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share:hover {background-color: #1F2B35}"; | |
// Hides the nasty FB icon on the onload FB share; | |
normalRules += "#broadcast_chat>.comment_holder #facebook_one_click_share>img.facebook {display:none;}"; | |
// | |
// Comment post box (middle of comment box); | |
normalRules += "#broadcast_chat>.comment_holder>#chat_box {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none}"; | |
// Comment post box input field (so it's not stark white); | |
normalRules += "#chat_box input {background:#333}"; | |
// Background of heart in comment post box when it's disabled; | |
normalRules += "#chat_box .action.disabled {background-color:"+opts.colorBackground+"}"; | |
// | |
// Superfluous "All Comments" box between comment post box and comment list; | |
normalRules += "#broadcast_chat>.comment_holder header {background:none}"; | |
// | |
// Comment box holder | |
normalRules += "#broadcast_chat>.comment_holder {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA}"; | |
// Comment list each comment font & background color; | |
normalRules += "#broadcast_chat>.comment_holder>#comments #comment_list>li {color: "+opts.colorComment+"; background-color: "+opts.colorBackground+"}"; | |
// Comment list each comment hover background color; | |
normalRules += "#broadcast_chat>.comment_holder>#comments #comment_list>li:hover {background-color: #1F2B35}"; | |
// Comment list font size & color; | |
normalRules += "#broadcast_chat>.comment_holder p {color: "+opts.colorComment+";font-size:1.1em;}"; | |
// Usernames in the comment list; | |
normalRules += "#broadcast_chat>.comment_holder>#comments>header {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorUsername+"; background: "+opts.colorBackground+"; background-color:none;border-top:1px solid #AAA}"; | |
// Comments in comment list; | |
normalRules += "#broadcast_chat>.comment_holder>#chat_box textarea {color: "+opts.colorComment+"; background:"+opts.colorBackground+";}"; | |
// | |
// Notification box; | |
normalRules += ".notification {-webkit-box-shadow: none;box-shadow: none;border-right:1px solid #AAA;color: "+opts.colorComment+"; background: "+opts.colorBackground+"; background-color:none; border:none; left:236px; top:47px;}"; | |
// Here END the rules for the normal site; | |
// | |
// Here BEGIN the rules for the Beta site; | |
betaRules = ""; | |
// Remove Share block; | |
betaRules += "@media all and (min-width:62.5em){#broadcast_main{width:100%;}}"; | |
// Default behind-the-scenes (mostly); | |
betaRules += "#live_page_view {background: "+opts.colorBackground+";}"; | |
// Search input itself; | |
betaRules += "#main_search {width: 10%; left: 74%}"; | |
// Special User block; | |
betaRules += "#blockUser {-webkit-transition: all 3s ease-in-out;-moz-transition: all 3s ease-in-out;-ms-transition: all 3s ease-in-out;-o-transition: all 3s ease-in-out;transition: all 3s ease-in-out;width: 100%;padding: 7px 12px 5px 28px;font-size: 11px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-ms-border-radius: 30px;-o-border-radius: 30px;behavior: url(/PIE.htc?l1351084804);height: 24px;font-family: 'Lucida$ Sans W01 Roman','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;background: black;border: 1px solid #4d4d4d;color: "+opts.colorUsername+";margin-top:8px;margin-left:8px;}"; | |
// | |
// Change broadcaster name in center header; | |
betaRules += "@media only screen and (min-width:62.5em) {#broadcast_masthead .broadcaster_details .broadcaster_title h1{color: "+opts.colorUsername+";}}"; | |
// Main block; | |
betaRules += "#broadcast_main {background: none;}"; | |
// Main block (with media query); | |
betaRules += "@media only screen and (min-width:62.5em) {#broadcast_main {background: "+opts.colorBackground+";}}"; | |
// Header block; | |
betaRules += ".hiddenStats #broadcast_masthead {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";}"; | |
// Header controls; | |
betaRules += ".broadcast_main_controls {background: #202020;}"; | |
// Header controls (while broadcasting); | |
betaRules += "#broadcast_masthead {background: none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}"; | |
// Subheader controls (while broadcasting); | |
betaRules += ".stats_bar {background: none;}"; | |
// Nav header; | |
betaRules += "header#main_header {background: #202020;}"; | |
// | |
// Left-side block; | |
betaRules += "#broadcaster_artwork {background: none;}"; | |
// Edit Profile button; | |
betaRules += "#follow_side_btn {background: none;}"; | |
// Edit Profile button (already following); | |
betaRules += "#follow_side_btn.unfollow {background: none;}"; | |
// Left-side block artwork thing; | |
betaRules += "#broadcaster_artwork .artwork_container {background-color: "+opts.colorBackground+";}"; | |
// | |
// Comment block | |
betaRules += "#comments_container {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";}"; | |
// Change annoying thin white bar above comment block; | |
betaRules += ".crowd_list {background:none;}"; | |
// Comment block header; | |
betaRules += "#comments_block header {color: "+opts.colorUsername+"; background: "+opts.colorBackground+";border-bottom: 1px solid "+opts.colorUsername+";}"; | |
// Comments inside the block; | |
betaRules += ".comment_list li {background: "+opts.colorBackground+";border-bottom: 1px dotted "+opts.colorUsername+";}"; | |
// Comments inside the block: hover; | |
betaRules += ".comment_list li:hover {background: #1F2B35;}"; | |
// Inner box inside the comment block; | |
betaRules += ".comment_list li.editable_comment:hover .inner {background:none;}"; | |
// Comment profile picture; | |
betaRules += ".comment_list .commenter_profile_img {border:1px solid "+opts.colorUsername+"}"; | |
// Comment username; | |
betaRules += ".comment_list .comment_info h3 {color: "+opts.colorUsername+";text-transform: uppercase;}"; | |
// Comment content; | |
betaRules += ".comment_list .comment_info p {color: "+opts.colorComment+"; font-size:1.1em}"; | |
// Comment history button; | |
betaRules += "#comment_history {background:none;}"; | |
// Comment deletebutton; | |
betaRules += ".delete_options {background:#fff;}"; | |
// Post bar inside comment block; | |
betaRules += "#chat_box {background:none;}"; | |
// Heart action; | |
betaRules += "#chat_box .action {background: none; border: none;}"; | |
// Heart action (disabled); | |
betaRules += "#chat_box .action.disabled {background: none; border: none;}"; | |
// Input box inside post bar (large chat); | |
// betaRules += "#chat_box.large_chat form textarea {background:none;border: 1px solid "+opts.colorUsername+";}"; | |
// Input box inside post bar (small chat); | |
betaRules += "#chat_box form textarea {color: "+opts.colorComment+";background:none;border: 1px solid "+opts.colorUsername+";}"; | |
// Submit button inside post bar; | |
betaRules += "#chat_box form input[type='submit'] {color: "+opts.colorUsername+";background:none;font-family: 'Avenir LT W01 85 Heavy','Helvetica Neue',Helvetica,arial,sans-serif;text-transform: uppercase;letter-spacing: 1px;text-align: center;}"; | |
// Submit button inside post bar: hover; | |
betaRules += "#chat_box form input[type='submit']:hover {background:none;text-decoration:underline}"; | |
// Post button (large chat); | |
betaRules += "#chat_box.large_chat form input[type='submit'] {width: 80px;height: 30px;margin-top: 20px;font-size:1.4em;}"; | |
// Post button (small chat); | |
betaRules += ""; | |
// Here END the rules for the Beta site; | |
// Creates the necessary element for injecting CSS; | |
var sheet = document.createElement('style'); | |
// Adds buttons; | |
if (!document.getElementById("emo-toggle")) addEmo(); | |
if (!document.getElementById("heart-toggle")) addHeart(); | |
if (!document.getElementById("limit-toggle")) addLimit(); | |
if (!document.getElementById("blockUser")) addUser(); | |
// Beta site = betaRules, otherwise normal; | |
if (beta) { | |
sheet.innerHTML = betaRules; | |
var elComm = document.getElementById("comments_trigger"); | |
if (typeof elComm !== 'undefined' && typeof elComm !== null){ | |
elComm.click(); | |
} | |
var elMast = document.getElementById("masthead_toggle"); | |
if (typeof elMast !== 'undefined' && typeof elMast !== null){ | |
elMast.click(); | |
} | |
var elements = getElements('placeholder'); | |
for ( var i = 0; i < elements.length; i++ ) { | |
elements[1].setAttribute("placeholder","Mixlr Toolkit by @therealtakeshi"); | |
} | |
} else { | |
sheet.innerHTML = normalRules; | |
} | |
var el = document.getElementsByClassName("action"); | |
if (typeof el !== 'undefined' && typeof el !== null){ | |
el[0].setAttribute("onClick","playSound(this,'http://www.bispoke.org/assets/gb/hornC4.wav');"); | |
} | |
document.getElementsByTagName('head')[0].appendChild(sheet); | |
// select the target node | |
if (beta) { | |
target = document.getElementsByClassName('comment_list')[0]; | |
} else { | |
target = document.getElementById('comment_list'); | |
} | |
var arr = { | |
user: ["Drew Pills","Blue Frills","True Gills"] | |
}; | |
// select the target node | |
var target = document.querySelector('#comment_list'); | |
// create an observer instance | |
var observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
// console.log(mutation.addedNodes[0].outerHTML); | |
var cid = $(mutation.addedNodes[0].outerHTML).attr("data-cid"); | |
var item = $("[data-cid="+cid+"]"); | |
console.log(cid); | |
// console.log(item.html()); | |
var repl = function(){ | |
var text = item.html(); | |
if (opts.emo) { | |
if (text.indexOf(":luchadeer") >-1) text = text.replace(/\:luchadeer/, '<img src="http://www.bispoke.org/assets/gb/2325664-mysterious_deer.png" title="luchadeer" />'); | |
if (text.indexOf(":jeff") >-1) text = text.replace(/\:jeff/, '<img src="http://www.bispoke.org/assets/gb/2322425-persona_jeff_t.png" title="jeff" />'); | |
} | |
return text; | |
}; | |
if (opts.msgLimit) msgLimit(); | |
item.html(repl); | |
for (i = 0; i < arr.user.length; i++) { | |
if (item.html().indexOf("title=\""+arr.user[i]+"\"") >-1) item.remove(); | |
} | |
}); | |
}); | |
// configuration of the observer: | |
var config = { attributes: true, childList: true, characterData: true }; | |
// pass in the target node, as well as the observer options | |
observer.observe(target, config); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Screenshot: http://i.imgur.com/lCIgkc2.jpg
Default background from GB user: http://www.giantbomb.com/profile/tonyp2121
To use:
For the dev path:
P.S. If you don't like the background image and like the dark background supplied by Mixlr, click the left-side Revisions link, and use the code from Revision 6. If you prefer the grayscale first version, use the code from Revision 1.
Rev17:
Rev16 (MAJOR):
Rev15:
Rev14:
Rev13:
Rev12:
Rev11:
Rev10: