diff --git a/gulpfile.js b/gulpfile.js index 411e6b64..97ff6c69 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -44,22 +44,22 @@ gulp.task('prepare', ['clean'], function() { }); -gulp.task('templates', ['prepare'], function() { - gulp.src(['build/templates/**/*.hbs']) - .pipe(jsEscape()) - .pipe(wrap('Handlebars.compile(<%= contents %>)')) - .pipe(declare({ - root: 'exports', - noRedeclare: true, - processName: function(filePath) { - var match = filePath.match(/build[\\\/]templates[\\\/](.*)\.hbs$/); - return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath); - } - })) - .pipe(concat('templates.js')) - .pipe(gulp.dest('build/')) - .on('error', util.log); -}); +//gulp.task('templates', ['prepare'], function() { +// gulp.src(['build/templates/**/*.hbs']) +// .pipe(jsEscape()) +// .pipe(wrap('Handlebars.compile(<%= contents %>)')) +// .pipe(declare({ +// root: 'exports', +// noRedeclare: true, +// processName: function(filePath) { +// var match = filePath.match(/build[\\\/]templates[\\\/](.*)\.hbs$/); +// return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath); +// } +// })) +// .pipe(concat('templates.js')) +// .pipe(gulp.dest('build/')) +// .on('error', util.log); +//}); gulp.task('styles', ['prepare'], function() { @@ -80,7 +80,7 @@ gulp.task('styles', ['prepare'], function() { }); -gulp.task('scripts', ['prepare', 'templates', 'styles'], function() { +gulp.task('scripts', ['prepare', 'styles'], function() { gulp.src(['build/main.js']) .pipe(browserify()) .pipe(concat('script.js')) diff --git a/src/badges.js b/src/badges.js index c4ce8098..8069db51 100644 --- a/src/badges.js +++ b/src/badges.js @@ -43,9 +43,9 @@ FFZ.settings_info.legacy_badges = { }, on_update: function(val) { - document.body.classList.toggle("ffz-legacy-mod-badges", val !== 0); - document.body.classList.toggle("ffz-legacy-turbo-badges", val > 1); - document.body.classList.toggle("ffz-legacy-badges", val === 3); + this.toggle_style('badges-legacy', val === 3); + this.toggle_style('badges-legacy-mod', val !== 0); + this.toggle_style('badges-legacy-turbo', val > 1); } }; @@ -83,11 +83,11 @@ FFZ.settings_info.transparent_badges = { if ( this.has_bttv ) return; - document.body.classList.toggle("ffz-rounded-badges", val === 1); - document.body.classList.toggle("ffz-circular-badges", val === 2); - document.body.classList.toggle("ffz-circular-blank-badges", val === 3); - document.body.classList.toggle("ffz-circular-small-badges", val === 4); - document.body.classList.toggle("ffz-transparent-badges", val === 5); + this.toggle_style('badges-rounded', val === 1); + this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4); + this.toggle_style('badges-blank', val === 3 || val === 4); + this.toggle_style('badges-circular-small', val === 4); + this.toggle_style('badges-transparent', val === 5); } }; @@ -98,16 +98,17 @@ FFZ.settings_info.transparent_badges = { FFZ.prototype.setup_badges = function() { if ( ! this.has_bttv ) { - document.body.classList.toggle("ffz-rounded-badges", this.settings.transparent_badges === 1); - document.body.classList.toggle("ffz-circular-badges", this.settings.transparent_badges === 2); - document.body.classList.toggle("ffz-circular-blank-badges", this.settings.transparent_badges === 3); - document.body.classList.toggle("ffz-circular-small-badges", this.settings.transparent_badges === 4); - document.body.classList.toggle("ffz-transparent-badges", this.settings.transparent_badges === 5); + var val = this.settings.transparent_badges; + this.toggle_style('badges-rounded', val === 1); + this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4); + this.toggle_style('badges-blank', val === 3 || val === 4); + this.toggle_style('badges-circular-small', val === 4); + this.toggle_style('badges-transparent', val === 5); } - document.body.classList.toggle("ffz-legacy-mod-badges", this.settings.legacy_badges !== 0); - document.body.classList.toggle("ffz-legacy-turbo-badges", this.settings.legacy_badges > 1); - document.body.classList.toggle("ffz-legacy-badges", this.settings.legacy_badges === 3); + this.toggle_style('badges-legacy', this.settings.legacy_badges === 3); + this.toggle_style('badges-legacy-mod', this.settings.legacy_badges !== 0); + this.toggle_style('badges-legacy-turbo', this.settings.legacy_badges > 1); this.log("Preparing badge system."); this.badges = {}; diff --git a/src/colors.js b/src/colors.js index a0d09ad4..e05ece22 100644 --- a/src/colors.js +++ b/src/colors.js @@ -45,7 +45,7 @@ FFZ.settings_info.fix_color = { }, on_update: function(val) { - document.body.classList.toggle("ffz-chat-colors-gray", !this.has_bttv && (val === '-1')); + this.toggle_style('chat-colors-gray', !this.has_bttv && val === '-1'); if ( ! this.has_bttv && val !== '-1' ) this._rebuild_colors(); @@ -114,6 +114,8 @@ FFZ.settings_info.color_blind = { // -------------------- FFZ.prototype.setup_colors = function() { + this.toggle_style('chat-colors-gray', !this.has_bttv && this.settings.fix_color === '-1'); + this._colors = {}; this._rebuild_contrast(); diff --git a/src/ember/chatview.js b/src/ember/chatview.js index 6bcaadfd..4170960e 100644 --- a/src/ember/chatview.js +++ b/src/ember/chatview.js @@ -280,20 +280,6 @@ FFZ.settings_info.group_tabs = { }; -FFZ.settings_info.top_conversations = { - type: "boolean", - value: false, - no_mobile: true, - - category: "Chat Appearance", - name: "Conversations 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.pinned_rooms = { value: [], visible: false, @@ -312,7 +298,6 @@ FFZ.settings_info.visible_rooms = { FFZ.prototype.setup_chatview = function() { document.body.classList.toggle("ffz-minimal-chat-head", this.settings.minimal_chat === 1 || this.settings.minimal_chat === 3); document.body.classList.toggle("ffz-minimal-chat-input", this.settings.minimal_chat === 2 || this.settings.minimal_chat === 3); - document.body.classList.toggle('ffz-top-conversations', this.settings.top_conversations); this.log("Hooking the Ember Chat controller."); @@ -430,7 +415,7 @@ FFZ.prototype._modify_cview = function(view) { ffzInit: function() { f._chatv = this; this.$('.textarea-contain').append(f.build_ui_link(this)); - this.$('.chat-messages').find('.html-tooltip').tipsy({live: true, html: true, gravity: jQuery.fn.tipsy.autoNS}); + this.$('.chat-messages').find('.html-tooltip').tipsy({live: true, html: true, gravity: jQuery.fn.tipsy.autoNS}); if ( !f.has_bttv && f.settings.group_tabs ) this.ffzEnableTabs(); @@ -462,23 +447,32 @@ FFZ.prototype._modify_cview = function(view) { var room = this.get('controller.currentRoom'), rows; room && room.resetUnreadCount(); + if ( room._ffz_was_unread ) { + room._ffz_was_unread = false; + + var el = this.get('element'), + unread_display = el && el.querySelector('#ffz-group-tabs .button .notifications'), + unread_count = unread_display ? parseInt(unread_display.textContent) : 0; + + unread_count--; + if ( unread_display ) + unread_display.textContent = unread_count || ''; + } + if ( this._ffz_chan_table ) { rows = jQuery(this._ffz_chan_table); rows.children('.ffz-room-row').removeClass('active'); - if ( room ) - rows.children('.ffz-room-row[data-room="' + room.get('id') + '"]').addClass('active').children('span').text(''); } if ( this._ffz_group_table ) { rows = jQuery(this._ffz_group_table); rows.children('.ffz-room-row').removeClass('active'); - if ( room ) - rows.children('.ffz-room-row[data-room="' + room.get('id') + '"]').addClass('active').children('span').text(''); } if ( !f.has_bttv && f.settings.group_tabs && this._ffz_tabs ) { var tabs = jQuery(this._ffz_tabs); tabs.children('.ffz-chat-tab').removeClass('active'); + if ( room && room._ffz_tab ) { room._ffz_tab.classList.remove('tab-mentioned'); room._ffz_tab.classList.remove('hidden'); @@ -488,6 +482,15 @@ FFZ.prototype._modify_cview = function(view) { sp.innerHTML = ''; } + if ( room && room._ffz_row ) { + room._ffz_row.classList.remove('row-mentioned'); + room._ffz_row.classList.remove('hidden'); + room._ffz_row.classList.add('active'); + var sp = room._ffz_row.querySelector('span'); + if ( sp ) + sp.innerHTML = ''; + } + // Invite Link var can_invite = room && room.get('canInvite'); this._ffz_invite && this._ffz_invite.classList.toggle('hidden', !can_invite); @@ -501,9 +504,7 @@ FFZ.prototype._modify_cview = function(view) { // Better Menu ffzRebuildMenu: function() { - return; - - var el = this.get('element'), + /*var el = this.get('element'), room_list = el && el.querySelector('.chat-rooms .tse-content'); if ( ! room_list ) @@ -533,7 +534,7 @@ FFZ.prototype._modify_cview = function(view) { tbl.setAttribute('cellspacing', 0); tbl.id = 'ffz-channel-table'; tbl.className = 'ffz'; - tbl.innerHTML = 'ChannelsJoinPin'; + tbl.innerHTML = 'ChannelsPin'; room_list.insertBefore(tbl, room_list.firstChild); chan_table = this._ffz_chan_table = tbl.querySelector('tbody'); @@ -571,7 +572,7 @@ FFZ.prototype._modify_cview = function(view) { tbl.setAttribute('cellspacing', 0); tbl.id = 'ffz-group-table'; tbl.className = 'ffz'; - tbl.innerHTML = 'Group ChatsPin'; + tbl.innerHTML = 'Group Chats'; var before = room_list.querySelector('#ffz-channel-table'); room_list.insertBefore(tbl, before.nextSibling); @@ -590,30 +591,29 @@ FFZ.prototype._modify_cview = function(view) { // Change Create Tooltip var create_btn = el.querySelector('.button.create'); if ( create_btn ) - create_btn.title = 'Create a Group Room'; + create_btn.title = 'Create a Group Room';*/ }, - ffzBuildRow: function(view, room, current_channel, host_channel) { + /*ffzBuildRow: function(view, room, current_channel, host_channel) { var row = document.createElement('tr'), icon = document.createElement('td'), name_el = document.createElement('td'), btn, toggle_pinned = document.createElement('td'), - toggle_visible = document.createElement('td'), group = room.get('isGroupRoom'), current = room === view.get('controller.currentRoom'), - //unread = format_unread(current ? 0 : room.get('unreadCount')), + unread = utils.format_unread(current ? 0 : room.get('unreadCount')), name = room.get('tmiRoom.displayName') || (group ? room.get('tmiRoom.name') : FFZ.get_capitalization(room.get('id'), function(name) { f.log("Name for Row: " + name); - //unread = format_unread(current ? 0 : room.get('unreadCount')); - name_el.innerHTML = utils.sanitize(name); + unread = utils.format_unread(current ? 0 : room.get('unreadCount')); + name_el.innerHTML = utils.sanitize(name) + ' ' + unread + ''; })); name_el.className = 'ffz-room'; - name_el.innerHTML = utils.sanitize(name); + name_el.innerHTML = utils.sanitize(name) + ' ' + unread + ''; if ( current_channel ) { icon.innerHTML = constants.CAMERA; @@ -625,10 +625,9 @@ FFZ.prototype._modify_cview = function(view) { icon.className = name_el.className = 'tooltip'; } - toggle_pinned.className = toggle_visible.className = 'ffz-row-switch'; + toggle_pinned.className = 'ffz-row-switch'; toggle_pinned.innerHTML = ''; - toggle_visible.innerHTML = ''; row.setAttribute('data-room', room.get('id')); @@ -677,34 +676,16 @@ FFZ.prototype._modify_cview = function(view) { }); } - row.appendChild(toggle_visible); - btn = toggle_visible.querySelector('a.switch'); - btn.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation && e.stopPropagation(); - - var room_id = room.get('id'), - visible_rooms = f.settings.visible_rooms, - is_visible = visible_rooms.indexOf(room_id) !== -1; - - if ( is_visible ) - visible_rooms.removeObject(room_id); - else - visible_rooms.push(room_id); - - f.settings.set('visible_rooms', visible_rooms); - this.classList.toggle('active', !is_visible); - view.ffzRebuildTabs(); - }); - row.addEventListener('click', function() { var controller = view.get('controller'); controller.focusRoom(room); controller.set('showList', false); }); + + room._ffz_row = row; return row; - }, + },*/ // Group Tabs~! @@ -735,11 +716,23 @@ FFZ.prototype._modify_cview = function(view) { tabs.innerHTML = ""; var link = document.createElement('a'), - view = this; + view = this, + total_unread = 0; + + for(var room_id in f.rooms) { + var room = f.rooms[room_id] && f.rooms[room_id].room, + is_unread = room && room.get('unreadCount') > 0; + + if ( is_unread ) { + room._ffz_was_unread = true; + total_unread++; + } else if ( room ) + room._ffz_was_unread = false; + } link.className = 'button glyph-only tooltip'; link.title = "Chat Room Management"; - link.innerHTML = constants.ROOMS; + link.innerHTML = constants.ROOMS + '' + (total_unread || '') + ''; link.addEventListener('click', function() { var controller = view.get('controller'); @@ -821,38 +814,64 @@ FFZ.prototype._modify_cview = function(view) { }, ffzTabUnread: function(room_id) { - // TODO: Update menu. - - if ( f.has_bttv || ! f.settings.group_tabs ) - return; - - var tabs = this._ffz_tabs || this.get('element').querySelector('#ffz-group-tabs'), - current_id = this.get('controller.currentRoom.id'); - - if ( ! tabs ) - return; + var current_id = this.get('controller.currentRoom.id'); if ( room_id ) { var room = f.rooms && f.rooms[room_id] && f.rooms[room_id].room, - tab = room && room._ffz_tab; + row = room && room._ffz_row, + tab = room && room._ffz_tab, - if ( tab ) { - var unread = utils.format_unread(room_id === current_id ? 0 : room.get('unreadCount')); - tab.querySelector('span').innerHTML = unread; + unread_count = room_id === current_id ? 0 : room.get('unreadCount'), + is_unread = unread_count > 0, + unread = utils.format_unread(unread_count); + + if ( ! room._ffz_was_unread && is_unread ) { + room._ffz_was_unread = true; + + var el = this.get('element'), + unread_display = el && el.querySelector('#ffz-group-tabs .button .notifications'), + unread_count = unread_display ? parseInt(unread_display.textContent) : 0; + + unread_count++; + if ( unread_display ) + unread_display.textContent = unread_count || ''; } + + if ( row ) + row.querySelector('span').innerHTML = unread; + + if ( tab ) + tab.querySelector('span').innerHTML = unread; + + return; } - var children = tabs.querySelectorAll('.ffz-chat-tab'); - for(var i=0; i < children.length; i++) { - var tab = children[i], - room_id = tab.getAttribute('data-room'), - room = f.rooms && f.rooms[room_id] && f.rooms[room_id]; + for(var room_id in f.rooms) { + var room = f.rooms[room_id] && f.rooms[room_id].room, + row = room && room._ffz_row, + tab = room && room._ffz_tab, - if ( ! room ) - continue; + unread_count = room_id === current_id ? 0 : room.get('unreadCount'), + is_unread = unread_count > 0, + unread = utils.format_unread(unread_count); - var unread = utils.format_unread(room_id === current_id ? 0 : room.room.get('unreadCount')); - tab.querySelector('span').innerHTML = unread; + if ( ! room._ffz_was_unread && is_unread ) { + room._ffz_was_unread = true; + + var el = this.get('element'), + unread_display = el && el.querySelector('#ffz-group-tabs .button .notifications'), + unread_count = unread_display ? parseInt(unread_display.textContent) : 0; + + unread_count++; + if ( unread_display ) + unread_display.textContent = unread_count || ''; + } + + if ( row ) + row.querySelector('span').innerHTML = unread; + + if ( tab ) + tab.querySelector('span').innerHTML = unread; } }, diff --git a/src/ember/line.js b/src/ember/line.js index 699618c9..b2e7b53a 100644 --- a/src/ember/line.js +++ b/src/ember/line.js @@ -269,7 +269,10 @@ FFZ.settings_info.chat_rows = { name: "Chat Line Backgrounds", help: "Display alternating background colors for lines in chat.", - on_update: function(val) { document.body.classList.toggle("ffz-chat-background", !this.has_bttv && val); } + on_update: function(val) { + this.toggle_style('chat-background', !this.has_bttv && val); + this.toggle_style('chat-setup', !this.has_bttv && (val || this.settings.chat_separators)); + } }; @@ -301,10 +304,12 @@ FFZ.settings_info.chat_separators = { help: "Display thin lines between chat messages for further visual separation.", on_update: function(val) { - document.body.classList.toggle("ffz-chat-separator", !this.has_bttv && val !== 0); - document.body.classList.toggle("ffz-chat-separator-3d", !this.has_bttv && val === 2); - document.body.classList.toggle("ffz-chat-separator-3d-inset", !this.has_bttv && val === 3); - document.body.classList.toggle("ffz-chat-separator-wide", !this.has_bttv && val === 4); + this.toggle_style('chat-setup', !this.has_bttv && (val || this.settings.chat_rows)); + + this.toggle_style('chat-separator', !this.has_bttv && val); + this.toggle_style('chat-separator-3d', !this.has_bttv && val === 2); + this.toggle_style('chat-separator-3d-inset', !this.has_bttv && val === 3); + this.toggle_style('chat-separator-wide', !this.has_bttv && val === 4); } }; @@ -319,7 +324,7 @@ FFZ.settings_info.chat_padding = { name: "Reduced Chat Line Padding", help: "Reduce the amount of padding around chat messages to fit more on-screen at once.", - on_update: function(val) { document.body.classList.toggle("ffz-chat-padding", !this.has_bttv && val); } + on_update: function(val) { this.toggle_style('chat-padding', !this.has_bttv && val); } }; @@ -352,9 +357,9 @@ FFZ.settings_info.high_contrast_chat = { }, on_update: function(val) { - document.body.classList.toggle("ffz-high-contrast-chat-text", !this.has_bttv && val[2] === '1'); - document.body.classList.toggle("ffz-high-contrast-chat-bold", !this.has_bttv && val[1] === '1'); - document.body.classList.toggle("ffz-high-contrast-chat-bg", !this.has_bttv && val[0] === '1'); + this.toggle_style('chat-hc-text', !this.has_bttv && val[2] === '1'); + this.toggle_style('chat-hc-bold', !this.has_bttv && val[1] === '1'); + this.toggle_style('chat-hc-background', !this.has_bttv && val[0] === '1'); } }; @@ -526,19 +531,19 @@ FFZ.prototype.setup_line = function() { // Chat Enhancements - document.body.classList.toggle("ffz-chat-colors", !this.has_bttv && this.settings.fix_color !== '-1'); - document.body.classList.toggle("ffz-chat-colors-gray", !this.has_bttv && this.settings.fix_color === '-1'); + this.toggle_style('chat-setup', !this.has_bttv && (this.settings.chat_rows || this.settings.chat_separators)); + this.toggle_style('chat-padding', !this.has_bttv && this.settings.chat_padding); - document.body.classList.toggle('ffz-chat-background', !this.has_bttv && this.settings.chat_rows); - document.body.classList.toggle("ffz-chat-separator", !this.has_bttv && this.settings.chat_separators !== 0); - document.body.classList.toggle("ffz-chat-separator-wide", !this.has_bttv && this.settings.chat_separators === 4); - document.body.classList.toggle("ffz-chat-separator-3d", !this.has_bttv && this.settings.chat_separators === 2); - document.body.classList.toggle("ffz-chat-separator-3d-inset", !this.has_bttv && this.settings.chat_separators === 3); - document.body.classList.toggle("ffz-chat-padding", !this.has_bttv && this.settings.chat_padding); + this.toggle_style('chat-background', !this.has_bttv && this.settings.chat_rows); - document.body.classList.toggle("ffz-high-contrast-chat-text", !this.has_bttv && this.settings.high_contrast_chat[2] === '1'); - document.body.classList.toggle("ffz-high-contrast-chat-bold", !this.has_bttv && this.settings.high_contrast_chat[1] === '1'); - document.body.classList.toggle("ffz-high-contrast-chat-bg", !this.has_bttv && this.settings.high_contrast_chat[0] === '1'); + this.toggle_style('chat-separator', !this.has_bttv && this.settings.chat_separators); + this.toggle_style('chat-separator-3d', !this.has_bttv && this.settings.chat_separators === 2); + this.toggle_style('chat-separator-3d-inset', !this.has_bttv && this.settings.chat_separators === 3); + this.toggle_style('chat-separator-wide', !this.has_bttv && this.settings.chat_separators === 4); + + this.toggle_style('chat-hc-text', !this.has_bttv && this.settings.high_contrast_chat[2] === '1'); + this.toggle_style('chat-hc-bold', !this.has_bttv && this.settings.high_contrast_chat[1] === '1'); + this.toggle_style('chat-hc-background', !this.has_bttv && this.settings.high_contrast_chat[0] === '1'); this._last_row = {}; @@ -567,67 +572,6 @@ 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, @@ -840,7 +784,6 @@ FFZ.prototype._modify_line = function(component) { }, classNameBindings: [ - 'msgObject.ffz_alternate:ffz-alternate', 'msgObject.ffz_has_mention:ffz-mentioned', 'ffzWasDeleted:ffz-deleted', 'ffzHasOldMessages:clearfix', diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js index d8dc6cd4..83929d55 100644 --- a/src/ember/moderation-card.js +++ b/src/ember/moderation-card.js @@ -728,8 +728,7 @@ FFZ.prototype.setup_mod_card = function() { user_history = ffz_room && ffz_room.user_history && ffz_room.user_history[controller.get('cardInfo.user.id')]; if ( user_history && user_history.length ) { - var history = document.createElement('ul'), - alternate = false; + var history = document.createElement('ul'); history.className = 'interface clearfix chat-history'; for(var i=0; i < user_history.length; i++) { @@ -737,8 +736,6 @@ FFZ.prototype.setup_mod_card = function() { l_el = document.createElement('li'); l_el.className = 'message-line chat-line clearfix'; - l_el.classList.toggle('ffz-alternate', alternate); - alternate = !alternate; if ( line.style ) l_el.classList.add(line.style); @@ -756,8 +753,6 @@ FFZ.prototype.setup_mod_card = function() { 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 4c3c30ef..079a9c97 100644 --- a/src/ember/room.js +++ b/src/ember/room.js @@ -115,8 +115,6 @@ FFZ.prototype.setup_room = function() { FFZ.prototype._modify_rview = function(view) { var f = this; view.reopen({ - alternate: false, - didInsertElement: function() { this._super(); @@ -136,10 +134,6 @@ 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; @@ -743,11 +737,7 @@ FFZ.prototype._insert_history = function(room_id, data) { age = (now - last_date) / 1000, is_old = age > 300, - i = data.length, - alternation = r.get('messages.0.ffz_alternate') || false; - - if ( is_old ) - alternation = ! alternation; + i = data.length; var i = data.length; while(i--) { @@ -760,7 +750,6 @@ FFZ.prototype._insert_history = function(room_id, data) { if ( typeof msg.date === "string" || typeof msg.date === "number" ) msg.date = utils.parse_date(msg.date); - msg.ffz_alternate = alternation = ! alternation; if ( ! msg.room ) msg.room = room_id; @@ -828,7 +817,6 @@ FFZ.prototype._insert_history = function(room_id, data) { if ( is_old ) { var msg = { - ffz_alternate: ! alternation, color: "#755000", date: new Date(), from: "frankerfacez_admin", @@ -1007,8 +995,7 @@ FFZ.prototype._modify_room = function(room) { var msgs = t.get('messages'), total = msgs.get('length'), - i = total, - alternate; + i = total; // Delete visible messages while(i--) { @@ -1016,8 +1003,6 @@ FFZ.prototype._modify_room = function(room) { if ( msg.from === user ) { if ( f.settings.remove_deleted ) { - if ( alternate === undefined ) - alternate = ! msg.ffz_alternate; msgs.removeAt(i); continue; } @@ -1026,13 +1011,6 @@ FFZ.prototype._modify_room = function(room) { if ( ! f.settings.prevent_clear ) t.set('messages.' + i + '.deleted', true); } - - if ( alternate === undefined ) - alternate = msg.ffz_alternate; - else { - alternate = ! alternate; - t.set('messages.' + i + '.ffz_alternate', alternate); - } } // Delete pending messages @@ -1108,13 +1086,6 @@ FFZ.prototype._modify_room = function(room) { ffzActualPushMessage: function (msg) { if ( this.shouldShowMessage(msg) && this.ffzShouldShowMessage(msg) ) { - var row_type = msg.ffz_alternate; - if ( row_type === undefined ) { - var room_id = this.get('id'); - row_type = f._last_row[room_id] = f._last_row.hasOwnProperty(room_id) ? !f._last_row[room_id] : false; - msg.ffz_alternate = row_type; - } - this.get("messages").pushObject(msg); this.trimMessages(); @@ -1233,9 +1204,6 @@ FFZ.prototype._modify_room = function(room) { 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); diff --git a/src/ext/betterttv.js b/src/ext/betterttv.js index 84d5d8af..8ea6a260 100644 --- a/src/ext/betterttv.js +++ b/src/ext/betterttv.js @@ -59,22 +59,27 @@ FFZ.prototype.setup_bttv = function(delay) { this._roomv.ffzUpdateStatus(); } + // Disable style blocks. + this.toggle_style('chat-setup'); + this.toggle_style('chat-padding'); + this.toggle_style('chat-background'); + + this.toggle_style('chat-separator'); + this.toggle_style('chat-separator-3d'); + this.toggle_style('chat-separator-3d-inset'); + this.toggle_style('chat-separator-wide'); + + this.toggle_style('chat-hc-text'); + this.toggle_style('chat-hc-bold'); + this.toggle_style('chat-hc-background'); + + this.toggle_style('chat-colors-gray'); + this.toggle_style('badges-transparent'); + // Disable other features too. - document.body.classList.remove("ffz-chat-colors"); - document.body.classList.remove("ffz-chat-colors-gray"); - document.body.classList.remove("ffz-chat-background"); - document.body.classList.remove("ffz-chat-padding"); - document.body.classList.remove("ffz-chat-separator"); - document.body.classList.remove("ffz-chat-separator-3d"); - document.body.classList.remove("ffz-chat-separator-wide"); - document.body.classList.remove("ffz-chat-separator-3d-inset"); document.body.classList.remove("ffz-sidebar-swap"); document.body.classList.remove("ffz-portrait"); document.body.classList.remove("ffz-flip-dashboard"); - document.body.classList.remove("ffz-transparent-badges"); - document.body.classList.remove("ffz-high-contrast-chat-text"); - document.body.classList.remove("ffz-high-contrast-chat-bg"); - document.body.classList.remove("ffz-high-contrast-chat-bold"); // Remove Following Count if ( this.settings.following_count ) { diff --git a/src/main.js b/src/main.js index 3609f2f6..2459a354 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: 62, + major: 3, minor: 5, revision: 63, toString: function() { return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || ""); } @@ -243,6 +243,7 @@ FFZ.prototype.init_normal = function(delay, no_socket) { // Start this early, for quick loading. this.setup_dark(); + this.setup_css(); if ( ! no_socket ) this.ws_create(); @@ -253,7 +254,6 @@ FFZ.prototype.init_normal = function(delay, no_socket) { this.setup_notifications(); this.setup_following_count(false); - this.setup_css(); this.setup_menu(); this.find_bttv(10); @@ -280,6 +280,7 @@ FFZ.prototype.init_dashboard = function(delay) { // Start this early, for quick loading. this.setup_dark(); + this.setup_css(); this.ws_create(); this.setup_colors(); @@ -289,7 +290,6 @@ FFZ.prototype.init_dashboard = function(delay) { this.setup_tokenization(); this.setup_notifications(); this.setup_following_count(false); - this.setup_css(); this.setup_menu(); this._update_subscribers(); @@ -321,6 +321,7 @@ FFZ.prototype.init_ember = function(delay) { // Start this early, for quick loading. this.setup_dark(); + this.setup_css(); this.ws_create(); this.setup_emoticons(); @@ -347,7 +348,6 @@ FFZ.prototype.init_ember = function(delay) { //this.setup_teams(); this.setup_notifications(); - this.setup_css(); this.setup_menu(); this.setup_my_emotes(); this.setup_following(); diff --git a/src/styles/badges-blank.css b/src/styles/badges-blank.css new file mode 100644 index 00000000..1709f1a8 --- /dev/null +++ b/src/styles/badges-blank.css @@ -0,0 +1,3 @@ +.badges .badge:not(.subscriber) { + background-size: 0px; +} \ No newline at end of file diff --git a/src/styles/badges-circular-small.css b/src/styles/badges-circular-small.css new file mode 100644 index 00000000..ec67a3f5 --- /dev/null +++ b/src/styles/badges-circular-small.css @@ -0,0 +1,5 @@ +.badges .badge:not(.subscriber) { + height: 10px; + min-width: 10px; + margin: 5px 3px 5px 0; +} \ No newline at end of file diff --git a/src/styles/badges-circular.css b/src/styles/badges-circular.css new file mode 100644 index 00000000..0cbc892c --- /dev/null +++ b/src/styles/badges-circular.css @@ -0,0 +1,6 @@ +.badges .badge:not(.subscriber) { + border-radius: 9px; + background-size: 16px; + background-repeat: no-repeat; + background-position: center; +} \ No newline at end of file diff --git a/src/styles/badges-legacy-mod.css b/src/styles/badges-legacy-mod.css new file mode 100644 index 00000000..fbf3de28 --- /dev/null +++ b/src/styles/badges-legacy-mod.css @@ -0,0 +1,4 @@ +.badges .moderator { + background-color: #068c10; + background-image: url('//cdn.frankerfacez.com/script/legacy-mod.png'); +} \ No newline at end of file diff --git a/src/styles/badges-legacy-turbo.css b/src/styles/badges-legacy-turbo.css new file mode 100644 index 00000000..ba684d64 --- /dev/null +++ b/src/styles/badges-legacy-turbo.css @@ -0,0 +1,4 @@ +.badges .turbo { + background-color: #6441a3; + background-image: url('//cdn.frankerfacez.com/script/legacy-turbo.png'); +} \ No newline at end of file diff --git a/src/styles/badges-legacy.css b/src/styles/badges-legacy.css new file mode 100644 index 00000000..cbb69d14 --- /dev/null +++ b/src/styles/badges-legacy.css @@ -0,0 +1,14 @@ +.badges .staff { + background-color: #6441a5; + background-image: url('//cdn.frankerfacez.com/script/legacy-staff.png'); +} + +.badges .broadcaster { + background-color: #000; + background-image: url('//cdn.frankerfacez.com/script/legacy-broadcaster.png'); +} + +.badges .admin { + background-color: #ff0303; + background-image: url('//cdn.frankerfacez.com/script/legacy-admin.png'); +} \ No newline at end of file diff --git a/src/styles/badges-rounded.css b/src/styles/badges-rounded.css new file mode 100644 index 00000000..17c4826c --- /dev/null +++ b/src/styles/badges-rounded.css @@ -0,0 +1,4 @@ +/* Rounded Badges */ +.badges .badge:not(.subscriber) { + border-radius: 2px; +} \ No newline at end of file diff --git a/src/styles/badges-transparent.css b/src/styles/badges-transparent.css new file mode 100644 index 00000000..73d607b5 --- /dev/null +++ b/src/styles/badges-transparent.css @@ -0,0 +1,12 @@ +.badges .badge { + background-color: transparent !important; +} + + +/* Invert Some Badges */ +body:not(.ffz-dark) .app-main:not(.theatre) .conversation-window .badges .badge:not(.subscriber):not(.ffz-badge-0), +.app-main:not(.theatre) .chat-container:not(.dark):not(.force-dark) .badges .badge:not(.subscriber):not(.ffz-badge-0), +.app-main:not(.theatre) .ember-chat-container:not(.dark):not(.force-dark) .badges .badge:not(.subscriber):not(.ffz-badge-0) { + filter: invert(100%); + -webkit-filter: invert(100%); +} \ No newline at end of file diff --git a/src/styles/chat-background.css b/src/styles/chat-background.css new file mode 100644 index 00000000..3df6b9d3 --- /dev/null +++ b/src/styles/chat-background.css @@ -0,0 +1,96 @@ +/* Regular Alternating Background */ +.conversation-chat-lines > div:nth-child(2n+0):before, +.chat-history .chat-line:nth-child(2n+0):before, +.ember-chat .chat-lines > div:nth-child(2n+0) .chat-line:before { + background-color: rgba(0,0,0, 0.1); +} + + +/* Dark: Alternating Background */ +.ffz-dark .conversation-chat-lines > div:nth-child(2n+0):before, +.ffz-dark .chat-history .chat-line:nth-child(2n+0):before, + +.theatre .conversation-chat-lines > div:nth-child(2n+0):before, +.theatre .chat-history .chat-line:nth-child(2n+0):before, +.theatre .ember-chat .chat-lines > div:nth-child(2n+0) .chat-line:before, + +.chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line:before, +.ember-chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line:before, +.chat-container.force-dark .chat-lines > div:nth-child(2n+0) .chat-line:before, +.ember-chat-container.force-dark .chat-lines > div:nth-child(2n+0) .chat-line:before { + background-color: rgba(255,255,255, 0.05); +} + + + +/* DEPRECIATED: Mention Backgrounds */ +.chat-history .chat-line.ffz-mentioned:before, +.ember-chat .chat-line.ffz-mentioned:before { + background-color: rgba(255,127,127,0.2); +} + +.chat-history .chat-line.ffz-mentioned:nth-child(2n+0):before, +.ember-chat .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before { + background-color: rgba(255,127,127, 0.4); +} + + +/* DEPRECIATED: DARK THEME: Mention Backgrounds */ +.ffz-dark .chat-history .chat-line.ffz-mentioned:before, + +.theatre .ember-chat .chat-line.ffz-mentioned:before, +.chat-container.dark .chat-line.ffz-mentioned:before, +.chat-container.force-dark .chat-line.ffz-mentioned:before, +.ember-chat-container.dark .chat-line.ffz-mentioned:before, +.ember-chat-container.force-dark .chat-line.ffz-mentioned:before { + background-color: rgba(255,0,0, 0.2) !important; +} + + +.theatre .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, + +.chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, +.ember-chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, +.chat-container.force-dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, +.ember-chat-container.force-dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before { + background-color: rgba(255,0,0, 0.3) !important; +} + + + +/* Chat Mentions */ +/* TODO: Move this by itself */ + +.ember-chat .mentioned:empty, +.ember-chat .mentioning:empty, +.chat-history .mentioned:empty, +.chat-history .mentioning:empty { + display: none; +} + +.ember-chat .chat-line .mentioned, +.ember-chat .chat-line .mentioning, +.chat-history .chat-line .mentioned, +.chat-history .chat-line .mentioning { + border-radius: 10px; + padding: 3px 7px; + font-weight: bold; + color: #323232; + background-color: rgba(255,255,255, 0.75); +} + +/* DARK THEME: Chat Mentions */ +.ffz-dark .chat-history .mentioned, +.ffz-dark .chat-history .mentioning, + +.chat-container.dark .chat-line .mentioned, +.chat-container.dark .chat-line .mentioning, +.chat-container.force-dark .chat-line .mentioned, +.chat-container.force-dark .chat-line .mentioning, +.ember-chat-container.dark .chat-line .mentioned, +.ember-chat-container.dark .chat-line .mentioning, +.ember-chat-container.force-dark .chat-line .mentioned, +.ember-chat-container.force-dark .chat-line .mentioning { + color: #8c8c8c; + background-color: rgba(16,16,16, 0.75); +} \ No newline at end of file diff --git a/src/styles/chat-colors-gray.css b/src/styles/chat-colors-gray.css new file mode 100644 index 00000000..b0c596f3 --- /dev/null +++ b/src/styles/chat-colors-gray.css @@ -0,0 +1,4 @@ +.chat-line:not(.admin):not(.notification) span.from, +.chat-line:not(.admin):not(.notification) span.message { + color: inherit !important +} \ No newline at end of file diff --git a/src/styles/chat-hc-background.css b/src/styles/chat-hc-background.css new file mode 100644 index 00000000..71ff193a --- /dev/null +++ b/src/styles/chat-hc-background.css @@ -0,0 +1,16 @@ +/* High-Contrast Background */ +.chat-container, +.ember-chat-container { + background-color: #fff; +} + + +/* Dark: High-Contrast Background */ +.theatre .chat-container, +.theatre .ember-chat-container, +.chat-container.dark, +.chat-container.force-dark, +.ember-chat-container.dark, +.ember-chat-container.force-dark { + background-color: #000; +} \ No newline at end of file diff --git a/src/styles/chat-hc-bold.css b/src/styles/chat-hc-bold.css new file mode 100644 index 00000000..5fdee8f5 --- /dev/null +++ b/src/styles/chat-hc-bold.css @@ -0,0 +1,6 @@ +/* High-Contrast Bold */ +.chat-line .from, +.chat-line .colon, +.chat-line .message { + font-weight: bold; +} \ No newline at end of file diff --git a/src/styles/chat-hc-text.css b/src/styles/chat-hc-text.css new file mode 100644 index 00000000..687bd48c --- /dev/null +++ b/src/styles/chat-hc-text.css @@ -0,0 +1,15 @@ +/* High-Contrast Text */ +.chat-container, +.ember-chat-container { + color: #000; +} + +/* Dark: High-Contrast Text */ +.theatre .chat-container, +.theatre .ember-chat-container, +.chat-container.dark, +.chat-container.force-dark, +.ember-chat-container.dark, +.ember-chat-container.force-dark { + color: #fff; +} \ No newline at end of file diff --git a/src/styles/chat-padding.css b/src/styles/chat-padding.css new file mode 100644 index 00000000..e89f59a3 --- /dev/null +++ b/src/styles/chat-padding.css @@ -0,0 +1,15 @@ +/* Chat Line Padding */ +.ember-chat .chat-messages .chat-line, +.ember-chat .chat-messages .chat-line.admin, + +.conversation-window .conversation-system-messages, +.conversation-window .conversation-chat-line, +.conversation-window .timestamp-line { + padding: 5px; +} + + +/* Remove Extra Conversation Padding */ +.conversation-window .conversation-chat-lines { + padding-top: 0; +} \ No newline at end of file diff --git a/src/styles/chat-separator-3d-inset.css b/src/styles/chat-separator-3d-inset.css new file mode 100644 index 00000000..207c57a5 --- /dev/null +++ b/src/styles/chat-separator-3d-inset.css @@ -0,0 +1,19 @@ +/* 3D Inset Separators */ +.conversation-chat-lines > div:before, +.chat-line:before { + border-top: 1px solid #aaa; + border-bottom-color: rgba(255,255,255, 0.5); +} + +/* Dark: 3D Inset Separators */ +.ffz-dark .conversation-chat-lines > div:before, +.theatre .conversation-chat-lines > div:before, + +.theatre .chat-line:before, +.chat-container.dark .chat-line:before, +.chat-container.force-dark .chat-line:before, +.ember-chat-container.dark .chat-line:before, +.ember-chat-container.force-dark .chat-line:before { + border-top-color: #000; + border-bottom-color: rgba(255,255,255, 0.1); +} \ No newline at end of file diff --git a/src/styles/chat-separator-3d.css b/src/styles/chat-separator-3d.css new file mode 100644 index 00000000..92d17ce5 --- /dev/null +++ b/src/styles/chat-separator-3d.css @@ -0,0 +1,17 @@ +/* 3D Separators */ +.conversation-chat-lines > div:before, +.chat-line:before { + border-top: 1px solid rgba(255,255,255, 0.5); +} + +/* Dark: 3D Separators */ +.ffz-dark .conversation-chat-lines > div:before, +.theatre .conversation-chat-lines > div:before, + +.theatre .chat-line:before, +.chat-container.dark .chat-line:before, +.chat-container.force-dark .chat-line:before, +.ember-chat-container.dark .chat-line:before, +.ember-chat-container.force-dark .chat-line:before { + border-top-color: rgba(255,255,255, 0.1); +} \ No newline at end of file diff --git a/src/styles/chat-separator-wide.css b/src/styles/chat-separator-wide.css new file mode 100644 index 00000000..287dd1bf --- /dev/null +++ b/src/styles/chat-separator-wide.css @@ -0,0 +1,17 @@ +/* Wide Separators */ +.conversation-chat-lines > div:before, +.chat-line:before { + border-top: 1px solid #aaa; +} + +/* Dark: Wide Separators */ +.ffz-dark .conversation-chat-lines > div:before, +.theatre .conversation-chat-lines > div:before, + +.theatre .chat-line:before, +.chat-container.dark .chat-line:before, +.chat-container.force-dark .chat-line:before, +.ember-chat-container.dark .chat-line:before, +.ember-chat-container.force-dark .chat-line:before { + border-top-color: #000; +} \ No newline at end of file diff --git a/src/styles/chat-separator.css b/src/styles/chat-separator.css new file mode 100644 index 00000000..ca798fee --- /dev/null +++ b/src/styles/chat-separator.css @@ -0,0 +1,31 @@ +/* Simple Separators */ +.conversation-chat-lines > div:before, +.chat-line:before { + border-bottom: 1px solid #aaa; +} + +/* Dark: Simple Separators */ +.ffz-dark .conversation-chat-lines > div:before, +.theatre .conversation-chat-lines > div:before, + +.theatre .chat-line:before, +.chat-container.dark .chat-line:before, +.chat-container.force-dark .chat-line:before, +.ember-chat-container.dark .chat-line:before, +.ember-chat-container.force-dark .chat-line:before { + border-bottom-color: #000; +} + + + +/* Hide First Line */ +.conversation-chat-lines > div:first-child:before, +.chat-lines > div:first-child .chat-line:before { + border-top-color: transparent; +} + +/* Hide Last Line */ +.conversation-chat-lines > div:last-child:nth-child(odd):before, +.chat-lines > div:last-child:nth-child(odd) .chat-line:before { + border-bottom-color: transparent; +} \ No newline at end of file diff --git a/src/styles/chat-setup.css b/src/styles/chat-setup.css new file mode 100644 index 00000000..ed57617a --- /dev/null +++ b/src/styles/chat-setup.css @@ -0,0 +1,18 @@ +.conversation-chat-lines > div, +.chat-line { + position: relative; + z-index: 1; +} + +.conversation-chat-lines > div:before, +.chat-line:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; right: 0; + top: 2px; bottom: 1px; +} + +.chat-history .chat-line:before { + top: 0; bottom: 0; +} \ No newline at end of file diff --git a/src/ui/styles.js b/src/ui/styles.js index 56a134f9..39465d82 100644 --- a/src/ui/styles.js +++ b/src/ui/styles.js @@ -1,6 +1,7 @@ var FFZ = window.FrankerFaceZ, + utils = require('../utils'), constants = require('../constants'); - //styles = require('../styles'); + styles = require('../styles'); FFZ.prototype.setup_css = function() { document.body.classList.toggle('ffz-flip-dashboard', this.settings.flip_dashboard); @@ -13,6 +14,14 @@ FFZ.prototype.setup_css = function() { s.setAttribute('href', constants.DIRECT_SERVER + "script/style.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info)); document.head.appendChild(s); + this.log("Readying toggleable styles."); + this._toggle_style_state = {}; + + s = this._toggle_style = document.createElement('style'); + s.type = "text/css"; + s.id = "ffz-toggle-css"; + document.head.appendChild(s); + /*var s = this._main_style = document.createElement('style'); s.textContent = styles.style; @@ -31,4 +40,15 @@ FFZ.prototype.setup_css = function() { onClose: function() {} } }; +} + + +FFZ.prototype.toggle_style = function(key, enabled) { + var state = this._toggle_style_state[key]; + if ( (enabled && state) || (!enabled && !state) ) + return; + + this._toggle_style_state[key] = enabled; + + utils.update_css(this._toggle_style, key, enabled ? styles[key] || null : null); } \ No newline at end of file diff --git a/style.css b/style.css index dae3d975..847cd8fe 100644 --- a/style.css +++ b/style.css @@ -445,6 +445,11 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-togg /* Menu Options */ +.emoticon-selector .emoticon-selector-box .subscribe-message { + padding: 10px 20px; + margin: 0; +} + .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, @@ -866,39 +871,6 @@ span.ffz-handle:after { left: 8px } 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; } @@ -1029,228 +1001,19 @@ body:not(.ffz-chat-purge-icon) .ember-chat .mod-icons .purge { display: none; } text-decoration: none; } -.ffz-chat-background .more-messages-indicator { +.more-messages-indicator { /* This looks better when it's full width. */ margin: 0 -20px; } -.ffz-chat-background .chat-line .message { +.chat-line .message { word-break: break-word; } -.ffz-chat-background .ember-chat .chat-messages .tse-scroll-content { +.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 { @@ -1379,7 +1142,11 @@ a.unsafe-link { color: #a64141 !important; } -.chat-container.dark .chat-line a.unsafe-link { +.theatre a.unsafe-link, +.chat-container.dark a.unsafe-link, +.chat-container.force-dark a.unsafe-link, +.ember-chat-container.dark a.unsafe-link, +.ember-chat-container.force-dark a.unsafe-link { color: #d28e8e !important; } @@ -1560,8 +1327,11 @@ th.ffz-row-switch { cursor: default; } +#ffz-group-tabs .button .notifications:empty, +.ffz-room-row td > span:empty, .ffz-chat-tab span:empty { display: none; } +.ffz-room-row td > span, .ffz-chat-tab span { padding: 0 4px; display: inline-block; @@ -1573,6 +1343,29 @@ th.ffz-row-switch { right: 5px; } +.ffz-room-row td { + position: relative; +} + +.ffz-room-row td > span { + line-height: 16px; + margin: 5px 0; +} + +#ffz-group-tabs .button .notifications { + background-color: #d44949; + top: 0; + right: 0; + position: absolute; + height: 12px; + line-height: 12px; + padding: 0 3px; + width: auto; + color: #fff; + font-size: 9px; + vertical-align: middle; + margin: 0; +} /* Dark Group Tabs */ @@ -1588,6 +1381,7 @@ th.ffz-row-switch { color: #B9A3E3; } +.ffz-dark .ffz-room-row td > span, .app-main.theatre .ffz-chat-tab span, .chat-container.dark .ffz-chat-tab span, .ember-chat-container.dark .ffz-chat-tab span { @@ -1826,10 +1620,10 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter /* Badge Styles */ -.ffz-rounded-badges .conversation-window .badges .badge:not(.subscriber), -.ffz-rounded-badges .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; } +/*.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-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), @@ -1867,7 +1661,7 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter .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 */ @@ -1912,6 +1706,12 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter .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 .emoticon-selector .subscribe-message, +.ffz-no-blue .app-main.theatre .chat-container .emoticon-selector .subscribe-message, +.ffz-no-blue .chat-container.force-dark .emoticon-selector .subscribe-message, +.ffz-no-blue .ember-chat-container.dark .emoticon-selector .subscribe-message, +.ffz-no-blue .app-main.theatre .ember-chat-container.chat-container .emoticon-selector .subscribe-message, +.ffz-no-blue .ember-chat-container.force-dark .emoticon-selector .subscribe-message,*/ .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, @@ -2039,94 +1839,7 @@ li[data-name="following"] a { #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; -}*/ +/* Image Tooltips */ .ffz-image-hover { border:none;