oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-28 05:15:54 +00:00
Code Wiki Activity

More style tweaking. Did a bit of work on the Chat Room Management menu (still disabled). Added server history to moderation cards. Fixed gulpfile to actually work with the new styles that are compiled into the script.

Browse source
This commit is contained in:
SirStendec 2015-11-11 16:03:27 -05:00
parent 3958a37f38
commit 0cabebdf19
15 changed files with 336 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

40
dark.css
View file

@ -63,35 +63,6 @@
color: #fff !important; color: #fff !important;
} }
/* moderation card */
.ember-chat-container.dark .ember-chat .ffz-moderation-card,
.chat-container.dark .ember-chat .ffz-moderation-card,
.app-main.theatre .ember-chat .ffz-moderation-card {
border-color: #1b1b20;
}
.ember-chat-container.dark .ember-chat .moderation-card:focus,
.chat-container.dark .ember-chat .moderation-card:focus,
.app-main.theatre .ember-chat .moderation-card:focus {
border-color: #cbcbcb;
}
.ember-chat-container.dark .ember-chat .moderation-card .interface,
.chat-container.dark .ember-chat .moderation-card .interface,
.app-main.theatre .ember-chat .moderation-card .interface {
background-color: #232329;
}
.ffz-no-blue .ember-chat-container.dark .ember-chat .moderation-card .interface,
.ffz-no-blue .chat-container.dark .ember-chat .moderation-card .interface,
.ffz-no-blue .app-main.theatre .ember-chat .moderation-card .interface {
background-color: #232323;
}
.moderation-card h3.name a { color: #fff !important; }
/* stats */ /* stats */
.ffz-dark .stats-and-actions, .ffz-dark .stats-and-actions,
.ffz-dark #main_col .content #stats_and_actions { .ffz-dark #main_col .content #stats_and_actions {
@ -531,7 +502,7 @@
/* FrankerFaceZ Menu */ /* FrankerFaceZ Menu */
.ffz-dark .ember-chat .chat-menu .list-header { /*.ffz-dark .ember-chat .chat-menu .list-header {
border-top-color: rgba(255,255,255,0.2); border-top-color: rgba(255,255,255,0.2);
} }
@ -553,7 +524,7 @@
.ffz-dark .ffz-ui-popup ul.menu li.active a { .ffz-dark .ffz-ui-popup ul.menu li.active a {
border-top-color: rgb(16,16,16); border-top-color: rgb(16,16,16);
} }*/
/* New User Prompt */ /* New User Prompt */
@ -975,7 +946,7 @@
} }
.ffz-dark .conversations-list .conversations-list-header { .ffz-dark .conversations-list .conversations-list-header {
background: #19191f; background: #121218;
border-bottom: 1px solid #32323e; border-bottom: 1px solid #32323e;
color: #fff color: #fff
} }
@ -989,7 +960,7 @@
} }
.ffz-dark .conversations-list .conversations-list-item:hover { .ffz-dark .conversations-list .conversations-list-item:hover {
background-color: #121217 background-color: #121218;
} }
.ffz-dark .conversation-window { .ffz-dark .conversation-window {
@ -1007,6 +978,9 @@
.ffz-dark .conversation-header { .ffz-dark .conversation-header {
background: #121217; background: #121217;
box-shadow: none; box-shadow: none;
}
.ffz-dark .conversation-window:not(.collapsed) .conversation-header {
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2);
} }

15
gulpfile.js
View file

@ -45,7 +45,7 @@ gulp.task('prepare', ['clean'], function() {
//gulp.task('templates', ['prepare'], function() { //gulp.task('templates', ['prepare'], function() {
// gulp.src(['build/templates/**/*.hbs']) // return gulp.src(['build/templates/**/*.hbs'])
// .pipe(jsEscape()) // .pipe(jsEscape())
// .pipe(wrap('Handlebars.compile(<%= contents %>)')) // .pipe(wrap('Handlebars.compile(<%= contents %>)'))
// .pipe(declare({ // .pipe(declare({
@ -63,7 +63,7 @@ gulp.task('prepare', ['clean'], function() {
gulp.task('styles', ['prepare'], function() { gulp.task('styles', ['prepare'], function() {
gulp.src(['build/styles/**/*.css']) return gulp.src(['build/styles/**/*.css'])
.pipe(minifyCss()) .pipe(minifyCss())
.pipe(jsEscape()) .pipe(jsEscape())
.pipe(declare({ .pipe(declare({
@ -74,14 +74,14 @@ gulp.task('styles', ['prepare'], function() {
return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath); return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath);
} }
})) }))
.pipe(concat('styles.js')) .pipe(concat('compiled_styles.js'))
.pipe(gulp.dest('build/')) .pipe(gulp.dest('build/'))
.on('error', util.log) .on('error', util.log)
}); });
gulp.task('scripts', ['prepare', 'styles'], function() { gulp.task('scripts', ['styles'], function() {
gulp.src(['build/main.js']) return gulp.src(['build/main.js'])
.pipe(browserify()) .pipe(browserify())
.pipe(concat('script.js')) .pipe(concat('script.js'))
.pipe(header('(function(window) {')) .pipe(header('(function(window) {'))
@ -94,7 +94,7 @@ gulp.task('scripts', ['prepare', 'styles'], function() {
}); });
gulp.task('watch', ['default', 'server'], function() { gulp.task('watch', ['default', 'server'], function() {
gulp.watch('src/**/*', ['default']); return gulp.watch('src/**/*', ['default']);
}); });
gulp.task('default', ['scripts']); gulp.task('default', ['scripts']);
@ -130,7 +130,7 @@ gulp.task('upload', ['default'], function() {
.on('error', util.log); .on('error', util.log);
}); });
gulp.task('clear_cache', ['upload'], function() { gulp.task('clear_cache', ['upload'], function(cb) {
// Load credentials from an external file. // Load credentials from an external file.
var contents = fs.readFileSync('credentials.json', 'utf8'), var contents = fs.readFileSync('credentials.json', 'utf8'),
cred = JSON.parse(contents); cred = JSON.parse(contents);
@ -167,6 +167,7 @@ gulp.task('clear_cache', ['upload'], function() {
return util.log("[FAIL] Non-200 Status: " + request.statusCode); return util.log("[FAIL] Non-200 Status: " + request.statusCode);
util.log("[SUCCESS] Cache cleared."); util.log("[SUCCESS] Cache cleared.");
cb();
}); });
}); });

2
src/badges.js
View file

@ -88,6 +88,7 @@ FFZ.settings_info.transparent_badges = {
this.toggle_style('badges-blank', 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-circular-small', val === 4);
this.toggle_style('badges-transparent', val === 5); this.toggle_style('badges-transparent', val === 5);
document.body.classList.toggle('ffz-transparent-badges', val === 5);
} }
}; };
@ -104,6 +105,7 @@ FFZ.prototype.setup_badges = function() {
this.toggle_style('badges-blank', 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-circular-small', val === 4);
this.toggle_style('badges-transparent', val === 5); this.toggle_style('badges-transparent', val === 5);
document.body.classList.toggle('ffz-transparent-badges', val === 5);
} }
this.toggle_style('badges-legacy', this.settings.legacy_badges === 3); this.toggle_style('badges-legacy', this.settings.legacy_badges === 3);

10
src/ember/chatview.js
View file

@ -716,10 +716,10 @@ 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; //total_unread = 0;
for(var room_id in f.rooms) { /*for(var room_id in f.rooms) {
var room = f.rooms[room_id] && f.rooms[room_id].room, var room = f.rooms[room_id] && f.rooms[room_id].room,
is_unread = room && room.get('unreadCount') > 0; is_unread = room && room.get('unreadCount') > 0;
@ -728,11 +728,11 @@ FFZ.prototype._modify_cview = function(view) {
total_unread++; total_unread++;
} else if ( room ) } else if ( room )
room._ffz_was_unread = false; 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 + '<span class="notifications">' + (total_unread || '') + '</span>'; 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');

111
src/ember/moderation-card.js
View file

@ -724,38 +724,82 @@ FFZ.prototype.setup_mod_card = function() {
if ( f.settings.mod_card_history ) { if ( f.settings.mod_card_history ) {
var Chat = App.__container__.lookup('controller:chat'), var Chat = App.__container__.lookup('controller:chat'),
room = Chat && Chat.get('currentRoom'), room = Chat && Chat.get('currentRoom'),
ffz_room = room && f.rooms && f.rooms[room.get('id')], tmiSession = room.tmiSession || (window.TMI && TMI._sessions && TMI._sessions[0]),
user_history = ffz_room && ffz_room.user_history && ffz_room.user_history[controller.get('cardInfo.user.id')]; room_id = room.get('id'),
user_id = controller.get('cardInfo.user.id'),
ffz_room = room && f.rooms && f.rooms[room_id],
user_history = ffz_room && ffz_room.user_history && ffz_room.user_history[user_id] || [],
if ( user_history && user_history.length ) { history = document.createElement('ul');
var history = document.createElement('ul');
history.className = 'interface clearfix chat-history';
for(var i=0; i < user_history.length; i++) { history.className = 'interface clearfix chat-history';
var line = user_history[i],
l_el = document.createElement('li');
l_el.className = 'message-line chat-line clearfix'; if ( user_history.length < 20 ) {
var before = user_history.length > 0 ? user_history[0].date.getTime() : Date.now();
f.ws_send("user_history", [room_id, user_id, 50 - user_history.length], function(success, data) {
if ( ! success )
return;
if ( line.style ) var i = data.length,
l_el.classList.add(line.style); was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight),
first = true;
l_el.innerHTML = (helpers ? '<span class="timestamp float-left">' + helpers.getTime(line.date) + '</span> ' : '') + '<span class="message">' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + '</span>'; while(i--) {
var msg = data[i];
if ( ! msg )
continue;
// Interactivity if ( typeof msg.date === "string" || typeof msg.date === "number" )
jQuery('a.deleted-link', l_el).click(f._deleted_link_click); msg.date = utils.parse_date(msg.date);
jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) });
jQuery('.html-tooltip', l_el).tipsy({html:true});
// Append if ( ! msg.date || msg.date.getTime() >= before )
history.appendChild(l_el); continue;
}
el.appendChild(history); if ( first ) {
first = false;
history.insertBefore(f._build_mod_card_history({
date: msg.date,
from: "jtv",
style: "admin",
cachedTokens: ["(Server History Above)"]
}), history.firstElementChild);
}
// Lazy scroll-to-bottom if ( ! msg.style ) {
history.scrollTop = history.scrollHeight; if ( msg.from === "jtv" )
msg.style = "admin";
else if ( msg.from === "twitchnotify" )
msg.style = "notification";
}
if ( msg.tags && typeof msg.tags.emotes === "string" )
try {
msg.tags.emotes = JSON.parse(msg.tags.emotes);
} catch(err) {
f.log("Error Parsing JSON Emotes: " + err);
msg.tags.emotes = {};
}
if ( ! msg.cachedTokens || ! msg.cachedTokens.length )
f.tokenize_chat_line(msg, true, room.get('roomProperties.hide_chat_links'));
history.insertBefore(f._build_mod_card_history(msg), history.firstElementChild);
if ( history.childElementCount >= 50 )
break;
}
if ( was_at_top )
setTimeout(function() { history.scrollTop = history.scrollHeight; });
});
} }
for(var i=0; i < user_history.length; i++)
history.appendChild(f._build_mod_card_history(user_history[i]));
el.appendChild(history);
// Lazy scroll-to-bottom
history.scrollTop = history.scrollHeight;
} }
// Reposition the menu if it's off-screen. // Reposition the menu if it's off-screen.
@ -785,6 +829,29 @@ FFZ.prototype.setup_mod_card = function() {
} }
FFZ.prototype._build_mod_card_history = function(line) {
var l_el = document.createElement('li'),
f = this;
l_el.className = 'message-line chat-line clearfix';
if ( line.ffz_has_mention )
l_el.classList.add('ffz-mentioned');
if ( line.style )
l_el.classList.add(line.style);
l_el.innerHTML = (helpers ? '<span class="timestamp float-left">' + helpers.getTime(line.date) + '</span> ' : '') + '<span class="message">' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + '</span>';
// Interactivity
jQuery('a.deleted-link', l_el).click(f._deleted_link_click);
jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) });
jQuery('.html-tooltip', l_el).tipsy({html:true});
return l_el;
}
// ---------------- // ----------------
// Aliases // Aliases
// ---------------- // ----------------

15
src/ember/room.js
View file

@ -1201,20 +1201,7 @@ FFZ.prototype._modify_room = function(room) {
was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight); was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight);
if ( history ) { if ( history ) {
var l_el = document.createElement('li'); history.appendChild(f._build_mod_card_history(msg));
l_el.className = 'message-line chat-line clearfix';
if ( msg.style )
l_el.classList.add(msg.style);
l_el.innerHTML = (helpers ? '<span class="timestamp float-left">' + helpers.getTime(msg.date) + '</span> ' : '') + '<span class="message">' + (msg.style === 'action' ? '*' + msg.from + ' ' : '') + f.render_tokens(msg.cachedTokens) + '</span>';
// Interactivity
jQuery('a.deleted-link', l_el).click(f._deleted_link_click);
jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) });
jQuery('.html-tooltip', l_el).tipsy({html:true});
history.appendChild(l_el);
if ( was_at_top ) if ( was_at_top )
setTimeout(function() { history.scrollTop = history.scrollHeight; }) setTimeout(function() { history.scrollTop = history.scrollHeight; })

1
src/ext/betterttv.js
View file

@ -77,6 +77,7 @@ FFZ.prototype.setup_bttv = function(delay) {
this.toggle_style('badges-transparent'); this.toggle_style('badges-transparent');
// Disable other features too. // Disable other features too.
document.body.classList.remove('ffz-transparent-badges');
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");

2
src/main.js
View file

@ -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: 63, major: 3, minor: 5, revision: 65,
toString: function() { toString: function() {
return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || ""); return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
} }

39
src/styles/chat-background.css
View file

@ -14,10 +14,10 @@
.theatre .chat-history .chat-line: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, .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, .dark .chat-history .chat-line:nth-child(2n+0):before,
.ember-chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line:before, .force-dark .chat-history .chat-line:nth-child(2n+0):before,
.chat-container.force-dark .chat-lines > div:nth-child(2n+0) .chat-line:before, .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 { .force-dark .chat-lines > div:nth-child(2n+0) .chat-line:before {
background-color: rgba(255,255,255, 0.05); background-color: rgba(255,255,255, 0.05);
} }
@ -38,21 +38,20 @@
/* DEPRECIATED: DARK THEME: Mention Backgrounds */ /* DEPRECIATED: DARK THEME: Mention Backgrounds */
.ffz-dark .chat-history .chat-line.ffz-mentioned:before, .ffz-dark .chat-history .chat-line.ffz-mentioned:before,
.theatre .ember-chat .chat-line.ffz-mentioned:before, .theatre .chat-line.ffz-mentioned:before,
.chat-container.dark .chat-line.ffz-mentioned:before, .dark .chat-line.ffz-mentioned:before,
.chat-container.force-dark .chat-line.ffz-mentioned:before, .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; background-color: rgba(255,0,0, 0.2) !important;
} }
.theatre .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, .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, .dark .chat-history .chat-line.ffz-mentioned:nth-child(2n+0):before,
.ember-chat-container.dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before, .force-dark .chat-history .chat-line.ffz-mentioned:nth-child(2n+0):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 { .dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before,
.force-dark .chat-lines > div:nth-child(2n+0) .chat-line.ffz-mentioned:before {
background-color: rgba(255,0,0, 0.3) !important; background-color: rgba(255,0,0, 0.3) !important;
} }
@ -61,17 +60,13 @@
/* Chat Mentions */ /* Chat Mentions */
/* TODO: Move this by itself */ /* TODO: Move this by itself */
.ember-chat .mentioned:empty, .mentioned:empty,
.ember-chat .mentioning:empty, .mentioning:empty {
.chat-history .mentioned:empty,
.chat-history .mentioning:empty {
display: none; display: none;
} }
.ember-chat .chat-line .mentioned, .chat-line .mentioned,
.ember-chat .chat-line .mentioning, .chat-line .mentioning {
.chat-history .chat-line .mentioned,
.chat-history .chat-line .mentioning {
border-radius: 10px; border-radius: 10px;
padding: 3px 7px; padding: 3px 7px;
font-weight: bold; font-weight: bold;
@ -83,6 +78,8 @@
.ffz-dark .chat-history .mentioned, .ffz-dark .chat-history .mentioned,
.ffz-dark .chat-history .mentioning, .ffz-dark .chat-history .mentioning,
.app-main.theatre .chat-container .chat-line .mentioned,
.app-main.theatre .chat-container .chat-line .mentioning,
.chat-container.dark .chat-line .mentioned, .chat-container.dark .chat-line .mentioned,
.chat-container.dark .chat-line .mentioning, .chat-container.dark .chat-line .mentioning,
.chat-container.force-dark .chat-line .mentioned, .chat-container.force-dark .chat-line .mentioned,

6
src/styles/chat-separator-3d-inset.css
View file

@ -10,10 +10,8 @@
.theatre .conversation-chat-lines > div:before, .theatre .conversation-chat-lines > div:before,
.theatre .chat-line:before, .theatre .chat-line:before,
.chat-container.dark .chat-line:before, .dark .chat-line:before,
.chat-container.force-dark .chat-line:before, .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-top-color: #000;
border-bottom-color: rgba(255,255,255, 0.1); border-bottom-color: rgba(255,255,255, 0.1);
} }

6
src/styles/chat-separator-3d.css
View file

@ -9,9 +9,7 @@
.theatre .conversation-chat-lines > div:before, .theatre .conversation-chat-lines > div:before,
.theatre .chat-line:before, .theatre .chat-line:before,
.chat-container.dark .chat-line:before, .dark .chat-line:before,
.chat-container.force-dark .chat-line:before, .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); border-top-color: rgba(255,255,255, 0.1);
} }

6
src/styles/chat-separator-wide.css
View file

@ -9,9 +9,7 @@
.theatre .conversation-chat-lines > div:before, .theatre .conversation-chat-lines > div:before,
.theatre .chat-line:before, .theatre .chat-line:before,
.chat-container.dark .chat-line:before, .dark .chat-line:before,
.chat-container.force-dark .chat-line:before, .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-top-color: #000;
} }

6
src/styles/chat-separator.css
View file

@ -9,10 +9,8 @@
.theatre .conversation-chat-lines > div:before, .theatre .conversation-chat-lines > div:before,
.theatre .chat-line:before, .theatre .chat-line:before,
.chat-container.dark .chat-line:before, .dark .chat-line:before,
.chat-container.force-dark .chat-line:before, .force-dark .chat-line:before {
.ember-chat-container.dark .chat-line:before,
.ember-chat-container.force-dark .chat-line:before {
border-bottom-color: #000; border-bottom-color: #000;
} }

4
src/ui/styles.js
View file

@ -1,7 +1,7 @@
var FFZ = window.FrankerFaceZ, var FFZ = window.FrankerFaceZ,
utils = require('../utils'), utils = require('../utils'),
constants = require('../constants'); constants = require('../constants');
styles = require('../styles'); styles = require('../compiled_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);
@ -49,6 +49,6 @@ FFZ.prototype.toggle_style = function(key, enabled) {
return; return;
this._toggle_style_state[key] = enabled; this._toggle_style_state[key] = enabled;
utils.update_css(this._toggle_style, key, enabled ? styles[key] || null : null); utils.update_css(this._toggle_style, key, enabled ? styles[key] || null : null);
} }

295
style.css
View file

@ -290,7 +290,7 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-togg
.ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; } .ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; }
.ffz-theater-stats .app-main.theatre .channel-stats span:not(.live-count) svg path { .ffz-theater-stats .app-main.theatre .channel-stats span:not(.live-count) svg path {
fill: rgba(255,255,255,0.35) !important; fill: rgba(255,255,255,0.35);
} }
.ffz-theater-stats .app-main.theatre .follow-button .notify:before, .ffz-theater-stats .app-main.theatre .follow-button .notify:before,
@ -443,6 +443,76 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-togg
#ffz-race-popup table th { border-bottom: 1px solid; } #ffz-race-popup table th { border-bottom: 1px solid; }
/* Dark Menu */
#ffz-chat-menu { background-color: transparent !important; }
.ffz-dark .ember-chat .chat-menu .list-header,
.theatre .ember-chat .chat-menu .list-header,
.dark .ember-chat .chat-menu .list-header,
.force-dark .ember-chat .chat-menu .list-header {
border-top-color: rgba(255,255,255, 0.2);
}
.ffz-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading,
.theatre .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading,
.dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading,
.force-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .chat-menu-content .heading,
.ffz-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading,
.theatre .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading,
.dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading,
.force-dark .chat-menu.ffz-ui-popup .ffz-ui-menu-page .emoticon-grid .heading,
.ffz-dark .ffz-ui-popup ul.menu,
.theatre .ffz-ui-popup ul.menu,
.dark .ffz-ui-popup ul.menu,
.force-dark .ffz-ui-popup ul.menu,
.ffz-dark .ffz-ui-popup ul.menu a,
.theatre .ffz-ui-popup ul.menu a,
.dark .ffz-ui-popup ul.menu a,
.force-dark .ffz-ui-popup ul.menu a,
.ffz-sidebar-swap.ffz-dark .ffz-ui-popup ul.menu a,
.ffz-sidebar-swap .theatre .ffz-ui-popup ul.menu a,
.ffz-sidebar-swap .dark .ffz-ui-popup ul.menu a,
.ffz-sidebar-swap .force-dark .ffz-ui-popup ul.menu a {
border-color: #32323e;
}
.ffz-dark .ffz-ui-popup ul.menu,
.theatre .ffz-ui-popup ul.menu,
.dark .ffz-ui-popup ul.menu,
.force-dark .ffz-ui-popup ul.menu {
background-color: #212121;
}
.ffz-dark .ffz-ui-popup ul.menu li.active,
.theatre .ffz-ui-popup ul.menu li.active,
.dark .ffz-ui-popup ul.menu li.active,
.force-dark .ffz-ui-popup ul.menu li.active {
background-color: #101010;
}
.ffz-dark .ffz-ui-popup ul.menu li.active a,
.theatre .ffz-ui-popup ul.menu li.active a,
.dark .ffz-ui-popup ul.menu li.active a,
.force-dark .ffz-ui-popup ul.menu li.active a {
border-top-color: #101010;
}
.ffz-dark .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
.theatre .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
.dark .ffz-ui-popup.emoticon-selector .emoticon-selector-box,
.force-dark .ffz-ui-popup.emoticon-selector .emoticon-selector-box {
background-color: #101010;
color: #c3c3c3;
border-color: #32323e;
}
/* Menu Options */ /* Menu Options */
.emoticon-selector .emoticon-selector-box .subscribe-message { .emoticon-selector .emoticon-selector-box .subscribe-message {
@ -598,7 +668,7 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .emoticon-selector-togg
pointer-events: auto; pointer-events: auto;
} }
.ember-chat .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box .emoticon-grid { background-color: transparent; } .ember-chat .chat-interface .ffz-ui-popup.emoticon-selector .emoticon-selector-box .emoticon-grid { background-color: transparent !important; }
.app-main.theatre .ffz-ui-popup ul.menu, .app-main.theatre .ffz-ui-popup ul.menu,
.chat-container.dark .ffz-ui-popup ul.menu, .chat-container.dark .ffz-ui-popup ul.menu,
@ -852,21 +922,27 @@ span.ffz-handle:after { left: 8px }
box-shadow: 0 0 1px 1px rgba(255,255,255,0.25); box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
} }
.ffz-dark .chat-history::-webkit-scrollbar-thumb,
.ffz-dark .table::-webkit-scrollbar-thumb, .ffz-dark .table::-webkit-scrollbar-thumb,
.ffz-dark .conversation-window .conversation-content::-webkit-scrollbar-thumb, .ffz-dark .conversation-window .conversation-content::-webkit-scrollbar-thumb,
.ffz-dark .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, .ffz-dark .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
.app-main.theatre .conversation-window .conversation-content::-webkit-scrollbar-thumb,
.app-main.theatre .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, .theatre .conversation-window .conversation-content::-webkit-scrollbar-thumb,
.ember-chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .theatre .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb,
.chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
.app-main.theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, .theatre .chat-history::-webkit-scrollbar-thumb,
.ember-chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, .theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
.chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, .theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb,
.app-main.theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb, .theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb
.ember-chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb,
.chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb, .dark .chat-history::-webkit-scrollbar-thumb,
.app-main.theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb { .dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb,
.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb,
.force-dark .chat-history::-webkit-scrollbar-thumb,
.force-dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb,
.force-dark .ffz-ui-menu-page::-webkit-scrollbar-thumb,
.force-dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.6); background: rgba(255,255,255,0.6);
box-shadow: 0 0 1px 1px rgba(0,0,0,0.25); box-shadow: 0 0 1px 1px rgba(0,0,0,0.25);
} }
@ -875,25 +951,25 @@ span.ffz-handle:after { left: 8px }
img.channel_background[src="null"] { display: none; } img.channel_background[src="null"] { display: none; }
.ember-chat .ffz-moderation-card { .ffz-moderation-card {
border: 2px solid #cbcbcb; border: 2px solid #cbcbcb;
max-width: 340px; max-width: 340px;
/*box-shadow: #808080 0 0 5px;*/ /*box-shadow: #808080 0 0 5px;*/
} }
.ember-chat .ffz-moderation-card .extra-interface { .ffz-moderation-card .extra-interface {
padding-top: 0; padding-top: 0;
} }
.ember-chat .ffz-moderation-card .extra-interface + .extra-interface { .ffz-moderation-card .extra-interface + .extra-interface {
margin-top: -10px; margin-top: -10px;
} }
.ember-chat .ffz-moderation-card.ffz-has-info h3.name { .ffz-moderation-card.ffz-has-info h3.name {
margin-top: 0; margin-top: 0;
} }
.ember-chat .ffz-moderation-card .info { .ffz-moderation-card .info {
float: none; float: none;
position: relative; position: relative;
z-index: 4; z-index: 4;
@ -902,72 +978,101 @@ img.channel_background[src="null"] { display: none; }
line-height: 18px; line-height: 18px;
} }
.ember-chat .ffz-moderation-card .info.channel-stats .stat { .ffz-moderation-card .info.channel-stats .stat {
color: #fff; color: #fff !important;
} }
.ember-chat .ffz-moderation-card .info.channel-stats .stat svg { .ffz-moderation-card .info.channel-stats .stat svg {
margin: 1px 5px 1px 0; margin: 1px 5px 1px 0;
pointer-events: none; pointer-events: none;
} }
.ember-chat .ffz-moderation-card .info svg path { fill: #fff; } .ffz-moderation-card .info svg path { fill: #fff !important; }
.ember-chat .ffz-moderation-card button { .ffz-moderation-card button {
margin: 0; margin: 0;
padding: 0 5px; padding: 0 5px;
} }
.ember-chat .ffz-moderation-card button:not(.glyph-only):hover, .ffz-moderation-card button:not(.glyph-only):hover,
.ember-chat .ffz-moderation-card button:not(.glyph-only):focus { .ffz-moderation-card button:not(.glyph-only):focus {
color: #fff; color: #fff;
background-color: rgba(117,80,186, 1); background-color: rgba(117,80,186, 1);
} }
.ember-chat .ffz-moderation-card button.message { .ffz-moderation-card button.message {
height: 30px; width: 28px; height: 30px; width: 28px;
} }
.ember-chat .ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type, .ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type,
.ember-chat .ffz-moderation-card .interface span.right { .ffz-moderation-card .interface span.right {
float: right; float: right;
} }
.ember-chat .ffz-moderation-card:focus { .ffz-moderation-card:focus {
outline: none; outline: none;
border-color: #444; border-color: #444;
/*box-shadow: #000 0 0 5px;*/ /*box-shadow: #000 0 0 5px;*/
} }
.ember-chat .ffz-moderation-card .interface:not(:last-of-type) { .ffz-moderation-card .interface:not(:last-of-type) {
border-bottom: none; border-bottom: none;
} }
.ember-chat .ffz-moderation-card .interface { .ffz-moderation-card .interface {
border-top: none; border-top: none;
} }
.ember-chat .ffz-moderation-card h3.name { display: inline-block; } .ffz-moderation-card h3.name { display: inline-block; }
.ember-chat .ffz-moderation-card .info, .ffz-moderation-card .info,
.ember-chat .ffz-moderation-card h3.name { .ffz-moderation-card h3.name {
text-shadow: black 0 0 5px; text-shadow: black 0 0 5px;
} }
.ember-chat .ffz-moderation-card .channel_background { .ffz-moderation-card .channel_background {
width: 100%; width: 100%;
top: 0; top: 0;
} }
body:not(.ffz-chat-purge-icon) .ember-chat .mod-icons .purge { display: none; } /* dark moderation card */
.ember-chat .mod-icons .purge { .dark .ffz-moderation-card,
.force-dark .ffz-moderation-card,
.theatre .ffz-moderation-card {
border-color: #1b1b20;
}
.dark .ffz-moderation-card:focus,
.force-dark .ffz-moderation-card:focus,
.theatre .ffz-moderation-card:focus {
border-color: #cbcbcb;
}
.dark .ffz-moderation-card .interface,
.force-dark .ffz-moderation-card .interface,
.theatre .ffz-moderation-card .interface {
background-color: #232329;
}
.ffz-no-blue .dark .ember-chat .moderation-card .interface,
.ffz-no-blue .force-dark .ember-chat .moderation-card .interface,
.ffz-no-blue .theatre .ember-chat .moderation-card .interface {
background-color: #232323;
}
.moderation-card h3.name a { color: #fff !important; }
/* purge icon */
.mod-icons .purge {
background-image: url('//cdn.frankerfacez.com/script/PurgeButton.svg'); background-image: url('//cdn.frankerfacez.com/script/PurgeButton.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.ember-chat .mod-icons .custom { .mod-icons .custom {
text-indent: 0; text-indent: 0;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -1454,7 +1559,7 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
max-height: 200px; max-height: 200px;
overflow-y: scroll; overflow-y: auto;
} }
.chat-history.interface li:first-child { padding-top: 10px; } .chat-history.interface li:first-child { padding-top: 10px; }
@ -1618,51 +1723,6 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
border-right-color: transparent; border-right-color: transparent;
} }
/* Badge Styles */
/*.ffz-rounded-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-rounded-badges .ember-chat .badges .badge:not(.subscriber) { border-radius: 2px; }*/
/*.ffz-circular-blank-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber),
.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
.ffz-circular-badges .ember-chat .badges .badge:not(.subscriber) {
border-radius: 9px;
background-size: 16px;
background-repeat: no-repeat;
background-position: center center;
}
.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-blank-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber),
.ffz-circular-blank-badges .ember-chat .badges .badge:not(.subscriber) {
background-size: 0px;
}
.ffz-circular-small-badges .conversation-window .badges .badge:not(.subscriber),
.ffz-circular-small-badges .ember-chat .badges .badge:not(.subscriber) {
height: 10px;
min-width: 10px;
margin: 5px 3px 5px 0;
}
.ffz-transparent-badges .conversation-window .badges .badge,
.ffz-transparent-badges .ember-chat .badges .badge {
background-color: transparent !important;
}
.ffz-transparent-badges:not(.ffz-dark) .app-main:not(.theatre) .conversation-window .badges .badge:not(.ffz-badge-0):not(.subscriber),
.ffz-transparent-badges > .chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
.ffz-transparent-badges > .ember-chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
.ffz-transparent-badges .app-main:not(.theatre) .chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber),
.ffz-transparent-badges .app-main:not(.theatre) .ember-chat-container:not(.dark):not(.force-dark) .ember-chat .badges .badge:not(.ffz-badge-0):not(.subscriber) {
filter: invert(100%);
-webkit-filter: invert(100%);
}*/
/* No Blue */ /* No Blue */
.ffz-no-blue .theatre .conversations-list-icon, .ffz-no-blue .theatre .conversations-list-icon,
@ -1671,8 +1731,6 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
.ffz-no-blue.ffz-dark .conversations-list, .ffz-no-blue.ffz-dark .conversations-list,
.ffz-no-blue .theatre .conversation-window, .ffz-no-blue .theatre .conversation-window,
.ffz-no-blue.ffz-dark .conversation-window, .ffz-no-blue.ffz-dark .conversation-window,
.ffz-no-blue .theatre .conversations-list .conversations-list-header,
.ffz-no-blue.ffz-dark .conversations-list .conversations-list-header,
.ffz-no-blue #large_nav .content, .ffz-no-blue #large_nav .content,
.ffz-no-blue #small_nav .content, .ffz-no-blue #small_nav .content,
@ -1777,6 +1835,8 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
.ffz-no-blue .theatre .conversation-header, .ffz-no-blue .theatre .conversation-header,
.ffz-no-blue.ffz-dark .conversation-header, .ffz-no-blue.ffz-dark .conversation-header,
.ffz-no-blue .theatre .conversations-list .conversations-list-header,
.ffz-no-blue.ffz-dark .conversations-list .conversations-list-header,
.ffz-no-blue .theatre .conversation-window.has-focus .conversation-header, .ffz-no-blue .theatre .conversation-window.has-focus .conversation-header,
.ffz-no-blue.ffz-dark .conversation-window.has-focus .conversation-header, .ffz-no-blue.ffz-dark .conversation-window.has-focus .conversation-header,
.ffz-no-blue .theatre .conversations-list .conversations-list-item:hover, .ffz-no-blue .theatre .conversations-list .conversations-list-item:hover,
@ -1993,22 +2053,25 @@ body:not(.ffz-conv-title-clickable) .conversation-header a.conversation-header-n
.conversation-window.has-unread .conversation-header .conversation-header-name { color: #fff !important; } .conversation-window.has-unread .conversation-header .conversation-header-name { color: #fff !important; }
.ffz-top-conversations .conversation-window.collapsed .conversation-header, .ffz-top-conversations:not(.ffz-bttv) .conversation-window.collapsed .conversation-header {
.conversations-list .conversations-list-item:last-of-type { box-shadow: none;
}
.conversations-list:not(.ffz-bttv) .conversations-list-item:last-of-type {
border-bottom: none !important; border-bottom: none !important;
} }
.ffz-top-conversations .conversations-content .conversations-list-icon, .ffz-top-conversations:not(.ffz-bttv) .conversations-content .conversations-list-icon,
.ffz-top-conversations .conversation-window { .ffz-top-conversations:not(.ffz-bttv) .conversation-window {
border: 1px solid #dedede;
border-top: 0; border-top: 0;
border-bottom: 1px solid #dedede;
} }
.ffz-top-conversations.ffz-dark .conversations-content .conversations-list-icon, .ffz-top-conversations.ffz-dark:not(.ffz-bttv) .conversations-content .conversations-list-icon,
.ffz-top-conversations.ffz-dark .conversation-window, .ffz-top-conversations.ffz-dark:not(.ffz-bttv) .conversation-window,
.ffz-top-conversations .theatre .conversations-content .conversations-list-icon, .ffz-top-conversations:not(.ffz-bttv) .theatre .conversations-content .conversations-list-icon,
.ffz-top-conversations .theatre .conversation-window { .ffz-top-conversations:not(.ffz-bttv) .theatre .conversation-window {
border-bottom-color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.2);
} }
.ffz-top-conversations .conversations-content { .ffz-top-conversations .conversations-content {
@ -2024,14 +2087,44 @@ body:not(.ffz-conv-title-clickable) .conversation-header a.conversation-header-n
.ffz-top-conversations .conversations-list { .ffz-top-conversations .conversations-list {
bottom: inherit; bottom: inherit;
top: 46px; top: 54px;
} }
.ffz-top-conversations .conversations-list:before, .ffz-top-conversations.ffz-bttv .conversations-list { top: 46px; }
.ffz-top-conversations .conversations-list:after {
display:none; .ffz-top-conversations.ffz-bttv .conversations-list:before,
.ffz-top-conversations.ffz-bttv .conversations-list:after { display: none; }
.ffz-top-conversations:not(.ffz-bttv) .conversations-list:before,
.ffz-top-conversations:not(.ffz-bttv) .conversations-list:after {
bottom: 100%;
top: auto;
} }
.ffz-top-conversations:not(.ffz-bttv) .conversations-list:before {
border-top-color: transparent;
border-bottom-color: #dedede;
}
.ffz-top-conversations:not(.ffz-bttv) .conversations-list:after {
border-top-color: transparent;
border-bottom-color: #f2f2f2;
}
.ffz-dark.ffz-top-conversations:not(.ffz-bttv) .conversations-list:before,
.ffz-top-conversations:not(.ffz-bttv) .theatre .conversations-list:before {
border-top-color: transparent;
border-bottom-color: #32323e;
}
.ffz-dark.ffz-top-conversations:not(.ffz-bttv) .conversations-list:after,
.ffz-top-conversations:not(.ffz-bttv) .theatre .conversations-list:after {
border-top-color: transparent;
border-bottom-color: #121212;
}
.ffz-top-conversations .theatre .player-controls-bottom { .ffz-top-conversations .theatre .player-controls-bottom {
padding-bottom: 0; padding-bottom: 0;
} }