mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-04 10:08:31 +00:00
Big changes to how CSS works! Hopefully it'll improve performance.
This commit is contained in:
SirStendec
parent
4f6dcc9999
commit
3958a37f38
30 changed files with 563 additions and 591 deletions
34
gulpfile.js
34
gulpfile.js
|
|
@ -44,22 +44,22 @@ gulp.task('prepare', ['clean'], function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
gulp.task('templates', ['prepare'], function() {
|
//gulp.task('templates', ['prepare'], function() {
|
||||||
gulp.src(['build/templates/**/*.hbs'])
|
// gulp.src(['build/templates/**/*.hbs'])
|
||||||
.pipe(jsEscape())
|
// .pipe(jsEscape())
|
||||||
.pipe(wrap('Handlebars.compile(<%= contents %>)'))
|
// .pipe(wrap('Handlebars.compile(<%= contents %>)'))
|
||||||
.pipe(declare({
|
// .pipe(declare({
|
||||||
root: 'exports',
|
// root: 'exports',
|
||||||
noRedeclare: true,
|
// noRedeclare: true,
|
||||||
processName: function(filePath) {
|
// processName: function(filePath) {
|
||||||
var match = filePath.match(/build[\\\/]templates[\\\/](.*)\.hbs$/);
|
// var match = filePath.match(/build[\\\/]templates[\\\/](.*)\.hbs$/);
|
||||||
return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath);
|
// return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath);
|
||||||
}
|
// }
|
||||||
}))
|
// }))
|
||||||
.pipe(concat('templates.js'))
|
// .pipe(concat('templates.js'))
|
||||||
.pipe(gulp.dest('build/'))
|
// .pipe(gulp.dest('build/'))
|
||||||
.on('error', util.log);
|
// .on('error', util.log);
|
||||||
});
|
//});
|
||||||
|
|
||||||
|
|
||||||
gulp.task('styles', ['prepare'], function() {
|
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'])
|
gulp.src(['build/main.js'])
|
||||||
.pipe(browserify())
|
.pipe(browserify())
|
||||||
.pipe(concat('script.js'))
|
.pipe(concat('script.js'))
|
||||||
|
|
|
||||||
|
|
@ -43,9 +43,9 @@ FFZ.settings_info.legacy_badges = {
|
||||||
},
|
},
|
||||||
|
|
||||||
on_update: function(val) {
|
on_update: function(val) {
|
||||||
document.body.classList.toggle("ffz-legacy-mod-badges", val !== 0);
|
this.toggle_style('badges-legacy', val === 3);
|
||||||
document.body.classList.toggle("ffz-legacy-turbo-badges", val > 1);
|
this.toggle_style('badges-legacy-mod', val !== 0);
|
||||||
document.body.classList.toggle("ffz-legacy-badges", val === 3);
|
this.toggle_style('badges-legacy-turbo', val > 1);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -83,11 +83,11 @@ FFZ.settings_info.transparent_badges = {
|
||||||
if ( this.has_bttv )
|
if ( this.has_bttv )
|
||||||
return;
|
return;
|
||||||
|
|
||||||
document.body.classList.toggle("ffz-rounded-badges", val === 1);
|
this.toggle_style('badges-rounded', val === 1);
|
||||||
document.body.classList.toggle("ffz-circular-badges", val === 2);
|
this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4);
|
||||||
document.body.classList.toggle("ffz-circular-blank-badges", val === 3);
|
this.toggle_style('badges-blank', val === 3 || val === 4);
|
||||||
document.body.classList.toggle("ffz-circular-small-badges", val === 4);
|
this.toggle_style('badges-circular-small', val === 4);
|
||||||
document.body.classList.toggle("ffz-transparent-badges", val === 5);
|
this.toggle_style('badges-transparent', val === 5);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -98,16 +98,17 @@ FFZ.settings_info.transparent_badges = {
|
||||||
|
|
||||||
FFZ.prototype.setup_badges = function() {
|
FFZ.prototype.setup_badges = function() {
|
||||||
if ( ! this.has_bttv ) {
|
if ( ! this.has_bttv ) {
|
||||||
document.body.classList.toggle("ffz-rounded-badges", this.settings.transparent_badges === 1);
|
var val = this.settings.transparent_badges;
|
||||||
document.body.classList.toggle("ffz-circular-badges", this.settings.transparent_badges === 2);
|
this.toggle_style('badges-rounded', val === 1);
|
||||||
document.body.classList.toggle("ffz-circular-blank-badges", this.settings.transparent_badges === 3);
|
this.toggle_style('badges-circular', val === 2 || val === 3 || val === 4);
|
||||||
document.body.classList.toggle("ffz-circular-small-badges", this.settings.transparent_badges === 4);
|
this.toggle_style('badges-blank', val === 3 || val === 4);
|
||||||
document.body.classList.toggle("ffz-transparent-badges", this.settings.transparent_badges === 5);
|
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);
|
this.toggle_style('badges-legacy', this.settings.legacy_badges === 3);
|
||||||
document.body.classList.toggle("ffz-legacy-turbo-badges", this.settings.legacy_badges > 1);
|
this.toggle_style('badges-legacy-mod', this.settings.legacy_badges !== 0);
|
||||||
document.body.classList.toggle("ffz-legacy-badges", this.settings.legacy_badges === 3);
|
this.toggle_style('badges-legacy-turbo', this.settings.legacy_badges > 1);
|
||||||
|
|
||||||
this.log("Preparing badge system.");
|
this.log("Preparing badge system.");
|
||||||
this.badges = {};
|
this.badges = {};
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ FFZ.settings_info.fix_color = {
|
||||||
},
|
},
|
||||||
|
|
||||||
on_update: function(val) {
|
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' )
|
if ( ! this.has_bttv && val !== '-1' )
|
||||||
this._rebuild_colors();
|
this._rebuild_colors();
|
||||||
|
|
@ -114,6 +114,8 @@ FFZ.settings_info.color_blind = {
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
||||||
FFZ.prototype.setup_colors = function() {
|
FFZ.prototype.setup_colors = function() {
|
||||||
|
this.toggle_style('chat-colors-gray', !this.has_bttv && this.settings.fix_color === '-1');
|
||||||
|
|
||||||
this._colors = {};
|
this._colors = {};
|
||||||
this._rebuild_contrast();
|
this._rebuild_contrast();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 = {
|
FFZ.settings_info.pinned_rooms = {
|
||||||
value: [],
|
value: [],
|
||||||
visible: false,
|
visible: false,
|
||||||
|
|
@ -312,7 +298,6 @@ FFZ.settings_info.visible_rooms = {
|
||||||
FFZ.prototype.setup_chatview = function() {
|
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-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-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.");
|
this.log("Hooking the Ember Chat controller.");
|
||||||
|
|
||||||
|
|
@ -462,23 +447,32 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
var room = this.get('controller.currentRoom'), rows;
|
var room = this.get('controller.currentRoom'), rows;
|
||||||
room && room.resetUnreadCount();
|
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 ) {
|
if ( this._ffz_chan_table ) {
|
||||||
rows = jQuery(this._ffz_chan_table);
|
rows = jQuery(this._ffz_chan_table);
|
||||||
rows.children('.ffz-room-row').removeClass('active');
|
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 ) {
|
if ( this._ffz_group_table ) {
|
||||||
rows = jQuery(this._ffz_group_table);
|
rows = jQuery(this._ffz_group_table);
|
||||||
rows.children('.ffz-room-row').removeClass('active');
|
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 ) {
|
if ( !f.has_bttv && f.settings.group_tabs && this._ffz_tabs ) {
|
||||||
var tabs = jQuery(this._ffz_tabs);
|
var tabs = jQuery(this._ffz_tabs);
|
||||||
tabs.children('.ffz-chat-tab').removeClass('active');
|
tabs.children('.ffz-chat-tab').removeClass('active');
|
||||||
|
|
||||||
if ( room && room._ffz_tab ) {
|
if ( room && room._ffz_tab ) {
|
||||||
room._ffz_tab.classList.remove('tab-mentioned');
|
room._ffz_tab.classList.remove('tab-mentioned');
|
||||||
room._ffz_tab.classList.remove('hidden');
|
room._ffz_tab.classList.remove('hidden');
|
||||||
|
|
@ -488,6 +482,15 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
sp.innerHTML = '';
|
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
|
// Invite Link
|
||||||
var can_invite = room && room.get('canInvite');
|
var can_invite = room && room.get('canInvite');
|
||||||
this._ffz_invite && this._ffz_invite.classList.toggle('hidden', !can_invite);
|
this._ffz_invite && this._ffz_invite.classList.toggle('hidden', !can_invite);
|
||||||
|
|
@ -501,9 +504,7 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
// Better Menu
|
// Better Menu
|
||||||
|
|
||||||
ffzRebuildMenu: function() {
|
ffzRebuildMenu: function() {
|
||||||
return;
|
/*var el = this.get('element'),
|
||||||
|
|
||||||
var el = this.get('element'),
|
|
||||||
room_list = el && el.querySelector('.chat-rooms .tse-content');
|
room_list = el && el.querySelector('.chat-rooms .tse-content');
|
||||||
|
|
||||||
if ( ! room_list )
|
if ( ! room_list )
|
||||||
|
|
@ -533,7 +534,7 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
tbl.setAttribute('cellspacing', 0);
|
tbl.setAttribute('cellspacing', 0);
|
||||||
tbl.id = 'ffz-channel-table';
|
tbl.id = 'ffz-channel-table';
|
||||||
tbl.className = 'ffz';
|
tbl.className = 'ffz';
|
||||||
tbl.innerHTML = '<thead><tr><th colspan="2">Channels</th><th class="ffz-row-switch">Join</th><th class="ffz-row-switch">Pin</th></tr></thead><tbody></tbody>';
|
tbl.innerHTML = '<thead><tr><th colspan="2">Channels</th><th class="ffz-row-switch">Pin</th></tr></thead><tbody></tbody>';
|
||||||
room_list.insertBefore(tbl, room_list.firstChild);
|
room_list.insertBefore(tbl, room_list.firstChild);
|
||||||
|
|
||||||
chan_table = this._ffz_chan_table = tbl.querySelector('tbody');
|
chan_table = this._ffz_chan_table = tbl.querySelector('tbody');
|
||||||
|
|
@ -571,7 +572,7 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
tbl.setAttribute('cellspacing', 0);
|
tbl.setAttribute('cellspacing', 0);
|
||||||
tbl.id = 'ffz-group-table';
|
tbl.id = 'ffz-group-table';
|
||||||
tbl.className = 'ffz';
|
tbl.className = 'ffz';
|
||||||
tbl.innerHTML = '<thead><tr><th colspan="2">Group Chats</th><th class="ffz-row-switch">Pin</th></tr></thead><tbody></tbody>';
|
tbl.innerHTML = '<thead><tr><th colspan="2">Group Chats</th></tr></thead><tbody></tbody>';
|
||||||
|
|
||||||
var before = room_list.querySelector('#ffz-channel-table');
|
var before = room_list.querySelector('#ffz-channel-table');
|
||||||
room_list.insertBefore(tbl, before.nextSibling);
|
room_list.insertBefore(tbl, before.nextSibling);
|
||||||
|
|
@ -590,30 +591,29 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
// Change Create Tooltip
|
// Change Create Tooltip
|
||||||
var create_btn = el.querySelector('.button.create');
|
var create_btn = el.querySelector('.button.create');
|
||||||
if ( create_btn )
|
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'),
|
var row = document.createElement('tr'),
|
||||||
icon = document.createElement('td'),
|
icon = document.createElement('td'),
|
||||||
name_el = document.createElement('td'),
|
name_el = document.createElement('td'),
|
||||||
|
|
||||||
btn,
|
btn,
|
||||||
toggle_pinned = document.createElement('td'),
|
toggle_pinned = document.createElement('td'),
|
||||||
toggle_visible = document.createElement('td'),
|
|
||||||
|
|
||||||
group = room.get('isGroupRoom'),
|
group = room.get('isGroupRoom'),
|
||||||
current = room === view.get('controller.currentRoom'),
|
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) {
|
name = room.get('tmiRoom.displayName') || (group ? room.get('tmiRoom.name') : FFZ.get_capitalization(room.get('id'), function(name) {
|
||||||
f.log("Name for Row: " + name);
|
f.log("Name for Row: " + name);
|
||||||
//unread = format_unread(current ? 0 : room.get('unreadCount'));
|
unread = utils.format_unread(current ? 0 : room.get('unreadCount'));
|
||||||
name_el.innerHTML = utils.sanitize(name);
|
name_el.innerHTML = utils.sanitize(name) + ' <span>' + unread + '</span>';
|
||||||
}));
|
}));
|
||||||
|
|
||||||
name_el.className = 'ffz-room';
|
name_el.className = 'ffz-room';
|
||||||
name_el.innerHTML = utils.sanitize(name);
|
name_el.innerHTML = utils.sanitize(name) + ' <span>' + unread + '</span>';
|
||||||
|
|
||||||
if ( current_channel ) {
|
if ( current_channel ) {
|
||||||
icon.innerHTML = constants.CAMERA;
|
icon.innerHTML = constants.CAMERA;
|
||||||
|
|
@ -625,10 +625,9 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
icon.className = name_el.className = 'tooltip';
|
icon.className = name_el.className = 'tooltip';
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle_pinned.className = toggle_visible.className = 'ffz-row-switch';
|
toggle_pinned.className = 'ffz-row-switch';
|
||||||
|
|
||||||
toggle_pinned.innerHTML = '<a class="switch' + (f.settings.pinned_rooms.indexOf(room.get('id')) !== -1 ? ' active' : '') + '"><span></span></a>';
|
toggle_pinned.innerHTML = '<a class="switch' + (f.settings.pinned_rooms.indexOf(room.get('id')) !== -1 ? ' active' : '') + '"><span></span></a>';
|
||||||
toggle_visible.innerHTML = '<a class="switch' + (f.settings.visible_rooms.indexOf(room.get('id')) !== -1 ? ' active' : '') + '"><span></span></a>';
|
|
||||||
|
|
||||||
row.setAttribute('data-room', room.get('id'));
|
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() {
|
row.addEventListener('click', function() {
|
||||||
var controller = view.get('controller');
|
var controller = view.get('controller');
|
||||||
controller.focusRoom(room);
|
controller.focusRoom(room);
|
||||||
controller.set('showList', false);
|
controller.set('showList', false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
room._ffz_row = row;
|
||||||
return row;
|
return row;
|
||||||
},
|
},*/
|
||||||
|
|
||||||
// Group Tabs~!
|
// Group Tabs~!
|
||||||
|
|
||||||
|
|
@ -735,11 +716,23 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
tabs.innerHTML = "";
|
tabs.innerHTML = "";
|
||||||
|
|
||||||
var link = document.createElement('a'),
|
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.className = 'button glyph-only tooltip';
|
||||||
link.title = "Chat Room Management";
|
link.title = "Chat Room Management";
|
||||||
link.innerHTML = constants.ROOMS;
|
link.innerHTML = constants.ROOMS + '<span class="notifications">' + (total_unread || '') + '</span>';
|
||||||
|
|
||||||
link.addEventListener('click', function() {
|
link.addEventListener('click', function() {
|
||||||
var controller = view.get('controller');
|
var controller = view.get('controller');
|
||||||
|
|
@ -821,37 +814,63 @@ FFZ.prototype._modify_cview = function(view) {
|
||||||
},
|
},
|
||||||
|
|
||||||
ffzTabUnread: function(room_id) {
|
ffzTabUnread: function(room_id) {
|
||||||
// TODO: Update menu.
|
var current_id = this.get('controller.currentRoom.id');
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
if ( room_id ) {
|
if ( room_id ) {
|
||||||
var room = f.rooms && f.rooms[room_id] && f.rooms[room_id].room,
|
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 ) {
|
unread_count = room_id === current_id ? 0 : room.get('unreadCount'),
|
||||||
var unread = utils.format_unread(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;
|
tab.querySelector('span').innerHTML = unread;
|
||||||
}
|
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var children = tabs.querySelectorAll('.ffz-chat-tab');
|
for(var room_id in f.rooms) {
|
||||||
for(var i=0; i < children.length; i++) {
|
var room = f.rooms[room_id] && f.rooms[room_id].room,
|
||||||
var tab = children[i],
|
row = room && room._ffz_row,
|
||||||
room_id = tab.getAttribute('data-room'),
|
tab = room && room._ffz_tab,
|
||||||
room = f.rooms && f.rooms[room_id] && f.rooms[room_id];
|
|
||||||
|
|
||||||
if ( ! room )
|
unread_count = room_id === current_id ? 0 : room.get('unreadCount'),
|
||||||
continue;
|
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'));
|
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;
|
tab.querySelector('span').innerHTML = unread;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -269,7 +269,10 @@ FFZ.settings_info.chat_rows = {
|
||||||
name: "Chat Line Backgrounds",
|
name: "Chat Line Backgrounds",
|
||||||
help: "Display alternating background colors for lines in chat.",
|
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.",
|
help: "Display thin lines between chat messages for further visual separation.",
|
||||||
|
|
||||||
on_update: function(val) {
|
on_update: function(val) {
|
||||||
document.body.classList.toggle("ffz-chat-separator", !this.has_bttv && val !== 0);
|
this.toggle_style('chat-setup', !this.has_bttv && (val || this.settings.chat_rows));
|
||||||
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);
|
this.toggle_style('chat-separator', !this.has_bttv && val);
|
||||||
document.body.classList.toggle("ffz-chat-separator-wide", !this.has_bttv && val === 4);
|
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",
|
name: "Reduced Chat Line Padding",
|
||||||
help: "Reduce the amount of padding around chat messages to fit more on-screen at once.",
|
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) {
|
on_update: function(val) {
|
||||||
document.body.classList.toggle("ffz-high-contrast-chat-text", !this.has_bttv && val[2] === '1');
|
this.toggle_style('chat-hc-text', !this.has_bttv && val[2] === '1');
|
||||||
document.body.classList.toggle("ffz-high-contrast-chat-bold", !this.has_bttv && val[1] === '1');
|
this.toggle_style('chat-hc-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-background', !this.has_bttv && val[0] === '1');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -526,19 +531,19 @@ FFZ.prototype.setup_line = function() {
|
||||||
|
|
||||||
|
|
||||||
// Chat Enhancements
|
// Chat Enhancements
|
||||||
document.body.classList.toggle("ffz-chat-colors", !this.has_bttv && this.settings.fix_color !== '-1');
|
this.toggle_style('chat-setup', !this.has_bttv && (this.settings.chat_rows || this.settings.chat_separators));
|
||||||
document.body.classList.toggle("ffz-chat-colors-gray", !this.has_bttv && this.settings.fix_color === '-1');
|
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);
|
this.toggle_style('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);
|
|
||||||
|
|
||||||
document.body.classList.toggle("ffz-high-contrast-chat-text", !this.has_bttv && this.settings.high_contrast_chat[2] === '1');
|
this.toggle_style('chat-separator', !this.has_bttv && this.settings.chat_separators);
|
||||||
document.body.classList.toggle("ffz-high-contrast-chat-bold", !this.has_bttv && this.settings.high_contrast_chat[1] === '1');
|
this.toggle_style('chat-separator-3d', !this.has_bttv && this.settings.chat_separators === 2);
|
||||||
document.body.classList.toggle("ffz-high-contrast-chat-bg", !this.has_bttv && this.settings.high_contrast_chat[0] === '1');
|
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 = {};
|
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('<div class="indicator"></div>');
|
|
||||||
|
|
||||||
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('<span class="from ffz-alias tooltip' + colored + '" style="' + style + (colors ? '" data-colors="' + raw_color : '') + '" title="' + utils.sanitize(name) + '">' + utils.sanitize(alias) + '</span>');
|
|
||||||
else
|
|
||||||
e.push('<span class="from' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">' + utils.sanitize(name) + '</span>');
|
|
||||||
|
|
||||||
e.push('<span class="colon">:</span> ');
|
|
||||||
|
|
||||||
if ( ! this.get('isActionMessage') ) {
|
|
||||||
style = '';
|
|
||||||
colored = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
e.push('<span class="message' + colored + '" style="' + style + (colors ? '" data-color="' + raw_color : '') + '">');
|
|
||||||
e.push(f.render_tokens(this.get('tokenizedMessage'), true));
|
|
||||||
e.push('</span>');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
FFZ.prototype._modify_line = function(component) {
|
FFZ.prototype._modify_line = function(component) {
|
||||||
var f = this,
|
var f = this,
|
||||||
|
|
||||||
|
|
@ -840,7 +784,6 @@ FFZ.prototype._modify_line = function(component) {
|
||||||
},
|
},
|
||||||
|
|
||||||
classNameBindings: [
|
classNameBindings: [
|
||||||
'msgObject.ffz_alternate:ffz-alternate',
|
|
||||||
'msgObject.ffz_has_mention:ffz-mentioned',
|
'msgObject.ffz_has_mention:ffz-mentioned',
|
||||||
'ffzWasDeleted:ffz-deleted',
|
'ffzWasDeleted:ffz-deleted',
|
||||||
'ffzHasOldMessages:clearfix',
|
'ffzHasOldMessages:clearfix',
|
||||||
|
|
|
||||||
|
|
@ -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')];
|
user_history = ffz_room && ffz_room.user_history && ffz_room.user_history[controller.get('cardInfo.user.id')];
|
||||||
|
|
||||||
if ( user_history && user_history.length ) {
|
if ( user_history && user_history.length ) {
|
||||||
var history = document.createElement('ul'),
|
var history = document.createElement('ul');
|
||||||
alternate = false;
|
|
||||||
history.className = 'interface clearfix chat-history';
|
history.className = 'interface clearfix chat-history';
|
||||||
|
|
||||||
for(var i=0; i < user_history.length; i++) {
|
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 = document.createElement('li');
|
||||||
|
|
||||||
l_el.className = 'message-line chat-line clearfix';
|
l_el.className = 'message-line chat-line clearfix';
|
||||||
l_el.classList.toggle('ffz-alternate', alternate);
|
|
||||||
alternate = !alternate;
|
|
||||||
|
|
||||||
if ( line.style )
|
if ( line.style )
|
||||||
l_el.classList.add(line.style);
|
l_el.classList.add(line.style);
|
||||||
|
|
@ -756,8 +753,6 @@ FFZ.prototype.setup_mod_card = function() {
|
||||||
|
|
||||||
el.appendChild(history);
|
el.appendChild(history);
|
||||||
|
|
||||||
this.ffz_alternate = alternate;
|
|
||||||
|
|
||||||
// Lazy scroll-to-bottom
|
// Lazy scroll-to-bottom
|
||||||
history.scrollTop = history.scrollHeight;
|
history.scrollTop = history.scrollHeight;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -115,8 +115,6 @@ FFZ.prototype.setup_room = function() {
|
||||||
FFZ.prototype._modify_rview = function(view) {
|
FFZ.prototype._modify_rview = function(view) {
|
||||||
var f = this;
|
var f = this;
|
||||||
view.reopen({
|
view.reopen({
|
||||||
alternate: false,
|
|
||||||
|
|
||||||
didInsertElement: function() {
|
didInsertElement: function() {
|
||||||
this._super();
|
this._super();
|
||||||
|
|
||||||
|
|
@ -136,10 +134,6 @@ FFZ.prototype._modify_rview = function(view) {
|
||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
|
|
||||||
ffzUpdateAlternate: function() {
|
|
||||||
this.get('element').classList.toggle('ffz-alternate', this.get('ffzAlternate'));
|
|
||||||
}.observes("ffzAlternate"),
|
|
||||||
|
|
||||||
ffzInit: function() {
|
ffzInit: function() {
|
||||||
f._roomv = this;
|
f._roomv = this;
|
||||||
|
|
||||||
|
|
@ -743,11 +737,7 @@ FFZ.prototype._insert_history = function(room_id, data) {
|
||||||
age = (now - last_date) / 1000,
|
age = (now - last_date) / 1000,
|
||||||
is_old = age > 300,
|
is_old = age > 300,
|
||||||
|
|
||||||
i = data.length,
|
i = data.length;
|
||||||
alternation = r.get('messages.0.ffz_alternate') || false;
|
|
||||||
|
|
||||||
if ( is_old )
|
|
||||||
alternation = ! alternation;
|
|
||||||
|
|
||||||
var i = data.length;
|
var i = data.length;
|
||||||
while(i--) {
|
while(i--) {
|
||||||
|
|
@ -760,7 +750,6 @@ FFZ.prototype._insert_history = function(room_id, data) {
|
||||||
if ( typeof msg.date === "string" || typeof msg.date === "number" )
|
if ( typeof msg.date === "string" || typeof msg.date === "number" )
|
||||||
msg.date = utils.parse_date(msg.date);
|
msg.date = utils.parse_date(msg.date);
|
||||||
|
|
||||||
msg.ffz_alternate = alternation = ! alternation;
|
|
||||||
if ( ! msg.room )
|
if ( ! msg.room )
|
||||||
msg.room = room_id;
|
msg.room = room_id;
|
||||||
|
|
||||||
|
|
@ -828,7 +817,6 @@ FFZ.prototype._insert_history = function(room_id, data) {
|
||||||
|
|
||||||
if ( is_old ) {
|
if ( is_old ) {
|
||||||
var msg = {
|
var msg = {
|
||||||
ffz_alternate: ! alternation,
|
|
||||||
color: "#755000",
|
color: "#755000",
|
||||||
date: new Date(),
|
date: new Date(),
|
||||||
from: "frankerfacez_admin",
|
from: "frankerfacez_admin",
|
||||||
|
|
@ -1007,8 +995,7 @@ FFZ.prototype._modify_room = function(room) {
|
||||||
|
|
||||||
var msgs = t.get('messages'),
|
var msgs = t.get('messages'),
|
||||||
total = msgs.get('length'),
|
total = msgs.get('length'),
|
||||||
i = total,
|
i = total;
|
||||||
alternate;
|
|
||||||
|
|
||||||
// Delete visible messages
|
// Delete visible messages
|
||||||
while(i--) {
|
while(i--) {
|
||||||
|
|
@ -1016,8 +1003,6 @@ FFZ.prototype._modify_room = function(room) {
|
||||||
|
|
||||||
if ( msg.from === user ) {
|
if ( msg.from === user ) {
|
||||||
if ( f.settings.remove_deleted ) {
|
if ( f.settings.remove_deleted ) {
|
||||||
if ( alternate === undefined )
|
|
||||||
alternate = ! msg.ffz_alternate;
|
|
||||||
msgs.removeAt(i);
|
msgs.removeAt(i);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
@ -1026,13 +1011,6 @@ FFZ.prototype._modify_room = function(room) {
|
||||||
if ( ! f.settings.prevent_clear )
|
if ( ! f.settings.prevent_clear )
|
||||||
t.set('messages.' + i + '.deleted', true);
|
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
|
// Delete pending messages
|
||||||
|
|
@ -1108,13 +1086,6 @@ FFZ.prototype._modify_room = function(room) {
|
||||||
|
|
||||||
ffzActualPushMessage: function (msg) {
|
ffzActualPushMessage: function (msg) {
|
||||||
if ( this.shouldShowMessage(msg) && this.ffzShouldShowMessage(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.get("messages").pushObject(msg);
|
||||||
this.trimMessages();
|
this.trimMessages();
|
||||||
|
|
||||||
|
|
@ -1233,9 +1204,6 @@ FFZ.prototype._modify_room = function(room) {
|
||||||
var l_el = document.createElement('li');
|
var l_el = document.createElement('li');
|
||||||
l_el.className = 'message-line chat-line clearfix';
|
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 )
|
if ( msg.style )
|
||||||
l_el.classList.add(msg.style);
|
l_el.classList.add(msg.style);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -59,22 +59,27 @@ FFZ.prototype.setup_bttv = function(delay) {
|
||||||
this._roomv.ffzUpdateStatus();
|
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.
|
// 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-sidebar-swap");
|
||||||
document.body.classList.remove("ffz-portrait");
|
document.body.classList.remove("ffz-portrait");
|
||||||
document.body.classList.remove("ffz-flip-dashboard");
|
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
|
// Remove Following Count
|
||||||
if ( this.settings.following_count ) {
|
if ( this.settings.following_count ) {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ FFZ.get = function() { return FFZ.instance; }
|
||||||
|
|
||||||
// Version
|
// Version
|
||||||
var VER = FFZ.version_info = {
|
var VER = FFZ.version_info = {
|
||||||
major: 3, minor: 5, revision: 62,
|
major: 3, minor: 5, revision: 63,
|
||||||
toString: function() {
|
toString: function() {
|
||||||
return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
|
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.
|
// Start this early, for quick loading.
|
||||||
this.setup_dark();
|
this.setup_dark();
|
||||||
|
this.setup_css();
|
||||||
|
|
||||||
if ( ! no_socket )
|
if ( ! no_socket )
|
||||||
this.ws_create();
|
this.ws_create();
|
||||||
|
|
@ -253,7 +254,6 @@ FFZ.prototype.init_normal = function(delay, no_socket) {
|
||||||
|
|
||||||
this.setup_notifications();
|
this.setup_notifications();
|
||||||
this.setup_following_count(false);
|
this.setup_following_count(false);
|
||||||
this.setup_css();
|
|
||||||
this.setup_menu();
|
this.setup_menu();
|
||||||
|
|
||||||
this.find_bttv(10);
|
this.find_bttv(10);
|
||||||
|
|
@ -280,6 +280,7 @@ FFZ.prototype.init_dashboard = function(delay) {
|
||||||
|
|
||||||
// Start this early, for quick loading.
|
// Start this early, for quick loading.
|
||||||
this.setup_dark();
|
this.setup_dark();
|
||||||
|
this.setup_css();
|
||||||
|
|
||||||
this.ws_create();
|
this.ws_create();
|
||||||
this.setup_colors();
|
this.setup_colors();
|
||||||
|
|
@ -289,7 +290,6 @@ FFZ.prototype.init_dashboard = function(delay) {
|
||||||
this.setup_tokenization();
|
this.setup_tokenization();
|
||||||
this.setup_notifications();
|
this.setup_notifications();
|
||||||
this.setup_following_count(false);
|
this.setup_following_count(false);
|
||||||
this.setup_css();
|
|
||||||
this.setup_menu();
|
this.setup_menu();
|
||||||
|
|
||||||
this._update_subscribers();
|
this._update_subscribers();
|
||||||
|
|
@ -321,6 +321,7 @@ FFZ.prototype.init_ember = function(delay) {
|
||||||
|
|
||||||
// Start this early, for quick loading.
|
// Start this early, for quick loading.
|
||||||
this.setup_dark();
|
this.setup_dark();
|
||||||
|
this.setup_css();
|
||||||
|
|
||||||
this.ws_create();
|
this.ws_create();
|
||||||
this.setup_emoticons();
|
this.setup_emoticons();
|
||||||
|
|
@ -347,7 +348,6 @@ FFZ.prototype.init_ember = function(delay) {
|
||||||
//this.setup_teams();
|
//this.setup_teams();
|
||||||
|
|
||||||
this.setup_notifications();
|
this.setup_notifications();
|
||||||
this.setup_css();
|
|
||||||
this.setup_menu();
|
this.setup_menu();
|
||||||
this.setup_my_emotes();
|
this.setup_my_emotes();
|
||||||
this.setup_following();
|
this.setup_following();
|
||||||
|
|
|
||||||
3
src/styles/badges-blank.css
Normal file
3
src/styles/badges-blank.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.badges .badge:not(.subscriber) {
|
||||||
|
background-size: 0px;
|
||||||
|
}
|
||||||
5
src/styles/badges-circular-small.css
Normal file
5
src/styles/badges-circular-small.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.badges .badge:not(.subscriber) {
|
||||||
|
height: 10px;
|
||||||
|
min-width: 10px;
|
||||||
|
margin: 5px 3px 5px 0;
|
||||||
|
}
|
||||||
6
src/styles/badges-circular.css
Normal file
6
src/styles/badges-circular.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
.badges .badge:not(.subscriber) {
|
||||||
|
border-radius: 9px;
|
||||||
|
background-size: 16px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
4
src/styles/badges-legacy-mod.css
Normal file
4
src/styles/badges-legacy-mod.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.badges .moderator {
|
||||||
|
background-color: #068c10;
|
||||||
|
background-image: url('//cdn.frankerfacez.com/script/legacy-mod.png');
|
||||||
|
}
|
||||||
4
src/styles/badges-legacy-turbo.css
Normal file
4
src/styles/badges-legacy-turbo.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.badges .turbo {
|
||||||
|
background-color: #6441a3;
|
||||||
|
background-image: url('//cdn.frankerfacez.com/script/legacy-turbo.png');
|
||||||
|
}
|
||||||
14
src/styles/badges-legacy.css
Normal file
14
src/styles/badges-legacy.css
Normal file
|
|
@ -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');
|
||||||
|
}
|
||||||
4
src/styles/badges-rounded.css
Normal file
4
src/styles/badges-rounded.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/* Rounded Badges */
|
||||||
|
.badges .badge:not(.subscriber) {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
12
src/styles/badges-transparent.css
Normal file
12
src/styles/badges-transparent.css
Normal file
|
|
@ -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%);
|
||||||
|
}
|
||||||
96
src/styles/chat-background.css
Normal file
96
src/styles/chat-background.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
4
src/styles/chat-colors-gray.css
Normal file
4
src/styles/chat-colors-gray.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.chat-line:not(.admin):not(.notification) span.from,
|
||||||
|
.chat-line:not(.admin):not(.notification) span.message {
|
||||||
|
color: inherit !important
|
||||||
|
}
|
||||||
16
src/styles/chat-hc-background.css
Normal file
16
src/styles/chat-hc-background.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
6
src/styles/chat-hc-bold.css
Normal file
6
src/styles/chat-hc-bold.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* High-Contrast Bold */
|
||||||
|
.chat-line .from,
|
||||||
|
.chat-line .colon,
|
||||||
|
.chat-line .message {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
15
src/styles/chat-hc-text.css
Normal file
15
src/styles/chat-hc-text.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
15
src/styles/chat-padding.css
Normal file
15
src/styles/chat-padding.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
19
src/styles/chat-separator-3d-inset.css
Normal file
19
src/styles/chat-separator-3d-inset.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
17
src/styles/chat-separator-3d.css
Normal file
17
src/styles/chat-separator-3d.css
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
17
src/styles/chat-separator-wide.css
Normal file
17
src/styles/chat-separator-wide.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
31
src/styles/chat-separator.css
Normal file
31
src/styles/chat-separator.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
18
src/styles/chat-setup.css
Normal file
18
src/styles/chat-setup.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
var FFZ = window.FrankerFaceZ,
|
var FFZ = window.FrankerFaceZ,
|
||||||
|
utils = require('../utils'),
|
||||||
constants = require('../constants');
|
constants = require('../constants');
|
||||||
//styles = require('../styles');
|
styles = require('../styles');
|
||||||
|
|
||||||
FFZ.prototype.setup_css = function() {
|
FFZ.prototype.setup_css = function() {
|
||||||
document.body.classList.toggle('ffz-flip-dashboard', this.settings.flip_dashboard);
|
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));
|
s.setAttribute('href', constants.DIRECT_SERVER + "script/style.css?_=" + (constants.DEBUG ? Date.now() : FFZ.version_info));
|
||||||
document.head.appendChild(s);
|
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');
|
/*var s = this._main_style = document.createElement('style');
|
||||||
|
|
||||||
s.textContent = styles.style;
|
s.textContent = styles.style;
|
||||||
|
|
@ -32,3 +41,14 @@ FFZ.prototype.setup_css = 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);
|
||||||
|
}
|
||||||
389
style.css
389
style.css
|
|
@ -445,6 +445,11 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-togg
|
||||||
|
|
||||||
/* Menu Options */
|
/* 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; }
|
.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,
|
.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);
|
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 */
|
/* Fix Moderation Cards */
|
||||||
|
|
||||||
img.channel_background[src="null"] { display: none; }
|
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;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ffz-chat-background .more-messages-indicator {
|
.more-messages-indicator {
|
||||||
/* This looks better when it's full width. */
|
/* This looks better when it's full width. */
|
||||||
margin: 0 -20px;
|
margin: 0 -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ffz-chat-background .chat-line .message {
|
.chat-line .message {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ffz-chat-background .ember-chat .chat-messages .tse-scroll-content {
|
.ember-chat .chat-messages .tse-scroll-content {
|
||||||
padding: 0;
|
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 */
|
/* Emoticon Tooltips */
|
||||||
|
|
||||||
.ffz-wide-tip .tipsy-inner {
|
.ffz-wide-tip .tipsy-inner {
|
||||||
|
|
@ -1379,7 +1142,11 @@ a.unsafe-link {
|
||||||
color: #a64141 !important;
|
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;
|
color: #d28e8e !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1560,8 +1327,11 @@ th.ffz-row-switch {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ffz-group-tabs .button .notifications:empty,
|
||||||
|
.ffz-room-row td > span:empty,
|
||||||
.ffz-chat-tab span:empty { display: none; }
|
.ffz-chat-tab span:empty { display: none; }
|
||||||
|
|
||||||
|
.ffz-room-row td > span,
|
||||||
.ffz-chat-tab span {
|
.ffz-chat-tab span {
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -1573,6 +1343,29 @@ th.ffz-row-switch {
|
||||||
right: 5px;
|
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 */
|
/* Dark Group Tabs */
|
||||||
|
|
||||||
|
|
@ -1588,6 +1381,7 @@ th.ffz-row-switch {
|
||||||
color: #B9A3E3;
|
color: #B9A3E3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ffz-dark .ffz-room-row td > span,
|
||||||
.app-main.theatre .ffz-chat-tab span,
|
.app-main.theatre .ffz-chat-tab span,
|
||||||
.chat-container.dark .ffz-chat-tab span,
|
.chat-container.dark .ffz-chat-tab span,
|
||||||
.ember-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 */
|
/* Badge Styles */
|
||||||
|
|
||||||
.ffz-rounded-badges .conversation-window .badges .badge:not(.subscriber),
|
/*.ffz-rounded-badges .conversation-window .badges .badge:not(.subscriber),
|
||||||
.ffz-rounded-badges .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; }
|
.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-small-badges .conversation-window .badges .badge:not(.subscriber),
|
||||||
.ffz-circular-badges .conversation-window .badges .badge:not(.subscriber),
|
.ffz-circular-badges .conversation-window .badges .badge:not(.subscriber),
|
||||||
.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber),
|
.ffz-circular-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) {
|
.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%);
|
filter: invert(100%);
|
||||||
-webkit-filter: invert(100%);
|
-webkit-filter: invert(100%);
|
||||||
}
|
}*/
|
||||||
|
|
||||||
/* No Blue */
|
/* 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 .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 .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 .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 .chat-container.dark .chat-commands-dropdown,
|
||||||
.ffz-no-blue .app-main.theatre .chat-container .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 .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; }
|
#small_nav .game_filter.selected .ffz-follow-count { right: 5px; }
|
||||||
|
|
||||||
/* Legacy Badges */
|
/* Image Tooltips */
|
||||||
|
|
||||||
.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 {
|
.ffz-image-hover {
|
||||||
border:none;
|
border:none;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue