tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-tw-

changelog.html

@@ -1,3 +1,11 @@
+<div class="list-header">4.0.0-beta1.4<span>@7ca245f1bf1509160a2c</span> <time datetime="2017-12-13">(2017-12-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Everything.</li>
+	<li>&nbsp;</li>
+	<li>Twitch renamed all their CSS classes to start with <code>tw-</code> requiring significant modifications to basically all of FFZ to insert <code>tw-</code> everywhere.</li>
+</ul>
+
+
 <div class="list-header">4.0.0-beta1.4<span>@8e759e6ddfa7aa70cfea</span> <time datetime="2017-12-01">(2017-12-01)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Message highlighting in chat.</li>

src/modules/chat/emotes.js

@@ -98,9 +98,11 @@ export default class Emotes extends Module {
 
 	getSetIDs(user_id, user_login, room_id, room_login) {
 		const room = this.parent.getRoom(room_id, room_login, true),
+			room_user = room && room.getUser(user_id, user_login, true),
 			user = this.parent.getUser(user_id, user_login, true);
 
 		return (user ? user.emote_sets._cache : []).concat(
+			room_user ? room_user.emote_set._cache : [],
 			room ? room.emote_sets._cache : [],
 			this.default_sets._cache
 		);
@@ -111,6 +113,37 @@ export default class Emotes extends Module {
 			.map(set_id => this.emote_sets[set_id]);
 	}
 
+	getRoomSetIDs(user_id, user_login, room_id, room_login) {
+		const room = this.parent.getRoom(room_id, room_login, true),
+			room_user = room && room.getUser(user_id, user_login, true);
+
+		if ( ! room )
+			return [];
+
+		if ( ! room_user )
+			return room.emote_sets._cache;
+
+		return room_user.emote_sets._cache.concat(room.emote_sets._cache);
+	}
+
+	getRoomSets(user_id, user_login, room_id, room_login) {
+		return this.getRoomSetIDs(user_id, user_login, room_id, room_login)
+			.map(set_id => this.emote_sets[set_id]);
+	}
+
+	getGlobalSetIDs(user_id, user_login) {
+		const user = this.parent.getUser(user_id, user_login, true);
+		if ( ! user )
+			return this.default_sets._cache;
+
+		return user.emote_sets._cache.concat(this.default_sets._cache);
+	}
+
+	getGlobalSets(user_id, user_login) {
+		return this.getGlobalSetIDs(user_id, user_login)
+			.map(set_id => this.emote_sets[set_id]);
+	}
+
 	getEmotes(user_id, user_login, room_id, room_login) {
 		const emotes = {};
 		for(const emote_set of this.getSets(user_id, user_login, room_id, room_login))

src/modules/chat/tokenizers.js

@@ -11,7 +11,23 @@ const EMOTE_CLASS = 'chat-line__message--emote',
 	LINK_REGEX = /([^\w@#%\-+=:~])?((?:(https?:\/\/)?(?:[\w@#%\-+=:~]+\.)+[a-z]{2,6}(?:\/[\w.\/@#%&()\-+=:?~]*)?))([^\w.\/@#%&()\-+=:?~]|\s|$)/g,
 	MENTION_REGEX = /([^\w@#%\-+=:~])?(@([^\u0000-\u007F]+|\w+)+)([^\w.\/@#%&()\-+=:?~]|\s|$)/g,
 
-	TWITCH_BASE = '//static-cdn.jtvnw.net/emoticons/v1/';
+	TWITCH_BASE = '//static-cdn.jtvnw.net/emoticons/v1/',
+	REPLACEMENT_BASE = '//cdn.frankerfacez.com/script/replacements/',
+	REPLACEMENTS = {
+		15: '15-JKanStyle.png',
+		16: '16-OptimizePrime.png',
+		17: '17-StoneLightning.png',
+		18: '18-TheRinger.png',
+		//19: '19-PazPazowitz.png',
+		//20: '20-EagleEye.png',
+		//21: '21-CougarHunt.png',
+		22: '22-RedCoat.png',
+		26: '26-JonCarnage.png',
+		//27: '27-PicoMause.png',
+		30: '30-BCWarrior.png',
+		33: '33-DansGame.png',
+		36: '36-PJSalt.png'
+	};
 
 
 // ============================================================================
@@ -57,7 +73,7 @@ export const Links = {
 					sanitize(this.i18n.t(
 						'tooltip.link-destination',
 						'Destination: %{url}',
-						{url: data.urls[data.urls.length-1]}
+						{url: data.urls[data.urls.length-1][1]}
 					));
 
 			if ( data.unsafe ) {
@@ -697,12 +713,24 @@ export const TwitchEmotes = {
 						text: text.slice(idx - t_start, e_start - t_start).join('')
 					});
 
+				let src, srcSet;
+
+				const replacement = REPLACEMENTS[e_id];
+				if ( replacement ) {
+					src = `${REPLACEMENT_BASE}${replacement}`;
+					srcSet = '';
+
+				} else {
+					src = `${TWITCH_BASE}${e_id}/1.0`;
+					srcSet = `${TWITCH_BASE}${e_id}/1.0 1x, ${TWITCH_BASE}${e_id}/2.0 2x`;
+				}
+
 				out.push({
 					type: 'emote',
 					id: e_id,
 					provider: 'twitch',
-					src: `${TWITCH_BASE}${e_id}/1.0`,
+					src,
-					srcSet: `${TWITCH_BASE}${e_id}/1.0 1x, ${TWITCH_BASE}${e_id}/2.0 2x`,
+					srcSet,
 					text: text.slice(e_start - t_start, e_end - t_start).join(''),
 					modifiers: []
 				});

src/modules/main_menu/components/changelog.vue

@@ -1,6 +1,6 @@
 <template lang="html">
-<div class="ffz--changelog border-t pd-t-1">
+<div class="ffz--changelog tw-border-t tw-pd-t-1">
-	<div class="align-center">
+	<div class="tw-align-center">
 		<h2>{{ t('home.changelog', 'Changelog') }}</h2>
 	</div>
 

src/modules/main_menu/components/feedback-page.vue

@@ -1,8 +1,8 @@
 <template lang="html">
-<div class="ffz--home border-t pd-t-1">
+<div class="ffz--home tw-border-t tw-pd-t-1">
 	<h2>Feedback</h2>
 
-	<div class="mg-y-1 c-background-accent c-text-overlay pd-1">
+	<div class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1">
 		<h3 class="ffz-i-attention">
 			Please keep in mind that FrankerFaceZ v4 is under heavy development.
 		</h3>

src/modules/main_menu/components/filter-editor.vue

@@ -3,25 +3,25 @@
 	<div ref="list" class="ffz--rule-list">
 		<section v-for="(rule, idx) in rules">
 			<div
-				class="ffz--rule elevation-1 c-background border mg-b-05 pd-y-05 pd-r-1 flex flex--nowrap align-items-start"
+				class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
 				tabindex="0"
 			>
-				<div class="flex flex-shrink-0 align-items-center handle pd-x-05 pd-y-1">
+				<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-y-1">
 					<span class="ffz-i-ellipsis-vert" />
 				</div>
 
-				<div class="flex-shrink-0 pd-y-05">
+				<div class="tw-flex-shrink-0 tw-pd-y-05">
 					Channel
 				</div>
 
-				<div class="mg-x-1 flex flex-grow-1">
+				<div class="tw-mg-x-1 tw-flex tw-flex-grow-1">
-					<div class="flex-shrink-0 mg-r-1">
+					<div class="tw-flex-shrink-0 tw-mg-r-1">
 						<select class="tw-select">
 							<option>is one of</option>
 							<option>is not one of</option>
 						</select>
 					</div>
-					<div class="flex-grow-1">
+					<div class="tw-flex-grow-1">
 						<input
 							type="text"
 							class="tw-input"
@@ -30,7 +30,7 @@
 					</div>
 				</div>
 
-				<div class="flex flex-shrink-0 align-items-center">
+				<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
 					<button class="tw-button tw-button--text" @click="del(idx)">
 						<span class="tw-button__text ffz-i-trash">
 							{{ t('setting.filters.delete', 'Delete') }}
@@ -42,7 +42,7 @@
 	</div>
 
 	<button
-		class="tw-button tw-button--hollow mg-y-1 full-width"
+		class="tw-button tw-button--hollow tw-mg-y-1 tw-full-width"
 		@click="newRule"
 	>
 		<span class="tw-button__text ffz-i-plus">

src/modules/main_menu/components/home-page.vue

@@ -1,14 +1,14 @@
 <template lang="html">
-<div class="ffz--home flex flex--nowrap">
+<div class="ffz--home tw-flex tw-flex-nowrap">
-	<div class="flex-grow-1">
+	<div class="tw-flex-grow-1">
-		<div class="align-center">
+		<div class="tw-align-center">
 			<h1 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h1>
-			<span class="c-text-alt">
+			<span class="tw-c-text-alt">
 				{{ t('home.tag-line', 'The Twitch Enhancement Suite') }}
 			</span>
 		</div>
 
-		<section class="pd-t-1 border-t mg-t-1">
+		<section class="tw-pd-t-1 tw-border-t tw-mg-t-1">
 			<h2>Welcome to the v4.0 Beta</h2>
 
 			<p>
@@ -26,7 +26,7 @@
 				now, here are some of the bigger issues:
 			</p>
 
-			<ul class="mg-b-2">
+			<ul class="tw-mg-b-2">
 				<li>Settings from the old version are not being imported.</li>
 				<li>Settings cannot be searched.</li>
 				<li>FFZ badges do not display.</li>
@@ -35,7 +35,7 @@
 
 			<p>And the biggest features still under development:</p>
 
-			<ul class="mg-b-2">
+			<ul class="tw-mg-b-2">
 				<li>Dark Theme (Pls No Purple)</li>
 				<li>Badge Customization</li>
 				<li>Emoji Rendering</li>
@@ -66,7 +66,7 @@
 
 
 	</div>
-	<div class="mg-l-1 flex-shrink-0 tweet-column">
+	<div class="tw-mg-l-1 tw-flex-shrink-0 tweet-column">
 		<a class="twitter-timeline" data-width="300" data-theme="dark" href="https://twitter.com/FrankerFaceZ?ref_src=twsrc%5Etfw">
 			Tweets by FrankerFaceZ
 		</a>

src/modules/main_menu/components/main-menu.vue

@@ -1,8 +1,8 @@
 <template lang="html">
-<div class="ffz-main-menu elevation-3 c-background-alt border flex flex--nowrap flex-column" :class="{ maximized }">
+<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized }">
-	<header class="c-background full-width align-items-center flex flex-nowrap" @dblclick="resize">
+	<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
 		<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
-		<div class="flex-grow-1 pd-x-2">
+		<div class="tw-flex-grow-1 tw-pd-x-2">
 			<!--div class="tw-search-input">
 				<label for="ffz-main-menu.search" class="hide-accessible">{{ t('main-menu.search', 'Search Settings') }}</label>
 				<div class="relative">
@@ -15,27 +15,27 @@
 				</div>
 			</div-->
 		</div>
-		<button class="tw-button-icon mg-x-05" @click="resize">
+		<button class="tw-button-icon tw-mg-x-05" @click="resize">
 			<span class="tw-button-icon__icon">
 				 <figure :class="{'ffz-i-window-maximize': !maximized, 'ffz-i-window-restore': maximized}" />
 			</span>
 		</button>
-		<button class="tw-button-icon mg-x-05" @click="close">
+		<button class="tw-button-icon tw-mg-x-05" @click="close">
 			<span class="tw-button-icon__icon">
 				<figure class="ffz-i-window-close" />
 			</span>
 		</button>
 	</header>
-	<section class="border-t full-height full-width flex flex-nowrap overflow-hidden">
+	<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-nowrap tw-overflow-hidden">
-		<nav class="ffz-vertical-nav c-background-alt-2 border-r full-height flex flex-column flex-shrink-0 flex-nowrap">
+		<nav class="ffz-vertical-nav tw-c-background-alt-2 tw-border-r tw-full-height tw-flex tw-flex-column tw-flex-shrink-0 tw-flex-nowrap">
-			<header class="border-b pd-1">
+			<header class="tw-border-b tw-pd-1">
 				<profile-selector
 					:context="context"
 					@navigate="navigate"
 					/>
 			</header>
-			<div class="full-width full-height overflow-hidden flex flex-nowrap relative">
+			<div class="tw-full-width tw-full-height tw-overflow-hidden tw-flex tw-flex-nowrap tw-relative">
-				<div class="ffz-vertical-nav__items full-width flex-grow-1 scrollable-area" data-simplebar>
+				<div class="ffz-vertical-nav__items tw-full-width tw-flex-grow-1 scrollable-area" data-simplebar>
 					<div class="simplebar-scroll-content">
 						<div class="simplebar-content">
 							<menu-tree
@@ -48,16 +48,16 @@
 					</div>
 				</div>
 			</div>
-			<footer class="c-text-alt border-t pd-1">
+			<footer class="tw-c-text-alt tw-border-t tw-pd-1">
 				<div>
 					{{ t('main-menu.version', 'Version %{version}', {version: version.toString()}) }}
 				</div>
-				<div class="c-text-alt-2">
+				<div class="tw-c-text-alt-2">
 					{{version.build}}
 				</div>
 			</footer>
 		</nav>
-		<main class="flex-grow-1 scrollable-area" data-simplebar>
+		<main class="tw-flex-grow-1 scrollable-area" data-simplebar>
 			<div class="simplebar-scroll-content">
 				<div class="simplebar-content">
 					<menu-page

src/modules/main_menu/components/menu-container.vue

@@ -6,7 +6,7 @@
 	<section
 		v-if="item.description"
 		v-html="t(item.desc_i18n_key, item.description, item)"
-		class="pd-b-1"
+		class="tw-pd-b-1"
 		/>
 	<component
 		v-for="i in item.contents"
@@ -26,7 +26,7 @@ export default {
 		classes() {
 			return [
 				'ffz--menu-container',
-				this.item.full_box ? 'border' : 'border-t'
+				this.item.full_box ? 'tw-border' : 'tw-border-t'
 			]
 		}
 	}

src/modules/main_menu/components/menu-page.vue

@@ -1,14 +1,14 @@
 <template lang="html">
 <div class="ffz--menu-page">
-<header class="mg-b-1">
+<header class="tw-mg-b-1">
 	<template v-for="i in breadcrumbs">
 		<a v-if="i !== item" href="#" @click="$emit('change-item', i, false)">{{ t(i.i18n_key, i.title, i) }}</a>
 		<strong v-if="i === item">{{ t(i.i18n_key, i.title, i) }}</strong>
 		<template v-if="i !== item">&raquo; </template>
 	</template>
 </header>
-<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="border-t pd-t-1 pd-b-2">
+<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
-	<div class="c-background-accent c-text-overlay pd-1">
+	<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
 		<h3 class="ffz-i-attention">
 			{{ t('setting.profiles.inactive', "This profile isn't active.") }}
 		</h3>
@@ -22,13 +22,13 @@
 </section>
 <section
 	v-if="item.description"
-	class="border-t pd-y-1"
+	class="tw-border-t tw-pd-y-1"
 	v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
 	/>
 </section>
 <template v-if="! item.contents">
-	<ul class="border-t pd-y-1">
+	<ul class="tw-border-t tw-pd-y-1">
-		<li class="pd-x-1" v-for="i in item.items">
+		<li class="tw-pd-x-1" v-for="i in item.items">
 			<a href="#" @click="$emit('change-item', i, false)">
 				{{ t(i.i18n_key, i.title, i) }}
 			</a>

src/modules/main_menu/components/menu-tree.vue

@@ -17,7 +17,7 @@
 		role="presentation"
 	>
 		<div
-			class="flex__item flex flex--nowrap align-items-center pd-y-05 pd-r-05"
+			class="tw-flex__item tw-flex tw-flex-nowrap tw-align-items-center tw-pd-y-05 tw-pd-r-05"
 
 			role="treeitem"
 			:aria-expanded="item.expanded"
@@ -32,7 +32,7 @@
 					item.expanded ? 'ffz-i-down-dir' : 'ffz-i-right-dir'
 				]"
 			/>
-			<span class="flex-grow-1">
+			<span class="tw-flex-grow-1">
 				{{ t(item.i18n_key, item.title, item) }}
 			</span>
 			<span v-if="item.pill" class="pill">

src/modules/main_menu/components/profile-editor.vue

@@ -1,7 +1,7 @@
 <template lang="html">
 <div class="ffz--profile-editor">
-	<div class="flex align-items-center border-t pd-1">
+	<div class="tw-flex tw-align-items-center tw-border-t tw-pd-1">
-		<div class="flex-grow-1"></div>
+		<div class="tw-flex-grow-1"></div>
 		<button
 			class="tw-button tw-button--text"
 			@click="save"
@@ -11,7 +11,7 @@
 			</span>
 		</button>
 		<button
-			class="mg-l-1 tw-button tw-button--text"
+			class="tw-mg-l-1 tw-button tw-button--text"
 			:disabled="item.profile && context.profiles.length < 2"
 			@click="del"
 		>
@@ -19,19 +19,19 @@
 				{{ t('setting.profiles.delete', 'Delete') }}
 			</span>
 		</button>
-		<!--button class="mg-l-1 tw-button tw-button--text">
+		<!--button class="tw-mg-l-1 tw-button tw-button--text">
 			<span class="tw-button__text ffz-i-download">
 				{{ t('setting.profiles.export', 'Export') }}
 			</span>
 		</button-->
 	</div>
 
-	<div class="ffz--menu-container border-t">
+	<div class="ffz--menu-container tw-border-t">
 		<header>
 			{{ t('settings.data_management.profiles.edit.general', 'General') }}
 		</header>
 
-		<div class="ffz--widget flex flex--nowrap">
+		<div class="ffz--widget tw-flex tw-flex-nowrap">
 			<label for="ffz:editor:name">
 				{{ t('settings.data_management.profiles.edit.name', 'Name') }}
 			</label>
@@ -44,7 +44,7 @@
 				/>
 		</div>
 
-		<div class="ffz--widget flex flex--nowrap">
+		<div class="ffz--widget tw-flex tw-flex-nowrap">
 			<label for="ffz:editor:description">
 				{{ t('settings.data_management.profiles.edit.desc', 'Description') }}
 			</label>
@@ -58,11 +58,11 @@
 		</div>
 	</div>
 
-	<div class="ffz--menu-container border-t">
+	<div class="ffz--menu-container tw-border-t">
 		<header>
 			{{ t('settings.data_management.profiles.edit.rules', 'Rules') }}
 		</header>
-		<section class="pd-b-1">
+		<section class="tw-pd-b-1">
 			{{ t(
 				'settings.data_management.profiles.edit.rules.description',
 				'Rules allows you to define a series of conditions under which this profile will be active.'

src/modules/main_menu/components/profile-manager.vue

@@ -1,22 +1,22 @@
 <template lang="html">
-<div class="ffz--widget ffz--profile-manager border-t pd-y-1">
+<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1">
-	<div class="c-background-accent c-text-overlay pd-1 mg-b-1">
+	<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
 		<h3 class="ffz-i-attention">
 			This feature is not yet finished.
 		</h3>
 
 		Creating and editing profiles is disabled until the rule editor is finished.
 	</div>
-	<div class="flex align-items-center pd-b-05">
+	<div class="tw-flex tw-align-items-center tw-pd-b-05">
-		<div class="flex-grow-1">
+		<div class="tw-flex-grow-1">
 			{{ t('setting.profiles.drag', 'Drag profiles to change their priority.') }}
 		</div>
-		<button class="mg-l-1 tw-button tw-button--text" disabled @notclick="edit()">
+		<button class="tw-mg-l-1 tw-button tw-button--text" disabled @notclick="edit()">
 			<span class="tw-button__text ffz-i-plus">
 				{{ t('setting.profiles.new', 'New Profile') }}
 			</span>
 		</button>
-		<!--button class="mg-l-1 tw-button tw-button--text">
+		<!--button class="tw-mg-l-1 tw-button tw-button--text">
 			<span class="tw-button__text ffz-i-upload">
 				{{ t('setting.profiles.import', 'Import…') }}
 			</span>
@@ -30,22 +30,22 @@
 			:data-profile="p.id"
 		>
 			<div
-				class="ffz--profile elevation-1 c-background border pd-y-05 pd-r-1 mg-y-05 flex flex--nowrap"
+				class="ffz--profile tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
 				:class="{live: p.live}"
 				tabindex="0"
 			>
-				<div class="flex flex-shrink-0 align-items-center handle pd-x-05 pd-t-1 pd-b-05">
+				<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
 					<span class="ffz-i-ellipsis-vert" />
 				</div>
 
-				<div class="flex-grow-1">
+				<div class="tw-flex-grow-1">
 					<h4>{{ t(p.i18n_key, p.title, p) }}</h4>
 					<div v-if="p.description" class="description">
 						{{ t(p.desc_i18n_key, p.description, p) }}
 					</div>
 				</div>
 
-				<div class="flex flex-shrink-0 align-items-center">
+				<div class="tw-flex tw-flex-shrink-0 tw-align-items-center">
 					<button class="tw-button tw-button--text" disabled @notclick="edit(p)">
 						<span class="tw-button__text ffz-i-cog">
 							{{ t('setting.profiles.configure', 'Configure') }}
@@ -53,7 +53,7 @@
 					</button>
 				</div>
 
-				<div class="flex flex-shrink-0 align-items-center border-l mg-l-1 pd-l-1">
+				<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-l tw-mg-l-1 tw-pd-l-1">
 					<div v-if="p.live" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
 						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 							{{ t('setting.profiles.active', 'This profile is active.') }}

src/modules/main_menu/components/profile-selector.vue

@@ -15,20 +15,20 @@
 	>
 		{{ t(context.currentProfile.i18n_key, context.currentProfile.title, context.currentProfile) }}
 	</div>
-	<div v-if="opened" v-on-clickaway="hide" class="tw-balloon block tw-balloon--lg tw-balloon--down tw-balloon--left">
+	<div v-if="opened" v-on-clickaway="hide" class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left">
 		<div
-			class="ffz--profile-list elevation-2 c-background-alt"
+			class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
 			@keyup.escape="focusHide"
 			@focusin="focus"
 			@focusout="blur"
 		>
-			<div class="scrollable-area border-b" data-simplebar>
+			<div class="scrollable-area tw-border-b" data-simplebar>
 				<div class="simplebar-scroll-content">
 					<div class="simplebar-content" ref="popup">
 						<div
 							v-for="(p, idx) in context.profiles"
 							tabindex="0"
-							class="ffz--profile-row relative border-b pd-y-05 pd-r-3 pd-l-1"
+							class="ffz--profile-row tw-relative tw-border-b tw-pd-y-05 tw-pd-r-3 tw-pd-l-1"
 							:class="{
 								live: p.live,
 								current: p === context.currentProfile
@@ -48,7 +48,7 @@
 						>
 							<div
 								v-if="p.live"
-								class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok absolute"
+								class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
 							>
 								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 									{{ t('setting.profiles.active', 'This profile is active.') }}
@@ -64,7 +64,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="pd-y-05 pd-x-05 align-right">
+			<div class="tw-pd-y-05 tw-pd-x-05 tw-align-right">
 				<button class="tw-button tw-button--text" @click="openConfigure">
 					<span class="tw-button__text ffz-i-cog">
 						{{ t('setting.profiles.configure', 'Configure') }}

src/modules/main_menu/components/setting-check-box.vue

@@ -1,6 +1,6 @@
 <template lang="html">
 <div class="ffz--widget ffz--checkbox" :class="{inherits: isInherited, default: isDefault}">
-	<div class="flex align-items-center">
+	<div class="tw-flex tw-align-items-center">
 		<input
 			type="checkbox"
 			class="tw-checkbox__input"
@@ -16,7 +16,7 @@
 
 		<button
 			v-if="source && source !== profile"
-			class="mg-l-05 tw-button tw-button--text"
+			class="tw-mg-l-05 tw-button tw-button--text"
 			@click="context.currentProfile = source"
 		>
 			<span class="tw-button__text ffz-i-right-dir">
@@ -24,7 +24,7 @@
 			</span>
 		</button>
 
-		<button v-if="has_value" class="mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+		<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
 			<span class="tw-button__text ffz-i-cancel"></span>
 			<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 				{{ t('setting.reset', 'Reset to Default') }}
@@ -33,7 +33,7 @@
 	</div>
 	<section
 		v-if="item.description"
-		class="c-text-alt-2"
+		class="tw-c-text-alt-2"
 		style="padding-left:2.2rem"
 		v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
 		/>

src/modules/main_menu/components/setting-hotkey.vue

@@ -4,7 +4,7 @@
 		:for="item.full_key"
 		v-html="t(item.i18n_key, item.title, item)"
 		/>
-	<div class="relative">
+	<div class="tw-relative">
 		<div class="tw-input__icon-group tw-input__icon-group--right">
 			<div class="tw-input__icon">
 				<figure class="ffz-i-keyboard" />
@@ -12,7 +12,7 @@
 		</div>
 		<div
 			type="text"
-			class="mg-05 tw-input tw-input--icon-right"
+			class="tw-mg-05 tw-input tw-input--icon-right"
 			ref="display"
 			:id="item.full_key"
 			tabindex="0"

src/modules/main_menu/components/setting-radio-buttons.vue

@@ -1,16 +1,16 @@
 <template lang="html">
-<div class="atw-input">
+<div class="tw-input">
 	<header>
 		{{ t(item.i18n_key, item.title, item) }}
 	</header>
 	<section
 		v-if="item.description"
-		class="c-text-alt-2"
+		class="tw-c-text-alt-2"
 		v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
 		/>
-	<div v-for="(i, idx) in data" class="mg-l-1">
+	<div v-for="(i, idx) in data" class="tw-mg-l-1">
 		<input type="radio" :name="item.full_key" :id="item.full_key + idx" :value="i.value" class="tw-radio__input">
-		<label :for="item.full_key + idx" class="pd-y-05 tw-radio__label">{{ t(i.i18n_key, i.title, i) }}</label>
+		<label :for="item.full_key + idx" class="tw-pd-y-05 tw-radio__label">{{ t(i.i18n_key, i.title, i) }}</label>
 	</div>
 </div>
 </template>

src/modules/main_menu/components/setting-select-box.vue

@@ -1,12 +1,12 @@
 <template lang="html">
 <div class="ffz--widget ffz--select-box" :class="{inherits: isInherited, default: isDefault}">
-	<div class="flex align-items-center">
+	<div class="tw-flex tw-align-items-center">
 		<label :for="item.full_key">
 			{{ t(item.i18n_key, item.title, item) }}
 		</label>
 
 		<select
-			class="mg-05 tw-select display-inline width-auto"
+			class="tw-mg-05 tw-select tw-display-inline tw-width-auto"
 			ref="control"
 			:id="item.full_key"
 			@change="onChange"
@@ -18,7 +18,7 @@
 
 		<button
 			v-if="source && source !== profile"
-			class="mg-l-05 tw-button tw-button--text"
+			class="tw-mg-l-05 tw-button tw-button--text"
 			@click="context.currentProfile = source"
 		>
 			<span class="tw-button__text ffz-i-right-dir">
@@ -26,7 +26,7 @@
 			</span>
 		</button>
 
-		<button v-if="has_value" class="mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+		<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
 			<span class="tw-button__text ffz-i-cancel"></span>
 			<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 				{{ t('setting.reset', 'Reset to Default') }}
@@ -36,7 +36,7 @@
 
 	<section
 		v-if="item.description"
-		class="c-text-alt-2"
+		class="tw-c-text-alt-2"
 		v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
 		/>
 </div>

src/modules/main_menu/components/setting-text-box.vue

@@ -1,12 +1,12 @@
 <template lang="html">
 <div class="ffz--widget ffz--text-box" :class="{inherits: isInherited, default: isDefault}">
-	<div class="flex align-items-center">
+	<div class="tw-flex tw-align-items-center">
 		<label :for="item.full_key">
 			{{ t(item.i18n_key, item.title, item) }}
 		</label>
 
 		<input
-			class="mg-05 tw-input display-inline width-auto"
+			class="tw-mg-05 tw-input tw-display-inline tw-width-auto"
 			ref="control"
 			:id="item.full_key"
 			@change="onChange"
@@ -15,7 +15,7 @@
 
 		<button
 			v-if="source && source !== profile"
-			class="mg-l-05 tw-button tw-button--text"
+			class="tw-mg-l-05 tw-button tw-button--text"
 			@click="context.currentProfile = source"
 		>
 			<span class="tw-button__text ffz-i-right-dir">
@@ -23,7 +23,7 @@
 			</span>
 		</button>
 
-		<button v-if="has_value" class="mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+		<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
 			<span class="tw-button__text ffz-i-cancel"></span>
 			<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 				{{ t('setting.reset', 'Reset to Default') }}
@@ -33,7 +33,7 @@
 
 	<section
 		v-if="item.description"
-		class="c-text-alt-2"
+		class="tw-c-text-alt-2"
 		v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
 		/>
 </div>

src/modules/main_menu/index.js

@@ -114,7 +114,7 @@ export default class MainMenu extends Module {
 
 		const maximized = this._maximized,
 			visible = this._visible = !this._visible,
-			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .full-height');
+			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height');
 
 		if ( ! visible ) {
 			if ( maximized )
@@ -143,7 +143,7 @@ export default class MainMenu extends Module {
 			return;
 
 		const maximized = this._maximized = !this._maximized,
-			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .full-height'),
+			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height'),
 			old_main = this._menu.parentElement;
 
 		if ( maximized )

src/modules/metadata.js

@@ -303,7 +303,7 @@ export default class Metadata extends Module {
 								stat = e('span', 'ffz-stat-text tw-button__text')
 							]),
 							popup = e('button', `tw-button ${cls} ffz-stat-arrow`,
-								e('span', 'tw-button__icon pd-x-0',
+								e('span', 'tw-button__icon tw-pd-x-0',
 									e('figure', 'ffz-i-down-dir')
 								)
 							)
@@ -355,7 +355,7 @@ export default class Metadata extends Module {
 
 								tooltipClass: 'ffz-metadata-balloon tw-balloon block',
 								arrowClass: 'tw-balloon__tail',
-								innerClass: 'pd-1',
+								innerClass: 'tw-pd-1',
 
 								popper: {
 									placement: 'top-end'

src/sites/twitch-twilight/modules/channel_bar.js

@@ -88,7 +88,7 @@ export default class ChannelBar extends Module {
 
 	updateMetadata(inst, keys) {
 		const container = this.fine.getHostNode(inst),
-			metabar = container && container.querySelector && container.querySelector('.channel-info-bar__action-container > .flex');
+			metabar = container && container.querySelector && container.querySelector('.channel-info-bar__action-container > .tw-flex');
 
 		if ( ! inst._ffz_mounted || ! metabar )
 			return;

src/sites/twitch-twilight/modules/chat/scroller.js

@@ -123,25 +123,25 @@ export default class Scroller extends Module {
 					if ( ! node )
 						return;
 
-					node.classList.add('full-height');
+					node.classList.add('tw-full-height');
 
 					el = this._ffz_freeze_indicator = e('div', {
-						className: 'ffz--freeze-indicator chat-list__more-messages-placeholder relative mg-x-2'
+						className: 'ffz--freeze-indicator chat-list__more-messages-placeholder tw-relative tw-mg-x-2'
 					}, e('div', {
-						className: 'chat-list__more-messages bottom-0 full-width align-items-center flex justify-content-center absolute pd-05'
+						className: 'chat-list__more-messages tw-bottom-0 tw-full-width tw-align-items-center tw-flex tw-justify-content-center tw-absolute tw-pd-05'
 					}));
 
 					this.ffzUpdateText();
 					node.appendChild(el);
 
 				} else
-					el.classList.remove('hide');
+					el.classList.remove('tw-hide');
 			}
 
 			cls.prototype.ffzHideFrozen = function() {
 				this._ffz_freeze_visible = false;
 				if ( this._ffz_freeze_indicator )
-					this._ffz_freeze_indicator.classList.add('hide');
+					this._ffz_freeze_indicator.classList.add('tw-hide');
 			}
 
 			cls.prototype.ffzFreeze = function() {

src/sites/twitch-twilight/modules/chat/settings_menu.js

@@ -39,7 +39,7 @@ export default class SettingsMenu extends Module {
 			cls.prototype.renderUniversalOptions = function() {
 				const val = old_universal.call(this);
 				val.props.children.push(e('div', {
-						className: 'mg-t-1'
+						className: 'tw-mg-t-1'
 					}, e('button', {
 						onClick: () => t.click(this)
 					}, t.i18n.t('site.menu_button', 'FrankerFaceZ Control Center'))

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss

@@ -12,7 +12,7 @@
 	border-top: 1px solid #aaa;
 	border-bottom-color: rgba(255,255,255,0.5);
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-top-color: #000;
 		border-bottom-color: rgba(255,255,255,0.1);
 	}
@@ -27,7 +27,7 @@
 .thread-message__warning {
 	padding-top: 0 !important;
 
-	& > .pd-y-05 {
+	& > .tw-pd-y-05 {
 		padding-top: calc(.5rem - 1px) !important;
 	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss

@@ -12,7 +12,7 @@
 	border-top: 1px solid rgba(255,255,255,0.5);
 	border-bottom-color: #aaa;
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-top-color: rgba(255,255,255,0.1);
 		border-bottom-color: #000;
 	}
@@ -27,7 +27,7 @@
 .thread-message__warning {
 	padding-top: 0 !important;
 
-	& > .pd-y-05 {
+	& > .tw-pd-y-05 {
 		padding-top: calc(.5rem - 1px) !important;
 	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss

@@ -11,7 +11,7 @@
 
 	border-top: 1px solid #dad8de;
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-top-color: #2c2541;
 	}
 
@@ -25,7 +25,7 @@
 .thread-message__warning {
 	padding-top: 0 !important;
 
-	& > .pd-y-05 {
+	& > .tw-pd-y-05 {
 		padding-top: calc(.5rem - 1px) !important;
 	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss

@@ -11,7 +11,7 @@
 
 	border-bottom: 1px solid #dad8de;
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-bottom-color: #2c2541;
 	}
 
@@ -25,7 +25,7 @@
 .thread-message__warning {
 	padding-bottom: 0 !important;
 
-	& > .pd-y-05 {
+	& > .tw-pd-y-05 {
 		padding-bottom: calc(.5rem - 1px) !important;
 	}
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss

@@ -3,7 +3,7 @@
 	&.ffz-mentioned:nth-child(2n+0) {
 		background-color: rgba(255,127,127,.4) !important;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: rgba(255,0,0,.3) !important;
 		}
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss

@@ -3,7 +3,7 @@
 	&.ffz-mentioned {
 		background-color: rgba(255,127,127,.2) !important;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: rgba(255,0,0,.2) !important;
 		}
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-token.scss

@@ -6,7 +6,7 @@
 	color: #fff;
 	background: rgba(0,0,0,0.5);
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		color: #000;
 		background-color: rgba(255,255,255,0.5);
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss

@@ -13,7 +13,7 @@
 	&:nth-child(2n+0) {
 		background-color: rgba(0,0,0,0.1) !important;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: rgba(255,255,255,0.05) !important;
 		}
 	}

src/sites/twitch-twilight/modules/css_tweaks/styles/hide-bits.scss

@@ -1,4 +1,4 @@
 .chat-input button[data-a-target="bits-button"],
-.channel-header__right > .mg-l-1 > div > div > button:not([data-a-target]) {
+.channel-header__right > .tw-mg-l-1 > div > div > button:not([data-a-target]) {
 	display: none;
 }

src/sites/twitch-twilight/modules/css_tweaks/styles/minimal-navigation.scss

@@ -7,8 +7,17 @@
 		top: -4rem !important;
 		transition: top ease-in-out 75ms, bottom ease-in-out 75ms;
 
+		.tw-svg__asset--logotwitch {
+			visibility: hidden;
+		}
+
+		&:focus-within,
 		&:hover {
 			top: 0 !important;
+
+			.tw-svg__asset--logotwitch {
+				visibility: visible;
+			}
 		}
 	}
 

src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss

@@ -18,7 +18,7 @@
 	border-right: none !important;
 	border-left: 1px solid #dad8de;
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-left-color: #2c2541;
 	}
 }
@@ -27,7 +27,7 @@
 	border-left: none !important;
 	border-right: 1px solid #dad8de;
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		border-right-color: #2c2541;
 	}
 }

src/sites/twitch-twilight/modules/directory/following.js

@@ -318,7 +318,7 @@ export default class Following extends SiteModule {
 		}
 
 		this.hostMenu = e('div', 'ffz-host-menu tw-balloon tw-block',
-			e('div', 'tw-selectable-filter__balloon tw-pd-y-05',
+			e('div', 'tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
 				e('div', {
 					className: 'scrollable-area',
 					'data-simplebar': true,
@@ -328,7 +328,8 @@ export default class Following extends SiteModule {
 			)
 		);
 
-		document.body.appendChild(this.hostMenu);
+		document.body.querySelector('.twilight-root').appendChild(this.hostMenu);
+		//document.body.appendChild(this.hostMenu);
 
 		this.hostMenuPopper = new Popper(document.body, this.hostMenu, {
 			placement: 'bottom-start',

src/sites/twitch-twilight/modules/menu_button.js

@@ -47,7 +47,7 @@ export default class MenuButton extends SiteModule {
 
 
 		this._el = e('div',
-			'ffz-top-nav align-self-center flex-grow-0 flex-shrink-0 flex-nowrap pd-r-1 pd-l-05',
+			'ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05',
 			this._btn = e('button',
 				{
 					className: 'tw-button-icon tw-button-icon--overlay tw-button-icon--large',

src/sites/twitch-twilight/modules/theme/index.js

@@ -73,7 +73,7 @@ export default class ThemeEngine extends Module {
 
 	updateSetting(enable) {
 		this.toggleStyle(enable);
-		document.body.classList.toggle('theme--ffz', enable);
+		document.body.classList.toggle('tw-theme--ffz', enable);
 	}
 
 	onEnable() {

src/sites/twitch-twilight/styles/channel.scss

@@ -1,5 +1,5 @@
 .channel-info-bar__action-container {
-	& > .flex {
+	& > .tw-flex {
 		& > * {
 			margin-left: 0 !important;
 			margin-right: 1rem !important;
@@ -15,7 +15,7 @@
 			margin-left: -.8rem !important;
 		}
 
-		.c-text-live {
+		.tw-c-text-live {
 			order: 1;
 		}
 
@@ -24,12 +24,12 @@
 		}
 	}
 
-	& > .flex:last-child > :last-child {
+	& > .tw-flex:last-child > :last-child {
 		margin-right: 0 !important
 	}
 }
 
-.theme--ffz, .theme--ffz.theme--dark, .theme--dark, body {
+.tw-theme--ffz, .tw-theme--ffz.tw-theme--dark, .tw-theme--dark, body {
 	.ffz-stat > .tw-button,
 	.ffz-stat.tw-button {
 		color: inherit;

src/sites/twitch-twilight/styles/fixes.scss

@@ -1,4 +1,4 @@
-.theme--dark .live-channel-card__boxart {
+.tw-theme--dark .live-channel-card__boxart {
 	border-right: none;
 	border-bottom: none;
 }

src/sites/twitch-twilight/styles/main_menu.scss

@@ -25,7 +25,7 @@
 		width: 100%;
 		height: 100%;
 
-		&, .theme--dark & {
+		&, .tw-theme--dark & {
 			border: none !important;
 		}
 

src/sites/twitch-twilight/styles/menu_button.scss

@@ -5,7 +5,7 @@
 		font-size: 1.2rem;
 	}
 
-	.pd-r-1 + & {
+	.tw-pd-r-1 + & {
 		margin-left: -.5rem;
 	}
 

src/std-components/tab-container.vue

@@ -6,7 +6,7 @@
 	@keyup.alt.page-down.stop="focusNextTab"
 >
 	<header
-		class="flex"
+		class="tw-flex"
 		tabindex="0"
 		role="tablist"
 		@keyup.home="firstTab"
@@ -24,7 +24,7 @@
 			:id="'tab-for-' + i.full_key"
 			:aria-selected="selected === idx"
 			:aria-controls="'tab-panel-' + i.full_key"
-			class="tab pd-y-05 pd-x-1"
+			class="tab tw-pd-y-05 tw-pd-x-1"
 			:class="[selected === idx ? 'active' : '']"
 			@click="selected = idx"
 		>
@@ -32,14 +32,14 @@
 		</div>
 	</header>
 	<section
-		class="border"
+		class="tw-border"
 		:id="'tab-panel-' + tab.full_key"
 		:aria-labelledby="'tab-for-' + tab.full_key"
 		role="tabpanel"
 		aria-hidden="false"
 		aria-expanded="true"
 	>
-		<section v-if="tab.description" class="pd-b-1">
+		<section v-if="tab.description" class="tw-pd-b-1">
 			{{ t(tab.desc_i18n_key, tab.description, tab) }}
 		</section>
 		<component

styles/tooltips.scss

@@ -10,11 +10,11 @@ body {
 		top: -3px;
 		box-shadow: -1px -1px 0 #dad8de;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			box-shadow: -1px -1px 0 #2c2541;
 		}
 
-		.theme--ffz & {
+		.tw-theme--ffz & {
 			box-shadow: -1px -1px 0 var(--ffz-color-20);
 		}
 	}
@@ -23,11 +23,11 @@ body {
 		bottom: -3px;
 		box-shadow: 1px 1px 0 #dad8de;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			box-shadow: 1px 1px 0 #2c2541;
 		}
 
-		.theme--ffz & {
+		.tw-theme--ffz & {
 			box-shadow: 1px 1px 0 var(--ffz-color-20);
 		}
 	}
@@ -36,11 +36,11 @@ body {
 		right: -3px;
 		box-shadow: -1px 1px 0 #dad8de;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			box-shadow: -1px 1px 0 #2c2541;
 		}
 
-		.theme--ffz & {
+		.tw-theme--ffz & {
 			box-shadow: -1px 1px 0 var(--ffz-color-20);
 		}
 	}
@@ -49,11 +49,11 @@ body {
 		left: -3px;
 		box-shadow: 1px -1px 0 #dad8de;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			box-shadow: 1px -1px 0 #2c2541;
 		}
 
-		.theme--ffz & {
+		.tw-theme--ffz & {
 			box-shadow: 1px -1px 0 var(--ffz-color-20);
 		}
 	}
@@ -123,7 +123,7 @@ body {
 	}
 
 
-	.theme--dark & {
+	.tw-theme--dark & {
 		background: #fff;
 		color: #0e0c13;
 

styles/widgets.scss

@@ -7,8 +7,8 @@
 @import "./widgets/profile-selector.scss";
 
 
-.display-inline { display: inline !important }
+.tw-display-inline { display: inline !important }
-.width-auto { width: auto !important }
+.tw-width-auto { width: auto !important }
 
 .ffz--widget {
 
@@ -131,7 +131,7 @@
 		font-size: 16px;
 		font-variant: small-caps;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			border-bottom-color: #2c2541;
 		}
 
@@ -152,7 +152,7 @@
 		border-radius: 2px;
 		background-color: rgba(0,0,0,0.1);
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: rgba(255,255,255,0.05);
 		}
 	}

styles/widgets/menu-container.scss

@@ -16,7 +16,7 @@
 
 		background-color: $bg-light;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: $bg-dark;
 		}
 

styles/widgets/menu-tree.scss

@@ -19,7 +19,7 @@
 
 	.active > div,
 	.active > div:hover,
-	.theme--dark & .active > div:hover {
+	.tw-theme--dark & .active > div:hover {
 		background-color: #6441a4;
 		color: #fff;
 	}
@@ -29,7 +29,7 @@
 
 		background-color: #fff;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			background-color: #201c2b;
 		}
 	}

styles/widgets/profile-selector.scss

@@ -2,6 +2,7 @@
 	position: relative;
 
 	.tw-balloon {
+		position: absolute;
 		margin-top: 0 !important
 	}
 
@@ -22,7 +23,7 @@
 		opacity: .5;
 		font-variant: italic;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			opacity: .25;
 		}
 	}
@@ -36,7 +37,7 @@
 	}
 
 	&:last-child {
-		&, .theme--dark & {
+		&, .tw-theme--dark & {
 			border-bottom: none !important
 		}
 	}
@@ -51,7 +52,7 @@
 	&:hover {
 		background: rgba(100, 65, 164, .05);
 
-		.theme-dark & {
+		.tw-theme-dark & {
 			background: rgba(100, 65, 164, .2);
 		}
 	}

styles/widgets/tab-container.scss

@@ -20,7 +20,7 @@
 
 		border-color: $border-light;
 
-		.theme--dark & {
+		.tw-theme--dark & {
 			border-color: $border-dark;
 		}