Skip to content

Instantly share code, notes, and snippets.

@therealtakeshi
Last active February 15, 2021 01:07
Show Gist options
  • Save therealtakeshi/9381469 to your computer and use it in GitHub Desktop.
Save therealtakeshi/9381469 to your computer and use it in GitHub Desktop.
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);
@therealtakeshi
Copy link
Author

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:

  • Added message limiting (default to 200);

Rev16 (MAJOR):

  • Switched to DOM MutationObserver for future-proofing
  • Utilizing localStorage for persistent options (more features coming soon!)
  • Moved buttons to top and made more aesthetically pleasing
  • Added user-blocking through top left bar (resized search bar)
  • Minor aesthetic changes to Beta

Rev15:

  • Hotfix;

Rev14:

  • Rebranding as "Mixlr Toolkit" complete!

Rev13:

  • Hotfix for smaller screen size;
  • Hotfix for textarea color;

Rev12:

  • Added support for Beta Mixlr design;
  • Setting up features for selecting background and colors;

Rev11:

  • Added Emoticon function (replaces trigger words with emoticon);
  • Added Autoheart function (automatically Hearts broadcast when active);
  • Added toggle buttons for Emoticons and Autoheart;

Rev10:

  • Broke out the code into smaller pieces and commented a bit to make it more clear;
  • Messed with the notification box to make it more visible (it's a nice effect);
  • Removed a couple lines of extra code;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment