+
diff --git a/src/sites/twitch-twilight/modules/channel.jsx b/src/sites/twitch-twilight/modules/channel.jsx
index 1c193781..dc93976f 100644
--- a/src/sites/twitch-twilight/modules/channel.jsx
+++ b/src/sites/twitch-twilight/modules/channel.jsx
@@ -332,9 +332,9 @@ export default class Channel extends Module {
}
if ( ! el._ffz_links && want_links ) {
- const link = el.querySelector('a .tw-line-height-heading'),
+ const link = el.querySelector('a .tw-title'),
anchor = link && link.closest('a'),
- cont = anchor && anchor.closest('.tw-flex');
+ cont = anchor && anchor.closest('div');
if ( cont && el.contains(cont) ) {
el._ffz_links =
;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js
index 64c34916..a3181726 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/index.js
+++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js
@@ -22,7 +22,7 @@ const CLASSES = {
'side-closed-rec-channels': '.side-nav--collapsed .recommended-channels,.side-nav--collapsed .side-nav-section + .side-nav-section:not(.online-friends)',
'side-offline-channels': '.ffz--side-nav-card-offline',
'side-rerun-channels': '.side-nav .ffz--side-nav-card-rerun',
- 'modview-hide-info': '.tw-flex.modview-player-widget__hide-stream-info',
+ 'modview-hide-info': '.modview-player-widget__hide-stream-info',
'community-highlights': '.community-highlight-stack__card',
@@ -44,7 +44,7 @@ const CLASSES = {
'not-live-bar': 'div[data-test-selector="non-live-video-banner-layout"]',
'channel-live-ind': '.channel-header__user .tw-channel-status-text-indicator,.channel-info-content .tw-halo__indicator',
'celebration': 'body .celebration__overlay',
- 'mod-view': '.chat-input__buttons-container .tw-core-button[href*="/moderator"]'
+ 'mod-view': '.chat-input__buttons-container a[href*="/moderator"]'
};
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss
index 01bb6c16..149f9990 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/emote-menu.scss
@@ -1,8 +1,10 @@
button[data-a-target="emote-picker-button"] {
- .tw-button-icon__icon {
- padding: .6rem .4rem .2rem .4rem;
+ div[class^="ScButtonIcon"] {
+ padding: .2rem .2rem 0 0;
div > div {
+ overflow: unset !important;
+
&:before {
display: inline-block;
width: 2.4rem;
@@ -12,8 +14,6 @@ button[data-a-target="emote-picker-button"] {
font-weight: normal;
speak: none;
- margin-top: -.3rem;
-
font-variant: normal;
text-transform: none;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
index 68c86e9c..6f8259a7 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/portrait.scss
@@ -4,7 +4,7 @@
--ffz-theater-height: calc(calc(100vw * 0.5625) + var(--ffz-portrait-extra-height));
--ffz-chat-height: calc(100vh - var(--ffz-player-height));
- & > .tw-flex-column > .tw-full-height {
+ & > div:first-child > div[class^="sc"] {
.ffz--portrait-invert & {
position: absolute;
left: 0;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
index c0805b24..137f7e45 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/square-avatars.scss
@@ -5,6 +5,7 @@
--border-radius-rounded: 0 !important;
}
+.tw-image-avatar,
.user-avatar-card__halo,
.player-streaminfo__picture img[src],
.channel-info-content .tw-halo,
diff --git a/src/sites/twitch-twilight/modules/directory/game.jsx b/src/sites/twitch-twilight/modules/directory/game.jsx
index c93ed242..181dff0b 100644
--- a/src/sites/twitch-twilight/modules/directory/game.jsx
+++ b/src/sites/twitch-twilight/modules/directory/game.jsx
@@ -63,10 +63,22 @@ export default class Game extends SiteModule {
for(const inst of instances)
this.updateGameHeader(inst);
});
+
+ this.on('site.router:route', route => {
+ if ( route && route.name === 'dir-game-index' )
+ this.updateGameHeader();
+ })
}
updateGameHeader(inst) {
+ if ( inst === undefined ) {
+ for(const inst of this.GameHeader.instances)
+ this.updateGameHeader(inst);
+
+ return;
+ }
+
this.updateButtons(inst);
const category = inst?.props?.data?.game;
@@ -83,14 +95,14 @@ export default class Game extends SiteModule {
if ( get('data.game', inst.props) == null || ! container || ! container.querySelector )
return;
- const buttons = container.querySelector('.tw-flex > .tw-flex-column');
- if ( ! buttons )
- return;
-
- const ffz_buttons = buttons.querySelector('.ffz-directory-buttons');
+ const ffz_buttons = container.querySelector('.ffz-directory-buttons');
if ( ffz_buttons )
ffz_buttons.remove();
+ const buttons = container.querySelector('.directory-header-new__info > div > div + div');
+ if ( ! buttons )
+ return;
+
let block_btn, block_label,
hidden_btn, hidden_label;
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 47d6f196..be45b72d 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@@ -485,7 +485,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
this.toggleNormalizer(chat_bits.length || bits.length);
if ( bits.length )
- this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
+ this.css_tweaks.set('colors', `body,body .tw-root--theme-light,body .tw-root--theme-dark {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content div[class^="ScAccentRegion"]{${accent_bits.join('\n')}}`);
else
this.css_tweaks.delete('colors');
}
diff --git a/src/sites/twitch-twilight/styles/channel.scss b/src/sites/twitch-twilight/styles/channel.scss
index 2bd33e1b..862824c5 100644
--- a/src/sites/twitch-twilight/styles/channel.scss
+++ b/src/sites/twitch-twilight/styles/channel.scss
@@ -1,4 +1,4 @@
-.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
+/*.channel-info-bar__content-right > .tw-align-items-start > .tw-flex:last-child,
.channel-info-bar__action-container > .tw-flex {
.channel-info-bar__viewers-wrapper > div:first-child {
margin-right: 0;
@@ -32,7 +32,7 @@
& > .tw-flex:last-child > :last-child {
margin-right: 0 !important
}
-}
+}*/
.tw-root--theme-ffz, .tw-root--theme-ffz.tw-root--theme-dark, .tw-root--theme-dark, body {
.ffz-stat > .tw-button--text,
@@ -70,21 +70,14 @@
}
}
-
-.ffz--meta-tray:not(.tw-flex-wrap) {
+.ffz--meta-tray {
& > *:not(.ffz-stat) {
order: 500;
}
-}
-.ffz--meta-tray.tw-flex-wrap {
- & > :first-child {
+ & > :first-child:not(.ffz-stat) {
order: 1;
}
-
- & > :nth-child(0n+2) {
- order: 500;
- }
}
.ffz-stat {
diff --git a/styles/native/index.scss b/styles/native/index.scss
index 45ec9ab8..9823b224 100644
--- a/styles/native/index.scss
+++ b/styles/native/index.scss
@@ -7,4 +7,5 @@
@import "tag";
@import "progress";
@import "tooltip";
-@import "balloon";
\ No newline at end of file
+@import "balloon";
+@import "slider";
\ No newline at end of file
diff --git a/styles/native/slider.scss b/styles/native/slider.scss
new file mode 100644
index 00000000..7b59cdcb
--- /dev/null
+++ b/styles/native/slider.scss
@@ -0,0 +1,162 @@
+.ffz-range {
+ appearance: none;
+ cursor: pointer;
+ height: 1.6rem;
+ vertical-align: middle;
+ width: 100%;
+
+ &, &:active, &:hover, &:focus {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ }
+
+ &:disabled,
+ &:disabled + &__fill {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+
+ &::-moz-range-track {
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+ &::-ms-track {
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+ &::-webkit-slider-runnable-track {
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+
+ &::-moz-range-thumb {
+ appearance: none;
+ background: var(--color-white);
+ border: var(--border-width-default) solid var(--color-border-range-handle);
+ border-radius: var(--border-radius-rounded);
+ box-shadow: var(--shadow-elevation-1);
+ height: 1.6rem;
+ margin-top: -.7rem;
+ width: 1.6rem;
+ }
+ &::-ms-thumb {
+ appearance: none;
+ background: var(--color-white);
+ border: var(--border-width-default) solid var(--color-border-range-handle);
+ border-radius: var(--border-radius-rounded);
+ box-shadow: var(--shadow-elevation-1);
+ height: 1.6rem;
+ margin-top: -.7rem;
+ width: 1.6rem;
+ }
+ &::-webkit-slider-thumb {
+ appearance: none;
+ background: var(--color-white);
+ border: var(--border-width-default) solid var(--color-border-range-handle);
+ border-radius: var(--border-radius-rounded);
+ box-shadow: var(--shadow-elevation-1);
+ height: 1.6rem;
+ margin-top: -.7rem;
+ width: 1.6rem;
+ }
+
+ &[data-focus-visible-added] {
+ outline: none;
+
+ &::-moz-range-thumb {
+ border: var(--border-width-default) solid var(--color-background-range-fill);
+ }
+ &::-ms-thumb {
+ border: var(--border-width-default) solid var(--color-background-range-fill);
+ }
+ &::-webkit-slider-thumb {
+ border: var(--border-width-default) solid var(--color-background-range-fill);
+ }
+ }
+
+ &--error {
+ &::-moz-range-thumb {
+ border: var(--border-width-default) solid var(--color-border-input-error);
+ }
+ &::-ms-thumb {
+ border: var(--border-width-default) solid var(--color-border-input-error);
+ }
+ &::-webkit-slider-thumb {
+ border: var(--border-width-default) solid var(--color-border-input-error);
+ }
+ }
+
+ &--unfilled {
+ &::-moz-range-track {
+ background-color: var(--color-background-range);
+ }
+ &::-ms-track {
+ background-color: var(--color-background-range);
+ }
+ &::-webkit-slider-runnable-track {
+ background-color: var(--color-background-range);
+ }
+ }
+
+ &--unfilled.ffz-range-overlay {
+ &::-moz-range-track {
+ background-color: var(--color-background-range-overlay);
+ }
+ &::-ms-track {
+ background-color: var(--color-background-range-overlay);
+ }
+ &::-webkit-slider-runnable-track {
+ background-color: var(--color-background-range-overlay);
+ }
+ }
+
+ &--unfilled,
+ &--unfilled.ffz-range--overlay {
+ &::-moz-range-track {
+ border-radius: var(--border-radius-large);
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+ &::-ms-track {
+ border-radius: var(--border-radius-large);
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+ &::-webkit-slider-runnable-track {
+ border-radius: var(--border-radius-large);
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+ }
+
+ &__fill {
+ height: 100%;
+
+ &-container {
+ background-color: var(--color-background-range);
+ cursor: pointer;
+ height: .2rem;
+ width: 100%;
+ }
+
+ &-value {
+ background-color: var(--color-background-range-fill);
+ height: 100%;
+ }
+
+ &--overlay &-container {
+ background-color: var(--color-background-range-overlay);
+ }
+
+ &--overlay &-value {
+ background-color: var(--color-background-range-overlay-fill);
+ }
+ }
+}
\ No newline at end of file