diff --git a/dark.css b/dark.css index de420715..0c24fcf9 100644 --- a/dark.css +++ b/dark.css @@ -164,6 +164,7 @@ /* Popups */ +.ffz-dark .conversation-settings-menu, .ffz-dark .ember-chat .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box, .ffz-dark .card, .ffz-dark #flyout .content, @@ -925,4 +926,114 @@ .ffz-dark .playlist-container:not(.playlist-enabled) .playlist-item:hover, .ffz-dark .playlist-container:not(.playlist-enabled) .ui-sortable-helper { background-color: rgba(255,255,255,0.2); +} + + +/* Conversations */ + +.ffz-dark .conversation-settings-menu .options-divider { + border-bottom-color: rgba(255,255,255,0.2); +} + +.ffz-dark .conversation-settings-menu:before { + border-color: transparent; + border-bottom-color: #32323e; +} + +.ffz-dark .conversation-settings-menu:after { + border-color: transparent; + border-bottom-color: rgb(16,16,16); +} + +.ffz-dark .conversations-list-icon { + background: #19191f; + color: #8c8c9c; + border-color: #19191f +} + +.ffz-dark .conversations-list-icon:hover { + color: #fff +} + +.ffz-dark .conversations-list { + background: #19191f; + border: 1px solid #32323e; + color: #fff +} + +.ffz-dark .conversations-list:after { + border-color: rgba(25,25,31,0); + border-top-color: #19191f; + border-width: 10px; + margin-left: -10px +} + +.ffz-dark .conversations-list:before { + right: 9px; + border-color: rgba(50,50,62,0); + border-top-color: #32323e +} + +.ffz-dark .conversations-list .conversations-list-header { + background: #19191f; + border-bottom: 1px solid #32323e; + color: #fff +} + +.ffz-dark .conversations-list .conversation-preview-line { + color: #8c8c9c +} + +.ffz-dark .conversations-list .conversations-list-item { + border-bottom: 1px solid #32323e +} + +.ffz-dark .conversations-list .conversations-list-item:hover { + background-color: #121217 +} + +.ffz-dark .conversation-window { + background: #19191f; + box-shadow: none; + color: #8c8c9c; +} + +.ffz-dark .conversations-list-icon, +.ffz-dark .conversation-window { + border: 1px solid rgba(255,255,255,0.2); + border-bottom: none; +} + +.ffz-dark .conversation-header { + background: #121217; + box-shadow: none; + border-bottom: 1px solid rgba(255,255,255,0.2); +} + +.ffz-dark .conversation-input-bar textarea { + border-color: rgba(255,255,255,0.1); + background-color: rgba(255,255,255,0.05); + color: #b6b6b6 +} + +.ffz-dark .conversation-input-actions .button, +.ffz-dark .conversation-input-actions .follow-button:not(.ember-follow) .follow { + background-color: #444 +} + +.ffz-dark .conversation-window.has-focus .conversation-header { + background-color: #121217 +} + +.ffz-dark .conversation-window.has-focus .conversation-header-name { + color: #fff +} + +.ffz-dark .conversation-window.has-focus .conversation-input-bar textarea:focus { + border-color: rgba(255,255,255,0.2) +} + +.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 diff --git a/src/badges.js b/src/badges.js index 09375e8d..c4ce8098 100644 --- a/src/badges.js +++ b/src/badges.js @@ -254,7 +254,7 @@ FFZ.prototype.render_badges = function(component, badges) { if ( ! this.settings.show_badges ) return badges; - var user = component.get('msgObject.from'), + var user = component.get('msgObject.from') || component.get('message.from.username'), room_id = component.get('msgObject.room') || App.__container__.lookup('controller:chat').get('currentRoom.id'); var data = this.users[user]; diff --git a/src/colors.js b/src/colors.js index 6591ca95..604959d6 100644 --- a/src/colors.js +++ b/src/colors.js @@ -581,6 +581,18 @@ FFZ.prototype._update_colors = function(darkness_only) { bit.style.color = is_dark ? colors[1] : colors[0]; } + + colored_bits = document.querySelectorAll('.conversation-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]; + } } diff --git a/src/constants.js b/src/constants.js index 32d35656..45d456c5 100644 --- a/src/constants.js +++ b/src/constants.js @@ -2,10 +2,13 @@ var SVGPATH = '.dynamic-player, .dynamic-player object, .dynamic-player video{width:" + width + "px !important;height:" + height + "px !important} .dynamic-target-player,.dynamic-target-player object, .dynamic-target-player video{width:" + width + "px !important;height:" + host_height + "px !important}"; }.property("playerSize"), - /*ffzUpdateWidth: _.throttle(function() { - var rc = document.querySelector('#right_close'); - if ( ! rc ) + ffzPortraitWarning: function() { + if ( ! f.settings.portrait_mode || f._portrait_warning || f.settings.portrait_warning || ! this.get('isTooSmallForRightColumn') ) return; - var left_width = this.get("isLeftColumnClosed") ? 50 : 240, - right_width; + f._portrait_warning = true; + f.show_message('Twitch\'s Chat Sidebar has been hidden as a result of FrankerFaceZ\'s Portrait Mode because the window is too wide.

Please disable Portrait Mode or make your window narrower.

Do not show this message again'); - if ( f.settings.swap_sidebars ) - right_width = rc.offsetLeft; // + this.get('rightColumnWidth') - 5; - else - right_width = document.body.offsetWidth - rc.offsetLeft - left_width - 25; - - if ( right_width < 250 ) { - // Close it! - - } - - this.set('rightColumnWidth', right_width); - Ember.propertyDidChange(Layout, 'contentWidth'); - }, 200),*/ + }.observes("isTooSmallForRightColumn"), ffzUpdateCss: function() { // TODO: Fix this mess of duplicate code. @@ -332,6 +325,6 @@ FFZ.prototype.setup_layout = function() { Layout.set('rawPortraitMode', this.settings.portrait_mode); // Force re-calculation of everything. - Ember.propertyDidChange(Layout, 'contentWidth'); + Ember.propertyDidChange(Layout, 'windowWidth'); Ember.propertyDidChange(Layout, 'windowHeight'); } \ No newline at end of file diff --git a/src/ember/line.js b/src/ember/line.js index 40827a89..6a08aaae 100644 --- a/src/ember/line.js +++ b/src/ember/line.js @@ -555,6 +555,13 @@ FFZ.prototype.setup_line = function() { 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 ) @@ -568,6 +575,67 @@ FFZ.prototype.save_aliases = function() { } +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(''); + } + }); +} + + FFZ.prototype._modify_line = function(component) { var f = this, @@ -577,46 +645,13 @@ FFZ.prototype._modify_line = function(component) { component.reopen({ tokenizedMessage: function() { - // Add our own step to the tokenization procedure. - var tokens = this.get("msgObject.cachedTokens"); - if ( tokens ) - return tokens; - - tokens = this._super(); - - var start = performance.now(), - user = f.get_user(), - from_me = user && this.get("msgObject.from") === user.login; - - tokens = f._remove_banned(tokens); - tokens = f._emoticonize(this, tokens); - - if ( f.settings.parse_emoji ) - tokens = f.tokenize_emoji(tokens); - - // Store the capitalization. - var display = this.get("msgObject.tags.display-name"); - if ( display && display.length ) - FFZ.capitalization[this.get("msgObject.from")] = [display.trim(), Date.now()]; - - if ( ! from_me ) - tokens = f.tokenize_mentions(tokens); - - for(var i = 0; i < tokens.length; i++) { - var token = tokens[i]; - if ( ! _.isString(token) && token.mentionedUser && ! token.own ) { - this.set('msgObject.ffz_has_mention', true); - break; - } + try { + return f.tokenize_chat_line(this.get('msgObject')); + } catch(err) { + f.error("chat-line tokenizedMessage: " + err); + return this._super(); } - var end = performance.now(); - if ( end - start > 5 ) - f.log("Tokenizing Message Took Too Long - " + (end-start) + "ms", tokens, false, true); - - this.set("msgObject.cachedTokens", tokens); - return tokens; - }.property("msgObject.message", "isChannelLinksDisabled", "currentUserNick", "msgObject.from", "msgObject.tags.emotes"), ffzUpdated: Ember.observer("msgObject.ffz_deleted", "msgObject.ffz_old_messages", function() { @@ -633,18 +668,6 @@ FFZ.prototype._modify_line = function(component) { if ( e.target && e.target.classList.contains('mod-icon') ) { jQuery(e.target).trigger('mouseout'); - /*if ( e.target.classList.contains('purge') ) { - var i = this.get('msgObject.from'), - room_id = this.get('msgObject.room'), - room = room_id && f.rooms[room_id] && f.rooms[room_id].room; - - if ( room ) { - room.send("/timeout " + i + " 1", true); - room.clearMessages(i); - } - return; - }*/ - if ( e.target.classList.contains('custom') ) { var room_id = this.get('msgObject.room'), room = room_id && f.rooms[room_id] && f.rooms[room_id].room, @@ -660,30 +683,8 @@ FFZ.prototype._modify_line = function(component) { } } - if ( (e.shiftKey || e.shiftLeft) && f.settings.clickable_emoticons && e.target && e.target.classList.contains('emoticon') ) { - var eid = e.target.getAttribute('data-emote'); - if ( eid ) - window.open("https://twitchemotes.com/emote/" + eid); - else { - eid = e.target.getAttribute("data-ffz-emote"); - var es = e.target.getAttribute("data-ffz-set"), - set = es && f.emote_sets[es], - url; - - if ( ! set ) - return; - - if ( set.hasOwnProperty('source_ext') ) { - var api = f._apis[set.source_ext]; - if ( api && api.emote_url_generator ) - url = api.emote_url_generator(set.source_id, eid); - } else - url = "https://www.frankerfacez.com/emoticons/" + eid; - - if ( url ) - window.open(url); - } - } + if ( f._click_emote(e.target, e) ) + return; return this._super(e); }, @@ -768,7 +769,7 @@ FFZ.prototype._modify_line = function(component) { else if ( this.get('isAdmin') ) badges[0] = {klass: 'admin', title: 'Admin'}; else if ( this.get('isGlobalMod') ) - badges[0] = {klass: 'global-mod', title: 'Global Moderator'}; + badges[0] = {klass: 'global-moderator', title: 'Global Moderator'}; else if ( ! is_whisper && this.get('isModerator') ) badges[0] = {klass: 'moderator', title: 'Moderator'}; @@ -835,7 +836,7 @@ FFZ.prototype._modify_line = function(component) { if ( deleted ) e.push('<message deleted>'); else { - e.push(''); + e.push(''); e.push(f.render_tokens(this.get('tokenizedMessage'), true)); var old_messages = this.get('msgObject.ffz_old_messages'); diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js index 4100d297..d8dc6cd4 100644 --- a/src/ember/moderation-card.js +++ b/src/ember/moderation-card.js @@ -435,13 +435,20 @@ FFZ.prototype.setup_mod_card = function() { return alias || this.get("cardInfo.user.display_name") || user_id.capitalize(); }), + willDestroy: function() { + if ( f._mod_card === this ) + f._mod_card = undefined; + this._super(); + }, + didInsertElement: function() { this._super(); - window._card = this; try { if ( f.has_bttv ) return; + f._mod_card = this; + var el = this.get('element'), controller = this.get('controller'), line, @@ -450,11 +457,14 @@ FFZ.prototype.setup_mod_card = function() { chat = window.App && App.__container__.lookup('controller:chat'), user = f.get_user(), - is_broadcaster = user && chat && chat.get('currentRoom.id') === user.login, + room_id = chat && chat.get('currentRoom.id'), + is_broadcaster = user && room_id === user.login, user_id = controller.get('cardInfo.user.id'), alias = f.aliases[user_id]; + this.ffz_room_id = room_id; + // Alias Display if ( alias ) { var name = el.querySelector('h3.name'), @@ -735,17 +745,19 @@ FFZ.prototype.setup_mod_card = function() { l_el.innerHTML = (helpers ? '' + helpers.getTime(line.date) + ' ' : '') + '' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + ''; - // Banned Links - var bad_links = l_el.querySelectorAll('a.deleted-link'); - for(var x=0; x < bad_links.length; x++) - bad_links[x].addEventListener("click", f._deleted_link_click); - + // Interactivity + jQuery('a.deleted-link', l_el).click(f._deleted_link_click); + jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) }); jQuery('.html-tooltip', l_el).tipsy({html:true}); + + // Append history.appendChild(l_el); } el.appendChild(history); + this.ffz_alternate = alternate; + // Lazy scroll-to-bottom history.scrollTop = history.scrollHeight; } diff --git a/src/ember/room.js b/src/ember/room.js index a6f9cbbe..9e257543 100644 --- a/src/ember/room.js +++ b/src/ember/room.js @@ -5,6 +5,7 @@ var FFZ = window.FrankerFaceZ, HOSTED_SUB = / subscribed to /, constants = require('../constants'), utils = require('../utils'), + helpers, // StrimBagZ Support is_android = navigator.userAgent.indexOf('Android') !== -1, @@ -14,7 +15,12 @@ var FFZ = window.FrankerFaceZ, return ""; return '.chat-line[data-room="' + room.id + '"] .badges .moderator:not(.ffz-badge-replacement) { background-image:url("' + room.moderator_badge + '") !important; }'; - } + }; + + +try { + helpers = window.require && window.require("ember-twitch-chat/helpers/chat-line-helpers"); +} catch(err) { } // -------------------- @@ -723,10 +729,11 @@ FFZ.prototype._insert_history = function(room_id, data) { tmiRoom = r.tmiRoom, inserted = 0, + purged = {}, last_msg = data[data.length - 1], now = new Date(), - last_date = typeof last_msg.date === "string" ? utils.parse_date(last_msg.date) : last_msg.date, + last_date = (typeof last_msg.date === "string" || typeof last_msg.date === "number") ? (last_msg.date = utils.parse_date(last_msg.date)) : last_msg.date, age = (now - last_date) / 1000, is_old = age > 300, @@ -738,9 +745,13 @@ FFZ.prototype._insert_history = function(room_id, data) { var i = data.length; while(i--) { - var msg = data[i]; + var msg = data[i], + is_deleted = msg.ffz_deleted = purged[msg.from] || false; - if ( typeof msg.date === "string" ) + if ( is_deleted && ! this.settings.prevent_clear ) + msg.deleted = true; + + if ( typeof msg.date === "string" || typeof msg.date === "number" ) msg.date = utils.parse_date(msg.date); msg.ffz_alternate = alternation = ! alternation; @@ -774,6 +785,14 @@ FFZ.prototype._insert_history = function(room_id, data) { msg.style = "notification"; } + if ( msg.tags && typeof msg.tags.emotes === "string" ) + try { + msg.tags.emotes = JSON.parse(msg.tags.emotes); + } catch(err) { + f.log("Error Parsing JSON Emotes: " + err); + msg.tags.emotes = {}; + } + if ( ! msg.cachedTokens || ! msg.cachedTokens.length ) this.tokenize_chat_line(msg, true, r.get('roomProperties.hide_chat_links')); @@ -791,6 +810,14 @@ FFZ.prototype._insert_history = function(room_id, data) { } else break; } + + // If there was a CLEARCHAT, stop processing. + if ( msg.tags && msg.tags.target === '@@' ) + break; + + // If there was a purge, just track the name. + else if ( msg.tags && msg.tags.target ) + purged[msg.tags.target] = true; } if ( is_old ) { @@ -1190,6 +1217,38 @@ FFZ.prototype._modify_room = function(room) { if ( user_history.length > 20 ) user_history.shift(); + + if ( f._mod_card && f._mod_card.ffz_room_id === msg.room && f._mod_card.get('cardInfo.user.id') === msg.from ) { + var el = f._mod_card.get('element'), + history = el && el.querySelector('.chat-history'), + was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight); + + if ( history ) { + var l_el = document.createElement('li'); + l_el.className = 'message-line chat-line clearfix'; + + l_el.classList.toggle('ffz-alternate', f._mod_card.ffz_alternate); + f._mod_card.ffz_alternate = !f._mod_card.ffz_alternate; + + if ( msg.style ) + l_el.classList.add(msg.style); + + l_el.innerHTML = (helpers ? '' + helpers.getTime(msg.date) + ' ' : '') + '' + (msg.style === 'action' ? '*' + msg.from + ' ' : '') + f.render_tokens(msg.cachedTokens) + ''; + + // Interactivity + jQuery('a.deleted-link', l_el).click(f._deleted_link_click); + jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) }); + jQuery('.html-tooltip', l_el).tipsy({html:true}); + + history.appendChild(l_el); + if ( was_at_top ) + setTimeout(function() { history.scrollTop = history.scrollHeight; }) + + // Don't do infinite scrollback. + if ( history.childElementCount > 50 ) + history.removeChild(history.firstElementChild); + } + } } } diff --git a/src/emoticons.js b/src/emoticons.js index 1e59d883..45da1fe3 100644 --- a/src/emoticons.js +++ b/src/emoticons.js @@ -141,6 +141,41 @@ FFZ.prototype._report_emotes = function() { } +// ------------------------ +// Emote Click Handler +// ------------------------ + +FFZ.prototype._click_emote = function(target, event) { + if ( ! this.settings.clickable_emoticons || (event && !((event.shiftKey || event.shiftLeft) && target && target.classList.contains('emoticon'))) ) + return; + + var eid = target.getAttribute('data-emote'); + if ( eid ) + window.open("https://twitchemotes.com/emote/" + eid); + else { + eid = target.getAttribute("data-ffz-emote"); + var es = target.getAttribute("data-ffz-set"), + emote_set = es && this.emote_sets[es], + url; + + if ( ! emote_set ) + return; + + if ( emote_set.hasOwnProperty('source_ext') ) { + var api = this._apis[emote_set.source_ext]; + if ( api && api.emote_url_generator ) + url = api.emote_url_generator(emote_set.source_id, eid); + } else + url = "https://www.frankerfacez.com/emoticons/" + eid; + + if ( url ) { + window.open(url); + return true; + } + } +} + + // ------------------------ // Twitch Emoticon Checker // ------------------------ diff --git a/src/main.js b/src/main.js index 3eb6c92c..598ebf78 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: 50, + major: 3, minor: 5, revision: 57, toString: function() { return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || ""); } diff --git a/src/socket.js b/src/socket.js index 0ebceab2..ecb30044 100644 --- a/src/socket.js +++ b/src/socket.js @@ -35,7 +35,7 @@ FFZ.settings_info.socket_server_pool = { 2: "Development" }, - value: ffz_socket_seed > 0.65 ? 1 : 0, + value: ffz_socket_seed > 0.4 ? 1 : 0, process_value: function(val) { if ( typeof val === "string" ) diff --git a/src/styles/style.css b/src/styles/style.css deleted file mode 100644 index 766e3640..00000000 --- a/src/styles/style.css +++ /dev/null @@ -1,2146 +0,0 @@ -/* 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 */ - -.app-main.theatre .player-column:focus #hostmode > div.target-meta, -.app-main.theatre .player-column:hover #hostmode > div.target-meta, -.app-main.theatre #channel .player-column:focus #broadcast-meta, -.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-sidebar-swap .app-main.theatre .player-column:focus #hostmode > div.target-meta, -.ffz-sidebar-swap .app-main.theatre .player-column:hover #hostmode > div.target-meta, -.ffz-sidebar-swap .app-main.theatre #channel .player-column:focus #broadcast-meta, -.ffz-sidebar-swap .app-main.theatre #channel .player-column:hover #broadcast-meta { - left: 145px; -} - -.app-main.theatre #hostmode > div.target-meta div.target-title { - padding: 5px 0 2px 5px; -} - -.app-main.theatre #hostmode > div.target-meta div.target-title, -.app-main.theatre #channel .player-column #broadcast-meta .info { padding-left: 5px; } - -.app-main.theatre #hostmode > div.target-meta div.target-title, -.app-main.theatre #channel .player-column #broadcast-meta .info .title { - font-size: 12px; - line-height: 20px; - color: #dedede; -} - -.app-main.theatre #hostmode > div.target-meta div.target-title, -.app-main.theatre #channel .player-column #broadcast-meta .info .title, -.app-main.theatre #channel .player-column #broadcast-meta .info .title .over { - background-color: rgba(16,16,16,0.3); -} - -.app-main.theatre #hostmode > div.target-meta .target-user-and-game, -.app-main.theatre #channel .player-column #broadcast-meta .info .channel, -.app-main.theatre #channel .player-column #broadcast-meta .info .edit-link, -.app-main.theatre #broadcast-meta .profile-link { - display: none; -} - -.app-main.theatre .player-column:focus #hostmode > div.clearfix, .app-main.theatre .player-column:hover #hostmode > div.clearfix { - margin-bottom: 30px; -} - -.app-main.theatre .player-column:focus #hostmode > div.clearfix, .app-main.theatre .player-column:hover #hostmode > div.clearfix, -.app-main.theatre .player-column:focus .stats-and-actions, .app-main.theatre .player-column:hover .stats-and-actions { - background-color: #19191f; - - color: #aaa; - - position: absolute; - bottom: 10px; - margin-right: 150px; - left: 10px; - z-index: 7; - padding: 10px; - opacity: 0.95; -} - -.app-main.theatre .channel-stats .stat { color: #aaa; } - -.app-main.theatre .channel-stats span:not(.live-count) svg path { - fill: rgba(255,255,255,0.35) !important; -} - -.app-main.theatre .follow-button .notify:before, -.app-main.theatre .button.drop:after, -.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; -} - -.app-main.theatre .follow-button .notify { - background-color: #25252a; -} - -.app-main.theatre .button { - color: #a68ed2; -} - -.app-main.theatre .button.glyph-only svg path { - fill: #a68ed2; -} - -.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 */ - -.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; -} - -.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, -.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 .chat-line, -.ffz-chat-background .chat-line { - position: relative; - z-index: 1; -} - -.ffz-chat-padding .ember-chat .chat-messages .chat-line, -.ffz-chat-padding .ember-chat .chat-messages .chat-line.admin { - padding: 5px; -} - -.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 .chat-line:before { - border-bottom: 1px solid #aaa; -} - -.ffz-chat-separator-wide .chat-line:before { - border-top: 1px solid #aaa; -} - -.ffz-chat-separator-3d .chat-line:before { - border-top: 1px solid rgba(255,255,255,0.5); -} - -.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-3d ul.chat-lines div:first-of-type .chat-line:before { - border-top: none; -} - -.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 .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 .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 .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 .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 .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 .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 .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; } - -.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 .ember-chat .badges .badge:not(.subscriber), -.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber) { - background-size: 0px; -} - -.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber) { - height: 10px; - min-width: 10px; - margin: 5px 3px 5px 0; -} - -.ffz-transparent-badges .ember-chat .badges .badge { - background-color: transparent !important; -} - -.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 #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; -} - -/* 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; -} - -.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; - transition: margin-bottom .2s ease-out; -} - -.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 .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; -} - -/* 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; -} \ No newline at end of file diff --git a/src/tokenize.js b/src/tokenize.js index ce514300..bd34ed56 100644 --- a/src/tokenize.js +++ b/src/tokenize.js @@ -401,14 +401,58 @@ FFZ.prototype.load_twitch_emote_data = function(tries) { // Tokenization // --------------------- +FFZ.prototype.tokenize_conversation_line = function(message, prevent_notification) { + var msg = message.get('body'), + user = this.get_user(), + from_user = message.get('from.username'), + from_me = user && from_user === user.login, + + emotes = message.get('tags.emotes'), + tokens = [msg]; + + // Standard Tokenization + if ( helpers && helpers.linkifyMessage ) + tokens = helpers.linkifyMessage(tokens); + + if ( user && user.login && helpers && helpers.mentionizeMessage ) + tokens = helpers.mentionizeMessage(tokens, user.login, from_me); + + if ( helpers && helpers.emoticonizeMessage && emotes ) + tokens = helpers.emoticonizeMessage(tokens, emotes); + + if ( this.settings.replace_bad_emotes ) + tokens = this.tokenize_replace_emotes(tokens); + + // FrankerFaceZ Extras + tokens = this._remove_banned(tokens); + tokens = this.tokenize_emotes(from_user, undefined, tokens, from_me); + + if ( this.settings.parse_emoji ) + tokens = this.tokenize_emoji(tokens); + + // Capitalization + var display_name = message.get('from.displayName'); + if ( display_name && display_name.length ) + FFZ.capitalization[from_user] = [display_name.trim(), Date.now()]; + + // Mentions! + if ( ! from_me ) + tokens = this.tokenize_mentions(tokens); + + // TODO: Notifications? + + return tokens; +} + FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, delete_links) { if ( msgObject.cachedTokens ) return msgObject.cachedTokens; - var msg = msgObject.message, + var msg = msgObject.message || msgObject.get('body'), user = this.get_user(), room_id = msgObject.room, - from_me = user && msgObject.from === user.login, + from_user = msgObject.from, + from_me = user && from_user === user.login, emotes = msgObject.tags && msgObject.tags.emotes, tokens = [msg]; @@ -438,7 +482,7 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del // FrankerFaceZ Extras tokens = this._remove_banned(tokens); - tokens = this.tokenize_emotes(msgObject.from, room_id, tokens, from_me); + tokens = this.tokenize_emotes(from_user, room_id, tokens, from_me); if ( this.settings.parse_emoji ) tokens = this.tokenize_emoji(tokens); @@ -446,7 +490,7 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del // Capitalization var display = msgObject.tags && msgObject.tags['display-name']; if ( display && display.length ) - FFZ.capitalization[msgObject.from] = [display.trim(), Date.now()]; + FFZ.capitalization[from_user] = [display.trim(), Date.now()]; // Mentions! @@ -482,7 +526,7 @@ FFZ.prototype.tokenize_chat_line = function(msgObject, prevent_notification, del else room_name = FFZ.get_capitalization(room_id); - display = display || Twitch.display.capitalize(msgObject.from); + display = display || Twitch.display.capitalize(from_user); if ( msgObject.style === 'action' ) msg = '* ' + display + ' ' + msg; @@ -602,7 +646,7 @@ FFZ.prototype.render_tokens = function(tokens, render_links) { var mirror_url = utils.quote_attr(constants.EMOTE_MIRROR_BASE + id + '.png'); - extra = ' data-emote="' + id + '" onerror="FrankerFaceZ._emote_mirror_swap(this)"'; + extra = ' data-emote="' + id + '"'; // onerror="FrankerFaceZ._emote_mirror_swap(this)"'; // Disable error checking for now. if ( ! constants.EMOTE_REPLACEMENTS[id] ) srcset = build_srcset(id); diff --git a/src/ui/dark.js b/src/ui/dark.js index 65d98a80..3c7f5260 100644 --- a/src/ui/dark.js +++ b/src/ui/dark.js @@ -1,6 +1,6 @@ var FFZ = window.FrankerFaceZ, - constants = require("../constants"), - styles = require("../styles"); + constants = require("../constants"); + //styles = require("../styles"); // --------------------- @@ -211,7 +211,6 @@ FFZ.prototype._load_dark_css = function() { s.id = "ffz-dark-css"; s.setAttribute('rel', 'stylesheet'); - s.setAttribute('href', constants.SERVER + "script/dark.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info)); - s.onerror = "this.href = this.href + '_';" + s.setAttribute('href', constants.DIRECT_SERVER + "script/dark.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info)); document.head.appendChild(s); } \ No newline at end of file diff --git a/src/ui/notifications.js b/src/ui/notifications.js index 6a2b5b37..e7834523 100644 --- a/src/ui/notifications.js +++ b/src/ui/notifications.js @@ -181,6 +181,11 @@ FFZ.prototype.show_notification = function(message, title, tag, timeout, on_clic // --------------------- FFZ.prototype.show_message = function(message) { + if ( ! window.jQuery || ! window.jQuery.noty || ! jQuery.noty.themes.ffzTheme ) { + setTimeout(this.show_message.bind(this, message), 50); + return; + } + window.noty({ text: message, theme: "ffzTheme", diff --git a/src/ui/styles.js b/src/ui/styles.js index a10b1684..43e6313c 100644 --- a/src/ui/styles.js +++ b/src/ui/styles.js @@ -1,18 +1,24 @@ var FFZ = window.FrankerFaceZ, - constants = require('../constants'), - styles = require('../styles'); + constants = require('../constants'); + //styles = require('../styles'); FFZ.prototype.setup_css = function() { document.body.classList.toggle('ffz-flip-dashboard', this.settings.flip_dashboard); this.log("Injecting main FrankerFaceZ CSS."); - var s = this._main_style = document.createElement('style'); + var s = this._main_style = document.createElement('link'); + s.id = "ffz-main-css"; + s.setAttribute('rel', 'stylesheet'); + s.setAttribute('href', constants.DIRECT_SERVER + "script/style.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info)); + document.head.appendChild(s); + + /*var s = this._main_style = document.createElement('style'); s.textContent = styles.style; s.id = "ffz-ui-css"; - document.head.appendChild(s); + document.head.appendChild(s);*/ if ( window.jQuery && jQuery.noty ) jQuery.noty.themes.ffzTheme = { diff --git a/src/utils.js b/src/utils.js index f9794ce9..b1cce141 100644 --- a/src/utils.js +++ b/src/utils.js @@ -42,6 +42,9 @@ var sanitize_el = document.createElement('span'), date_regex = /^(\d{4}|\+\d{6})(?:-?(\d{2})(?:-?(\d{2})(?:T(\d{2})(?::?(\d{2})(?::?(\d{2})(?:(?:\.|,)(\d{1,}))?)?)?(Z|([\-+])(\d{2})(?::?(\d{2}))?)?)?)?)?$/, parse_date = function(str) { + if ( typeof str === "number" ) + return new Date(str); + var parts = str.match(date_regex); if ( ! parts ) return null;