From bd11a6f2aa7b28a806cc91c5c81f2bf165137aad Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 16 May 2019 14:46:26 -0400
Subject: [PATCH] 4.0.0-rc21

* Added: In-Line Chat Actions can now be set to display with specific modifier keys being held. This feature currently requires that Freeze Chat Scrolling is enabled. (Though, why you'd want to use this without that feature is beyond me.)
* Fixed: Bug with custom chat width in theater mode.
* Fixed: The `Get Bits` button appearing when disabled.
* Fixed: Issue with highlighting chat usernames when using Firefox.
* Fixed: Misc minor bugs.
---
 src/i18n.js                                   |   3 +
 src/main.js                                   |   2 +-
 src/modules/chat/actions/index.jsx            |  34 +++++-
 src/modules/chat/actions/types.jsx            |   2 +-
 src/modules/chat/index.js                     |   5 +-
 src/modules/chat/room.js                      |   8 +-
 src/modules/chat/tokenizers.jsx               |   2 +-
 .../main_menu/components/action-editor.vue    | 111 +++++++++++++++++-
 .../main_menu/components/chat-actions.vue     |   1 +
 .../twitch-twilight/modules/bits_button.js    |   2 +-
 .../twitch-twilight/modules/chat/index.js     |  21 +++-
 .../twitch-twilight/modules/chat/line.js      |   9 +-
 .../twitch-twilight/modules/chat/scroller.js  |  63 +++++++++-
 src/sites/twitch-twilight/modules/layout.js   |   4 +-
 src/utilities/dialog.js                       |   6 +-
 styles/chat.scss                              |  49 ++++++++
 16 files changed, 299 insertions(+), 23 deletions(-)

diff --git a/src/i18n.js b/src/i18n.js
index c71e7a1e..c9681ae4 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -155,6 +155,9 @@ export class TranslationManager extends Module {
 
 	handleMessage(event) {
 		const msg = event.data;
+		if ( ! msg )
+			return;
+
 		if ( msg.type === 'seen' )
 			this.see(msg.key, true);
 
diff --git a/src/main.js b/src/main.js
index 4c4d5574..9c3ec60f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -149,7 +149,7 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-rc20.5',
+	major: 4, minor: 0, revision: 0, extra: '-rc21',
 	commit: __git_commit__,
 	build: __webpack_hash__,
 	toString: () =>
diff --git a/src/modules/chat/actions/index.jsx b/src/modules/chat/actions/index.jsx
index 72b79c25..e329cf99 100644
--- a/src/modules/chat/actions/index.jsx
+++ b/src/modules/chat/actions/index.jsx
@@ -77,6 +77,7 @@ export default class Actions extends Module {
 				component: 'chat-actions',
 				context: ['user', 'room', 'message'],
 				inline: true,
+				modifiers: true,
 
 				data: () => {
 					const chat = this.resolve('site.chat');
@@ -437,7 +438,10 @@ export default class Actions extends Module {
 		if ( current_level < 3 )
 			mod_icons = false;
 
-		const chat = this.resolve('site.chat');
+		const chat = this.resolve('site.chat'),
+			modified = [];
+
+		let had_action = false;
 
 		for(const data of this.parent.context.get('chat.actions.inline')) {
 			if ( ! data.action || ! data.appearance )
@@ -445,6 +449,7 @@ export default class Actions extends Module {
 
 			const ap = data.appearance || {},
 				disp = data.display || {},
+				keys = disp.keys,
 
 				def = this.renderers[ap.type];
 
@@ -459,8 +464,14 @@ export default class Actions extends Module {
 				color = has_color && (chat && chat.colors ? chat.colors.process(ap.color) : ap.color),
 				contents = def.render.call(this, ap, createElement, color);
 
-			actions.push(<button
-				class={`ffz-tooltip ffz-mod-icon mod-icon tw-c-text-alt-2${has_color ? ' colored' : ''}`}
+			let list = actions;
+
+			if ( keys )
+				list = modified;
+
+			had_action = true;
+			list.push(<button
+				class={`ffz-tooltip ffz-mod-icon mod-icon tw-c-text-alt-2${has_color ? ' colored' : ''}${keys ? ` ffz-modifier-${keys}` : ''}`}
 				data-tooltip-type="action"
 				data-action={data.action}
 				data-options={data.options ? JSON.stringify(data.options) : null}
@@ -472,7 +483,7 @@ export default class Actions extends Module {
 			</button>);
 		}
 
-		if ( ! actions.length )
+		if ( ! had_action )
 			return null;
 
 		/*const room = current_room && JSON.stringify(current_room),
@@ -483,12 +494,25 @@ export default class Actions extends Module {
 				type: msg.user.type
 			});*/
 
-		return (<div
+		let out = (<div
 			class="ffz--inline-actions ffz-action-data tw-inline-block tw-mg-r-05"
 			data-source="line"
 		>
 			{actions}
 		</div>);
+
+		if ( modified.length ) {
+			return [out,
+				(<div
+					class="ffz--inline-actions ffz--modifier-actions ffz-action-data"
+					data-source="line"
+				>
+					{modified}
+				</div>)
+			];
+		}
+
+		return out;
 	}
 
 
diff --git a/src/modules/chat/actions/types.jsx b/src/modules/chat/actions/types.jsx
index 1b80e3fb..2f8f3973 100644
--- a/src/modules/chat/actions/types.jsx
+++ b/src/modules/chat/actions/types.jsx
@@ -291,7 +291,7 @@ export const whisper = {
 			me = site && site.getUser(),
 			store = site && site.store;
 
-		if ( ! me || ! store || ! data.user.id || me.id == data.user.id )
+		if ( ! me || ! store || ! data.user || ! data.user.id || me.id == data.user.id )
 			return;
 
 		const id_1 = parseInt(me.id, 10),
diff --git a/src/modules/chat/index.js b/src/modules/chat/index.js
index 382996d2..3686bd8e 100644
--- a/src/modules/chat/index.js
+++ b/src/modules/chat/index.js
@@ -935,7 +935,7 @@ export default class Chat extends Module {
 		for(const id in this.room_ids)
 			if ( has(this.room_ids, id) ) {
 				const room = this.room_ids[id];
-				if ( room ) {
+				if ( room && ! room.destroyed ) {
 					visited.add(room);
 					yield room;
 				}
@@ -944,7 +944,7 @@ export default class Chat extends Module {
 		for(const login in this.rooms)
 			if ( has(this.rooms, login) ) {
 				const room = this.rooms[login];
-				if ( room && ! visited.has(room) )
+				if ( room && ! room.destroyed && ! visited.has(room) )
 					yield room;
 			}
 	}
@@ -1347,6 +1347,7 @@ export default class Chat extends Module {
 
 			if ( type === 'text' )
 				res = e('span', {
+					className: 'text-fragment',
 					'data-a-target': 'chat-message-text'
 				}, token.text);
 
diff --git a/src/modules/chat/room.js b/src/modules/chat/room.js
index 163f34fa..e0fd9b4c 100644
--- a/src/modules/chat/room.js
+++ b/src/modules/chat/room.js
@@ -364,14 +364,20 @@ export default class Room {
 	// ========================================================================
 
 	ref(referrer) {
+		if ( ! this.refs )
+			throw new Error('Attempting to use destroyed Room');
+
 		clearTimeout(this._destroy_timer);
 		this._destroy_timer = null;
 		this.refs.add(referrer);
 	}
 
 	unref(referrer) {
+		if ( ! this.refs )
+			return;
+
 		this.refs.delete(referrer);
-		if ( ! this.users.size && ! this._destroy_timer )
+		if ( ! this.refs.size && ! this._destroy_timer )
 			this._destroy_timer = setTimeout(() => this.destroy(), 5000);
 	}
 
diff --git a/src/modules/chat/tokenizers.jsx b/src/modules/chat/tokenizers.jsx
index 73255e88..0dcc510e 100644
--- a/src/modules/chat/tokenizers.jsx
+++ b/src/modules/chat/tokenizers.jsx
@@ -29,7 +29,7 @@ export const Links = {
 
 	render(token, createElement) {
 		return (<a
-			class="ffz-tooltip"
+			class="ffz-tooltip link-fragment"
 			data-tooltip-type="link"
 			data-url={token.url}
 			data-is-mail={token.is_mail}
diff --git a/src/modules/main_menu/components/action-editor.vue b/src/modules/main_menu/components/action-editor.vue
index 1906f946..3dfdc73b 100644
--- a/src/modules/main_menu/components/action-editor.vue
+++ b/src/modules/main_menu/components/action-editor.vue
@@ -119,6 +119,76 @@
 							<option :value="false">{{ t('setting.false', 'False') }}</option>
 						</select>
 					</div>
+
+					<div v-if="has_modifiers" class="tw-flex tw-align-items-start">
+						<label for="vis_modifiers">
+							{{ t('setting.actions.edit-visible.modifier', 'Modifiers') }}
+						</label>
+
+						<div>
+							<div class="ffz--inline tw-flex">
+								<div class="tw-pd-r-1 tw-checkbox">
+									<input
+										id="key_ctrl"
+										ref="key_ctrl"
+										:checked="edit_data.display.keys & 1"
+										type="checkbox"
+										class="tw-checkbox__input"
+										@change="onChangeKeys"
+									>
+									<label for="key_ctrl" class="tw-checkbox__label">
+										{{ t('setting.key.ctrl', 'Ctrl') }}
+									</label>
+								</div>
+
+								<div class="tw-pd-r-1 tw-checkbox">
+									<input
+										id="key_shift"
+										ref="key_shift"
+										:checked="edit_data.display.keys & 2"
+										type="checkbox"
+										class="tw-checkbox__input"
+										@change="onChangeKeys"
+									>
+									<label for="key_shift" class="tw-checkbox__label">
+										{{ t('setting.key.shift', 'Shift') }}
+									</label>
+								</div>
+
+								<div class="tw-pd-r-1 tw-checkbox">
+									<input
+										id="key_alt"
+										ref="key_alt"
+										:checked="edit_data.display.keys & 4"
+										type="checkbox"
+										class="tw-checkbox__input"
+										@change="onChangeKeys"
+									>
+									<label for="key_alt" class="tw-checkbox__label">
+										{{ t('setting.key.alt', 'Alt') }}
+									</label>
+								</div>
+
+								<div class="tw-pd-r-1 tw-checkbox">
+									<input
+										id="key_meta"
+										ref="key_meta"
+										:checked="edit_data.display.keys & 8"
+										type="checkbox"
+										class="tw-checkbox__input"
+										@change="onChangeKeys"
+									>
+									<label for="key_meta" class="tw-checkbox__label">
+										{{ t('setting.key.meta', 'Meta') }}
+									</label>
+								</div>
+							</div>
+
+							<div class="tw-pd-t-05">
+								Note: This currently requires Chat > Behavior > Freeze Chat Scrolling to be enabled.
+							</div>
+						</div>
+					</div>
 				</section>
 
 				<section class="tw-mg-t-1 tw-border-t tw-pd-t-1">
@@ -215,7 +285,7 @@
 import {has, maybe_call, deep_copy} from 'utilities/object';
 
 export default {
-	props: ['action', 'data', 'inline', 'context'],
+	props: ['action', 'data', 'inline', 'context', 'modifiers'],
 
 	data() {
 		return {
@@ -237,6 +307,10 @@ export default {
 			return this.context && this.context.includes('message')
 		},
 
+		has_modifiers() {
+			return this.modifiers
+		},
+
 		vars() {
 			const out = [],
 				ctx = this.context || [];
@@ -373,6 +447,24 @@ export default {
 			else if ( disp.deleted === false )
 				out.push(this.t('setting.actions.visible.undeleted', 'if message not deleted'));
 
+			if ( disp.keys ) {
+				const key_out = [];
+				if ( disp.keys & 1 )
+					key_out.push(this.t('setting.key.ctrl', 'Ctrl'));
+				if ( disp.keys & 2 )
+					key_out.push(this.t('setting.key.shift', 'Shift'));
+				if ( disp.keys & 4 )
+					key_out.push(this.t('setting.key.alt', 'Alt'));
+				if ( disp.keys & 8 )
+					key_out.push(this.t('setting.key.meta', 'Meta'));
+
+				if ( key_out.length )
+					out.push(this.t('setting.actions.visible.modifier', 'when {key_list} {keys, plural, one {is} other {are}} held', {
+						key_list: key_out.join(' + '),
+						keys: key_out.length
+					}));
+			}
+
 			if ( ! out.length )
 				return this.t('setting.actions.visible.always', 'always');
 
@@ -392,6 +484,23 @@ export default {
 			this.edit_data.options = val;
 		},
 
+		onChangeKeys() {
+			if ( ! this.editing )
+				return;
+
+			let i = 0;
+			if ( this.$refs.key_ctrl.checked )
+				i |= 1;
+			if ( this.$refs.key_shift.checked )
+				i |= 2;
+			if ( this.$refs.key_alt.checked )
+				i |= 4;
+			if ( this.$refs.key_meta.checked )
+				i |= 8;
+
+			this.edit_data.display.keys = i;
+		},
+
 		edit() {
 			if ( ! this.canEdit )
 				return;
diff --git a/src/modules/main_menu/components/chat-actions.vue b/src/modules/main_menu/components/chat-actions.vue
index 7406273e..e6da257e 100644
--- a/src/modules/main_menu/components/chat-actions.vue
+++ b/src/modules/main_menu/components/chat-actions.vue
@@ -193,6 +193,7 @@
 					:data="data"
 					:inline="item.inline"
 					:context="item.context"
+					:modifiers="item.modifiers"
 					@remove="remove(act)"
 					@save="save(act, $event)"
 				/>
diff --git a/src/sites/twitch-twilight/modules/bits_button.js b/src/sites/twitch-twilight/modules/bits_button.js
index d0e53e07..2b55f026 100644
--- a/src/sites/twitch-twilight/modules/bits_button.js
+++ b/src/sites/twitch-twilight/modules/bits_button.js
@@ -38,7 +38,7 @@ export default class BitsButton extends Module {
 
 		this.BitsButton = this.fine.define(
 			'bits-button',
-			n => n.renderButton && n.toggleShowTutorial
+			n => n.toggleBalloon && n.toggleShowTutorial
 		);
 	}
 
diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js
index 9ebb79a1..3f32d58f 100644
--- a/src/sites/twitch-twilight/modules/chat/index.js
+++ b/src/sites/twitch-twilight/modules/chat/index.js
@@ -214,6 +214,16 @@ export default class ChatHook extends Module {
 			}
 		});
 
+		this.settings.add('chat.use-width', {
+			requires: ['chat.width', 'context.ui.rightColumnExpanded'],
+			process(ctx) {
+				if ( ! ctx.get('context.ui.rightColumnExpanded') )
+					return false;
+
+				return ctx.get('chat.width') != 340;
+			}
+		});
+
 		this.settings.add('chat.bits.show-pinned', {
 			default: true,
 			ui: {
@@ -349,6 +359,14 @@ export default class ChatHook extends Module {
 
 
 	updateChatCSS() {
+		if ( ! this._update_chat_css_timer )
+			this._update_chat_css_timer = setTimeout(() => this._updateChatCSS(), 0);
+	}
+
+	_updateChatCSS() {
+		clearTimeout(this._update_chat_css_timer);
+		this._update_chat_css_timer = null;
+
 		const width = this.chat.context.get('chat.width'),
 			size = this.chat.context.get('chat.font-size'),
 			emote_alignment = this.chat.context.get('chat.lines.emote-alignment'),
@@ -364,7 +382,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.setVariable('chat-width', `${width/10}rem`);
 
 		this.css_tweaks.toggle('chat-font', size !== 12 || font);
-		this.css_tweaks.toggle('chat-width', width !== 340);
+		this.css_tweaks.toggle('chat-width', this.chat.context.get('chat.use-width'));
 
 		this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1);
 		this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2);
@@ -421,6 +439,7 @@ export default class ChatHook extends Module {
 		this.grabTypes();
 
 		this.chat.context.on('changed:chat.width', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.use-width', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.font-family', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.lines.emote-alignment', this.updateChatCSS, this);
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index feb8e039..1f210e97 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -156,8 +156,9 @@ export default class ChatLine extends Module {
 						e('span', {
 							className: 'chat-line__message--badges'
 						}, t.chat.badges.render(msg, e)),
-						e('button', {
+						e('span', {
 							className: 'chat-line__username notranslate',
+							role: 'button',
 							style: { color },
 							onClick: this.ffz_user_click_handler
 						}, [
@@ -414,8 +415,9 @@ other {# messages were deleted by a moderator.}
 						e('span', {
 							className: 'chat-line__message--badges'
 						}, t.chat.badges.render(msg, e)),
-						e('button', {
+						e('span', {
 							className: 'chat-line__username notranslate',
+							role: 'button',
 							style: { color },
 							onClick: this.ffz_user_click_handler
 						}, [
@@ -774,8 +776,9 @@ other {# messages were deleted by a moderator.}
 					e('span', {
 						className: 'chat-line__message--badges'
 					}, t.chat.badges.render(msg, e)),
-					e('button', {
+					e('span', {
 						className: 'chat-line__username notranslate',
+						role: 'button',
 						style: { color },
 						onClick: this.onExtensionNameClick
 					}, e('span', {
diff --git a/src/sites/twitch-twilight/modules/chat/scroller.js b/src/sites/twitch-twilight/modules/chat/scroller.js
index 3406611b..4908f047 100644
--- a/src/sites/twitch-twilight/modules/chat/scroller.js
+++ b/src/sites/twitch-twilight/modules/chat/scroller.js
@@ -65,6 +65,19 @@ export default class Scroller extends Module {
 		});
 	}
 
+	updateUseKeys() {
+		const old_use = this.use_keys;
+		this.use_keys = false;
+		for(const act of this.chat.context.get('chat.actions.inline'))
+			if ( act && act.display && act.display.keys )
+				this.use_keys = true;
+
+		if ( this.use_keys !== old_use ) {
+			for(const inst of this.ChatScroller.instances)
+				inst && inst.ffzUpdateKeys && inst.ffzUpdateKeys();
+		}
+	}
+
 	onEnable() {
 		this.on('i18n:update', () => {
 			for(const inst of this.ChatScroller.instances)
@@ -82,6 +95,9 @@ export default class Scroller extends Module {
 			}
 		});
 
+		this.chat.context.on('changed:chat.actions.inline', this.updateUseKeys, this);
+		this.updateUseKeys();
+
 		this.smoothScroll = this.chat.context.get('chat.scroller.smooth-scroll');
 		this.chat.context.on('changed:chat.scroller.smooth-scroll', val => {
 			this.smoothScroll = val;
@@ -437,6 +453,8 @@ export default class Scroller extends Module {
 				this.ffz_ctrl = e.ctrlKey;
 				this.ffz_meta = e.metaKey;
 
+				this.ffzUpdateKeys();
+
 				if ( this.ffz_outside || t.freeze < 2 )
 					return;
 
@@ -451,8 +469,43 @@ export default class Scroller extends Module {
 			}
 
 
+			cls.prototype.ffzUpdateKeys = function() {
+				if ( ! this._ffz_key_update )
+					this._ffz_key_update = requestAnimationFrame(() => this.ffz_updateKeys());
+			}
+
+			cls.prototype.ffz_updateKeys = function() {
+				cancelAnimationFrame(this._ffz_key_update);
+				this._ffz_key_update = null;
+
+				if ( ! t.use_keys && this.ffz_use_keys === t.use_keys )
+					return;
+
+				if ( ! this.scroll || ! this.scroll.root )
+					return;
+
+				this.ffz_use_keys = t.use_keys;
+				this.scroll.root.classList.toggle('ffz--keys', t.use_keys);
+
+				const ds = this.scroll.root.dataset;
+
+				if ( ! t.use_keys ) {
+					delete ds.alt;
+					delete ds.ctrl;
+					delete ds.shift;
+					delete ds.meta;
+
+				} else {
+					ds.alt = ! this.ffz_outside && this.ffz_alt;
+					ds.ctrl = ! this.ffz_outside && this.ffz_ctrl;
+					ds.shift = ! this.ffz_outside && this.ffz_shift;
+					ds.meta = ! this.ffz_outside && this.ffz_meta;
+				}
+			}
+
 			cls.prototype.ffzMouseMove = function(e) {
 				this.ffz_last_move = Date.now();
+				const was_outside = this.ffz_outside;
 				this.ffz_outside = false;
 				if ( this._ffz_outside ) {
 					clearTimeout(this._ffz_outside);
@@ -465,8 +518,13 @@ export default class Scroller extends Module {
 						e.ctrlKey === this.ffz_ctrl &&
 						e.metaKey === this.ffz_meta &&
 						e.screenY === this.ffz_sy &&
-						e.screenX === this.ffz_sx)
+						e.screenX === this.ffz_sx) {
+
+					if ( was_outside )
+						this.ffzUpdateKeys();
+
 					return;
+				}
 
 				this.ffz_alt = e.altKey;
 				this.ffz_shift = e.shiftKey;
@@ -475,6 +533,8 @@ export default class Scroller extends Module {
 				this.ffz_sy = e.screenY;
 				this.ffz_sx = e.screenX;
 
+				this.ffzUpdateKeys();
+
 				const should_freeze = this.ffzShouldBeFrozen(),
 					changed = should_freeze !== this.ffz_frozen;
 
@@ -492,6 +552,7 @@ export default class Scroller extends Module {
 					clearTimeout(this._ffz_outside);
 
 				this._ffz_outside = setTimeout(() => this.ffzMaybeUnfreeze(), 64);
+				this.ffzUpdateKeys();
 			}
 
 
diff --git a/src/sites/twitch-twilight/modules/layout.js b/src/sites/twitch-twilight/modules/layout.js
index ada9ce9a..c95e7eab 100644
--- a/src/sites/twitch-twilight/modules/layout.js
+++ b/src/sites/twitch-twilight/modules/layout.js
@@ -61,9 +61,7 @@ export default class Layout extends Module {
 				const ratio = size.width / size.height;
 				return ratio <= ctx.get('layout.portrait-threshold');
 			},
-			changed: val => {
-				this.updatePortraitMode();
-			}
+			changed: () => this.updatePortraitMode()
 		});
 
 		this.settings.add('layout.inject-portrait', {
diff --git a/src/utilities/dialog.js b/src/utilities/dialog.js
index 4071717b..ed72e3ef 100644
--- a/src/utilities/dialog.js
+++ b/src/utilities/dialog.js
@@ -120,7 +120,9 @@ export default class Dialog extends EventEmitter {
 			container.classList.toggle('ffz-has-dialog', visible);
 
 		if ( ! visible ) {
-			this._element.remove();
+			if ( this._element )
+				this._element.remove();
+
 			this.emit('hide');
 
 			if ( this.factory )
@@ -154,7 +156,7 @@ export default class Dialog extends EventEmitter {
 	}
 
 	toggleSize(event) {
-		if ( ! this._visible || event && event.button !== 0 )
+		if ( ! this._visible || event && event.button !== 0 || ! this._element )
 			return;
 
 		this._maximized = !this._maximized;
diff --git a/styles/chat.scss b/styles/chat.scss
index 57b3507e..5e8344f7 100644
--- a/styles/chat.scss
+++ b/styles/chat.scss
@@ -53,6 +53,55 @@
 	color: #fff;
 }
 
+.chat-line__message {
+	position: relative;
+}
+
+
+.ffz--modifier-actions {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: .5rem 0;
+
+	background: rgba(255,255,255,0.5);
+
+	.dark-theme &,
+	.tw-root--theme-dark & {
+		background: rgba(0,0,0,0.5);
+	}
+
+	.ffz-mod-icon {
+		margin: 0 .5rem;
+		display: none;
+	}
+}
+
+.ffz--keys {
+	&[data-ctrl="true"] .ffz-modifier-1,
+	&[data-shift="true"] .ffz-modifier-2,
+	&[data-shift="true"][data-ctrl="true"] .ffz-modifier-3,
+	&[data-alt="true"] .ffz-modifier-4,
+	&[data-alt="true"][data-ctrl="true"] .ffz-modifier-5,
+	&[data-alt="true"][data-shift="true"] .ffz-modifier-6,
+	&[data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-7,
+	&[data-meta="true"] .ffz-modifier-8,
+
+	&[data-meta="true"][data-ctrl="true"] .ffz-modifier-9,
+	&[data-meta="true"][data-shift="true"] .ffz-modifier-10,
+	&[data-meta="true"][data-shift="true"][data-ctrl="true"] .ffz-modifier-11,
+	&[data-meta="true"][data-alt="true"] .ffz-modifier-12,
+	&[data-meta="true"][data-alt="true"][data-ctrl="true"] .ffz-modifier-13,
+	&[data-meta="true"][data-alt="true"][data-shift="true"] .ffz-modifier-14,
+	&[data-meta="true"][data-alt="true"][data-ctrl="true"][data-shift="true"] .ffz-modifier-15 {
+		display: inline-flex;
+	}
+}
+
+.ffz--modifier-actions:empty {
+	display: none;
+}
+
 
 .ffz--favorite {
 	position: absolute;