mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-08 07:10:54 +00:00
4.12.1
* Added: Preview of new theming system with custom colors. * Changed: Start using the CSS color variables in more places. * Fixed: Alignment of metadata in theater mode. * Fixed: Custom chat font not applying to chat input. * Fixed: Do not attempt to fetch uptime when there is no channel ID. * Fixed: Hover state of emote menu section buttons. * Fixed: Re-add pill rendering for FFZ menu button.
This commit is contained in:
SirStendec
parent
2232934309
commit
a1949b0f8e
21 changed files with 451 additions and 266 deletions
|
|
@ -22,7 +22,7 @@
|
|||
<figure v-else-if="color" :style="`background-color: ${color}`" />
|
||||
<figure v-else class="ffz-i-eyedropper" />
|
||||
</button>
|
||||
<div v-if="open" v-on-clickaway="closePicker" class="tw-absolute tw-z-default tw-right-0">
|
||||
<div v-if="open" v-on-clickaway="closePicker" class="tw-absolute tw-z-above tw-right-0">
|
||||
<chrome-picker :value="colors" @input="onPick" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
v-if="open"
|
||||
v-on-clickaway="closePicker"
|
||||
:class="{'ffz-bottom-100': openUp}"
|
||||
class="tw-absolute tw-z-default tw-balloon--up tw-balloon--right"
|
||||
class="tw-absolute tw-z-above tw-balloon--up tw-balloon--right"
|
||||
>
|
||||
<chrome-picker :value="colors" @input="onPick" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -118,6 +118,9 @@ export default class ChannelBar extends Module {
|
|||
inst._ffz_uptime_updating = true;
|
||||
inst._ffz_uptime_id = current_id;
|
||||
|
||||
if ( ! current_id )
|
||||
inst._ffz_meta = null;
|
||||
else {
|
||||
try {
|
||||
inst._ffz_meta = await this.twitch_data.getStreamMeta(current_id, inst?.props?.channel?.login);
|
||||
} catch(err) {
|
||||
|
|
@ -125,6 +128,7 @@ export default class ChannelBar extends Module {
|
|||
this.log.error('Error fetching uptime:', err);
|
||||
inst._ffz_meta = null;
|
||||
}
|
||||
}
|
||||
|
||||
inst._ffz_uptime_saved = Date.now();
|
||||
inst._ffz_uptime_updating = false;
|
||||
|
|
|
|||
|
|
@ -1713,7 +1713,7 @@ export default class EmoteMenu extends Module {
|
|||
<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
|
||||
<div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
|
||||
<button
|
||||
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
|
||||
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
|
||||
id="emote-picker__fav"
|
||||
data-tab="fav"
|
||||
data-tooltip-type="html"
|
||||
|
|
@ -1727,7 +1727,7 @@ export default class EmoteMenu extends Module {
|
|||
</div>
|
||||
{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
|
||||
<button
|
||||
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
|
||||
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
|
||||
id="emote-picker__channel"
|
||||
data-tab="channel"
|
||||
data-tooltip-type="html"
|
||||
|
|
@ -1741,7 +1741,7 @@ export default class EmoteMenu extends Module {
|
|||
</div>}
|
||||
<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
|
||||
<button
|
||||
class="ffz-tooltip tw-block tw-full-width ttw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
|
||||
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
|
||||
id="emote-picker__all"
|
||||
data-tab="all"
|
||||
data-tooltip-type="html"
|
||||
|
|
@ -1755,7 +1755,7 @@ export default class EmoteMenu extends Module {
|
|||
</div>
|
||||
{this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
|
||||
<button
|
||||
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive"
|
||||
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
|
||||
id="emote-picker__emoji"
|
||||
data-tab="emoji"
|
||||
data-tooltip-type="html"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import Module from 'utilities/module';
|
|||
import {ManagedStyle} from 'utilities/dom';
|
||||
import {has} from 'utilities/object';
|
||||
|
||||
const STYLE_VALIDATOR = document.createElement('span');
|
||||
|
||||
const CLASSES = {
|
||||
'top-discover': '.top-nav__nav-link[data-a-target="discover-link"]',
|
||||
'side-nav': '.side-nav',
|
||||
|
|
@ -221,6 +223,17 @@ export default class CSSTweaks extends Module {
|
|||
|
||||
// Other?
|
||||
|
||||
this.settings.add('layout.theme.global-font', {
|
||||
default: '',
|
||||
ui: {
|
||||
path: 'Appearance > Theme >> Fonts',
|
||||
title: 'Font Family',
|
||||
description: 'Override the font used for the entire Twitch website.',
|
||||
component: 'setting-text-box'
|
||||
},
|
||||
changed: () => this.updateFont()
|
||||
});
|
||||
|
||||
this.settings.add('channel.hide-live-indicator', {
|
||||
requires: ['context.route.name'],
|
||||
process(ctx, val) {
|
||||
|
|
@ -282,6 +295,28 @@ export default class CSSTweaks extends Module {
|
|||
this.toggleHide('side-closed-friends', friends === 2);
|
||||
|
||||
this.toggleHide('whispers', !this.settings.get('whispers.show'));
|
||||
|
||||
this.updateFont();
|
||||
}
|
||||
|
||||
updateFont() {
|
||||
let font = this.settings.get('layout.theme.global-font');
|
||||
if ( font && font.length ) {
|
||||
if ( font.indexOf(' ') !== -1 && font.indexOf(',') === -1 && font.indexOf('"') === -1 && font.indexOf("'") === -1 )
|
||||
font = `"${font}"`;
|
||||
|
||||
STYLE_VALIDATOR.style.fontFamily = '';
|
||||
STYLE_VALIDATOR.style.fontFamily = font;
|
||||
|
||||
if ( STYLE_VALIDATOR.style.fontFamily ) {
|
||||
this.setVariable('global-font', font);
|
||||
this.toggle('global-font', true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.toggle('global-font', false);
|
||||
this.deleteVariable('global-font');
|
||||
}
|
||||
|
||||
toggleHide(key, val) {
|
||||
|
|
|
|||
|
|
@ -12,5 +12,6 @@
|
|||
|
||||
textarea[data-a-target="chat-input"],
|
||||
textarea[data-a-target="video-chat-input"] {
|
||||
font-family: var(--ffz-chat-font-family) !important;
|
||||
font-size: var(--ffz-chat-font-size) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
right: calc(var(--ffz-chat-width) + 25rem);
|
||||
z-index: 3500;
|
||||
opacity: 0;
|
||||
width: unset !important;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,21 @@ export default class MenuButton extends SiteModule {
|
|||
return val;
|
||||
}
|
||||
|
||||
formatExtraPill() {
|
||||
if ( this.has_update )
|
||||
return null;
|
||||
|
||||
if ( DEBUG && this.addons.has_dev )
|
||||
return this.i18n.t('site.menu_button.dev', 'dev');
|
||||
|
||||
if ( DEBUG && ! this.addons.has_dev )
|
||||
return this.i18n.t('site.menu_button.main-dev', 'm-dev');
|
||||
|
||||
if ( ! DEBUG && this.addons.has_dev )
|
||||
return this.i18n.t('site.menu_button.addon-dev', 'a-dev');
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
update() {
|
||||
for(const inst of this.NavBar.instances)
|
||||
|
|
@ -135,7 +150,8 @@ export default class MenuButton extends SiteModule {
|
|||
if ( el )
|
||||
el.remove();
|
||||
|
||||
const pill = this.formatPill();
|
||||
const pill = this.formatPill(),
|
||||
extra_pill = this.formatExtraPill();
|
||||
|
||||
// TODO: Pill.
|
||||
|
||||
|
|
@ -169,7 +185,21 @@ export default class MenuButton extends SiteModule {
|
|||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.has_update && (<div class="ffz-menu__extra-pill tw-absolute">
|
||||
<div class={`tw-pill ${this.important_update ? 'tw-pill--notification' : ''}`}>
|
||||
<figure class="ffz-i-arrows-cw" />
|
||||
</div>
|
||||
</div>)}
|
||||
{extra_pill && (<div class="ffz-menu__extra-pill tw-absolute">
|
||||
<div class="tw-pill">
|
||||
{extra_pill}
|
||||
</div>
|
||||
</div>)}
|
||||
{pill && (<div class="ffz-menu__pill tw-absolute">
|
||||
<div class="tw-pill">
|
||||
{pill}
|
||||
</div>
|
||||
</div>)}
|
||||
</div>)
|
||||
|
||||
/*el = (<div class="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">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
|
||||
import Module from 'utilities/module';
|
||||
import {createElement} from 'utilities/dom';
|
||||
import {Color} from 'utilities/color';
|
||||
|
||||
import THEME_CSS_URL from 'site/styles/theme.scss';
|
||||
import THEME_CSS from 'site/styles/theme.scss';
|
||||
import NORMALIZER_CSS_URL from 'site/styles/color_normalizer.scss';
|
||||
|
||||
const BAD_ROUTES = ['product', 'prime', 'turbo'];
|
||||
|
||||
|
|
@ -23,6 +25,28 @@ export default class ThemeEngine extends Module {
|
|||
|
||||
this.should_enable = true;
|
||||
|
||||
// Colors
|
||||
|
||||
this.settings.add('theme.color.background', {
|
||||
default: '',
|
||||
ui: {
|
||||
path: 'Appearance > Theme >> Colors @{"description": "This is a quick preview of a new system coming soon to FrankerFaceZ. Expect heavy changes here, including separate Basic and Advanced modes, and better color selection."}',
|
||||
title: 'Background',
|
||||
component: 'setting-color-box'
|
||||
},
|
||||
changed: () => this.updateCSS()
|
||||
});
|
||||
|
||||
this.settings.add('theme.color.text', {
|
||||
default: '',
|
||||
ui: {
|
||||
path: 'Appearance > Theme >> Colors',
|
||||
title: 'Text',
|
||||
component: 'setting-color-box'
|
||||
},
|
||||
changed: () => this.updateCSS()
|
||||
});
|
||||
|
||||
this.settings.add('theme.dark', {
|
||||
requires: ['theme.is-dark'],
|
||||
default: false,
|
||||
|
|
@ -70,19 +94,78 @@ This is a very early feature and will change as there is time.`,
|
|||
});
|
||||
|
||||
this._style = null;
|
||||
this._normalizer = null;
|
||||
}
|
||||
|
||||
|
||||
updateCSS() {
|
||||
updateOldCSS() {
|
||||
const dark = this.settings.get('theme.is-dark'),
|
||||
gray = this.settings.get('theme.dark');
|
||||
|
||||
document.body.classList.toggle('tw-root--theme-dark', dark);
|
||||
//document.body.classList.toggle('tw-root--theme-dark', dark);
|
||||
document.body.classList.toggle('tw-root--theme-ffz', gray);
|
||||
|
||||
this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a' : '#2c2541') : '#dad8de');
|
||||
}
|
||||
|
||||
updateCSS() {
|
||||
this.updateOldCSS();
|
||||
|
||||
let dark = this.settings.get('theme.is-dark');
|
||||
const bits = [];
|
||||
|
||||
const background = Color.RGBA.fromCSS(this.settings.get('theme.color.background'));
|
||||
if ( background ) {
|
||||
bits.push(`--color-background-body: ${background.toCSS()};`);
|
||||
|
||||
const hsla = background.toHSLA(),
|
||||
luma = hsla.l;
|
||||
dark = luma < 0.5;
|
||||
|
||||
bits.push(`--color-background-base: ${hsla._l(luma + (dark ? .05 : -.05)).toCSS()};`);
|
||||
bits.push(`--color-background-alt: ${hsla._l(luma + (dark ? .1 : -.1)).toCSS()};`);
|
||||
bits.push(`--color-background-alt-2: ${hsla._l(luma + (dark ? .15 : -.15)).toCSS()};`);
|
||||
}
|
||||
|
||||
let text = Color.RGBA.fromCSS(this.settings.get('theme.color.text'));
|
||||
if ( ! text && background ) {
|
||||
text = Color.RGBA.fromCSS(dark ? '#FFF' : '#000');
|
||||
}
|
||||
|
||||
if ( text ) {
|
||||
bits.push(`--color-text-base: ${text.toCSS()};`);
|
||||
|
||||
const hsla = text.toHSLA(),
|
||||
luma = hsla.l;
|
||||
|
||||
bits.push(`--color-text-alt: ${hsla._l(luma + (dark ? -.1 : .1)).toRGBA().toCSS()};`);
|
||||
bits.push(`--color-text-alt-2: ${hsla._l(luma + (dark ? -.2 : .2)).toRGBA().toCSS()};`);
|
||||
}
|
||||
|
||||
|
||||
if ( bits.length )
|
||||
this.css_tweaks.set('colors', `body {${bits.join('\n')}}`);
|
||||
else
|
||||
this.css_tweaks.delete('colors');
|
||||
}
|
||||
|
||||
toggleNormalizer(enable) {
|
||||
if ( ! this._normalizer ) {
|
||||
if ( ! enable )
|
||||
return;
|
||||
|
||||
this._normalizer = createElement('link', {
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
href: NORMALIZER_CSS_URL
|
||||
});
|
||||
} else if ( ! enable ) {
|
||||
this._normalizer.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
if ( ! document.head.contains(this._normalizer) )
|
||||
document.head.appendChild(this._normalizer)
|
||||
}
|
||||
|
||||
toggleStyle(enable) {
|
||||
if ( ! this._style ) {
|
||||
|
|
@ -92,7 +175,7 @@ This is a very early feature and will change as there is time.`,
|
|||
this._style = createElement('link', {
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
href: THEME_CSS_URL
|
||||
href: THEME_CSS
|
||||
});
|
||||
|
||||
} else if ( ! enable ) {
|
||||
|
|
@ -110,5 +193,7 @@ This is a very early feature and will change as there is time.`,
|
|||
|
||||
onEnable() {
|
||||
this.updateSetting(this.settings.get('theme.dark'));
|
||||
this.toggleNormalizer(true);
|
||||
this.updateCSS();
|
||||
}
|
||||
}
|
||||
|
|
@ -167,14 +167,14 @@
|
|||
min-width: 2.8rem;
|
||||
}
|
||||
|
||||
.emote-picker__tab {
|
||||
/*.emote-picker__tab {
|
||||
border-top: 1px solid transparent;
|
||||
|
||||
&.emote-picker__tab--active,
|
||||
&:hover {
|
||||
border-top-color: #6441a4;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.whispers-thread .emote-picker-and-button & .emote-picker__tab-content {
|
||||
max-height: 30rem;
|
||||
|
|
|
|||
45
src/sites/twitch-twilight/styles/color_normalizer.scss
Normal file
45
src/sites/twitch-twilight/styles/color_normalizer.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
body {
|
||||
background-color: var(--color-background-body) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .channel-root__right-column,
|
||||
.channel-root__right-column {
|
||||
background-color: var(--color-background-body) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .chat-room,
|
||||
.chat-room {
|
||||
background-color: var(--color-background-body) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .carousel-player-nav-arrow__container,
|
||||
.carousel-player-nav-arrow__container {
|
||||
background-color: var(--color-background-body) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .side-nav__overlay-wrapper,
|
||||
.side-nav__overlay-wrapper {
|
||||
background-color: var(--color-background-alt) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .side-nav-card__link:hover,
|
||||
.side-nav-card__link:hover {
|
||||
background-color: var(--color-background-alt-2) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .channel-header,
|
||||
.channel-header {
|
||||
background-color: var(--color-background-body) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .channel-header__user,
|
||||
.channel-header__user {
|
||||
color: var(--color-text-base) !important;
|
||||
}
|
||||
|
||||
.tw-root--theme-dark .chat-line__moderation,
|
||||
.tw-root--theme-dark .chat-line__status,
|
||||
.chat-line__moderation,
|
||||
.chat-line__status {
|
||||
color: var(--color-text-alt-2) !important;
|
||||
}
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
.ffz-top-nav {
|
||||
.tw-pill {
|
||||
padding: .4rem;
|
||||
}
|
||||
|
||||
.ffz-menu__pill {
|
||||
top: -1rem;
|
||||
right: -.3rem;
|
||||
font-size: 1.2rem;
|
||||
top: -.5rem;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ffz-menu__extra-pill {
|
||||
bottom: -0.2rem;
|
||||
right: 5.2rem;
|
||||
font-size: 1.2rem;
|
||||
bottom: -.5rem;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tw-pd-r-1 + & {
|
||||
|
|
|
|||
|
|
@ -386,7 +386,7 @@ HSLAColor.prototype.targetLuminance = function (target) {
|
|||
}
|
||||
|
||||
HSLAColor.prototype.toRGBA = function() { return RGBAColor.fromHSLA(this.h, this.s, this.l, this.a); }
|
||||
HSLAColor.prototype.toCSS = function() { return `"hsl${this.a !== 1 ? 'a' : ''}(${Math.round(this.h*360)},${Math.round(this.s*100)}%,${Math.round(this.l*100)}%${this.a !== 1 ? `,${this.a}` : ''})`; }
|
||||
HSLAColor.prototype.toCSS = function() { return `hsl${this.a !== 1 ? 'a' : ''}(${Math.round(this.h*360)},${Math.round(this.s*100)}%,${Math.round(this.l*100)}%${this.a !== 1 ? `,${this.a}` : ''})`; }
|
||||
HSLAColor.prototype.toHSVA = function() { return this.toRGBA().toHSVA(); }
|
||||
HSLAColor.prototype.toXYZA = function() { return this.toRGBA().toXYZA(); }
|
||||
HSLAColor.prototype.toLUVA = function() { return this.toRGBA().toLUVA(); }
|
||||
|
|
|
|||
|
|
@ -80,8 +80,8 @@ body {
|
|||
z-index: 999999999;
|
||||
margin: 6px;
|
||||
border-radius: 2px;
|
||||
background: #0e0c13;
|
||||
color: #fff;
|
||||
background: var(--color-background-tooltip);
|
||||
color: var(--color-text-tooltip);
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
|
|
@ -96,7 +96,7 @@ body {
|
|||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
|
||||
background: #0e0c13;
|
||||
background: var(--color-background-tooltip);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
|
|
@ -126,16 +126,6 @@ body {
|
|||
border-radius: 0 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background: #fff;
|
||||
color: #0e0c13;
|
||||
|
||||
.ffz__tooltip--arrow {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -115,8 +115,8 @@ textarea.tw-input {
|
|||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe !important;
|
||||
inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8) !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
|
|
@ -138,12 +138,12 @@ textarea.tw-input {
|
|||
.ffz--profile__icon {
|
||||
&.ffz-i-ok,
|
||||
.ffz-i-ok {
|
||||
color: green;
|
||||
color: var(--color-green-darker);
|
||||
}
|
||||
|
||||
&.ffz-i-cancel,
|
||||
.ffz-i-cancel {
|
||||
color: red;
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,8 +159,8 @@ textarea.tw-input {
|
|||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe !important;
|
||||
inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8) !important;
|
||||
}
|
||||
|
||||
.handle {
|
||||
|
|
@ -173,7 +173,7 @@ textarea.tw-input {
|
|||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ffz-i-ok { color: green }
|
||||
.ffz-i-ok { color: var(--color-green) }
|
||||
}
|
||||
|
||||
.sortable-ghost {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.tw-checkbox__input {
|
||||
&:indeterminate + .tw-checkbox__label {
|
||||
&:before {
|
||||
background: #7d5bbe;
|
||||
border: 1px solid #7d5bbe;
|
||||
background: var(--color-twitch-purple-8);
|
||||
border: 1px solid var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@
|
|||
transform: translateY(-50%);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
background-color: $bg-light;
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background-color: $bg-dark;
|
||||
}
|
||||
background-color: var(--color-background-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,26 +12,21 @@
|
|||
content: '';
|
||||
pointer-events: none;
|
||||
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
.active > div,
|
||||
.active > div:hover,
|
||||
.tw-root--theme-dark & .active > div:hover {
|
||||
background-color: #6441a4;
|
||||
color: #fff;
|
||||
background-color: var(--color-background-button-primary-hover);
|
||||
color: var(--color-text-button-primary);
|
||||
}
|
||||
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background-color: #201c2b;
|
||||
}
|
||||
background-color: var(--color-background-button-text-hover);
|
||||
}
|
||||
|
||||
li div {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
border-left-color: transparent;
|
||||
|
||||
&.live .ffz--profile-row__icon {
|
||||
color: green;
|
||||
color: var(--color-green-darker);
|
||||
}
|
||||
|
||||
&:not(.live):not(:hover):not(:focus) {
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
&.current {
|
||||
border-left-color: #6441a4;
|
||||
border-left-color: var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
@ -51,16 +51,16 @@
|
|||
|
||||
&:focus {
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba(100, 65, 164, .05);
|
||||
background: var(--color-opac-p-1);
|
||||
|
||||
.tw-root--theme-dark & {
|
||||
background: rgba(100, 65, 164, .2);
|
||||
background: var(--color-opac-p-4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
outline: none;
|
||||
|
||||
.tab.active {
|
||||
box-shadow: inset 0 0 0 1px #7d5bbe,
|
||||
0 0 6px -2px #7d5bbe;
|
||||
box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
|
||||
0 0 6px -2px var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
border-bottom: 4px solid #6441a4;
|
||||
border-bottom: 4px solid var(--color-twitch-purple-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue