)
/*el = (
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 9da9005c..1a425d73 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@@ -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();
}
}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss
index 2f478523..3af3a0f9 100644
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/src/sites/twitch-twilight/styles/chat.scss
@@ -1,6 +1,6 @@
.chat-line__message--emote {
- vertical-align: middle;
- margin: -.5rem 0;
+ vertical-align: middle;
+ margin: -.5rem 0;
}
.chat-author__display-name,
@@ -17,262 +17,262 @@
}
.user-notice-line.tw-mg-y-05 {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
}
.chat-settings__content div[data-test-selector="high-contrast-selector"] {
- display: none;
+ display: none;
}
.autocomplete-balloon {
- .autocomplete-balloon__item {
- > .tw-flex {
- > div {
- display: flex;
- flex-shrink: 0;
- }
- }
+ .autocomplete-balloon__item {
+ > .tw-flex {
+ > div {
+ display: flex;
+ flex-shrink: 0;
+ }
+ }
- span {
- overflow-x: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
+ span {
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
}
.ffz-action-balloon {
- z-index: 10000 !important;
+ z-index: 10000 !important;
}
.ffz-tooltip.chat-card__link > * {
- pointer-events: none;
+ pointer-events: none;
}
.ffz--chat-card {
- .vod-message & {
- .ffz--card-text {
- max-width: 18rem;
- }
- }
+ .vod-message & {
+ .ffz--card-text {
+ max-width: 18rem;
+ }
+ }
- .chat-card__title {
- max-width: unset;
- }
+ .chat-card__title {
+ max-width: unset;
+ }
- .ffz--two-line {
- .tw-ellipsis { line-height: 1.4rem }
- .chat-card__title { line-height: 1.5rem }
- }
+ .ffz--two-line {
+ .tw-ellipsis { line-height: 1.4rem }
+ .chat-card__title { line-height: 1.5rem }
+ }
}
.ffz-emoji {
- width: calc(var(--ffz-chat-font-size) * 1.5);
- height: calc(var(--ffz-chat-font-size) * 1.5);
+ width: calc(var(--ffz-chat-font-size) * 1.5);
+ height: calc(var(--ffz-chat-font-size) * 1.5);
- &.preview-image {
- width: 7.2rem;
- height: 7.2rem;
- }
+ &.preview-image {
+ width: 7.2rem;
+ height: 7.2rem;
+ }
- &.emote-autocomplete-provider__image {
- width: 1.8rem;
- height: 1.8rem;
- margin: .5rem;
- }
+ &.emote-autocomplete-provider__image {
+ width: 1.8rem;
+ height: 1.8rem;
+ margin: .5rem;
+ }
}
.ffz-mod-icon {
- text-align: center;
- display: inline-flex;
+ text-align: center;
+ display: inline-flex;
- & + .ffz-mod-icon {
- margin-left: 1px;
- }
+ & + .ffz-mod-icon {
+ margin-left: 1px;
+ }
- span, img, figure {
- pointer-events: none;
- }
+ span, img, figure {
+ pointer-events: none;
+ }
- span, img,
- figure:before {
- margin: 0 0.05rem !important
- }
+ span, img,
+ figure:before {
+ margin: 0 0.05rem !important
+ }
- span {
- display: inline-block;
- min-width: 1.6rem;
- font-weight: bold;
- }
+ span {
+ display: inline-block;
+ min-width: 1.6rem;
+ font-weight: bold;
+ }
- .mod-icon__image img {
- max-height: 1.6rem;
- }
+ .mod-icon__image img {
+ max-height: 1.6rem;
+ }
- &.colored,
- .mod-icon__image img {
- opacity: 0.75;
- }
+ &.colored,
+ .mod-icon__image img {
+ opacity: 0.75;
+ }
- .ffz--action &,
- .tw-interactable:hover &,
- &:hover {
- .tw-root--theme-dark &, & {
- &.tw-c-text-alt-2 {
- color: inherit !important;
- }
- }
+ .ffz--action &,
+ .tw-interactable:hover &,
+ &:hover {
+ .tw-root--theme-dark &, & {
+ &.tw-c-text-alt-2 {
+ color: inherit !important;
+ }
+ }
- &.colored,
- .mod-icon__image img {
- opacity: 1;
- }
- }
+ &.colored,
+ .mod-icon__image img {
+ opacity: 1;
+ }
+ }
}
.ffz--giftee-name {
- cursor: pointer;
- outline: none;
+ cursor: pointer;
+ outline: none;
- &:hover {
- text-decoration: underline;
- }
+ &:hover {
+ text-decoration: underline;
+ }
}
.chat-line__username:hover,
.chatter-name:hover {
- text-decoration: underline;
+ text-decoration: underline;
}
.ffz--emote-picker {
- section:not(.filtered) heading {
- cursor: pointer;
- }
+ section:not(.filtered) heading {
+ cursor: pointer;
+ }
- .ffz--menu-badge {
- width: 1.8rem; height: 1.8rem;
- }
+ .ffz--menu-badge {
+ width: 1.8rem; height: 1.8rem;
+ }
- .ffz--expiry-info {
- opacity: 0.5;
- }
+ .ffz--expiry-info {
+ opacity: 0.5;
+ }
- .emote-picker__placeholder {
- display: inline-block;
- margin: .5rem .5rem 0;
- min-width: 2.8rem;
- }
+ .emote-picker__placeholder {
+ display: inline-block;
+ margin: .5rem .5rem 0;
+ min-width: 2.8rem;
+ }
- .emote-picker__tab {
- border-top: 1px solid transparent;
+ /*.emote-picker__tab {
+ border-top: 1px solid transparent;
- &.emote-picker__tab--active,
- &:hover {
- border-top-color: #6441a4;
- }
- }
+ &.emote-picker__tab--active,
+ &:hover {
+ border-top-color: #6441a4;
+ }
+ }*/
- .whispers-thread .emote-picker-and-button & .emote-picker__tab-content {
- max-height: 30rem;
- }
+ .whispers-thread .emote-picker-and-button & .emote-picker__tab-content {
+ max-height: 30rem;
+ }
- .emote-picker__tab-content {
- height: unset !important;
- max-height: 50rem;
- }
+ .emote-picker__tab-content {
+ height: unset !important;
+ max-height: 50rem;
+ }
- .whispers-thread {
- overflow: visible !important;
- }
+ .whispers-thread {
+ overflow: visible !important;
+ }
- @media only screen and (max-height: 750px) {
- .emote-picker__tab-content {
- #root & {
- max-height: calc(100vh - 31rem);
- }
+ @media only screen and (max-height: 750px) {
+ .emote-picker__tab-content {
+ #root & {
+ max-height: calc(100vh - 31rem);
+ }
- max-height: calc(100vh - 26rem);
- }
- }
+ max-height: calc(100vh - 26rem);
+ }
+ }
- .emote-picker-tab-item button > *,
- .emote-picker__emote-link > * {
- pointer-events: none;
- }
+ .emote-picker-tab-item button > *,
+ .emote-picker__emote-link > * {
+ pointer-events: none;
+ }
- .emote-picker__emote-image {
- max-height: 3.2rem
- }
+ .emote-picker__emote-image {
+ max-height: 3.2rem
+ }
- section:last-of-type {
- & > div:last-child,
- & > heading:last-child {
- border-bottom: none !important;
- }
- }
+ section:last-of-type {
+ & > div:last-child,
+ & > heading:last-child {
+ border-bottom: none !important;
+ }
+ }
- .ffz--emoji-tone-picker {
- .tw-balloon {
- min-width: unset;
- }
+ .ffz--emoji-tone-picker {
+ .tw-balloon {
+ min-width: unset;
+ }
- .tw-button__text {
- padding: .2rem .4rem;
- padding-right: .8rem;
- }
- }
+ .tw-button__text {
+ padding: .2rem .4rem;
+ padding-right: .8rem;
+ }
+ }
- .ffz--emoji-tone-picker__emoji {
- width: 2rem;
- height: 2rem;
- }
+ .ffz--emoji-tone-picker__emoji {
+ width: 2rem;
+ height: 2rem;
+ }
- .emote-picker__emote-link {
- position: relative;
- padding: 0.5rem;
- width: unset;
- height: unset;
- min-width: 3.8rem;
+ .emote-picker__emote-link {
+ position: relative;
+ padding: 0.5rem;
+ width: unset;
+ height: unset;
+ min-width: 3.8rem;
- img {
- vertical-align: middle;
- }
+ img {
+ vertical-align: middle;
+ }
- &.emote-picker__emoji {
- min-width: unset;
+ &.emote-picker__emoji {
+ min-width: unset;
- .emote-picker__emote-figure {
- width: 2rem;
- height: 2rem;
- }
- }
+ .emote-picker__emote-figure {
+ width: 2rem;
+ height: 2rem;
+ }
+ }
- &.locked {
- cursor: not-allowed;
+ &.locked {
+ cursor: not-allowed;
- img {
- opacity: 0.5;
- }
+ img {
+ opacity: 0.5;
+ }
- .ffz-i-lock {
- position: absolute;
- bottom: 0; right: 0;
- border-radius: .2rem;
- font-size: 1rem;
- background-color: rgba(0,0,0,0.5);
- color: #fff;
- }
+ .ffz-i-lock {
+ position: absolute;
+ bottom: 0; right: 0;
+ border-radius: .2rem;
+ font-size: 1rem;
+ background-color: rgba(0,0,0,0.5);
+ color: #fff;
+ }
- }
- }
+ }
+ }
- &.reduced-padding {
- .tw-pd-1 {
- padding: 0.5rem !important;
- }
- }
+ &.reduced-padding {
+ .tw-pd-1 {
+ padding: 0.5rem !important;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/styles/color_normalizer.scss b/src/sites/twitch-twilight/styles/color_normalizer.scss
new file mode 100644
index 00000000..4e4ef9e0
--- /dev/null
+++ b/src/sites/twitch-twilight/styles/color_normalizer.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/styles/menu_button.scss b/src/sites/twitch-twilight/styles/menu_button.scss
index 8c81530b..226e3724 100644
--- a/src/sites/twitch-twilight/styles/menu_button.scss
+++ b/src/sites/twitch-twilight/styles/menu_button.scss
@@ -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 + & {
diff --git a/src/sites/twitch-twilight/styles/mod_card.scss b/src/sites/twitch-twilight/styles/mod_card.scss
index 50b4ddb9..fe888712 100644
--- a/src/sites/twitch-twilight/styles/mod_card.scss
+++ b/src/sites/twitch-twilight/styles/mod_card.scss
@@ -2,12 +2,12 @@
width: 340px;
z-index: 9001;
- > header {
+ > header {
cursor: move;
- background-size: cover;
- background-position: top;
- }
+ background-size: cover;
+ background-position: top;
+ }
.ffz-tooltip {
> * {
@@ -23,7 +23,7 @@
line-height: 1.2;
}
- .mod-cards__tabs-container {
+ .mod-cards__tabs-container {
height: 3rem;
> .mod-cards__tab {
diff --git a/src/utilities/color.js b/src/utilities/color.js
index c3c6b274..968c9f35 100644
--- a/src/utilities/color.js
+++ b/src/utilities/color.js
@@ -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(); }
diff --git a/styles/tooltips.scss b/styles/tooltips.scss
index bdefdb50..fe7e9bbd 100644
--- a/styles/tooltips.scss
+++ b/styles/tooltips.scss
@@ -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;
- }
- }
}
diff --git a/styles/widgets.scss b/styles/widgets.scss
index 7f0f76d1..d5e2b942 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -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 {
diff --git a/styles/widgets/add-ons.scss b/styles/widgets/add-ons.scss
index a562d54b..d3f96d0d 100644
--- a/styles/widgets/add-ons.scss
+++ b/styles/widgets/add-ons.scss
@@ -1,5 +1,5 @@
.ffz--add-on-info {
- .ffz-logo-section {
- max-width: 8rem;
- }
+ .ffz-logo-section {
+ max-width: 8rem;
+ }
}
\ No newline at end of file
diff --git a/styles/widgets/check-box.scss b/styles/widgets/check-box.scss
index bfc95c89..f4b10658 100644
--- a/styles/widgets/check-box.scss
+++ b/styles/widgets/check-box.scss
@@ -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 {
diff --git a/styles/widgets/menu-container.scss b/styles/widgets/menu-container.scss
index 9a230057..86708eb8 100644
--- a/styles/widgets/menu-container.scss
+++ b/styles/widgets/menu-container.scss
@@ -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);
}
}
\ No newline at end of file
diff --git a/styles/widgets/menu-tree.scss b/styles/widgets/menu-tree.scss
index 2167b659..7f64b232 100644
--- a/styles/widgets/menu-tree.scss
+++ b/styles/widgets/menu-tree.scss
@@ -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 {
diff --git a/styles/widgets/profile-selector.scss b/styles/widgets/profile-selector.scss
index d876af67..a8a72229 100644
--- a/styles/widgets/profile-selector.scss
+++ b/styles/widgets/profile-selector.scss
@@ -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);
}
}
}
diff --git a/styles/widgets/tab-container.scss b/styles/widgets/tab-container.scss
index 0ac085c4..d1d47442 100644
--- a/styles/widgets/tab-container.scss
+++ b/styles/widgets/tab-container.scss
@@ -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);
}
}