diff --git a/dark.css b/dark.css index 0f33d367..696bc969 100644 --- a/dark.css +++ b/dark.css @@ -63,35 +63,6 @@ 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 */ .ffz-dark .stats-and-actions, .ffz-dark #main_col .content #stats_and_actions { @@ -531,7 +502,7 @@ /* 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); } @@ -553,7 +524,7 @@ .ffz-dark .ffz-ui-popup ul.menu li.active a { border-top-color: rgb(16,16,16); -} +}*/ /* New User Prompt */ @@ -975,7 +946,7 @@ } .ffz-dark .conversations-list .conversations-list-header { - background: #19191f; + background: #121218; border-bottom: 1px solid #32323e; color: #fff } @@ -989,7 +960,7 @@ } .ffz-dark .conversations-list .conversations-list-item:hover { - background-color: #121217 + background-color: #121218; } .ffz-dark .conversation-window { @@ -1007,6 +978,9 @@ .ffz-dark .conversation-header { background: #121217; box-shadow: none; +} + +.ffz-dark .conversation-window:not(.collapsed) .conversation-header { border-bottom: 1px solid rgba(255,255,255,0.2); } diff --git a/gulpfile.js b/gulpfile.js index 97ff6c69..071873ab 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -45,7 +45,7 @@ gulp.task('prepare', ['clean'], function() { //gulp.task('templates', ['prepare'], function() { -// gulp.src(['build/templates/**/*.hbs']) +// return gulp.src(['build/templates/**/*.hbs']) // .pipe(jsEscape()) // .pipe(wrap('Handlebars.compile(<%= contents %>)')) // .pipe(declare({ @@ -63,7 +63,7 @@ gulp.task('prepare', ['clean'], function() { gulp.task('styles', ['prepare'], function() { - gulp.src(['build/styles/**/*.css']) + return gulp.src(['build/styles/**/*.css']) .pipe(minifyCss()) .pipe(jsEscape()) .pipe(declare({ @@ -74,14 +74,14 @@ gulp.task('styles', ['prepare'], function() { return declare.processNameByPath((match && match.length > 1) ? match[1] : filePath); } })) - .pipe(concat('styles.js')) + .pipe(concat('compiled_styles.js')) .pipe(gulp.dest('build/')) .on('error', util.log) }); -gulp.task('scripts', ['prepare', 'styles'], function() { - gulp.src(['build/main.js']) +gulp.task('scripts', ['styles'], function() { + return gulp.src(['build/main.js']) .pipe(browserify()) .pipe(concat('script.js')) .pipe(header('(function(window) {')) @@ -94,7 +94,7 @@ gulp.task('scripts', ['prepare', 'styles'], function() { }); gulp.task('watch', ['default', 'server'], function() { - gulp.watch('src/**/*', ['default']); + return gulp.watch('src/**/*', ['default']); }); gulp.task('default', ['scripts']); @@ -130,7 +130,7 @@ gulp.task('upload', ['default'], function() { .on('error', util.log); }); -gulp.task('clear_cache', ['upload'], function() { +gulp.task('clear_cache', ['upload'], function(cb) { // Load credentials from an external file. var contents = fs.readFileSync('credentials.json', 'utf8'), cred = JSON.parse(contents); @@ -167,6 +167,7 @@ gulp.task('clear_cache', ['upload'], function() { return util.log("[FAIL] Non-200 Status: " + request.statusCode); util.log("[SUCCESS] Cache cleared."); + cb(); }); }); diff --git a/src/badges.js b/src/badges.js index 8069db51..453e0301 100644 --- a/src/badges.js +++ b/src/badges.js @@ -88,6 +88,7 @@ FFZ.settings_info.transparent_badges = { 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-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-circular-small', val === 4); 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); diff --git a/src/ember/chatview.js b/src/ember/chatview.js index 4170960e..e49f0c1d 100644 --- a/src/ember/chatview.js +++ b/src/ember/chatview.js @@ -716,10 +716,10 @@ FFZ.prototype._modify_cview = function(view) { tabs.innerHTML = ""; var link = document.createElement('a'), - view = this, - total_unread = 0; + view = this; + //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, is_unread = room && room.get('unreadCount') > 0; @@ -728,11 +728,11 @@ FFZ.prototype._modify_cview = function(view) { 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 + '' + (total_unread || '') + ''; + link.innerHTML = constants.ROOMS; // + '' + (total_unread || '') + ''; link.addEventListener('click', function() { var controller = view.get('controller'); diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js index 83929d55..536dafc8 100644 --- a/src/ember/moderation-card.js +++ b/src/ember/moderation-card.js @@ -724,38 +724,82 @@ FFZ.prototype.setup_mod_card = function() { if ( f.settings.mod_card_history ) { var Chat = App.__container__.lookup('controller:chat'), room = Chat && Chat.get('currentRoom'), - ffz_room = room && f.rooms && f.rooms[room.get('id')], - user_history = ffz_room && ffz_room.user_history && ffz_room.user_history[controller.get('cardInfo.user.id')]; + tmiSession = room.tmiSession || (window.TMI && TMI._sessions && TMI._sessions[0]), + 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 ) { - var history = document.createElement('ul'); - history.className = 'interface clearfix chat-history'; + history = document.createElement('ul'); - for(var i=0; i < user_history.length; i++) { - var line = user_history[i], - l_el = document.createElement('li'); + history.className = 'interface clearfix chat-history'; - 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 ) - l_el.classList.add(line.style); + var i = data.length, + was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight), + first = true; - l_el.innerHTML = (helpers ? '' + helpers.getTime(line.date) + ' ' : '') + '' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + ''; + while(i--) { + var msg = data[i]; + if ( ! msg ) + continue; - // 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}); + if ( typeof msg.date === "string" || typeof msg.date === "number" ) + msg.date = utils.parse_date(msg.date); - // Append - history.appendChild(l_el); - } + if ( ! msg.date || msg.date.getTime() >= before ) + 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 - history.scrollTop = history.scrollHeight; + if ( ! msg.style ) { + 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. @@ -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 ? '' + helpers.getTime(line.date) + ' ' : '') + '' + (line.style === 'action' ? '*' + line.from + ' ' : '') + f.render_tokens(line.cachedTokens) + ''; + + // Interactivity + jQuery('a.deleted-link', l_el).click(f._deleted_link_click); + jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) }); + jQuery('.html-tooltip', l_el).tipsy({html:true}); + + return l_el; +} + + // ---------------- // Aliases // ---------------- diff --git a/src/ember/room.js b/src/ember/room.js index 079a9c97..885366d7 100644 --- a/src/ember/room.js +++ b/src/ember/room.js @@ -1201,20 +1201,7 @@ FFZ.prototype._modify_room = function(room) { was_at_top = history && history.scrollTop >= (history.scrollHeight - history.clientHeight); if ( history ) { - var l_el = document.createElement('li'); - l_el.className = 'message-line chat-line clearfix'; - - if ( msg.style ) - l_el.classList.add(msg.style); - - l_el.innerHTML = (helpers ? '' + helpers.getTime(msg.date) + ' ' : '') + '' + (msg.style === 'action' ? '*' + msg.from + ' ' : '') + f.render_tokens(msg.cachedTokens) + ''; - - // Interactivity - jQuery('a.deleted-link', l_el).click(f._deleted_link_click); - jQuery('img.emoticon', l_el).click(function(e) { f._click_emote(this, e) }); - jQuery('.html-tooltip', l_el).tipsy({html:true}); - - history.appendChild(l_el); + history.appendChild(f._build_mod_card_history(msg)); if ( was_at_top ) setTimeout(function() { history.scrollTop = history.scrollHeight; }) diff --git a/src/ext/betterttv.js b/src/ext/betterttv.js index 8ea6a260..06d2637c 100644 --- a/src/ext/betterttv.js +++ b/src/ext/betterttv.js @@ -77,6 +77,7 @@ FFZ.prototype.setup_bttv = function(delay) { this.toggle_style('badges-transparent'); // Disable other features too. + document.body.classList.remove('ffz-transparent-badges'); document.body.classList.remove("ffz-sidebar-swap"); document.body.classList.remove("ffz-portrait"); document.body.classList.remove("ffz-flip-dashboard"); diff --git a/src/main.js b/src/main.js index 2459a354..ed9f7ae0 100644 --- a/src/main.js +++ b/src/main.js @@ -22,7 +22,7 @@ FFZ.get = function() { return FFZ.instance; } // Version var VER = FFZ.version_info = { - major: 3, minor: 5, revision: 63, + major: 3, minor: 5, revision: 65, toString: function() { return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || ""); } diff --git a/src/styles/chat-background.css b/src/styles/chat-background.css index 3df6b9d3..1b6246bc 100644 --- a/src/styles/chat-background.css +++ b/src/styles/chat-background.css @@ -14,10 +14,10 @@ .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 { +.dark .chat-history .chat-line:nth-child(2n+0):before, +.force-dark .chat-history .chat-line:nth-child(2n+0):before, +.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); } @@ -38,21 +38,20 @@ /* 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 { +.theatre .chat-line.ffz-mentioned:before, +.dark .chat-line.ffz-mentioned:before, +.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 { +.dark .chat-history .chat-line.ffz-mentioned:nth-child(2n+0):before, +.force-dark .chat-history .chat-line.ffz-mentioned:nth-child(2n+0):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; } @@ -61,17 +60,13 @@ /* Chat Mentions */ /* TODO: Move this by itself */ -.ember-chat .mentioned:empty, -.ember-chat .mentioning:empty, -.chat-history .mentioned:empty, -.chat-history .mentioning:empty { +.mentioned:empty, +.mentioning:empty { display: none; } -.ember-chat .chat-line .mentioned, -.ember-chat .chat-line .mentioning, -.chat-history .chat-line .mentioned, -.chat-history .chat-line .mentioning { +.chat-line .mentioned, +.chat-line .mentioning { border-radius: 10px; padding: 3px 7px; font-weight: bold; @@ -83,6 +78,8 @@ .ffz-dark .chat-history .mentioned, .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 .mentioning, .chat-container.force-dark .chat-line .mentioned, diff --git a/src/styles/chat-separator-3d-inset.css b/src/styles/chat-separator-3d-inset.css index 207c57a5..0f64d2ca 100644 --- a/src/styles/chat-separator-3d-inset.css +++ b/src/styles/chat-separator-3d-inset.css @@ -10,10 +10,8 @@ .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 { +.dark .chat-line:before, +.force-dark .chat-line:before { border-top-color: #000; border-bottom-color: rgba(255,255,255, 0.1); } \ No newline at end of file diff --git a/src/styles/chat-separator-3d.css b/src/styles/chat-separator-3d.css index 92d17ce5..a4b17c1a 100644 --- a/src/styles/chat-separator-3d.css +++ b/src/styles/chat-separator-3d.css @@ -9,9 +9,7 @@ .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 { +.dark .chat-line:before, +.force-dark .chat-line:before { border-top-color: rgba(255,255,255, 0.1); } \ No newline at end of file diff --git a/src/styles/chat-separator-wide.css b/src/styles/chat-separator-wide.css index 287dd1bf..d7d22f18 100644 --- a/src/styles/chat-separator-wide.css +++ b/src/styles/chat-separator-wide.css @@ -9,9 +9,7 @@ .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 { +.dark .chat-line:before, +.force-dark .chat-line:before { border-top-color: #000; } \ No newline at end of file diff --git a/src/styles/chat-separator.css b/src/styles/chat-separator.css index ca798fee..2aad25cd 100644 --- a/src/styles/chat-separator.css +++ b/src/styles/chat-separator.css @@ -9,10 +9,8 @@ .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 { +.dark .chat-line:before, +.force-dark .chat-line:before { border-bottom-color: #000; } diff --git a/src/ui/styles.js b/src/ui/styles.js index 39465d82..b8b8a4b0 100644 --- a/src/ui/styles.js +++ b/src/ui/styles.js @@ -1,7 +1,7 @@ var FFZ = window.FrankerFaceZ, utils = require('../utils'), constants = require('../constants'); - styles = require('../styles'); + styles = require('../compiled_styles'); FFZ.prototype.setup_css = function() { document.body.classList.toggle('ffz-flip-dashboard', this.settings.flip_dashboard); @@ -49,6 +49,6 @@ FFZ.prototype.toggle_style = function(key, enabled) { return; this._toggle_style_state[key] = enabled; - + utils.update_css(this._toggle_style, key, enabled ? styles[key] || null : null); } \ No newline at end of file diff --git a/style.css b/style.css index 847cd8fe..0a3af431 100644 --- a/style.css +++ b/style.css @@ -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 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, @@ -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; } +/* 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 */ .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; } -.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, .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); } -.ffz-dark .chat-history::-webkit-scrollbar-thumb, .ffz-dark .table::-webkit-scrollbar-thumb, .ffz-dark .conversation-window .conversation-content::-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, -.ember-chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, -.chat-container.dark .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, -.app-main.theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, -.ember-chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, -.chat-container.dark .ffz-ui-menu-page::-webkit-scrollbar-thumb, -.app-main.theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb, -.ember-chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb, -.chat-container.dark .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb, -.app-main.theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb { + +.theatre .conversation-window .conversation-content::-webkit-scrollbar-thumb, +.theatre .conversations-list .conversations-list-inner::-webkit-scrollbar-thumb, + +.theatre .chat-history::-webkit-scrollbar-thumb, +.theatre .emoticon-selector-box .all-emotes::-webkit-scrollbar-thumb, +.theatre .ffz-ui-menu-page::-webkit-scrollbar-thumb, +.theatre .ffz-ui-sub-menu-page::-webkit-scrollbar-thumb + +.dark .chat-history::-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); 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; } -.ember-chat .ffz-moderation-card { +.ffz-moderation-card { border: 2px solid #cbcbcb; max-width: 340px; /*box-shadow: #808080 0 0 5px;*/ } -.ember-chat .ffz-moderation-card .extra-interface { +.ffz-moderation-card .extra-interface { padding-top: 0; } -.ember-chat .ffz-moderation-card .extra-interface + .extra-interface { +.ffz-moderation-card .extra-interface + .extra-interface { margin-top: -10px; } -.ember-chat .ffz-moderation-card.ffz-has-info h3.name { +.ffz-moderation-card.ffz-has-info h3.name { margin-top: 0; } -.ember-chat .ffz-moderation-card .info { +.ffz-moderation-card .info { float: none; position: relative; z-index: 4; @@ -902,72 +978,101 @@ img.channel_background[src="null"] { display: none; } line-height: 18px; } -.ember-chat .ffz-moderation-card .info.channel-stats .stat { - color: #fff; +.ffz-moderation-card .info.channel-stats .stat { + 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; 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; padding: 0 5px; } -.ember-chat .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):hover, +.ffz-moderation-card button:not(.glyph-only):focus { color: #fff; background-color: rgba(117,80,186, 1); } -.ember-chat .ffz-moderation-card button.message { +.ffz-moderation-card button.message { height: 30px; width: 28px; } -.ember-chat .ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type, -.ember-chat .ffz-moderation-card .interface span.right { +.ffz-moderation-card.ffz-is-mod .interface .mod-controls:last-of-type, +.ffz-moderation-card .interface span.right { float: right; } -.ember-chat .ffz-moderation-card:focus { +.ffz-moderation-card:focus { outline: none; border-color: #444; /*box-shadow: #000 0 0 5px;*/ } -.ember-chat .ffz-moderation-card .interface:not(:last-of-type) { +.ffz-moderation-card .interface:not(:last-of-type) { border-bottom: none; } -.ember-chat .ffz-moderation-card .interface { +.ffz-moderation-card .interface { 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, -.ember-chat .ffz-moderation-card h3.name { +.ffz-moderation-card .info, +.ffz-moderation-card h3.name { text-shadow: black 0 0 5px; } -.ember-chat .ffz-moderation-card .channel_background { +.ffz-moderation-card .channel_background { width: 100%; 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-repeat: no-repeat; } -.ember-chat .mod-icons .custom { +.mod-icons .custom { text-indent: 0; text-align: center; text-decoration: none; @@ -1454,7 +1559,7 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar list-style-type: none; padding: 0; max-height: 200px; - overflow-y: scroll; + overflow-y: auto; } .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; } -/* 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 */ .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 .theatre .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 #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.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.ffz-dark .conversation-window.has-focus .conversation-header, .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; } -.ffz-top-conversations .conversation-window.collapsed .conversation-header, -.conversations-list .conversations-list-item:last-of-type { +.ffz-top-conversations:not(.ffz-bttv) .conversation-window.collapsed .conversation-header { + box-shadow: none; +} + +.conversations-list:not(.ffz-bttv) .conversations-list-item:last-of-type { border-bottom: none !important; } -.ffz-top-conversations .conversations-content .conversations-list-icon, -.ffz-top-conversations .conversation-window { +.ffz-top-conversations:not(.ffz-bttv) .conversations-content .conversations-list-icon, +.ffz-top-conversations:not(.ffz-bttv) .conversation-window { + border: 1px solid #dedede; border-top: 0; - border-bottom: 1px solid #dedede; } -.ffz-top-conversations.ffz-dark .conversations-content .conversations-list-icon, -.ffz-top-conversations.ffz-dark .conversation-window, -.ffz-top-conversations .theatre .conversations-content .conversations-list-icon, -.ffz-top-conversations .theatre .conversation-window { - border-bottom-color: rgba(255,255,255,0.2); +.ffz-top-conversations.ffz-dark:not(.ffz-bttv) .conversations-content .conversations-list-icon, +.ffz-top-conversations.ffz-dark:not(.ffz-bttv) .conversation-window, +.ffz-top-conversations:not(.ffz-bttv) .theatre .conversations-content .conversations-list-icon, +.ffz-top-conversations:not(.ffz-bttv) .theatre .conversation-window { + border-color: rgba(255,255,255,0.2); } .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 { bottom: inherit; - top: 46px; + top: 54px; } -.ffz-top-conversations .conversations-list:before, -.ffz-top-conversations .conversations-list:after { - display:none; +.ffz-top-conversations.ffz-bttv .conversations-list { top: 46px; } + +.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 { padding-bottom: 0; }