diff --git a/dark.css b/dark.css
index 0c24fcf9..0f33d367 100644
--- a/dark.css
+++ b/dark.css
@@ -1036,4 +1036,7 @@
.ffz-dark .conversation-window.has-focus .conversation-input-actions .button,
.ffz-dark .conversation-window.has-focus .conversation-input-actions .follow-button:not(.ember-follow) .follow {
background-color: #6441a5
-}
\ No newline at end of file
+}
+
+.ffz-dark .conversation-window .new-message-divider span { background: transparent; }
+.ffz-dark .conversation-window .new-message-divider:after { display: none; }
\ No newline at end of file
diff --git a/src/colors.js b/src/colors.js
index 604959d6..a0d09ad4 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -570,19 +570,7 @@ FFZ.prototype._update_colors = function(darkness_only) {
this._color_old_darkness = is_dark;
- var colored_bits = document.querySelectorAll('.chat-line .has-color');
- for(var i=0, l=colored_bits.length; i < l; i++) {
- var bit = colored_bits[i],
- color = bit.getAttribute('data-color'),
- colors = color && this._handle_color(color);
-
- if ( ! colors )
- continue;
-
- bit.style.color = is_dark ? colors[1] : colors[0];
- }
-
- colored_bits = document.querySelectorAll('.conversation-chat-line .has-color');
+ var colored_bits = document.querySelectorAll('.has-color');
for(var i=0, l=colored_bits.length; i < l; i++) {
var bit = colored_bits[i],
color = bit.getAttribute('data-color'),
diff --git a/src/constants.js b/src/constants.js
index 45d456c5..d8422d59 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -77,6 +77,7 @@ module.exports = {
CLOCK: '',
GEAR: '',
HEART: '',
+ UNHEART: '',
EMOTE: '',
STAR: '',
CLOSE: '',
diff --git a/src/ember/conversations.js b/src/ember/conversations.js
new file mode 100644
index 00000000..f73996b2
--- /dev/null
+++ b/src/ember/conversations.js
@@ -0,0 +1,252 @@
+var FFZ = window.FrankerFaceZ,
+ utils = require('../utils'),
+ constants = require('../constants');
+
+
+// ---------------
+// Settings
+// ---------------
+
+FFZ.settings_info.conv_title_clickable = {
+ type: "boolean",
+ value: false,
+ no_mobile: true,
+
+ category: "Conversations",
+ name: "Clickable Header Name",
+ help: "Make the conversation header a link that takes you to that person's page.",
+ on_update: function(val) {
+ document.body.classList.toggle('ffz-conv-title-clickable', val);
+ }
+ };
+
+FFZ.settings_info.conv_focus_on_click = {
+ type: "boolean",
+ value: false,
+ no_mobile: true,
+
+ category: "Conversations",
+ name: "Focus Input on Click",
+ help: "Focus on a conversation's input box when you click it."
+ };
+
+FFZ.settings_info.top_conversations = {
+ type: "boolean",
+ value: false,
+ no_mobile: true,
+
+ category: "Conversations",
+ name: "Position on Top",
+ help: "Display the new conversation-style whisper UI at the top of the window instead of the bottom.",
+ on_update: function(val) {
+ document.body.classList.toggle('ffz-top-conversations', val);
+ }
+ };
+
+FFZ.settings_info.conv_beta_enable = {
+ type: "boolean",
+ value: false,
+ no_mobile: true,
+
+ category: "Conversations",
+ name: "Enable Conversations",
+ help: "Twitch hasn't enabled them yet, but they're in the code for testing. Try them out!",
+ on_update: function(val) {
+ App.__container__.lookup('route:application').controller.set('isConversationsEnabled', val);
+ }
+ };
+
+
+// ---------------
+// Initialization
+// ---------------
+
+FFZ.prototype.setup_conversations = function() {
+ document.body.classList.toggle('ffz-top-conversations', this.settings.top_conversations);
+ document.body.classList.toggle('ffz-conv-title-clickable', this.settings.conv_title_clickable);;
+
+ if ( this.settings.conv_beta_enable )
+ App.__container__.lookup('route:application').controller.set('isConversationsEnabled', true);
+
+ this.log("Hooking the Ember Conversation Window component.");
+ var ConvWindow = App.__container__.resolve('component:conversation-window');
+ if ( ConvWindow )
+ this._modify_conversation_window(ConvWindow);
+
+
+ this.log("Hooking the Ember Conversation Line component.");
+ var ConvLine = App.__container__.resolve('component:conversation-line');
+ if ( ConvLine )
+ this._modify_conversation_line(ConvLine);
+}
+
+
+FFZ.prototype._modify_conversation_window = function(component) {
+ var f = this,
+
+ Layout = App.__container__.lookup('controller:layout'),
+ Settings = App.__container__.lookup('controller:settings');
+
+ component.reopen({
+ onConversationClick: Ember.on('click', function() {
+ this.markConversationRead();
+ if ( f.settings.conv_focus_on_click )
+ this.$(".conversation-input-bar textarea").focus();
+ }),
+
+ headerBadges: Ember.computed("conversation.participants", "currentUsername", function() {
+ var e = this.get("conversation.participants").rejectBy("username", this.get("currentUsername")).objectAt(0),
+ badges = {},
+
+ ut = e.get("userType");
+
+ if ( ut === "staff" )
+ badges[0] = {classes: 'badge staff', title: 'Staff'};
+ else if ( ut === 'admin' )
+ badges[0] = {classes: 'badge admin', title: 'Admin'};
+ else if ( ut === 'global_mod' )
+ badges[0] = {classes: 'badge global-moderator', title: 'Global Moderator'};
+
+ if ( e.get('hasTurbo') )
+ badges[15] = {classes: 'badge turbo', title: 'Turbo'}
+
+ // FFZ Badges
+ var data = f.users[e.get('username')];
+ if ( data && data.badges ) {
+ for(var slot in data.badges) {
+ if ( ! data.badges.hasOwnProperty(slot) )
+ continue;
+
+ var badge = data.badges[slot],
+ full_badge = f.badges[badge.id] || {},
+ old_badge = badges[slot];
+
+ if ( full_badge.visible !== undefined ) {
+ var visible = full_badge.visible;
+ if ( typeof visible === "function" )
+ try {
+ visible = visible.bind(f)(null, e.get('username'), null, badges);
+ } catch(err) {
+ f.error("badge " + badge.id + " visible: " + err);
+ continue;
+ }
+
+ if ( ! visible )
+ continue;
+ }
+
+ if ( old_badge ) {
+ var replaces = badge.hasOwnProperty('replaces') ? badge.replaces : full_badge.replaces;
+ if ( ! replaces )
+ continue;
+
+ old_badge.klass = 'badge ffz-badge-' + badge.id;
+ old_badge.title += ', ' + (badge.title || full_badge.title);
+ continue;
+ }
+
+ badges[slot] = {
+ classes: 'badge ffz-badge-' + badge.id,
+ title: badge.title || full_badge.title
+ }
+ }
+ }
+
+ var out = [];
+ for(var slot in badges)
+ out.push(badges[slot]);
+
+ return out;
+ }),
+
+ didInsertElement: function() {
+ var el = this.get('element'),
+ header = el && el.querySelector('.conversation-header'),
+ header_name = header && header.querySelector('.conversation-header-name'),
+
+ new_header_name = document.createElement('span'),
+
+ raw_color = this.get('otherUser.color'),
+ colors = raw_color && f._handle_color(raw_color),
+
+ is_dark = (Layout && Layout.get('isTheatreMode')) || f.settings.dark_twitch;
+
+ if ( header_name ) {
+ new_header_name.className = 'conversation-header-name';
+ new_header_name.textContent = header_name.textContent;
+ header.insertBefore(new_header_name, header_name);
+
+ if ( raw_color ) {
+ header_name.style.color = (is_dark ? colors[1] : colors[0]);
+ header_name.classList.add('has-color');
+ header_name.setAttribute('data-color', raw_color);
+
+ new_header_name.style.color = (is_dark ? colors[1] : colors[0]);
+ new_header_name.classList.add('has-color');
+ new_header_name.setAttribute('data-color', raw_color);
+ }
+ }
+ }
+ });
+}
+
+
+FFZ.prototype._modify_conversation_line = function(component) {
+ var f = this,
+
+ Layout = App.__container__.lookup('controller:layout'),
+ Settings = App.__container__.lookup('controller:settings');
+
+ component.reopen({
+ tokenizedMessage: function() {
+ try {
+ return f.tokenize_conversation_line(this.get('message'));
+ } catch(err) {
+ f.error("convo-line tokenizedMessage: " + err);
+ return this._super();
+ }
+
+ }.property("message", "currentUsername"),
+
+ click: function(e) {
+ if ( e.target && e.target.classList.contains('deleted-link') )
+ return f._deleted_link_click.bind(e.target)(e);
+
+ if ( f._click_emote(e.target, e) )
+ return;
+
+ return this._super(e);
+ },
+
+ render: function(e) {
+ var user = this.get('message.from.username'),
+ raw_color = this.get('message.from.color'),
+ colors = raw_color && f._handle_color(raw_color),
+
+ is_dark = (Layout && Layout.get('isTheatreMode')) || f.settings.dark_twitch;
+
+ e.push('');
+
+ var alias = f.aliases[user],
+ name = this.get('message.from.displayName') || (user && user.capitalize()) || "unknown user",
+ style = colors && 'color:' + (is_dark ? colors[1] : colors[0]),
+ colored = style ? ' has-color' : '';
+
+ if ( alias )
+ e.push('' + utils.sanitize(alias) + '');
+ else
+ e.push('' + utils.sanitize(name) + '');
+
+ e.push(': ');
+
+ if ( ! this.get('isActionMessage') ) {
+ style = '';
+ colored = '';
+ }
+
+ e.push('');
+ e.push(f.render_tokens(this.get('tokenizedMessage'), true));
+ e.push('');
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/ember/directory.js b/src/ember/directory.js
index 281fe89b..f3704d36 100644
--- a/src/ember/directory.js
+++ b/src/ember/directory.js
@@ -45,8 +45,12 @@ FFZ.prototype.setup_directory = function() {
// Initialize existing views.
for(var key in Ember.View.views) {
var view = Ember.View.views[key];
- if ( view instanceof ChannelView || view instanceof CreativeChannel || view instanceof CSGOChannel || view instanceof HostView )
- view.ffzInit();
+ try {
+ if ( (ChannelView && view instanceof ChannelView) || (CreativeChannel && view instanceof CreativeChannel) || (CSGOChannel && view instanceof CSGOChannel) || (HostView && view instanceof HostView) )
+ view.ffzInit();
+ } catch(err) {
+ this.error("Directory Setup: " + err);
+ }
}
}
diff --git a/src/ember/following.js b/src/ember/following.js
new file mode 100644
index 00000000..a743749e
--- /dev/null
+++ b/src/ember/following.js
@@ -0,0 +1,318 @@
+var FFZ = window.FrankerFaceZ,
+ utils = require('../utils'),
+ constants = require('../constants');
+
+
+// --------------------
+// Settings
+// --------------------
+
+FFZ.settings_info.enhance_profile_following = {
+ type: "boolean",
+ value: true,
+
+ category: "Appearance",
+ name: "Enhanced Following Control",
+ help: "Display additional controls on your own profile's Following tab to make management easier."
+}
+
+
+// --------------------
+// Initialization
+// --------------------
+
+FFZ.prototype.setup_profile_following = function() {
+ if ( ! window.App )
+ return;
+
+ var f = this;
+
+ // Build our is-following cache.
+ this._following_cache = {};
+
+ // First, we need to hook the model. This is what we'll use to grab the following notification state,
+ // rather than making potentially hundreds of API requests.
+ var Following = App.__container__.resolve('model:kraken-channel-following');
+ if ( ! Following )
+ return;
+
+ this._hook_following(Following);
+
+ // Also try hooking that other model.
+ var Notification = App.__container__.resolve('model:notification');
+ if ( Notification )
+ this._hook_following(Notification, true);
+
+
+ // Now, we need to edit the profile Following view itself.
+ var ProfileView = App.__container__.resolve('view:channel/following');
+ if ( ! ProfileView )
+ return;
+
+ ProfileView.reopen({
+ didInsertElement: function() {
+ this._super();
+ try {
+ this.ffzInit();
+ } catch(err) {
+ f.error("ProfileView ffzInit: " + err);
+ }
+ },
+
+ willClearRender: function() {
+ try {
+ this.ffzTeardown();
+ } catch(err) {
+ f.error("ProvileView ffzTeardown: " + err);
+ }
+ this._super();
+ },
+
+ ffzInit: function() {
+ // Only process our own profile following page.
+ var user = f.get_user();
+ if ( ! f.settings.enhance_profile_following || ! user || ! user.login === this.get('context.id') )
+ return;
+
+ var el = this.get('element'),
+ users = el && el.querySelectorAll('.user.item');
+
+ el.classList.add('ffz-enhanced-following');
+
+ var had_data = true;
+
+ if ( users && users.length )
+ for(var i=0; i < users.length; i++)
+ had_data = this.ffzProcessUser(users[i]) && had_data;
+ else
+ had_data = false;
+
+ if ( ! had_data ) {
+ // Force a refresh.
+ f.log("Forcing a refresh of user following data.");
+ var following = this.get('context.following'),
+ refresher = function() {
+ if ( following.get('isLoading') )
+ setTimeout(refresher, 25);
+
+ following.clear();
+ following.load();
+ }
+
+ // We use this weird function to prevent trying to load twice mucking things up.
+ setTimeout(refresher);
+ }
+
+ // Watch for new ones the bad way.
+ if ( ! this._ffz_observer ) {
+ var t = this;
+ var observer = this._ffz_observer = new MutationObserver(function(mutations) {
+ for(var i=0; i < mutations.length; i++) {
+ var mutation = mutations[i];
+ if ( mutation.type !== "childList" )
+ continue;
+
+ for(var x=0; x < mutation.addedNodes.length; x++) {
+ var added = mutation.addedNodes[x];
+ if ( added.nodeType !== added.ELEMENT_NODE || added.tagName !== "DIV" )
+ continue;
+
+ // Is it an ember-view? Check its kids.
+ if ( added.classList.contains('ember-view') ) {
+ var users = added.querySelectorAll('.user.item');
+ if ( users )
+ for(var y=0; y < users.length; y++)
+ t.ffzProcessUser(users[y]);
+
+ } else if ( added.classList.contains('user') )
+ t.ffzProcessUser(added);
+ }
+ }
+ });
+
+ observer.observe(el, {
+ childList: true,
+ subtree: true
+ });
+ }
+ },
+
+ ffzTeardown: function() {
+ if ( this._ffz_observer ) {
+ this._ffz_observer.disconnect();
+ this._ffz_observer = null;
+ }
+ },
+
+ ffzProcessUser: function(user) {
+ if ( user.classList.contains('ffz-processed') )
+ return true;
+
+ var link = user.querySelector('a'),
+ link_parts = link && link.href.split("/"),
+ user_id = link_parts && link_parts[3],
+ data = f._following_cache[user_id],
+ t_el = document.createElement('div');
+
+ user.classList.add('ffz-processed');
+ if ( ! data )
+ return false;
+
+ t_el.className = 'overlay_info length';
+ jQuery(t_el).tipsy({html: true});
+
+ var age = data[0] ? Math.floor((Date.now() - data[0].getTime()) / 1000) : 0;
+ if ( age ) {
+ t_el.innerHTML = constants.CLOCK + ' ' + utils.human_time(age, 10);
+ t_el.setAttribute('original-title', 'Following Since: ' + data[0].toLocaleString() + '');
+ } else
+ t_el.style.display = 'none';
+
+ user.appendChild(t_el);
+
+ var actions = document.createElement('div'),
+ follow = document.createElement('button'),
+ notif = document.createElement('button'),
+
+ update_follow = function() {
+ data = f._following_cache[user_id];
+ user.classList.toggle('followed', data);
+ follow.innerHTML = constants.HEART + constants.UNHEART + ' Follow';
+
+ if ( t_el ) {
+ var age = data && data[0] ? Math.floor((Date.now() - data[0].getTime()) / 1000) : undefined;
+ if ( age !== undefined ) {
+ t_el.innerHTML = constants.CLOCK + ' ' + (age < 60 ? 'now' : utils.human_time(age, 10));
+ t_el.setAttribute('original-title', 'Following Since: ' + data[0].toLocaleString() + '');
+ t_el.style.display = '';
+ } else {
+ t_el.style.display = 'none';
+ }
+ }
+ },
+
+ update_notif = function() {
+ data = f._following_cache[user_id];
+ notif.classList.toggle('notifications-on', data && data[1]);
+ notif.textContent = 'Notification ' + (data && data[1] ? 'On' : 'Off');
+ };
+
+ actions.className = 'actions';
+
+ follow.className = 'button follow';
+ notif.className = 'button notifications';
+
+ update_follow();
+ update_notif();
+
+ follow.addEventListener('click', function() {
+ var was_following = !!data;
+
+ follow.disabled = true;
+ notif.disabled = true;
+ follow.textContent = 'Updating';
+
+ (was_following ?
+ Twitch.api.del("users/:login/follows/channels/" + user_id) :
+ Twitch.api.put("users/:login/follows/channels/" + user_id, {notifications: false}))
+ .done(function() {
+ data = f._following_cache[user_id] = was_following ? null : [new Date(), false];
+ })
+ .always(function() {
+ update_follow();
+ update_notif();
+ follow.disabled = false;
+ notif.disabled = false;
+ })
+ });
+
+ notif.addEventListener('click', function() {
+ var was_following = data[1];
+
+ follow.disabled = true;
+ notif.disabled = true;
+ notif.textContent = 'Updating';
+
+ Twitch.api.put("users/:login/follows/channels/" + user_id, {notifications: !was_following})
+ .done(function() {
+ data[1] = ! was_following;
+ })
+ .always(function() {
+ update_notif();
+ follow.disabled = false;
+ notif.disabled = false;
+ });
+ });
+
+ actions.appendChild(follow);
+ actions.appendChild(notif);
+ user.appendChild(actions);
+
+ return true;
+ }
+ });
+
+ // Now, rebuild any views.
+ try {
+ ProfileView.create().destroy();
+ } catch(err) { }
+
+ for(var key in Ember.View.views) {
+ var view = Ember.View.views[key];
+ if ( ! view || !(view instanceof ProfileView) )
+ continue;
+
+ this.log("Manually updating existing Following View.", view);
+ try {
+ var following = view.get('context.following');
+ this._hook_following(following);
+ } catch(err) {
+ this.error("setup: view:channel/following: model hook: " + err);
+ }
+
+ try {
+ view.ffzInit();
+ } catch(err) {
+ this.error("setup: view:channel/following: " + err);
+ }
+ }
+}
+
+
+FFZ.prototype._hook_following = function(Following) {
+ var f = this;
+ Following.reopen({
+ apiLoad: function(e) {
+ var user = f.get_user(),
+ channel_id = this.get('id'),
+ t = this;
+
+ if ( ! user || user.login !== channel_id )
+ return this._super(e);
+
+ return new RSVP.Promise(function(success, fail) {
+ t._super(e).then(function(data) {
+ if ( data && data.follows ) {
+ var now = Date.now();
+ for(var i=0; i < data.follows.length; i++) {
+ var follow = data.follows[i];
+ if ( ! follow || ! follow.channel || ! follow.channel.name ) {
+ continue;
+ }
+
+ if ( follow.channel.display_name )
+ FFZ.capitalization[follow.channel.name] = [follow.channel.display_name, now];
+
+ f._following_cache[follow.channel.name] = [follow.created_at ? utils.parse_date(follow.created_at) : null, follow.notifications || false];
+ }
+ }
+
+ success(data);
+
+ }, function(err) {
+ fail(err);
+ })
+ });
+ }
+ });
+}
\ No newline at end of file
diff --git a/src/ember/line.js b/src/ember/line.js
index 6a08aaae..699618c9 100644
--- a/src/ember/line.js
+++ b/src/ember/line.js
@@ -549,19 +549,11 @@ FFZ.prototype.setup_line = function() {
this._modify_line(Whisper);
this.log("Hooking the Ember Message Line component.");
-
var Line = App.__container__.resolve('component:message-line');
if ( Line )
this._modify_line(Line);
- this.log("Hooking the Ember Conversation Line component.");
- var Conversation = App.__container__.resolve('component:conversation-line');
-
- if ( Conversation )
- this._modify_conversation_line(Conversation);
-
-
// Store the capitalization of our own name.
var user = this.get_user();
if ( user && user.name )
diff --git a/src/ember/room.js b/src/ember/room.js
index 9e257543..4c3c30ef 100644
--- a/src/ember/room.js
+++ b/src/ember/room.js
@@ -115,6 +115,8 @@ FFZ.prototype.setup_room = function() {
FFZ.prototype._modify_rview = function(view) {
var f = this;
view.reopen({
+ alternate: false,
+
didInsertElement: function() {
this._super();
@@ -134,6 +136,10 @@ FFZ.prototype._modify_rview = function(view) {
this._super();
},
+ ffzUpdateAlternate: function() {
+ this.get('element').classList.toggle('ffz-alternate', this.get('ffzAlternate'));
+ }.observes("ffzAlternate"),
+
ffzInit: function() {
f._roomv = this;
@@ -1182,10 +1188,10 @@ FFZ.prototype._modify_room = function(room) {
return;
var is_whisper = msg.style === 'whisper';
- if ( f.settings.group_tabs && f.settings.whisper_room ) {
- if ( ( is_whisper && ! this.ffz_whisper_room ) || ( ! is_whisper && this.ffz_whisper_room ) )
- return;
- }
+
+ // Ignore whispers if conversations are enabled.
+ if ( is_whisper && App.__container__.lookup('route:application').controller.get('isConversationsEnabled') )
+ return;
if ( ! is_whisper )
msg.room = this.get('id');
diff --git a/src/emoticons.js b/src/emoticons.js
index 45da1fe3..e7b7c9be 100644
--- a/src/emoticons.js
+++ b/src/emoticons.js
@@ -262,7 +262,7 @@ FFZ.prototype._emote_tooltip = function(emote) {
title = set && set.title || "Global",
source = set && set.source || "FFZ";
- emote._tooltip = "Emoticon: " + (emote.hidden ? "???" : emote.name) + "\n" + source + " " + title + (owner ? "\nBy: " + owner.display_name : "");
+ emote._tooltip = "Emoticon: " + (emote.hidden ? "???" : emote.name) + "
" + source + " " + title + (owner ? "
By: " + owner.display_name : "");
return emote._tooltip;
}
diff --git a/src/main.js b/src/main.js
index 598ebf78..3609f2f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,7 +22,7 @@ FFZ.get = function() { return FFZ.instance; }
// Version
var VER = FFZ.version_info = {
- major: 3, minor: 5, revision: 57,
+ major: 3, minor: 5, revision: 62,
toString: function() {
return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
}
@@ -123,11 +123,13 @@ require('./ember/room');
require('./ember/layout');
require('./ember/line');
require('./ember/chatview');
+require('./ember/conversations');
require('./ember/viewers');
require('./ember/moderation-card');
require('./ember/chat-input');
//require('./ember/teams');
require('./ember/directory');
+require('./ember/following');
require('./debug');
@@ -335,10 +337,12 @@ FFZ.prototype.init_ember = function(delay) {
this.setup_line();
this.setup_layout();
this.setup_chatview();
+ this.setup_conversations();
this.setup_viewers();
this.setup_mod_card();
this.setup_chat_input();
this.setup_directory();
+ this.setup_profile_following();
//this.setup_teams();
diff --git a/src/tokenize.js b/src/tokenize.js
index bd34ed56..1f3d1d51 100644
--- a/src/tokenize.js
+++ b/src/tokenize.js
@@ -35,7 +35,7 @@ var FFZ = window.FrankerFaceZ,
set_type = null;
}
- return "Emoticon: " + data.code + "\n" + (set_type ? set_type + ": " : "") + set + (owner ? "\nBy: " + owner.display_name : "");
+ return "Emoticon: " + data.code + "
" + (set_type ? set_type + ": " : "") + set + (owner ? "
By: " + owner.display_name : "");
},
build_tooltip = function(id) {
@@ -603,7 +603,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
var emote_set = f.emote_sets && f.emote_sets[token.ffzEmoteSet],
emote = emote_set && emote_set.emoticons && emote_set.emoticons[token.ffzEmote];
- tooltip = emote ? utils.sanitize(f._emote_tooltip(emote)) : token.altText;
+ tooltip = emote ? f._emote_tooltip(emote) : token.altText;
srcset = emote ? emote.srcSet : token.srcSet;
extra = (emote ? ' data-ffz-emote="' + emote.id + '"' : '') + (emote_set ? ' data-ffz-set="' + emote_set.id + '"' : '');
@@ -652,7 +652,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) {
srcset = build_srcset(id);
}
- return ' + ' "' + utils.quote_attr(tooltip) + '")
';
+ return '';
}
if ( token.isLink ) {
diff --git a/src/ui/menu.js b/src/ui/menu.js
index 07093642..ff29cf0d 100644
--- a/src/ui/menu.js
+++ b/src/ui/menu.js
@@ -224,6 +224,9 @@ FFZ.prototype.build_ui_popup = function(view) {
container.classList.toggle('dark', dark);
+ // Stuff
+ jQuery(inner).find('.html-tooltip').tipsy({live: true, html: true, gravity: jQuery.fn.tipsy.autoNS});
+
// Menu Container
var sub_container = document.createElement('div');
@@ -599,7 +602,7 @@ FFZ.prototype._emotes_for_sets = function(parent, view, sets, header, image, sub
c++;
var s = document.createElement('span');
- s.className = 'emoticon tooltip';
+ s.className = 'emoticon html-tooltip';
s.style.backgroundImage = 'url("' + emote.urls[1] + '")';
if ( srcset ) {
diff --git a/src/ui/my_emotes.js b/src/ui/my_emotes.js
index 06d23479..9d12f761 100644
--- a/src/ui/my_emotes.js
+++ b/src/ui/my_emotes.js
@@ -166,7 +166,7 @@ FFZ.menu_pages.myemotes = {
if ( (settings === 1 && ! emoji.tw) || (settings === 2 && ! emoji.noto) )
continue;
- em.className = 'emoticon tooltip';
+ em.className = 'emoticon html-tooltip';
em.title = 'Emoji: ' + emoji.raw + '\nName: ' + emoji.name + (emoji.short_name ? '\nShort Name: :' + emoji.short_name + ':' : '');
em.addEventListener('click', this._add_emote.bind(this, view, emoji.raw));
@@ -239,7 +239,7 @@ FFZ.menu_pages.myemotes = {
em = document.createElement('span'),
img_set = 'image-set(url("' + TWITCH_BASE + emote.id + '/1.0") 1x, url("' + TWITCH_BASE + emote.id + '/2.0") 2x, url("' + TWITCH_BASE + emote.id + '/3.0") 4x)';
- em.className = 'emoticon tooltip';
+ em.className = 'emoticon html-tooltip';
if ( this.settings.replace_bad_emotes && constants.EMOTE_REPLACEMENTS[emote.id] ) {
em.style.backgroundImage = 'url("' + constants.EMOTE_REPLACEMENT_BASE + constants.EMOTE_REPLACEMENTS[emote.id] + '")';
@@ -316,7 +316,7 @@ FFZ.menu_pages.myemotes = {
img_set += ')';
- em.className = 'emoticon tooltip';
+ em.className = 'emoticon html-tooltip';
em.style.backgroundImage = 'url("' + emote.urls[1] + '")';
em.style.backgroundImage = '-webkit-' + img_set;
em.style.backgroundImage = '-moz-' + img_set;
diff --git a/src/ui/styles.js b/src/ui/styles.js
index 43e6313c..56a134f9 100644
--- a/src/ui/styles.js
+++ b/src/ui/styles.js
@@ -16,7 +16,7 @@ FFZ.prototype.setup_css = function() {
/*var s = this._main_style = document.createElement('style');
s.textContent = styles.style;
- s.id = "ffz-ui-css";
+ s.id = "ffz-main-css";
document.head.appendChild(s);*/
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..dae3d975
--- /dev/null
+++ b/style.css
@@ -0,0 +1,2408 @@
+/* Fix Tooltip Opacity */
+
+body > div.tipsy { opacity: 1 !important; }
+body > div.tipsy .tipsy-inner { background-color: rgba(0,0,0,0.8); }
+body > div.tipsy .tipsy-arrow { opacity: 0.8; }
+
+
+.ffz-flip {
+ -ms-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ffz-ui-toggle {
+ display: block;
+ position: absolute;
+ top: 5px; right: 5px;
+ height: 18px; width: 24px;
+ cursor: pointer;
+}
+
+.ffz-hide-recent-past-broadcast .recent-past-broadcast,
+.ffz-hide-view-count .stat.twitch-channel-views,
+.ffz-minimal-chat-input .emoticon-selector-toggle,
+.ffz-menu-replace .emoticon-selector-toggle {
+ display: none !important;
+}
+
+body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-toggle + .ffz-ui-toggle svg,
+body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-toggle + script + .ffz-ui-toggle svg
+{
+ height: 14px;
+ width: 18px;
+}
+
+body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-toggle + .ffz-ui-toggle,
+body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-toggle + script + .ffz-ui-toggle {
+ height: 14px;
+ width: 18px;
+ top: 28px;
+}
+
+.ffz-ui-toggle svg.svg-emoticons path { fill: rgba(0,0,0,0.2); }
+.ffz-ui-toggle:hover svg.svg-emoticons path { fill: rgba(0,0,0,0.5); }
+
+.streams .stream .content .overlay_info.live svg path,
+.videos .video .content .overlay_info.live svg path { fill: #ff2020; }
+
+.ember-chat-container.dark .ffz-ui-toggle svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle svg.svg-emoticons path,
+.ffz-ui-toggle.dark svg.svg-emoticons path { fill: #888; }
+
+.ember-chat-container.dark .ffz-ui-toggle:hover svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle:hover svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle:hover svg.svg-emoticons path,
+.ffz-ui-toggle.dark:hover svg.svg-emoticons path { fill: #777; }
+
+
+.ffz-ui-toggle.no-emotes svg.svg-emoticons path { fill: rgba(80,0,0,0.2); }
+.ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path { fill: rgba(80,0,0,0.5); }
+
+.ffz-ui-toggle.live svg.svg-emoticons path { fill: rgba(100,65,165,0.5); }
+.ffz-ui-toggle.live:hover svg.svg-emoticons path { fill: rgba(100,65,165,1); }
+
+.ffz-ui-toggle.blue.live svg.svg-emoticons path { fill: rgba(47,88,185,0.5); }
+.ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill: rgba(47,88,185,1); }
+
+.ember-chat-container.dark .ffz-ui-toggle.news svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.news svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.news svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.news svg.svg-emoticons path,
+.ffz-ui-toggle.news svg.svg-emoticons path { fill: rgba(117, 80, 0, 0.5); }
+
+.ember-chat-container.dark .ffz-ui-toggle.news:hover svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.news:hover svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.news:hover svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.news:hover svg.svg-emoticons path,
+.ffz-ui-toggle.news:hover svg.svg-emoticons path { fill: rgba(117, 80, 0, 0.8); }
+
+.ember-chat-container.dark .ffz-ui-toggle.no-emotes svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.no-emotes svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.no-emotes svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.no-emotes svg.svg-emoticons path { fill: #453434; }
+
+.ember-chat-container.dark .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.no-emotes:hover svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.no-emotes:hover svg.svg-emoticons path { fill: #543f3f; }
+
+.ember-chat-container.dark .ffz-ui-toggle.live svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.live svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.live svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.live svg.svg-emoticons path { fill: #513c78; }
+
+.ember-chat-container.dark .ffz-ui-toggle.live:hover svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.live:hover svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.live:hover svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.live:hover svg.svg-emoticons path { fill: #5b4487; }
+
+.ember-chat-container.dark .ffz-ui-toggle.blue.live svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.blue.live svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.blue.live svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.blue.live svg.svg-emoticons path { fill: #3c4e78; }
+
+.ember-chat-container.dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path,
+.app-main.theatre .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path,
+.chat-container.dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path,
+.ember-chat .chat-interface .textarea-contain .ffz-ui-toggle.dark.blue.live:hover svg.svg-emoticons path { fill: #445887; }
+
+
+.ffz-ui-toggle.live {
+ animation: ffzfade 8s linear infinite;
+ -webkit-animation: ffzfade 8s linear infinite;
+}
+
+@-webkit-keyframes ffzfade {
+ from, to { opacity: 1; }
+ 50% { opacity: 0.75; }
+}
+
+@keyframes ffzfade {
+ from, to { opacity: 1; }
+ 50% { opacity: 0.75; }
+}
+
+
+.ember-chat .chat-menu.ffz-ui-popup { padding: 0; }
+
+.ffz-button {
+ float: right;
+ margin-top: -6px;
+ text-transform: none;
+}
+
+.ffz-noty .noty_message {
+ background-image: url("//cdn.frankerfacez.com/icon32.png") !important;
+ background-repeat: no-repeat !important;
+ background-position: 5px 10px !important;
+ padding-left: 42px !important;
+ text-align: left;
+}
+
+.ffz-ui-popup .button.live { overflow: hidden; background: #6441A5; color: #fff; }
+.ffz-ui-popup .button.live span { z-index: 2; position: relative; }
+
+.ffz-ui-popup .button.live:before, .ffz-ui-popup .button.live:after {
+ content: "";
+ display: block;
+ position: absolute;
+ width: 0px;
+ height: 0px;
+ border-radius: 999px;
+ -moz-border-radius: 999px;
+ -webkit-border-radius: 999px;
+ top: 50%;
+ left: 50%;
+ z-index: 1
+}
+
+.ffz-ui-popup .button.live.purple:before, .ffz-ui-popup .button.live.purple:after {
+ box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2;
+ -moz-box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2;
+ -webkit-box-shadow: 0 0 3px 1px #a68ed2,inset 0 0 3px 1px #a68ed2;
+}
+
+.ffz-ui-popup .button.live.blue:before, .ffz-ui-popup .button.live.blue:after {
+ box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1;
+ -moz-box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1;
+ -webkit-box-shadow: 0 0 3px 1px #8ea2d1,inset 0 0 3px 1px #8ea2d1;
+}
+
+.ffz-ui-popup .button.live:before {
+ animation: expand 1500ms infinite ease-in;
+ -moz-animation: expand 1500ms infinite ease-in;
+ -webkit-animation: expand 1500ms infinite ease-in;
+ -o-animation: expand 1500ms infinite ease-in
+}
+
+.ffz-ui-popup .button.live:after {
+ animation: expand 1500ms infinite 750ms ease-in;
+ -moz-animation: expand 1500ms infinite 750ms ease-in;
+ -webkit-animation: expand 1500ms infinite 750ms ease-in;
+ -o-animation: expand 1500ms infinite 750ms ease-in
+}
+
+#dash_main #stats .stat.dark#ffz_count svg path { fill: #cacaca; }
+
+#ffz-ui-following .follow-button a {
+ padding: 0 10px;
+ color: #fff;
+}
+
+#ffz-following-popup {
+ background-image: url('//cdn.frankerfacez.com/script/zreknarf-bg.png');
+ background-repeat: no-repeat;
+ background-position: 115% -75%;
+ background-size: 50%;
+}
+
+.ffz-live-team-channel .ffz-game {
+ display: inline-block;
+ max-width: 150px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ margin-bottom: -5px;
+}
+
+/* Theater Mode hover bar */
+
+.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.target-meta,
+.ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.target-meta,
+.ffz-theater-stats .app-main.theatre #channel .player-column:focus #broadcast-meta,
+.ffz-theater-stats .app-main.theatre #channel .player-column:hover #broadcast-meta {
+ background-color: #19191f;
+ color: #aaa;
+
+ position: absolute;
+ top: -25px;
+ left: 120px;
+ right: 10px;
+ z-index: 7;
+ opacity: 0.95;
+ height: 20px;
+}
+
+.ffz-theater-stats.ffz-sidebar-swap .app-main.theatre .player-column:focus #hostmode > div.target-meta,
+.ffz-theater-stats.ffz-sidebar-swap .app-main.theatre .player-column:hover #hostmode > div.target-meta,
+.ffz-theater-stats.ffz-sidebar-swap .app-main.theatre #channel .player-column:focus #broadcast-meta,
+.ffz-theater-stats.ffz-sidebar-swap .app-main.theatre #channel .player-column:hover #broadcast-meta {
+ left: 145px;
+}
+
+.ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title {
+ padding: 5px 0 2px 5px;
+}
+
+.ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info { padding-left: 5px; }
+
+.ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title {
+ font-size: 12px;
+ line-height: 20px;
+ color: #dedede;
+}
+
+.ffz-theater-stats .app-main.theatre #hostmode > div.target-meta div.target-title,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .title .over {
+ background-color: rgba(16,16,16,0.3);
+}
+
+.ffz-theater-stats .app-main.theatre #hostmode > div.target-meta .target-user-and-game,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .channel,
+.ffz-theater-stats .app-main.theatre #channel .player-column #broadcast-meta .info .edit-link,
+.ffz-theater-stats .app-main.theatre #broadcast-meta .profile-link {
+ display: none;
+}
+
+.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix,
+.ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix {
+ margin-bottom: 30px;
+}
+
+.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix,
+.ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix,
+.ffz-theater-stats .app-main.theatre .player-column:focus .stats-and-actions,
+.ffz-theater-stats .app-main.theatre .player-column:hover .stats-and-actions {
+ background-color: #19191f;
+
+ color: #aaa;
+
+ position: absolute;
+ bottom: 55px;
+ margin-right: 150px;
+ left: 10px;
+ z-index: 7;
+ padding: 10px;
+ opacity: 0.95;
+}
+
+.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus #hostmode > div.clearfix,
+.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover #hostmode > div.clearfix,
+.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus .stats-and-actions,
+.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover .stats-and-actions {
+ bottom: 15px;
+}
+
+.ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; }
+
+.ffz-theater-stats .app-main.theatre .channel-stats span:not(.live-count) svg path {
+ fill: rgba(255,255,255,0.35) !important;
+}
+
+.ffz-theater-stats .app-main.theatre .follow-button .notify:before,
+.ffz-theater-stats .app-main.theatre .button.drop:after,
+.ffz-theater-stats .app-main.theatre .follow-button .drop.follow:after {
+ border: 5px solid rgba(255,255,255,0.35);
+ border-left-color: transparent;
+ border-right-color: transparent;
+ border-bottom-color: transparent;
+}
+
+.ffz-theater-stats .app-main.theatre .follow-button .notify {
+ background-color: #25252a;
+}
+
+.ffz-theater-stats .app-main.theatre .button:not(.primary) {
+ color: #a68ed2;
+}
+
+.ffz-theater-stats .app-main.theatre .button.glyph-only svg path {
+ fill: #a68ed2;
+}
+
+.ffz-theater-stats .app-main.theatre .button.primary.subscribe-button {
+ color: #fff;
+}
+
+
+/* SRL Race Support */
+
+#ffz-following-popup.right {
+ right: 0;
+ left: auto;
+}
+
+#ffz-ui-following .notification-controls,
+#ffz-ui-race {
+ position: relative;
+}
+
+#ffz-ui-race .button span {
+ display: inline-block;
+ height: 30px;
+ background: no-repeat 0 50%;
+}
+
+#ffz-ui-race .button span.logo {
+ padding-left: 44px;
+ background-image: url("//cdn.frankerfacez.com/script/srl_button.png");
+}
+
+
+#ffz-race-popup {
+ position: absolute;
+ bottom: 0;
+ background-image: url("//cdn.frankerfacez.com/script/zreknarf-bg.png");
+ background-repeat: no-repeat;
+ background-position: 115% 110%;
+}
+
+#ffz-race-popup.right { right: 10px; }
+
+#ffz-race-popup .heading {
+ margin: -20px -20px 20px;
+ width: 340px; height: 65px;
+ position: relative;
+}
+
+#ffz-race-popup .heading div {
+ padding: 10px 0 0 20px;
+ max-width: 240px;
+}
+
+#ffz-race-popup .heading h2 {
+ font-size: 1.5em;
+ padding-bottom: 5px;
+ display: block;
+ width: 240px;
+ max-height: 45px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#ffz-race-popup .heading span {
+ line-height: 30px;
+ position: absolute;
+ top: 17.5px;
+ right: 20px;
+ padding: 0 5px;
+ background: rgba(0,0,0,0.5);
+ color: #fff;
+ border-radius: 5px;
+}
+
+#ffz-race-popup .right { text-align: right; }
+
+#ffz-race-popup .table {
+ overflow-y: auto;
+}
+
+#ffz-race-popup table {
+ width: 100%;
+ text-align: center;
+ border-spacing: 0;
+}
+
+#ffz-race-popup table a {
+ color: inherit;
+}
+
+.ffz-about-table a.twitch,
+.ffz-about-table a.youtube,
+.ffz-about-table a.twitter,
+#ffz-race-popup a.twitch,
+#ffz-race-popup a.hitbox {
+ display: inline-block;
+ height: 16px;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+}
+
+.ffz-about-table a.youtube {
+ width: 23px;
+ background-image: url("//cdn.frankerfacez.com/script/youtube_logo.png");
+}
+
+.ffz-about-table a.twitter {
+ width: 20px;
+ background-image: url("//cdn.frankerfacez.com/script/twitter_logo.png");
+}
+
+#ffz-race-popup a.twitch,
+.ffz-about-table a.twitch {
+ width: 15px;
+ background-image: url("//cdn.frankerfacez.com/script/twitch_logo.png");
+}
+
+#ffz-race-popup a.hitbox {
+ width: 12px;
+ background-image: url("//cdn.frankerfacez.com/script/hitbox_logo.png");
+}
+
+#ffz-race-popup table tbody tr.done:nth-child(0n+1) td { background-color: rgba(255,255,0,.2); }
+#ffz-race-popup table tbody tr.done:nth-child(0n+2) td { background-color: rgba(128,128,128,.2); }
+#ffz-race-popup table tbody tr.done:nth-child(0n+3) td { background-color: rgba(210,100,0,.2); }
+#ffz-race-popup table tbody tr.forfeit td { opacity: 0.5; background-color: rgba(210,100,100,.2); }
+#ffz-race-popup table tbody tr.racing td.time { opacity: 0.5; }
+
+#ffz-race-popup table th, #ffz-race-popup td { padding: 1px; }
+#ffz-race-popup table th { border-bottom: 1px solid; }
+
+
+/* Menu Options */
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.menu-side-padding { padding-left: 20px; padding-right: 20px; }
+
+.emoticon-grid.collapsed span,
+.chat-menu-content.collapsed p { display: none; }
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content.collapsed .heading,
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid.collapsed .heading {
+ padding-bottom: 0;
+}
+
+.emoticon-grid.collapsable .heading,
+.emoticon-grid.collapsed,
+.chat-menu-content.collapsed {
+ cursor: pointer;
+}
+
+.emoticon-grid.collapsable .heading,
+.chat-menu-content.collapsable .heading {
+ position: relative;
+}
+
+.list-header span.right { float: right; }
+
+.chat-menu-content.collapsable .heading span.right {
+ padding-right: 15px;
+}
+
+.emoticon-grid.collapsable .heading:before,
+.chat-menu-content.collapsable .heading:before {
+ content: "";
+ border: 5px solid #666;
+ border-left-color: transparent;
+ border-right-color: transparent;
+
+ position: absolute;
+ margin-top: 6px;
+ right: 20px;
+}
+
+.emoticon-grid.collapsable.collapsed .heading:before,
+.chat-menu-content.collapsable.collapsed .heading:before { border-bottom-color: transparent; }
+
+.emoticon-grid.collapsable:not(.collapsed) .heading:before {
+ display: none;
+}
+
+.chat-menu-content.collapsable:not(.collapsed) .heading:before {
+ border-top-color: transparent;
+ margin-top: 1px;
+}
+
+
+#small_nav .content ul li#ffz_small_menu .filter_icon svg {
+ margin: 11px 13px;
+}
+
+.ffz-ui-sub-menu-page,
+.ffz-ui-menu-page { overflow-y: auto; }
+
+.ffz-ui-menu-page[data-page="about"],
+.ffz-ui-menu-page .chat-menu-content p { padding: 0 20px; }
+
+
+.chat-container.dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
+.chat-container.force-dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box {
+ background-color: rgb(16,16,16);
+ color: rgb(195,195,195);
+ border-color: #32323e;
+}
+
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading,
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading {
+ padding: 10px 20px;
+ border-top: 1px solid rgba(0,0,0,0.2);
+ text-align: left;
+}
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading {
+ padding-left: 43px;
+ background-repeat: no-repeat;
+ background-position: 20px 10px;
+}
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid + .emoticon-grid { padding-top: 0; }
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content:first-of-type .heading,
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid:first-of-type .heading {
+ border-top: none;
+ padding-top: 0;
+ background-position-y: 0;
+}
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content {
+ padding: 10px 0;
+ background-color: transparent;
+}
+
+.chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content + .chat-menu-content {
+ padding-top: 0;
+}
+
+.ffz-ui-menu-page span.help {
+ display: block;
+ opacity: 0.75;
+}
+
+.ffz-ui-menu-page p.disabled span.switch-label,
+.ffz-ui-menu-page span.help,
+.ffz-ui-menu-page span.option-label,
+.ffz-ui-menu-page p.option a {
+ margin-left: 50px;
+}
+
+.ffz-ui-menu-page span.option-label {
+ line-height: 25px;
+}
+
+.ffz-ui-menu-page input,
+.ffz-ui-menu-page select {
+ margin: 0 10px 5px;
+}
+
+.ffz-ui-menu-page input[type="file"] {
+ width: auto;
+}
+
+#ffz-chat-menu { pointer-events: none; }
+
+.ffz-ui-popup ul.menu {
+ list-style-type: none;
+ border-top: 1px solid rgba(0,0,0,0.2);
+ background-color: #eee;
+}
+
+.ffz-ui-popup ul.menu:not(.sub-menu) {
+ cursor: ew-resize;
+}
+
+.ffz-ui-popup .emoticon-selector-box {
+ width: 10000px !important; /* Max-width has our back */
+ max-width: 300px;
+ pointer-events: auto;
+}
+
+.ember-chat .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box .emoticon-grid { background-color: transparent; }
+
+.app-main.theatre .ffz-ui-popup ul.menu,
+.chat-container.dark .ffz-ui-popup ul.menu,
+.chat-container.force-dark .ffz-ui-popup ul.menu,
+.ember-chat-container.dark .ffz-ui-popup ul.menu,
+.ember-chat-container.force-dark .ffz-ui-popup ul.menu,
+.ffz-ui-popup.dark ul.menu {
+ background-color: #282828;
+}
+
+.ffz-ui-popup ul.sub-menu li.title,
+.ffz-ui-menu-page .heading .right,
+.ffz-ui-popup ul.menu li.item {
+ float: right;
+}
+
+.ffz-ui-popup ul.sub-menu li.item,
+.ffz-ui-popup ul.menu li.title {
+ float: left;
+}
+
+.ffz-ui-popup ul.sub-menu { background-color: #dfdfdf; }
+
+.app-main.theatre .ffz-ui-popup ul.sub-menu,
+.chat-container.dark .ffz-ui-popup ul.sub-menu,
+.chat-container.force-dark .ffz-ui-popup ul.sub-menu,
+.ember-chat-container.dark .ffz-ui-popup ul.sub-menu,
+.ember-chat-container.force-dark .ffz-ui-popup ul.sub-menu,
+.ffz-ui-popup.dark ul.sub-menu {
+ background-color: #181818;
+}
+
+.ffz-ui-popup ul.sub-menu a {
+ text-decoration: none;
+ color: #333;
+}
+
+.app-main.theatre .ffz-ui-popup ul.sub-menu a,
+.chat-container.dark .ffz-ui-popup ul.sub-menu a,
+.chat-container.force-dark .ffz-ui-popup ul.sub-menu a,
+.ember-chat-container.dark .ffz-ui-popup ul.sub-menu a,
+.ember-chat-container.force-dark .ffz-ui-popup ul.sub-menu a,
+.ffz-ui-popup.dark ul.sub-menu a {
+ color: #d3d3d3 !important;
+}
+
+span.ffz-handle {
+ display: inline-block;
+ position: relative;
+ height: 26px;
+ width: 14px;
+ transition: width 500ms;
+}
+
+span.ffz-handle:before,
+span.ffz-handle:after {
+ position: absolute;
+ left: 4px;
+ top: 5px;
+ content: "";
+ height: 14px;
+ border: 1px solid #bbb;
+ border-radius: 4px;
+ transition: transform 500ms, left 500ms, border-color 500ms, border-width 500ms, height 500ms;
+}
+
+span.ffz-handle:after { left: 8px }
+
+.ffz-ui-popup.ui-moved span.ffz-handle { width: 24px; cursor: pointer; }
+
+.ffz-ui-popup.ui-moved span.ffz-handle:before,
+.ffz-ui-popup.ui-moved span.ffz-handle:after {
+ left: 11px;
+ border-color: #333;
+}
+
+.ffz-ui-popup.ui-moved span.ffz-handle:before { transform: rotate(45deg); }
+.ffz-ui-popup.ui-moved span.ffz-handle:after { transform: rotate(-45deg); }
+
+.app-main.theatre span.ffz-handle:before,
+.chat-container.dark span.ffz-handle:before,
+.chat-container.force-dark span.ffz-handle:before,
+.ember-chat-container.dark span.ffz-handle:before,
+.ember-chat-container.force-dark span.ffz-handle:before,
+.ffz-ui-popup.dark span.ffz-handle:before,
+.app-main.theatre span.ffz-handle:after,
+.chat-container.dark span.ffz-handle:after,
+.chat-container.force-dark span.ffz-handle:after,
+.ember-chat-container.dark span.ffz-handle:after,
+.ember-chat-container.force-dark span.ffz-handle:after,
+.ffz-ui-popup.dark span.ffz-handle:after {
+ border-color: #666;
+}
+
+.app-main.theatre .ffz-ui-popup.ui-moved span.ffz-handle:before,
+.chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:before,
+.chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:before,
+.ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:before,
+.ember-chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:before,
+.ffz-ui-popup.ui-moved.dark span.ffz-handle:before,
+.app-main.theatre .ffz-ui-popup.ui-moved span.ffz-handle:after,
+.chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:after,
+.chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:after,
+.ember-chat-container.dark .ffz-ui-popup.ui-moved span.ffz-handle:after,
+.ember-chat-container.force-dark .ffz-ui-popup.ui-moved span.ffz-handle:after,
+.ffz-ui-popup.ui-moved.dark span.ffz-handle:after {
+ border-color: #d3d3d3;
+}
+
+
+.ffz-ui-popup ul.menu li.title > span.ffz-handle {
+ float: left;
+ margin: 5px;
+}
+
+.ffz-ui-popup ul.menu li.title > span.title {
+ display: block;
+ margin-left: 24px;
+ padding: 10px 20px 10px 0;
+ line-height: 16px;
+ transition: margin-left 500ms;
+}
+
+.ffz-ui-popup.ui-moved ul.menu li.title > span.title { margin-left: 34px; }
+
+.ffz-ui-popup ul.menu a {
+ display: block;
+ padding: 10px;
+ height: 16px;
+ margin-top: -1px;
+ cursor: pointer;
+ border-left: 1px solid rgba(0,0,0,0.2);
+ border-top: 1px solid transparent;
+}
+
+.ffz-ui-popup ul.sub-menu a {
+ border-left: none;
+ border-right: 1px solid rgba(0,0,0,0.2);
+}
+
+.ffz-ui-popup ul.menu li.active {
+ background-color: #fff;
+}
+
+.ffz-ui-popup ul.menu li.active a {
+ border-top-color: #fff;
+}
+
+.ffz-ui-popup ul.menu li.active.has-sub-menu {
+ background-color: #dfdfdf;
+}
+
+.ffz-ui-popup ul.menu li.active.has-sub-menu a {
+ border-top-color: #dfdfdf;
+}
+
+
+.chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active,
+.chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active,
+.ffz-ui-popup.dark ul.menu li.active {
+ background-color: rgb(16,16,16);
+}
+
+.chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active a,
+.chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active a,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active a,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active a,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active a,
+.ffz-ui-popup.dark ul.menu li.active a {
+ border-top-color: rgb(16,16,16);
+}
+
+.chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu,
+.chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu,
+.ffz-ui-popup.dark ul.menu li.active.has-sub-menu {
+ background-color: #181818;
+}
+
+.chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a,
+.chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu li.active.has-sub-menu a,
+.ffz-ui-popup.dark ul.menu li.active.has-sub-menu a {
+ border-top-color: #181818;
+}
+
+.chat-container.dark .chat-interface .ffz-ui-popup a,
+.chat-container.force-dark .chat-interface .ffz-ui-popup a,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup a,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup a,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup a,
+.ffz-ui-popup.dark .ffz-ui-menu-page a { color: #fff; }
+
+
+.chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path,
+.chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu svg path,
+.ember-chat-container.dark .chat-interface .ffz-ui-popup ul.menu svg path,
+.ember-chat-container.force-dark .chat-interface .ffz-ui-popup ul.menu svg path,
+.app-main.theatre .chat-container .chat-interface .ffz-ui-popup ul.menu svg path,
+.ffz-dark .ffz-ui-popup ul.menu svg path,
+.ffz-ui-popup.dark ul.menu svg path { fill: #d3d3d3; }
+
+.ffz-ui-popup ul.menu svg path { fill: #333; }
+
+
+.ffz-ui-popup .option-label span,
+.ffz-ui-popup .switch-label span {
+ opacity: 0.8;
+ font-size: 10px;
+ line-height: 20px;
+ padding: 4px;
+ background: rgba(0,0,0,0.2);
+ vertical-align: top;
+}
+
+/* BTTV Menu Fixes */
+
+.ffz-ui-popup.dark .emoticon-grid .heading,
+.ffz-ui-popup.dark li.title { color: #fff; }
+.ffz-ui-popup.dark .ffz-ui-menu-page { background-color: #1e1e1e; }
+
+
+/* Menu Scrollbar */
+
+.conversations-list .conversations-list-inner::-webkit-scrollbar,
+.conversation-window .conversation-content::-webkit-scrollbar,
+.chat-history::-webkit-scrollbar,
+#ffz-race-popup .table::-webkit-scrollbar,
+.emoticon-selector-box .all-emotes::-webkit-scrollbar,
+.ffz-ui-sub-menu-page::-webkit-scrollbar,
+.ffz-ui-menu-page::-webkit-scrollbar {
+ width: 6px;
+}
+
+.conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
+.conversation-window .conversation-content::-webkit-scrollbar-thumb,
+.chat-history::-webkit-scrollbar-thumb,
+#ffz-race-popup .table::-webkit-scrollbar-thumb,
+.emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
+.ffz-ui-sub-menu-page::-webkit-scrollbar-thumb,
+.ffz-ui-menu-page::-webkit-scrollbar-thumb {
+ border-radius: 7px;
+ background: rgba(0,0,0,0.7);
+ box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
+}
+
+.ffz-dark .chat-history::-webkit-scrollbar-thumb,
+.ffz-dark .table::-webkit-scrollbar-thumb,
+.ffz-dark .conversation-window .conversation-content::-webkit-scrollbar-thumb,
+.ffz-dark .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
+.app-main.theatre .conversation-window .conversation-content::-webkit-scrollbar-thumb,
+.app-main.theatre .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
+.ember-chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
+.chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
+.app-main.theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
+.ember-chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb,
+.chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb,
+.app-main.theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb,
+.ember-chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb,
+.chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb,
+.app-main.theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb {
+ background: rgba(255,255,255,0.6);
+ box-shadow: 0 0 1px 1px rgba(0,0,0,0.25);
+}
+
+
+/* Chat Mentions */
+
+.ember-chat .mentioned:empty,
+.ember-chat .mentioning:empty {
+ display: none;
+}
+
+.ffz-chat-colors-gray .chat-line:not(.admin):not(.notification) span.from,
+.ffz-chat-colors-gray .chat-line:not(.admin):not(.notification) span.message {
+ color: inherit !important
+}
+
+.ffz-chat-background .ember-chat .mentioning,
+.ffz-chat-background .ember-chat .mentioned {
+ border-radius: 10px;
+ padding: 3px 7px;
+ font-weight: bold;
+ color: #32323e;
+ background-color: rgba(255,255,255, 0.75);
+}
+
+.ffz-chat-background .app-main.theatre .chat-container .chat-line .mentioned,
+.ffz-chat-background .ember-chat-container.dark .chat-line .mentioned,
+.ffz-chat-background .chat-container.dark .chat-line .mentioned,
+.ffz-chat-background .app-main.theatre .chat-container .chat-line .mentioning,
+.ffz-chat-background .ember-chat-container.dark .chat-line .mentioning,
+.ffz-chat-background .chat-container.dark .chat-line .mentioning {
+ color: #8c8c9c;
+ background-color: rgba(16,16,20, 0.75);
+}
+
+
+/* Fix Moderation Cards */
+
+img.channel_background[src="null"] { display: none; }
+
+.ember-chat .ffz-moderation-card {
+ border: 2px solid #cbcbcb;
+ max-width: 340px;
+ /*box-shadow: #808080 0 0 5px;*/
+}
+
+.ember-chat .ffz-moderation-card .extra-interface {
+ padding-top: 0;
+}
+
+.ember-chat .ffz-moderation-card .extra-interface + .extra-interface {
+ margin-top: -10px;
+}
+
+.ember-chat .ffz-moderation-card.ffz-has-info h3.name {
+ margin-top: 0;
+}
+
+.ember-chat .ffz-moderation-card .info {
+ float: none;
+ position: relative;
+ z-index: 4;
+ margin-left: 50px;
+ height: 18px;
+ line-height: 18px;
+}
+
+.ember-chat .ffz-moderation-card .info.channel-stats .stat {
+ color: #fff;
+}
+
+.ember-chat .ffz-moderation-card .info.channel-stats .stat svg {
+ margin: 1px 5px 1px 0;
+ pointer-events: none;
+}
+
+.ember-chat .ffz-moderation-card .info svg path { fill: #fff; }
+
+.ember-chat .ffz-moderation-card button {
+ margin: 0;
+ padding: 0 5px;
+}
+
+.ember-chat .ffz-moderation-card button:not(.glyph-only):hover,
+.ember-chat .ffz-moderation-card button:not(.glyph-only):focus {
+ color: #fff;
+ background-color: rgba(117,80,186, 1);
+}
+
+.ember-chat .ffz-moderation-card button.message {
+ height: 30px; width: 28px;
+}
+
+.ember-chat .ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type,
+.ember-chat .ffz-moderation-card .interface span.right {
+ float: right;
+}
+
+.ember-chat .ffz-moderation-card:focus {
+ outline: none;
+ border-color: #444;
+ /*box-shadow: #000 0 0 5px;*/
+}
+
+.ember-chat .ffz-moderation-card .interface:not(:last-of-type) {
+ border-bottom: none;
+}
+
+.ember-chat .ffz-moderation-card .interface {
+ border-top: none;
+}
+
+.ember-chat .ffz-moderation-card h3.name { display: inline-block; }
+
+.ember-chat .ffz-moderation-card .info,
+.ember-chat .ffz-moderation-card h3.name {
+ text-shadow: black 0 0 5px;
+}
+
+.ember-chat .ffz-moderation-card .channel_background {
+ width: 100%;
+ top: 0;
+}
+
+
+body:not(.ffz-chat-purge-icon) .ember-chat .mod-icons .purge { display: none; }
+
+.ember-chat .mod-icons .purge {
+ background-image: url('//cdn.frankerfacez.com/script/PurgeButton.svg');
+ background-repeat: no-repeat;
+}
+
+.ember-chat .mod-icons .custom {
+ text-indent: 0;
+ text-align: center;
+ text-decoration: none;
+ font-size: 18px;
+ font-weight: bold;
+ color: #888 !important;
+}
+
+
+/* Chat Rows */
+
+.ffz-alias { font-style: italic; }
+
+.ember-chat .chat-messages .chat-line.ffz-has-deleted {
+ line-height: 30px;
+}
+
+.chat-line.ffz-deleted > span {
+ opacity: 0.5;
+}
+
+.chat-line.ffz-deleted > span.message {
+ text-decoration: line-through;
+}
+
+.chat-line.ffz-deleted:hover > span {
+ opacity: 0.9;
+}
+
+.chat-line.ffz-deleted:hover > span.message {
+ text-decoration: none;
+}
+
+.ffz-chat-background .more-messages-indicator {
+ /* This looks better when it's full width. */
+ margin: 0 -20px;
+}
+
+.ffz-chat-background .chat-line .message {
+ word-break: break-word;
+}
+
+.ffz-chat-background .ember-chat .chat-messages .tse-scroll-content {
+ padding: 0;
+}
+
+/* This cuts off emotes.
+.ffz-chat-background .ember-chat .chat-messages .chat-line {
+ padding: 3px 20px;
+ margin: 0px 0px;
+} */
+
+.ffz-chat-separator .conversation-chat-lines > div,
+.ffz-chat-background .conversation-chat-lines > div,
+.ffz-chat-separator .chat-line,
+.ffz-chat-background .chat-line {
+ position: relative;
+ z-index: 1;
+}
+
+.ffz-chat-padding .conversation-window .conversation-chat-lines {
+ padding-top: 0;
+}
+
+.ffz-chat-padding .ember-chat .chat-messages .chat-line,
+.ffz-chat-padding .ember-chat .chat-messages .chat-line.admin,
+.ffz-chat-padding .conversation-window .conversation-system-messages,
+.ffz-chat-padding .conversation-window .conversation-chat-line,
+.ffz-chat-padding .conversation-window .timestamp-line {
+ padding: 5px;
+}
+
+.ffz-chat-separator .conversation-chat-lines > div:before,
+.ffz-chat-background .conversation-chat-lines > div:before,
+.ffz-chat-separator .chat-line:before,
+.ffz-chat-background .chat-line:before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ left: 0; right: 0;
+ top: 2px; bottom: 1px;
+}
+
+.ffz-chat-background .chat-history .chat-line:before {
+ top: 0; bottom: 0;
+}
+
+
+.ffz-chat-separator .conversation-chat-lines > div:before,
+.ffz-chat-separator .chat-line:before {
+ border-bottom: 1px solid #aaa;
+}
+
+.ffz-chat-separator-wide .conversation-chat-lines > div:before,
+.ffz-chat-separator-wide .chat-line:before {
+ border-top: 1px solid #aaa;
+}
+
+.ffz-chat-separator-3d .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d .chat-line:before {
+ border-top: 1px solid rgba(255,255,255,0.5);
+}
+
+.ffz-chat-separator-3d-inset .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d-inset .chat-line:before {
+ border-bottom-color: rgba(255,255,255,0.5);
+ border-top: 1px solid #aaa;
+}
+
+.ffz-chat-separator-wide .conversation-chat-lines > div:first-of-type:before,
+.ffz-chat-separator-3d .conversation-chat-lines > div:first-of-type:before,
+.ffz-chat-separator-wide ul.chat-lines div:first-of-type .chat-line:before,
+.ffz-chat-separator-3d ul.chat-lines div:first-of-type .chat-line:before {
+ border-top: none;
+}
+
+.ffz-chat-separator:not(.ffz-chat-background) .conversation-chat-lines > div:last-of-type:before,
+.ffz-chat-separator:not(.ffz-chat-background) ul.chat-lines div:last-of-type .chat-line:before,
+.ffz-chat-separator ul.chat-lines div:last-of-type .chat-line:not(.ffz-alternate):before {
+ border-bottom: none;
+}
+
+.ffz-chat-separator .theatre .conversation-chat-lines > div:before,
+.ffz-chat-separator.ffz-dark .conversation-chat-lines > div:before,
+.ffz-chat-separator .app-main.theatre .chat-line:before,
+.ffz-chat-separator .chat-container.dark .chat-line:before,
+.ffz-chat-separator .chat-container.force-dark .chat-line:before,
+.ffz-chat-separator .ember-chat-container.dark .chat-line:before,
+.ffz-chat-separator .ember-chat-container.force-dark .chat-line:before {
+ border-bottom-color: #000;
+}
+
+.ffz-chat-separator-wide .theatre .conversation-chat-lines > div:before,
+.ffz-chat-separator-wide.ffz-dark .conversation-chat-lines > div:before,
+.ffz-chat-separator-wide .app-main.theatre .chat-line:before,
+.ffz-chat-separator-wide .chat-container.dark .chat-line:before,
+.ffz-chat-separator-wide .chat-container.force-dark .chat-line:before,
+.ffz-chat-separator-wide .ember-chat-container.dark .chat-line:before,
+.ffz-chat-separator-wide .ember-chat-container.force-dark .chat-line:before {
+ border-top-color: #000;
+}
+
+.ffz-chat-separator-3d .theatre .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d.ffz-dark .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d .app-main.theatre .chat-line:before,
+.ffz-chat-separator-3d .chat-container.dark .chat-line:before,
+.ffz-chat-separator-3d .chat-container.force-dark .chat-line:before,
+.ffz-chat-separator-3d .ember-chat-container.dark .chat-line:before,
+.ffz-chat-separator-3d .ember-chat-container.force-dark .chat-line:before {
+ border-top-color: rgba(255,255,255,0.1);
+}
+
+.ffz-chat-separator-3d-inset .theatre .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d-inset.ffz-dark .conversation-chat-lines > div:before,
+.ffz-chat-separator-3d-inset .app-main.theatre .chat-line:before,
+.ffz-chat-separator-3d-inset .chat-container.dark .chat-line:before,
+.ffz-chat-separator-3d-inset .chat-container.force-dark .chat-line:before,
+.ffz-chat-separator-3d-inset .ember-chat-container.dark .chat-line:before,
+.ffz-chat-separator-3d-inset .ember-chat-container.force-dark .chat-line:before {
+ border-bottom-color: rgba(255,255,255,0.1);
+ border-top-color: #000;
+}
+
+.ffz-chat-background .conversation-chat-lines > div:nth-child(2n+0):before,
+.ffz-chat-background .chat-history .chat-line.ffz-alternate:before,
+.ffz-chat-background .ember-chat .chat-messages .chat-line.ffz-alternate:before {
+ background-color: rgba(0,0,0, 0.1);
+}
+
+.ffz-chat-background .chat-history .chat-line.ffz-mentioned:before,
+.ffz-chat-background .ember-chat .chat-messages .chat-line.ffz-mentioned:before {
+ background-color: rgba(255,127,127, 0.2);
+}
+
+.ffz-chat-background .chat-history .chat-line.ffz-mentioned-ffz-alternate:before,
+.ffz-chat-background .ember-chat .chat-messages .chat-line.ffz-mentioned.ffz-alternate:before {
+ background-color: rgba(255,127,127, 0.4);
+}
+
+.ffz-chat-background .theatre .conversation-chat-lines > div:nth-child(2n+0):before,
+.ffz-chat-background.ffz-dark .conversation-chat-lines > div:nth-child(2n+0):before,
+
+.ffz-chat-background .app-main.theatre .chat-history .chat-line.ffz-alternate:before,
+.ffz-chat-background .chat-container.dark .chat-history .chat-line.ffz-alternate:before,
+.ffz-chat-background .ember-chat-container.dark .chat-history .chat-line.ffz-alternate:before,
+.ffz-chat-background .app-main.theatre .ember-chat .chat-messages .chat-line.ffz-alternate:before,
+.ffz-chat-background .chat-container.dark .ember-chat .chat-messages .chat-line.ffz-alternate:before,
+.ffz-chat-background .ember-chat-container.dark .ember-chat .chat-messages .chat-line.ffz-alternate:before {
+ background-color: rgba(255,255,255, 0.05);
+}
+
+
+.ffz-chat-background .app-main.theatre .chat-history .chat-line.ffz-mentioned:before,
+.ffz-chat-background .chat-container.dark .chat-history .chat-line.ffz-mentioned:before,
+.ffz-chat-background .ember-chat-container.dark .chat-history .chat-line.ffz-mentioned:before,
+.ffz-chat-background .app-main.theatre .ember-chat .chat-messages .chat-line.ffz-mentioned:before,
+.ffz-chat-background .chat-container.dark .ember-chat .chat-messages .chat-line.ffz-mentioned:before,
+.ffz-chat-background .ember-chat-container.dark .ember-chat .chat-messages .chat-line.ffz-mentioned:before {
+ background-color: rgba(255,0,0, 0.2);
+}
+
+.ffz-chat-background .app-main.theatre .chat-history .chat-line.ffz-mentioned.ffz-alternate:before,
+.ffz-chat-background .chat-container.dark .chat-history .chat-line.ffz-mentioned.ffz-alternate:before,
+.ffz-chat-background .ember-chat-container.dark .chat-history .chat-line.ffz-mentioned.ffz-alternate:before,
+.ffz-chat-background .app-main.theatre .ember-chat .chat-messages .chat-line.ffz-mentioned.ffz-alternate:before,
+.ffz-chat-background .chat-container.dark .ember-chat .chat-messages .chat-line.ffz-mentioned.ffz-alternate:before,
+.ffz-chat-background .ember-chat-container.dark .ember-chat .chat-messages .chat-line.ffz-mentioned.ffz-alternate:before {
+ background-color: rgba(255,0,0, 0.3);
+}
+*/
+
+/* The New Whispers */
+
+.ffz-chat-background .ember-chat .chat-messages .whisper-line {
+ padding-left: 16px;
+ border-left-width: 4px !important;
+}
+
+.ffz-chat-background .app-main.theatre .ember-chat .chat-messages .whisper-line.whisper-incoming:before,
+.ffz-chat-background .chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming:before,
+.ffz-chat-background .ember-chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming:before {
+ /* 675980 */
+ background-color: rgba(78,51,128, 0.4);
+}
+
+.ffz-chat-background .app-main.theatre .ember-chat .chat-messages .whisper-line.whisper-incoming.ffz-alternate:before,
+.ffz-chat-background .chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming.ffz-alternate:before,
+.ffz-chat-background .ember-chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming.ffz-alternate:before {
+ /* 675980 */
+ background-color: rgba(78,51,128, 0.5);
+}
+
+.ffz-chat-background .ember-chat .chat-messages .whisper-line.whisper-incoming:before {
+ background-color: rgba(205,178,255, 0.4);
+}
+
+.ffz-chat-background .ember-chat .chat-messages .whisper-line.whisper-incoming.ffz-alternate:before {
+ background-color: rgba(205,178,255, 0.6);
+}
+
+
+
+/* Temporary Fix */
+
+.chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming,
+.app-main.theatre .chat-container .ember-chat .chat-messages .whisper-line.whisper-incoming,
+.chat-container.force-dark .ember-chat .chat-messages .whisper-line.whisper-incoming,
+.ember-chat-container.dark .ember-chat .chat-messages .whisper-line.whisper-incoming,
+.app-main.theatre .ember-chat-container.chat-container .ember-chat .chat-messages .whisper-line.whisper-incoming,
+.ember-chat-container.force-dark .ember-chat .chat-messages .whisper-line.whisper-incoming {
+ background-color: #101014;
+ border-left: 2px solid #a68ed2
+}
+
+
+/* Emoticon Tooltips */
+
+.ffz-wide-tip .tipsy-inner {
+ min-width: 300px;
+ max-width: 600px;
+ text-align: left;
+ position: relative;
+}
+
+.ffz-wide-tip span.stat {
+ float: right;
+ margin-left: 5px;
+}
+
+.ffz-wide-tip b { margin-right: 20px; }
+
+.ffz-wide-tip span.stat svg {
+ float: left;
+ margin: 1px;
+}
+
+.ffz-wide-tip svg path { fill: #fff; }
+.ffz-wide-tip span.playing {
+ opacity: 0.7;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ position: relative;
+ left: 0;
+ right: 0;
+}
+
+.tipsy .tipsy-inner {
+ white-space: pre-wrap;
+}
+
+/* Menu Page Loader */
+
+.ffz-ui-sub-menu-page:empty,
+.ffz-ui-menu-page:empty {
+ overflow: hidden;
+}
+
+.ffz-ui-sub-menu-page:empty::after,
+.ffz-ui-menu-page:empty::after {
+ content: " ";
+ display: block;
+ width: 80px;
+ height: 63px;
+
+ background-image: url("//cdn.frankerfacez.com/script/spinner-dark.png");
+
+ margin: 50px auto;
+ -webkit-animation: ffz-rotateplane 1.2s infinite linear;
+ animation: ffz-rotateplane 1.2s infinite linear;
+}
+
+@-webkit-keyframes ffz-rotateplane {
+ 0% { -webkit-transform: perspective(120px) rotateY(90deg) }
+ 25% { -webkit-transform: perspective(120px) rotateY(180deg) }
+ 75% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
+ 100% { -webkit-transform: perspective(120px) rotateY(90deg) rotateX(180deg) }
+}
+
+@keyframes ffz-rotateplane {
+ 0% { transform: perspective(120px) rotateY(90deg) }
+ 25% { transform: perspective(120px) rotateY(180deg) }
+ 75% { transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
+ 100% { transform: perspective(120px) rotateY(90deg) rotateX(180deg) }
+}
+
+/* Menu About Page */
+
+.ffz-about-table {
+ width: 100%;
+}
+
+.ffz-about-table td:first-child {
+ text-align: left;
+ width: 100%;
+}
+
+.ffz-about-table .debug td {
+ padding-top: 10px;
+ opacity: 0.8;
+ font-size: 10px;
+}
+
+.ffz-about-subheading {
+ /*text-transform: uppercase;*/
+ letter-spacing: 2px;
+ margin: -5px 0 5px;
+}
+
+.button.ffz-news,
+.button.ffz-donate {
+ margin-left: 10px;
+ color: #fff !important;
+ padding: 0 10px;
+ font-size: 12px;
+}
+
+.button.ffz-donate { background: #00b132; }
+.button.ffz-donate:not(.disabled):hover { background: #08c43d; }
+
+.button.ffz-news { background: #755000; }
+.button.ffz-news:not(.disabled):hover { background: #8a5f03; }
+
+
+/* Dumb Fixes */
+
+.ffz-bttv .no-bttv { display: none; }
+
+.chat-container.dark, .app-main.theatre .chat-container,
+.chat-container.force-dark, .ember-chat-container.dark,
+.app-main.theatre .ember-chat-container.chat-container,
+.ember-chat-container.force-dark {
+ box-shadow: none;
+}
+
+
+/* Unsafe Links */
+
+a.unsafe-link {
+ color: #a64141 !important;
+}
+
+.chat-container.dark .chat-line a.unsafe-link {
+ color: #d28e8e !important;
+}
+
+/* Chat Menu */
+
+.ffz-room-list > div.ffz + ul.room-list { display: block !important; }
+
+.ffz-room-list > div:not(.ffz),
+.ffz-room-list > ul:not(.ffz) {
+ display: none !important;
+}
+
+.ffz-room-list > table {
+ padding: 15px 0 0;
+}
+
+.ffz-room-list > table + table {
+ margin-top: 10px;
+}
+
+.ffz-room-list > table th {
+ padding: 2px 5px;
+ color: #8c8c8c;
+ font-weight: normal;
+ text-transform: uppercase;
+}
+
+.ffz-room-list > table > tbody tr {
+ line-height: 26px;
+}
+
+.ffz-room-list > table td {
+ padding: 2px 0;
+ text-align: center;
+}
+
+.ffz-room-list > table th:first-child,
+.ffz-room-list > table td:nth-child(0n+2) {
+ width: 100%;
+ text-align: left;
+}
+
+.ffz-room-row {
+ cursor: pointer;
+}
+
+.ffz-room-list > table th:first-child,
+.ffz-room-list > table td:first-child {
+ padding-left: 18px;
+}
+
+.ffz-room-list > table th:last-child,
+.ffz-room-list > table td:last-child {
+ padding-right: 18px;
+}
+
+.ffz-room-list td svg {
+ margin: 5px;
+ float: left;
+}
+
+.ffz-dark .ffz-room-row { color: #a68ed2; }
+.ffz-dark .ffz-room-row svg path { fill: #a68ed2; }
+
+.ffz-room-row { color: #6441a5; }
+.ffz-room-row svg path { fill: #6441a5; }
+
+.ffz-room-row:hover svg path,
+.ffz-room-row:focus svg path,
+.ffz-room-row.active svg path { fill: #fff; }
+
+.ffz-room-row:hover td,
+.ffz-room-row:focus td,
+.ffz-room-row.active td {
+ background-color: #6441A5;
+ color: #fff !important;
+}
+
+th.ffz-row-switch {
+ min-width: 40px;
+}
+
+.ffz-room-row a.leave-chat {
+ float: right;
+ margin-right: 12px;
+}
+
+.ffz-row-switch .switch {
+ float: none;
+ margin: 5px 0 -4px;
+}
+
+.ffz-row-switch .switch.active {
+ background-color: #362359;
+}
+
+
+/* Chat Tabs */
+
+#ffz-group-tabs {
+ padding: 10px 10px 6px;
+ box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.2);
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.ffz-chat-tab {
+ flex-grow: 1;
+ position: relative;
+
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ min-width: 70px;
+
+ cursor: pointer;
+ padding: 5px;
+ margin: 0 4px 4px 0;
+
+ display: inline-block;
+
+ background-color: rgba(127,127,127,0.1);
+ color: #6441A5;
+}
+
+
+.ffz-chat-tab svg path {
+ fill: #6441A5;
+}
+
+#ffz-group-tabs .button {
+ height: 18px;
+ padding-bottom: 10px;
+ margin-bottom: -10px;
+ margin-right: 4px;
+}
+
+#ffz-group-tabs .button.glyph-only svg {
+ margin: 6px 0;
+}
+
+.ffz-chat-tab svg {
+ width: 18px;
+ height: 18px;
+ margin: -5px 5px -5px 0;
+}
+
+.ffz-chat-tab:hover,
+.ffz-chat-tab:focus,
+.ffz-chat-tab.active {
+ background-color: #6441A5;
+ color: #fff !important;
+}
+
+.ffz-chat-tab.tab-mentioned {
+ background-color: rgba(128,50,50,0.1);
+ color: red !important;
+}
+
+.ffz-chat-tab.tab-mentioned:not(.active):hover,
+.ffz-chat-tab.tab-mentioned:not(.active):focus {
+ background-color: #a54141;
+ color: #fff !important;
+}
+
+.ffz-chat-tab:not(.active):hover,
+.ffz-chat-tab:not(.active):focus {
+ background-color: #7550ba;
+}
+
+.ffz-chat-tab:hover svg path,
+.ffz-chat-tab:focus svg path,
+.ffz-chat-tab.active svg path {
+ fill: #fff !important;
+}
+
+.ffz-chat-tab.active {
+ cursor: default;
+}
+
+.ffz-chat-tab span:empty { display: none; }
+
+.ffz-chat-tab span {
+ padding: 0 4px;
+ display: inline-block;
+ border-radius: 2px;
+ text-align: center;
+ background-color: #f2f2f2;
+ color: #666;
+ position: absolute;
+ right: 5px;
+}
+
+
+/* Dark Group Tabs */
+
+.app-main.theatre #ffz-group-tabs,
+.chat-container.dark #ffz-group-tabs,
+.ember-chat-container.dark #ffz-group-tabs {
+ box-shadow: inset 0 -1px 0 0 #32323e;
+}
+
+.app-main.theatre .ffz-chat-tab,
+.chat-container.dark .ffz-chat-tab,
+.ember-chat-container.dark .ffz-chat-tab {
+ color: #B9A3E3;
+}
+
+.app-main.theatre .ffz-chat-tab span,
+.chat-container.dark .ffz-chat-tab span,
+.ember-chat-container.dark .ffz-chat-tab span {
+ background-color: #19191f;
+ color: #fff;
+}
+
+.app-main.theatre .ffz-chat-tab svg path,
+.chat-container.dark .ffz-chat-tab svg path,
+.ember-chat-container.dark .ffz-chat-tab svg path {
+ fill: #B9A3E3;
+}
+
+/* Minimalistic Chat */
+
+body.ffz-minimal-chat-head .ember-chat > .chat-header,
+body.ffz-minimal-chat-head .ember-chat #ffz-group-tabs,
+body.ffz-minimal-chat-input .ember-chat .chat-buttons-container {
+ display: none !important;
+}
+
+/*body.ffz-minimal-chat .ember-chat .chat-messages,
+body.ffz-minimal-chat .ember-chat .chat-interface .emoticon-selector {
+ bottom: 33px;
+}*/
+
+body.ffz-minimal-chat-input .ember-chat .chat-interface .emoticon-selector {
+ right: 10px;
+}
+
+body.ffz-minimal-chat-input .ember-chat .chat-interface .emoticon-selector .dropmenu {
+ margin-bottom: 10px;
+}
+
+body.ffz-minimal-chat-head .ember-chat .chat-room {
+ top: 0 !important;
+}
+
+body.ffz-minimal-chat-input .ember-chat .chat-interface {
+ /*height: 33px !important;*/
+ padding: 0;
+}
+
+body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain {
+ top: 0 !important;
+ margin: 0 !important;
+ height: auto;
+}
+
+body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textarea {
+ /*height: 33px !important;*/
+ overflow: hidden;
+ border-bottom: 0 !important;
+ border-left: 0;
+ border-right: 0;
+}
+
+/* Chat Pause */
+
+.ember-chat .chat-interface .more-messages-indicator.ffz-freeze-indicator {
+ opacity: 1;
+ cursor: default;
+ top: 0;
+}
+
+/* Chat History */
+
+.ember-chat .moderation-card .chat-history,
+.chat-history {
+ list-style-type: none;
+ padding: 0;
+ max-height: 200px;
+ overflow-y: scroll;
+}
+
+.chat-history.interface li:first-child { padding-top: 10px; }
+.chat-history.interface li:last-child { padding-bottom: 10px; }
+
+.chat-history .chat-line {
+ line-height: 20px;
+ padding: 4px 10px;
+ word-wrap: break-word;
+ list-style-position: unset;
+}
+
+.ember-chat .moderation-card .interface.chat-history .chat-line.action {
+ float: none;
+ margin-right: 0px;
+}
+
+.chat-history .chat-line.admin .message { color: #666; }
+
+.chat-history .timestamp {
+ color: #8c8c8c;
+ margin-right: 5px;
+}
+
+/* Room State */
+
+.ffz.room-state.stat {
+ line-height: 30px;
+ margin-left: -10px;
+ margin-right: 15px;
+}
+
+.ffz.room-state.truncated span { font-size: 8px; }
+
+.button.primary.ffz-waiting:not(:hover) {
+ background-color: rgba(0,0,0,0.1);
+ color: #32323e;
+}
+
+.button.primary.ffz-waiting.ffz-banned:not(:hover) {
+ background-color: rgba(128,0,0,0.1);
+ color: #88323e;
+}
+
+.chat-container.dark .button.primary.ffz-waiting:not(:hover),
+.app-main.theatre .button-primary.ffz-waiting:not(:hover),
+.chat-container.force-dark .button-primary.ffz-waiting:not(:hover),
+.ember-chat-container.dark .button-primary.ffz-waiting:not(:hover),
+.ember-chat-container.force-dark .button-primary.ffz-waiting:not(:hover) {
+ background-color: rgba(255,255,255,0.1);
+ color: #fff;
+}
+
+.chat-container.dark .button.primary.ffz-waiting.ffz-banned:not(:hover),
+.app-main.theatre .button-primary.ffz-waiting.ffz-banned:not(:hover),
+.chat-container.force-dark .button-primary.ffz-waiting.ffz-banned:not(:hover),
+.ember-chat-container.dark .button-primary.ffz-waiting.ffz-banned:not(:hover),
+.ember-chat-container.force-dark .button-primary.ffz-waiting.ffz-banned:not(:hover) {
+ background-color: rgba(255,128,128,0.1);
+ color: #f66;
+}
+
+/* Swap Sidebars */
+
+body[data-current-path^="user."].ffz-portrait #right_close { transform: rotate(90deg); }
+body[data-current-path^="user."].ffz-portrait .archives-contain .more-archives { width: 100%; }
+
+body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-interface .emoticon-selector,
+.ffz-sidebar-swap:not(.ffz-portrait) .ember-chat .chat-interface .emoticon-selector {
+ right: auto;
+ left: 20px;
+}
+
+.ffz-sidebar-swap #left_col {
+ left: auto;
+ right: 0;
+}
+
+.ffz-sidebar-swap #right_col {
+ right: auto;
+ left: 0;
+}
+
+.ffz-sidebar-swap:not(.ffz-portrait) #right_close,
+.ffz-sidebar-swap #left_close {
+ transform: scaleX(-1);
+}
+
+.ffz-sidebar-swap #right_close {
+ right: auto;
+ left: 5px;
+}
+
+.ffz-sidebar-swap #left_close {
+ right: auto;
+ left: -25px;
+}
+
+.ffz-sidebar-swap #main_col {
+ margin-left: 340px;
+ margin-right: 240px;
+}
+
+.ffz-sidebar-swap .app-main.theatre #main_col {
+ margin-left: 340px;
+ margin-right: 0px;
+}
+
+.ffz-sidebar-swap .app-main.theatre #main_col.expandRight {
+ margin-left: 0px;
+}
+
+
+.ffz-sidebar-swap .exit-theatre {
+ left: 30px;
+}
+
+.ffz-sidebar-swap #main_col.expandLeft {
+ margin-right: 50px;
+}
+
+.ffz-sidebar-swap #main_col.expandRight {
+ margin-left: 0px;
+}
+
+.ffz-sidebar-swap #flyout {
+ left: auto !important;
+ right: 50px;
+}
+
+.ffz-sidebar-swap #flyout .content {
+ right: 10px;
+}
+
+.ffz-sidebar-swap #flyout .point {
+ left: auto;
+ right: -1px;
+}
+
+.ffz-sidebar-swap #flyout .point:before {
+ border-left-color: #fff;
+ border-right-color: transparent;
+ right: auto;
+ left: 0px;
+}
+
+.ffz-sidebar-swap #flyout .point:after {
+ border-right-color: transparent;
+ border-left-color: rgba(0,0,0,0.25);
+ right: auto;
+ left: 1px;
+}
+
+.ffz-dark.ffz-sidebar-swap #flyout .point:after {
+ border-left-color: #32323e;
+ border-right-color: transparent;
+}
+
+.ffz-dark.ffz-sidebar-swap #flyout .point:before {
+ border-left-color: #101010;
+ border-right-color: transparent;
+}
+
+/* Badge Styles */
+
+.ffz-rounded-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-rounded-badges .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; }
+
+.ffz-circular-blank-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-badges .ember-chat .badges .badge:not(.subscriber) {
+ border-radius: 9px;
+ background-size: 16px;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+
+.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-blank-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
+.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber) {
+ background-size: 0px;
+}
+
+.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
+.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber) {
+ height: 10px;
+ min-width: 10px;
+ margin: 5px 3px 5px 0;
+}
+
+.ffz-transparent-badges .conversation-window .badges .badge,
+.ffz-transparent-badges .ember-chat .badges .badge {
+ background-color: transparent !important;
+}
+
+.ffz-transparent-badges:not(.ffz-dark) .app-main:not(.theatre) .conversation-window .badges .badge:not(.ffz-badge-0):not(.subscriber),
+.ffz-transparent-badges > .chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
+.ffz-transparent-badges > .ember-chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
+.ffz-transparent-badges .app-main:not(.theatre) .chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
+.ffz-transparent-badges .app-main:not(.theatre) .ember-chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber) {
+ filter: invert(100%);
+ -webkit-filter: invert(100%);
+}
+
+/* No Blue */
+
+.ffz-no-blue .theatre .conversations-list-icon,
+.ffz-no-blue.ffz-dark .conversations-list-icon,
+.ffz-no-blue .theatre .conversations-list,
+.ffz-no-blue.ffz-dark .conversations-list,
+.ffz-no-blue .theatre .conversation-window,
+.ffz-no-blue.ffz-dark .conversation-window,
+.ffz-no-blue .theatre .conversations-list .conversations-list-header,
+.ffz-no-blue.ffz-dark .conversations-list .conversations-list-header,
+
+.ffz-no-blue #large_nav .content,
+.ffz-no-blue #small_nav .content,
+.ffz-no-blue .chat-container.dark,
+.ffz-no-blue .app-main.theatre .chat-container,
+.ffz-no-blue .chat-container.force-dark,
+.ffz-no-blue .ember-chat-container.dark,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container,
+.ffz-no-blue .ember-chat-container.force-dark,
+.ffz-no-blue .chat-container.dark .chat-hidden-overlay,
+.ffz-no-blue .app-main.theatre .chat-container .chat-hidden-overlay,
+.ffz-no-blue .chat-container.force-dark .chat-hidden-overlay,
+.ffz-no-blue .ember-chat-container.dark .chat-hidden-overlay,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-hidden-overlay,
+.ffz-no-blue .ember-chat-container.force-dark .chat-hidden-overlay,
+.ffz-no-blue .chat-container.dark .chatters-view,
+.ffz-no-blue .app-main.theatre .chat-container .chatters-view,
+.ffz-no-blue .chat-container.force-dark .chatters-view,
+.ffz-no-blue .ember-chat-container.dark .chatters-view,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chatters-view,
+.ffz-no-blue .ember-chat-container.force-dark .chatters-view,
+.ffz-no-blue .chat-container.dark .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .chat-container.force-dark .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .ember-chat-container.dark .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .ember-chat-container.force-dark .emoticon-selector .emoticon-selector-box,
+.ffz-no-blue .chat-container.dark .emoticon-selector .emoticon-grid,
+.ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .emoticon-grid,
+.ffz-no-blue .chat-container.force-dark .emoticon-selector .emoticon-grid,
+.ffz-no-blue .ember-chat-container.dark .emoticon-selector .emoticon-grid,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .emoticon-grid,
+.ffz-no-blue .ember-chat-container.force-dark .emoticon-selector .emoticon-grid,
+.ffz-no-blue .chat-container.dark .chat-commands-dropdown,
+.ffz-no-blue .app-main.theatre .chat-container .chat-commands-dropdown,
+.ffz-no-blue .chat-container.force-dark .chat-commands-dropdown,
+.ffz-no-blue .ember-chat-container.dark .chat-commands-dropdown,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-commands-dropdown,
+.ffz-no-blue .ember-chat-container.force-dark .chat-commands-dropdown,
+.ffz-no-blue .chat-container.dark .chat-commands-dropdown li,
+.ffz-no-blue .app-main.theatre .chat-container .chat-commands-dropdown li,
+.ffz-no-blue .chat-container.force-dark .chat-commands-dropdown li,
+.ffz-no-blue .ember-chat-container.dark .chat-commands-dropdown li,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-commands-dropdown li,
+.ffz-no-blue .ember-chat-container.force-dark .chat-commands-dropdown li,
+.ffz-no-blue.error_500,
+.ffz-no-blue.error_400,
+.ffz-no-blue .takeover #carousel,
+.ffz-no-blue #carousel_and_background,
+.ffz-no-blue #carousel .items .pic img,
+.ffz-no-blue #content .turbo_landing {
+ background-color: #191919;
+}
+
+.ffz-no-blue .chat-container.dark .chat-interface .emoticon-selector .tabs,
+.ffz-no-blue .app-main.theatre .chat-container .chat-interface .emoticon-selector .tabs,
+.ffz-no-blue .chat-container.force-dark .chat-interface .emoticon-selector .tabs,
+.ffz-no-blue .ember-chat-container.dark .chat-interface .emoticon-selector .tabs,
+.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .chat-interface .emoticon-selector .tabs,
+.ffz-no-blue .ember-chat-container.force-dark .chat-interface .emoticon-selector .tabs {
+ background-color: #232323;
+}
+
+.ffz-no-blue .theatre .conversations-list-icon,
+.ffz-no-blue.ffz-dark .conversations-list-icon,
+.ffz-no-blue .theatre .conversations-list .conversation-preview-line,
+.ffz-no-blue.ffz-dark .conversations-list .conversation-preview-line,
+.ffz-no-blue .theatre .conversation-window,
+.ffz-no-blue.ffz-dark .conversation-window {
+ color: #8c8c8c;
+}
+
+.ffz-no-blue .theatre .conversations-list,
+.ffz-no-blue.ffz-dark .conversations-list {
+ border-color: #323232;
+}
+
+.ffz-no-blue .theatre .converations-list:before,
+.ffz-no-blue.ffz-dark .conversations-list:before {
+ border-color: transparent;
+ border-top-color: #323232;
+}
+
+.ffz-no-blue .theatre .conversations-list:after,
+.ffz-no-blue.ffz-dark .conversations-list:after {
+ border-color: transparent;
+ border-top-color: #191919;
+}
+
+.ffz-no-blue .theatre .conversations-list .conversations-list-header,
+.ffz-no-blue.ffz-dark .conversations-list .conversations-list-header,
+.ffz-no-blue .theatre .conversations-list .conversations-list-item,
+.ffz-no-blue.ffz-dark .conversations-list .conversations-list-item {
+ border-bottom-color: #323232;
+}
+
+.ffz-no-blue .theatre .conversation-header,
+.ffz-no-blue.ffz-dark .conversation-header,
+.ffz-no-blue .theatre .conversation-window.has-focus .conversation-header,
+.ffz-no-blue.ffz-dark .conversation-window.has-focus .conversation-header,
+.ffz-no-blue .theatre .conversations-list .conversations-list-item:hover,
+.ffz-no-blue.ffz-dark .conversations-list .conversations-list-item:hover {
+ background-color: #121212;
+}
+
+/* Following Count */
+
+li[data-name="following"] a {
+ position: relative;
+}
+
+.ffz-follow-count:empty { display: none; }
+
+.ffz-follow-count {
+ display: inline-block;
+ border-radius: 2px;
+ text-align: center;
+ color: #fff;
+}
+
+#header_following .ffz-follow-count {
+ margin: 0 5px;
+ padding: 0 5px;
+ line-height: 20px;
+ background-color: rgba(25,25,25,0.5);
+}
+
+#large_nav .ffz-follow-count,
+.ffz-dark #header_following .ffz-follow-count {
+ background-color: rgba(127,127,127,0.5);
+}
+
+#large_nav .ffz-follow-count {
+ position: absolute;
+ right: 10px;
+ top: 8px;
+
+ line-height: 14px;
+ padding: 2px 5px;
+}
+
+#large_nav .game_filter.selected .ffz-follow-count { right: 13px; }
+
+#small_nav .ffz-follow-count {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ padding: 0 2px;
+ font-size: 10px;
+ background-color: #191919;
+ color: rgba(255,255,255,0.5);
+}
+
+#small_nav .game_filter.selected a .ffz-follow-count,
+#small_nav .content ul li a:hover .ffz-follow-count {
+ background-color: #101014;
+}
+
+#small_nav .game_filter.selected .ffz-follow-count { right: 5px; }
+
+/* Legacy Badges */
+
+.ffz-legacy-mod-badges .ember-chat .badges .moderator,
+.ffz-legacy-badges .ember-chat .badges .moderator {
+ background-color: #068c10;
+ background-image: url('//cdn.frankerfacez.com/script/legacy-mod.png');
+}
+
+.ffz-legacy-badges .ember-chat .badges .staff {
+ background-color: #6441a5;
+ background-image: url('//cdn.frankerfacez.com/script/legacy-staff.png');
+}
+
+.ffz-legacy-badges .ember-chat .badges .broadcaster {
+ background-color: #000;
+ background-image: url('//cdn.frankerfacez.com/script/legacy-broadcaster.png');
+}
+
+.ffz-legacy-badges .ember-chat .badges .admin {
+ background-color: #ff0303;
+ background-image: url('//cdn.frankerfacez.com/script/legacy-admin.png');
+}
+
+.ffz-legacy-turbo-badges .ember-chat .badges .turbo,
+.ffz-legacy-badges .ember-chat .badges .turbo {
+ background-color: #6441a3;
+ background-image: url('//cdn.frankerfacez.com/script/legacy-turbo.png');
+}
+
+/* High Contrast Chat */
+
+.ffz-high-contrast-chat-text .chat-container,
+.ffz-high-contrast-chat-text .ember-chat-container {
+ color: "#000";
+}
+
+.ffz-high-contrast-chat-bg .chat-container,
+.ffz-high-contrast-chat-bg .ember-chat-container {
+ background-color: #fff;
+}
+
+.ffz-high-contrast-chat-bold .ember-chat .chat-messages .chat-line .from,
+.ffz-high-contrast-chat-bold .ember-chat .chat-messages .chat-line .colon,
+.ffz-high-contrast-chat-bold .ember-chat .chat-messages .chat-line .message {
+ font-weight: bold;
+}
+
+/*.ffz-high-contrast-chat .chat-line:before {
+ background-color: transparent !important;
+ border: none !important;
+}*/
+
+.ffz-high-contrast-chat-text .chat-container.dark,
+.ffz-high-contrast-chat-text .chat-container.force-dark,
+.ffz-high-contrast-chat-text .ember-chat-container.dark,
+.ffz-high-contrast-chat-text .ember-chat-container.force-dark,
+.ffz-high-contrast-chat-text .app-main.theatre .chat-container,
+.ffz-high-contrast-chat-text.ffz-dark .ember-chat-container.dark .chat-line,
+.ffz-high-contrast-chat-text.ffz-dark .chat-container.dark .chat-line {
+ color: #fff;
+}
+
+.ffz-high-contrast-chat-bg .chat-container.dark,
+.ffz-high-contrast-chat-bg .chat-container.force-dark,
+.ffz-high-contrast-chat-bg .ember-chat-container.dark,
+.ffz-high-contrast-chat-bg .ember-chat-container.force-dark,
+.ffz-high-contrast-chat-bg .app-main.theatre .chat-container,
+.ffz-high-contrast-chat-bg.ffz-dark .ember-chat-container.dark .chat-line,
+.ffz-high-contrast-chat-bg.ffz-dark .chat-container.dark .chat-line {
+ background-color: #000;
+}
+
+
+/*.ffz-high-contrast-chat .chat-line .mentioned {
+ color: #fff !important;
+ background-color: #000 !important;
+}
+
+.ffz-high-contrast-chat .chat-container.dark .chat-line .mentioned,
+.ffz-high-contrast-chat .chat-container.force-dark .chat-line .mentioned,
+.ffz-high-contrast-chat .ember-chat-container.dark .chat-line .mentioned,
+.ffz-high-contrast-chat .ember-chat-container.force-dark .chat-line .mentioned,
+.ffz-high-contrast-chat .app-main.theatre .chat-container .chat-line .mentioned,
+.ffz-high-contrast-chat.ffz-dark .ember-chat-container.dark .chat-line .chat-line .mentioned,
+.ffz-high-contrast-chat.ffz-dark .chat-container.dark .chat-line .chat-line .mentioned {
+ color: #000 !important;
+ background-color: #fff !important;
+}*/
+
+.ffz-image-hover {
+ border:none;
+ max-width: 186px;
+ max-height: 186px;
+ overflow: hidden;
+}
+
+.emoticon.ffz-image-hover {
+ display: block;
+ margin: 5px auto;
+}
+
+.ffz-yt-thumb {
+ max-height: 90px;
+}
+
+/* Classic Player */
+
+.ffz-classic-player .player .player-video {
+ position: absolute;
+ top: 0; bottom: 32px;
+ left: 0; right: 0;
+}
+
+.ffz-classic-player .player.player-isvod .player-video {
+ bottom: 36px;
+}
+
+.ffz-classic-player .player .player-controls-bottom {
+ opacity: 1;
+
+ padding-top: 0;
+ border-top: 1px solid #000;
+ border-bottom: 1px solid #000;
+
+ background: -webkit-linear-gradient(bottom, #252525, #666);
+ background: linear-gradient(to top, #252525, #666);
+}
+
+.ffz-classic-player .app-main.theatre .player .player-video,
+.ffz-classic-player .player[data-fullscreen="true"] .player-video {
+ bottom: 0;
+}
+
+.ffz-classic-player .app-main.theatre .player .player-controls-bottom,
+.ffz-classic-player .player[data-fullscreen="true"] .player-controls-bottom {
+ margin-bottom: -32px;
+ -webkit-transition: margin-bottom .2s ease-out, padding-bottom .2s ease-out;
+ transition: margin-bottom .2s ease-out, padding-bottom .2s ease-out;
+}
+
+.ffz-classic-player:not(.ffz-top-conversations) .app-main.theatre .player .player-controls-bottom,
+.ffz-classic-player .app-main.theatre .player[data-fullscreen="true"] .player-controls-bottom {
+ padding-bottom: 0;
+}
+
+.ffz-classic-player .app-main.theatre .player.player-isvod .player-controls-bottom,
+.ffz-classic-player .player.player-isvod[data-fullscreen="true"] .player-controls-bottom {
+ margin-bottom: -36px;
+}
+
+.ffz-classic-player .app-main.theatre .player-column:hover .player .player-controls-bottom,
+.ffz-classic-player .app-main.theatre .player-column:focus .player .player-controls-bottom,
+.ffz-classic-player .player[data-fullscreen="true"][data-controls="true"] .player-controls-bottom {
+ margin-bottom: 0;
+}
+
+.ffz-classic-player:not(.ffz-top-conversations) .app-main.theatre .player-column:hover .player[data-fullscreen="false"] .player-controls-bottom {
+ padding-bottom: 40px;
+}
+
+.ffz-classic-player .player .player-button {
+ padding-bottom: 0;
+ height: 30px;
+}
+
+
+.ffz-classic-player .player .player-slider:before,
+.ffz-classic-player .player .player-button,
+.ffz-classic-player .player .player-slider .ui-slider-handle,
+.ffz-classic-player .player .player-seek .player-seek__time {
+ -webkit-filter: drop-shadow(0px 0px 1px #000);
+ filter: drop-shadow(0px 0px 1px #000);
+}
+
+
+.ffz-classic-player .player .player-slider .ui-slider-handle { background-color: #aeaeae; }
+.ffz-classic-player .player .player-button svg { fill: #aeaeae; }
+.ffz-classic-player .player .player-seek .player-seek__time { color: #ddd; }
+
+.ffz-classic-player .player .player-volume__slider-container {
+ width: auto;
+}
+
+
+.ffz-classic-player .player .player-seek {
+ padding: 0;
+}
+
+.ffz-classic-player .player .player-seek .player-slider {
+ margin: -1em 0;
+}
+
+.ffz-classic-player .player .player-seek .player-seek__time-container {
+ position: absolute;
+ bottom: -12px;
+ left: 210px;
+}
+
+.ffz-classic-player .player .player-seek .player-seek__time + .player-seek__time:before {
+ content: "/";
+ padding: 0 5px;
+ opacity: 0.8;
+}
+
+/* Directory Logos */
+
+.ffz-directory-logo .meta p { width: auto; }
+
+.ffz-directory-logo .profile-photo {
+ float: left;
+ height: 46px;
+ width: 46px;
+ margin-right: 10px;
+}
+
+.ffz-directory-logo .profile-photo.is-csgo {
+ margin-bottom: 20px;
+}
+
+/* Flip Dashboard */
+
+.ffz-flip-dashboard #dash_main #controls_column {
+ float: right;
+ margin-left: 20px;
+ margin-right: 0;
+}
+
+.ffz-flip-dashboard #dash_main .dash-chat-column {
+ right: inherit;
+ left: 0;
+ margin-right: 20px;
+}
+
+/* Conversations */
+
+.conversation-preview-line .badges,
+body.ffz-conv-title-clickable .conversation-header span.conversation-header-name,
+body:not(.ffz-conv-title-clickable) .conversation-header a.conversation-header-name { display:none }
+
+.conversation-window.has-unread .conversation-header .conversation-header-name { color: #fff !important; }
+
+.ffz-top-conversations .conversation-window.collapsed .conversation-header,
+.conversations-list .conversations-list-item:last-of-type {
+ border-bottom: none !important;
+}
+
+.ffz-top-conversations .conversations-content .conversations-list-icon,
+.ffz-top-conversations .conversation-window {
+ border-top: 0;
+ border-bottom: 1px solid #dedede;
+}
+
+.ffz-top-conversations.ffz-dark .conversations-content .conversations-list-icon,
+.ffz-top-conversations.ffz-dark .conversation-window,
+.ffz-top-conversations .theatre .conversations-content .conversations-list-icon,
+.ffz-top-conversations .theatre .conversation-window {
+ border-bottom-color: rgba(255,255,255,0.2);
+}
+
+.ffz-top-conversations .conversations-content {
+ left: 30px;
+ right: 30px;
+}
+
+.ffz-top-conversations .conversation-window,
+.ffz-top-conversations .conversations-content {
+ bottom: inherit;
+ top: 0px;
+}
+
+.ffz-top-conversations .conversations-list {
+ bottom: inherit;
+ top: 46px;
+}
+
+.ffz-top-conversations .conversations-list:before,
+.ffz-top-conversations .conversations-list:after {
+ display:none;
+}
+
+.ffz-top-conversations .theatre .player-controls-bottom {
+ padding-bottom: 0;
+}
+
+.ffz-top-conversations .theatre .player-livestatus {
+ top: 40px;
+}
+
+.ffz-top-conversations #directory-list { padding-top: 50px; }
+
+/* Following Page */
+
+.user.item { position: relative; }
+
+.user.item .overlay_info.length {
+ position: absolute;
+ top: 5px;
+ right: 25px;
+ z-index: 1;
+
+ display: inline-block;
+
+ padding: 0 5px;
+ font-size: 11px;
+ line-height: 22px;
+
+ background: black;
+ color: #fff;
+ opacity: 0.75;
+}
+
+.user.item .overlay_info.length svg {
+ float: left;
+ margin: 3px 5px 3px 0;
+}
+
+.user.item .actions .follow svg path,
+.user.item .overlay_info.length svg path { fill: #fff; }
+
+.user.item .actions {
+ margin-top: -15px;
+ margin-bottom: 20px;
+ margin-right: 20px;
+ display: flex;
+ flex-wrap: nowrap;
+}
+
+.user.item .actions button {
+ display: block;
+ font-size: 11px;
+ text-align: center;
+ height: 25px;
+ line-height: 25px;
+}
+
+.user:not(.followed) .actions .follow { width: 100%; }
+
+.user.item .actions .notifications {
+ flex-grow: 1;
+}
+
+.user.item .actions button:hover,
+.user.item .actions .notifications-on {
+ background-color: #6441A5;
+ color: #fff !important;
+}
+
+.user.followed .actions .follow span,
+.user.item:not(.followed) .actions .notifications,
+.user:not(.followed) .actions .follow .svg-unheart,
+.user.followed .actions .follow:not(:hover) .svg-unheart,
+.user.followed .actions .follow:hover .svg-heart { display: none; }
+
+.user.followed .actions .follow {
+ float: left;
+ width: 25px;
+ margin-right: 5px;
+ background-color: #00b132;
+}
+
+.user.followed .actions .follow:hover {
+ background-color: #d44949;
+}
+
+.user.item .actions .follow svg {
+ margin: 4.5px 0 -4.5px -1px;
+}
\ No newline at end of file