mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-07-04 01:58: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.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'))
|
||||
|
|
|
|||
|
|
@ -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 = {};
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = '<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);
|
||||
|
||||
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 = '<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');
|
||||
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) + ' <span>' + unread + '</span>';
|
||||
}));
|
||||
|
||||
name_el.className = 'ffz-room';
|
||||
name_el.innerHTML = utils.sanitize(name);
|
||||
name_el.innerHTML = utils.sanitize(name) + ' <span>' + unread + '</span>';
|
||||
|
||||
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 = '<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'));
|
||||
|
||||
|
|
@ -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 + '<span class="notifications">' + (total_unread || '') + '</span>';
|
||||
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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('<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) {
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
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,
|
||||
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);
|
||||
}
|
||||
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 */
|
||||
|
||||
.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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue