mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-02 16:08:31 +00:00
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-
This commit is contained in:
SirStendec
parent
5a9a3d221b
commit
4b246ade44
50 changed files with 1564 additions and 2167 deletions
|
|
@ -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> </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>
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
srcSet: `${TWITCH_BASE}${e_id}/1.0 1x, ${TWITCH_BASE}${e_id}/2.0 2x`,
|
||||
src,
|
||||
srcSet,
|
||||
text: text.slice(e_start - t_start, e_end - t_start).join(''),
|
||||
modifiers: []
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--changelog border-t pd-t-1">
|
||||
<div class="align-center">
|
||||
<div class="ffz--changelog tw-border-t tw-pd-t-1">
|
||||
<div class="tw-align-center">
|
||||
<h2>{{ t('home.changelog', 'Changelog') }}</h2>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="flex-shrink-0 mg-r-1">
|
||||
<div class="tw-mg-x-1 tw-flex tw-flex-grow-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">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--home flex flex--nowrap">
|
||||
<div class="flex-grow-1">
|
||||
<div class="align-center">
|
||||
<div class="ffz--home tw-flex tw-flex-nowrap">
|
||||
<div class="tw-flex-grow-1">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 }">
|
||||
<header class="c-background full-width align-items-center flex flex-nowrap" @dblclick="resize">
|
||||
<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="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">
|
||||
<nav class="ffz-vertical-nav c-background-alt-2 border-r full-height flex flex-column flex-shrink-0 flex-nowrap">
|
||||
<header class="border-b pd-1">
|
||||
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-nowrap tw-overflow-hidden">
|
||||
<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="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="ffz-vertical-nav__items full-width flex-grow-1 scrollable-area" data-simplebar>
|
||||
<div class="tw-full-width tw-full-height tw-overflow-hidden tw-flex tw-flex-nowrap tw-relative">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">» </template>
|
||||
</template>
|
||||
</header>
|
||||
<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="border-t pd-t-1 pd-b-2">
|
||||
<div class="c-background-accent c-text-overlay pd-1">
|
||||
<section v-if="! context.currentProfile.live && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
|
||||
<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">
|
||||
<li class="pd-x-1" v-for="i in item.items">
|
||||
<ul class="tw-border-t tw-pd-y-1">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--profile-editor">
|
||||
<div class="flex align-items-center border-t pd-1">
|
||||
<div class="flex-grow-1"></div>
|
||||
<div class="tw-flex tw-align-items-center tw-border-t tw-pd-1">
|
||||
<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.'
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--widget ffz--profile-manager border-t pd-y-1">
|
||||
<div class="c-background-accent c-text-overlay pd-1 mg-b-1">
|
||||
<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-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="flex-grow-1">
|
||||
<div class="tw-flex tw-align-items-center tw-pd-b-05">
|
||||
<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.') }}
|
||||
|
|
|
|||
|
|
@ -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') }}
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 )
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.theme--dark .live-channel-card__boxart {
|
||||
.tw-theme--dark .live-channel-card__boxart {
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&, .theme--dark & {
|
||||
&, .tw-theme--dark & {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.pd-r-1 + & {
|
||||
.tw-pd-r-1 + & {
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
@import "./widgets/profile-selector.scss";
|
||||
|
||||
|
||||
.display-inline { display: inline !important }
|
||||
.width-auto { width: auto !important }
|
||||
.tw-display-inline { display: inline !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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
background-color: $bg-light;
|
||||
|
||||
.theme--dark & {
|
||||
.tw-theme--dark & {
|
||||
background-color: $bg-dark;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
border-color: $border-light;
|
||||
|
||||
.theme--dark & {
|
||||
.tw-theme--dark & {
|
||||
border-color: $border-dark;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue