mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-01 23:48:31 +00:00
Update the gray theme. Make the settings menu draw a sub-page list if a page has no content. Update changelog.
This commit is contained in:
SirStendec
parent
3ca7d1d955
commit
f0bcf7f53e
5 changed files with 1671 additions and 1589 deletions
|
|
@ -1,3 +1,18 @@
|
||||||
|
<div class="list-header">4.0.0-beta1.5<span>@a752805865b1313466a7</span> <time datetime="2018-02-08">(2018-02-08)</time></div>
|
||||||
|
<ul class="chat-menu-content menu-side-padding">
|
||||||
|
<li>Added: Setting to hide the Live indicator from live channels in the directory.</li>
|
||||||
|
<li>Fixed: Bug preventing clicking on box art on a live streamer in the directory when a channel avatar is being displayed.</li>
|
||||||
|
<li>Fixed: Chat on Videos with a custom chat width.</li>
|
||||||
|
<li>Changed: Update the Gray Theme with the latest changes from Twitch's dark theme.</li>
|
||||||
|
<li>API Changed: Draw settings page sub-pages if there are no contents of the settings page.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="list-header">4.0.0-beta1.5<span>@676b97e4ce5229b90db5</span> <time datetime="2018-02-06">(2018-02-06)</time></div>
|
||||||
|
<ul class="chat-menu-content menu-side-padding">
|
||||||
|
<li>Fixed: The <code>Hide Vodcasts</code> setting has been updated to <code>Hide Reruns</code>.</li>
|
||||||
|
<li>Fixed: Text wrapping and performance issues with the directory after a Twitch update.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div class="list-header">4.0.0-beta1.5<span>@bd87103fc1c64cf0df6d</span> <time datetime="2018-02-02">(2018-02-02)</time></div>
|
<div class="list-header">4.0.0-beta1.5<span>@bd87103fc1c64cf0df6d</span> <time datetime="2018-02-02">(2018-02-02)</time></div>
|
||||||
<ul class="chat-menu-content menu-side-padding">
|
<ul class="chat-menu-content menu-side-padding">
|
||||||
<li>Fixed: Error fetching room-specific user-specific emote sets.</li>
|
<li>Fixed: Error fetching room-specific user-specific emote sets.</li>
|
||||||
|
|
|
||||||
|
|
@ -263,7 +263,8 @@ export default class Badges extends Module {
|
||||||
props: {
|
props: {
|
||||||
'data-provider': 'twitch',
|
'data-provider': 'twitch',
|
||||||
'data-badge': badge_id,
|
'data-badge': badge_id,
|
||||||
'data-version': version
|
'data-version': version,
|
||||||
|
style: {}
|
||||||
},
|
},
|
||||||
badges
|
badges
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
|
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
<template v-if="! item.contents">
|
<template v-if="! item.contents || ! item.contents.length">
|
||||||
<ul class="tw-border-t tw-pd-y-1">
|
<ul class="tw-border-t tw-pd-y-1">
|
||||||
<li class="tw-pd-x-1" v-for="i in item.items">
|
<li class="tw-pd-x-1" v-for="i in item.items">
|
||||||
<a href="#" @click="$emit('change-item', i, false)">
|
<a href="#" @click="$emit('change-item', i, false)">
|
||||||
|
|
|
||||||
|
|
@ -342,7 +342,8 @@ export default class Metadata extends Module {
|
||||||
html: true,
|
html: true,
|
||||||
|
|
||||||
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
|
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
|
||||||
arrowClass: 'tw-balloon__tail tw-absolute',
|
// Hide the arrow for now, until we re-do our CSS to make it render correctly.
|
||||||
|
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute tw-hidden',
|
||||||
innerClass: 'tw-pd-1',
|
innerClass: 'tw-pd-1',
|
||||||
|
|
||||||
popper: {
|
popper: {
|
||||||
|
|
|
||||||
|
|
@ -58,12 +58,12 @@
|
||||||
--ffz-color-54: hsla(256, 8%, 73%, 0.9);
|
--ffz-color-54: hsla(256, 8%, 73%, 0.9);
|
||||||
--ffz-color-55: #000;
|
--ffz-color-55: #000;
|
||||||
--ffz-color-56: #404040;
|
--ffz-color-56: #404040;
|
||||||
|
--ffz-color-57: rgba(204,204,204,0.5);
|
||||||
|
--ffz-color-58: hsla(0, 0%, 100%, 0.6);
|
||||||
|
--ffz-color-59: #6a6a6a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tw-theme--ffz, .tw-theme--ffz .tw-theme--dark, .tw-theme--ffz.tw-theme--dark {
|
.tw-theme--ffz, .tw-theme--ffz .tw-theme--dark, .tw-theme--ffz.tw-theme--dark {
|
||||||
.tw-interactable {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
.modal__backdrop {
|
.modal__backdrop {
|
||||||
background-color: var(--ffz-color-25);
|
background-color: var(--ffz-color-25);
|
||||||
}
|
}
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
fill: var(--ffz-color-7);
|
fill: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.tw-svg__asset--brand {
|
.tw-svg__asset--brand {
|
||||||
fill: var(--ffz-color-2);
|
fill: var(--ffz-color-5);
|
||||||
}
|
}
|
||||||
.tw-svg__asset--live {
|
.tw-svg__asset--live {
|
||||||
fill: var(--ffz-color-14);
|
fill: var(--ffz-color-14);
|
||||||
|
|
@ -117,7 +117,7 @@
|
||||||
background-color: var(--ffz-color-7);
|
background-color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.tw-badge--brand {
|
.tw-badge--brand {
|
||||||
background-color: var(--ffz-color-2);
|
background-color: var(--ffz-color-5);
|
||||||
}
|
}
|
||||||
.tw-badge--live, .tw-badge--notification {
|
.tw-badge--live, .tw-badge--notification {
|
||||||
background-color: var(--ffz-color-14);
|
background-color: var(--ffz-color-14);
|
||||||
|
|
@ -270,6 +270,16 @@
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
||||||
}
|
}
|
||||||
|
&.tw-button--disabled {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--ffz-color-57);
|
||||||
|
&:active, &:focus, &:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--ffz-color-57);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.tw-button--overlay {
|
.tw-button--overlay {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
@ -281,18 +291,18 @@
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(--ffz-color-46);
|
border-color: var(--ffz-color-22);
|
||||||
background-color: var(--ffz-color-6);
|
background-color: var(--ffz-color-6);
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
|
border-color: var(--ffz-color-58);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
border-color: var(--ffz-color-46);
|
|
||||||
}
|
}
|
||||||
&.tw-button--hollow, &.tw-button--state-loading, &.tw-button--state-success {
|
&.tw-button--hollow, &.tw-button--state-loading, &.tw-button--state-success {
|
||||||
border-color: var(--ffz-color-4);
|
border-color: var(--ffz-color-4);
|
||||||
|
|
@ -469,18 +479,18 @@
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(--ffz-color-46);
|
border-color: var(--ffz-color-22);
|
||||||
background-color: var(--ffz-color-6);
|
background-color: var(--ffz-color-6);
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
|
border-color: var(--ffz-color-58);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-45);
|
box-shadow: 0 0 6px 0 var(--ffz-color-22);
|
||||||
border-color: var(--ffz-color-46);
|
|
||||||
}
|
}
|
||||||
&.tw-button-icon--hollow {
|
&.tw-button-icon--hollow {
|
||||||
border-color: var(--ffz-color-4);
|
border-color: var(--ffz-color-4);
|
||||||
|
|
@ -520,25 +530,6 @@
|
||||||
color: var(--ffz-color-16);
|
color: var(--ffz-color-16);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tw-balloon .tw-balloon__tail {
|
|
||||||
background-color: var(--ffz-color-0);
|
|
||||||
}
|
|
||||||
.tw-balloon--left .tw-balloon__tail {
|
|
||||||
-webkit-box-shadow: 1px -1px 0 var(--ffz-color-20);
|
|
||||||
box-shadow: 1px -1px 0 var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.tw-balloon--right .tw-balloon__tail {
|
|
||||||
-webkit-box-shadow: -1px 1px 0 var(--ffz-color-20);
|
|
||||||
box-shadow: -1px 1px 0 var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.tw-balloon--up .tw-balloon__tail {
|
|
||||||
-webkit-box-shadow: 1px 1px 0 var(--ffz-color-20);
|
|
||||||
box-shadow: 1px 1px 0 var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.tw-balloon--down .tw-balloon__tail {
|
|
||||||
-webkit-box-shadow: -1px -1px 0 var(--ffz-color-20);
|
|
||||||
box-shadow: -1px -1px 0 var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.tw-checkbox__input {
|
.tw-checkbox__input {
|
||||||
color: var(--ffz-color-23);
|
color: var(--ffz-color-23);
|
||||||
&:checked + .tw-checkbox__label {
|
&:checked + .tw-checkbox__label {
|
||||||
|
|
@ -577,9 +568,6 @@
|
||||||
.tw-drop-zone--over {
|
.tw-drop-zone--over {
|
||||||
border-color: var(--ffz-color-3);
|
border-color: var(--ffz-color-3);
|
||||||
}
|
}
|
||||||
.tw-input__icon svg {
|
|
||||||
fill: var(--ffz-color-23);
|
|
||||||
}
|
|
||||||
.tw-input {
|
.tw-input {
|
||||||
border-color: var(--ffz-color-26);
|
border-color: var(--ffz-color-26);
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-27);
|
||||||
|
|
@ -596,6 +584,9 @@
|
||||||
.tw-input--error {
|
.tw-input--error {
|
||||||
border-color: var(--ffz-color-14);
|
border-color: var(--ffz-color-14);
|
||||||
}
|
}
|
||||||
|
.tw-interactable {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
.tw-interactable--disabled, .tw-interactable:disabled {
|
.tw-interactable--disabled, .tw-interactable:disabled {
|
||||||
background-color: var(--ffz-color-6);
|
background-color: var(--ffz-color-6);
|
||||||
}
|
}
|
||||||
|
|
@ -619,13 +610,16 @@
|
||||||
}
|
}
|
||||||
.tw-interactable--selected {
|
.tw-interactable--selected {
|
||||||
background-color: var(--ffz-color-26);
|
background-color: var(--ffz-color-26);
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
.tw-interactable--alpha {
|
.tw-interactable--alpha {
|
||||||
&.tw-interactable--hover, &:hover {
|
&.tw-interactable--hover, &:hover {
|
||||||
background-color: var(--ffz-color-40);
|
background-color: var(--ffz-color-40);
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: var(--ffz-color-41);
|
background-color: var(--ffz-color-41);
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
|
||||||
|
|
@ -633,6 +627,7 @@
|
||||||
}
|
}
|
||||||
&.tw-interactable--selected {
|
&.tw-interactable--selected {
|
||||||
background-color: var(--ffz-color-42);
|
background-color: var(--ffz-color-42);
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tw-interactable--alert {
|
.tw-interactable--alert {
|
||||||
|
|
@ -667,23 +662,53 @@
|
||||||
background-color: var(--ffz-color-44);
|
background-color: var(--ffz-color-44);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tw-group__label {
|
.tw-link {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
&:hover, &:active, &:focus, &:visited {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tw-link--overlay {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
&:active, &:focus, &:hover, &:visited {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tw-link--inherit {
|
||||||
|
color: inherit;
|
||||||
|
&:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tw-form-group__label {
|
||||||
color: var(--ffz-color-23);
|
color: var(--ffz-color-23);
|
||||||
}
|
}
|
||||||
.tw-group__optional, .tw-group__hint {
|
.tw-form-group__optional, .tw-form-group__hint {
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.tw-group--error {
|
.tw-form-group--error {
|
||||||
.tw-group__hint, .tw-group__label {
|
.tw-form-group__hint, .tw-form-group__label {
|
||||||
color: var(--ffz-color-14);
|
color: var(--ffz-color-14);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tw-group__hint--error {
|
.tw-form-group__hint--error {
|
||||||
color: var(--ffz-color-14);
|
color: var(--ffz-color-14);
|
||||||
}
|
}
|
||||||
.tw-live-indicator, .tw-live-indicator--pulse:after {
|
.tw-channel-status-indicator, .tw-channel-status-indicator--pulse:after {
|
||||||
background-color: var(--ffz-color-14);
|
background-color: var(--ffz-color-14);
|
||||||
}
|
}
|
||||||
|
.tw-channel-status-indicator--offline {
|
||||||
|
background-color: var(--ffz-color-59);
|
||||||
|
&.tw-channel-status-indicator--pulse:after {
|
||||||
|
background-color: var(--ffz-color-59);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tw-channel-status-indicator--hosting {
|
||||||
|
background-color: var(--ffz-color-39);
|
||||||
|
&.tw-channel-status-indicator--pulse:after {
|
||||||
|
background-color: var(--ffz-color-39);
|
||||||
|
}
|
||||||
|
}
|
||||||
.tw-tooltip {
|
.tw-tooltip {
|
||||||
background-color: var(--ffz-color-4);
|
background-color: var(--ffz-color-4);
|
||||||
color: var(--ffz-color-27);
|
color: var(--ffz-color-27);
|
||||||
|
|
@ -738,7 +763,7 @@
|
||||||
background-color: var(--ffz-color-7);
|
background-color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.tw-pill--brand {
|
.tw-pill--brand {
|
||||||
background-color: var(--ffz-color-2);
|
background-color: var(--ffz-color-5);
|
||||||
}
|
}
|
||||||
.tw-pill--live, .tw-pill--notification {
|
.tw-pill--live, .tw-pill--notification {
|
||||||
background-color: var(--ffz-color-14);
|
background-color: var(--ffz-color-14);
|
||||||
|
|
@ -1019,6 +1044,23 @@
|
||||||
.tw-thumbnail-card a:hover .tw-thumbnail-card__title {
|
.tw-thumbnail-card a:hover .tw-thumbnail-card__title {
|
||||||
color: var(--ffz-color-2);
|
color: var(--ffz-color-2);
|
||||||
}
|
}
|
||||||
|
.tw-table-cell {
|
||||||
|
border-bottom-color: var(--ffz-color-20);
|
||||||
|
&:first-child {
|
||||||
|
border-left-color: var(--ffz-color-20);
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-right-color: var(--ffz-color-20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tw-table-heading {
|
||||||
|
border-top-color: var(--ffz-color-20);
|
||||||
|
border-right-color: var(--ffz-color-20);
|
||||||
|
border-bottom-color: var(--ffz-color-20);
|
||||||
|
&:first-child {
|
||||||
|
border-left-color: var(--ffz-color-20);
|
||||||
|
}
|
||||||
|
}
|
||||||
.tw-typeset {
|
.tw-typeset {
|
||||||
p code {
|
p code {
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-27);
|
||||||
|
|
@ -1034,12 +1076,12 @@
|
||||||
border-bottom-color: var(--ffz-color-20);
|
border-bottom-color: var(--ffz-color-20);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.passport-modal {
|
|
||||||
background-color: var(--ffz-color-4);
|
|
||||||
}
|
|
||||||
.scrollable-area .simplebar-track .simplebar-scrollbar {
|
.scrollable-area .simplebar-track .simplebar-scrollbar {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
|
.passport-modal {
|
||||||
|
background-color: var(--ffz-color-4);
|
||||||
|
}
|
||||||
.language-selector__list--border-right {
|
.language-selector__list--border-right {
|
||||||
border-right-color: var(--ffz-color-20);
|
border-right-color: var(--ffz-color-20);
|
||||||
}
|
}
|
||||||
|
|
@ -1058,34 +1100,23 @@
|
||||||
box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
box-shadow: 0 0 6px 0 var(--ffz-color-5);
|
||||||
}
|
}
|
||||||
.search-live-result-card__info {
|
.search-live-result-card__info {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-1);
|
||||||
}
|
}
|
||||||
.search-result-view__titlesep {
|
.search-result-section__titlesep {
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
background-color: var(--ffz-color-21);
|
background-color: var(--ffz-color-21);
|
||||||
&:hover {
|
}
|
||||||
background-color: var(--ffz-color-27);
|
.search-results-panel__highlight-link {
|
||||||
color: var(--ffz-color-2);
|
color: var(--ffz-color-2);
|
||||||
}
|
}
|
||||||
}
|
.search-results-panel__link {
|
||||||
.search-title-bar {
|
|
||||||
background-color: var(--ffz-color-27);
|
|
||||||
border-bottom-color: var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.search-panel__highlight-link {
|
|
||||||
color: var(--ffz-color-2);
|
|
||||||
}
|
|
||||||
.search-panel__link {
|
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.search-panel__card:hover {
|
.search-results-panel__card:hover {
|
||||||
.search-panel__highlight-link, .search-panel__link {
|
.search-results-panel__highlight-link, .search-results-panel__link {
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-23);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.notice-wrap__title, .notice-wrap__text {
|
|
||||||
color: var(--ffz-color-7);
|
|
||||||
}
|
|
||||||
.blue-bar {
|
.blue-bar {
|
||||||
background-color: var(--ffz-color-32);
|
background-color: var(--ffz-color-32);
|
||||||
}
|
}
|
||||||
|
|
@ -1165,17 +1196,6 @@
|
||||||
color: var(--ffz-color-23);
|
color: var(--ffz-color-23);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.user-card__overlay {
|
|
||||||
background-color: var(--ffz-color-25);
|
|
||||||
}
|
|
||||||
.user-card__status-btn {
|
|
||||||
background-color: var(--ffz-color-18);
|
|
||||||
border-color: var(--ffz-color-18);
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--ffz-color-14);
|
|
||||||
border-color: var(--ffz-color-18);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.verify-email-banner {
|
.verify-email-banner {
|
||||||
background-color: var(--ffz-color-20);
|
background-color: var(--ffz-color-20);
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -1292,6 +1312,28 @@
|
||||||
.anon-front__social-container {
|
.anon-front__social-container {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
|
.follow-game-card__overlay {
|
||||||
|
background-color: var(--ffz-color-25);
|
||||||
|
color: var(--ffz-color-23);
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--ffz-color-3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.follow-game-card__overlay--followed {
|
||||||
|
border-color: var(--ffz-color-26);
|
||||||
|
}
|
||||||
|
.top-nav__home-link {
|
||||||
|
color: var(--ffz-color-4);
|
||||||
|
}
|
||||||
|
.top-nav__menu {
|
||||||
|
background-color: var(--ffz-color-26);
|
||||||
|
}
|
||||||
|
.community-selection-page__progress-container {
|
||||||
|
background-color: var(--ffz-color-27);
|
||||||
|
}
|
||||||
|
.platform-filter {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
.platform-filter--active {
|
.platform-filter--active {
|
||||||
background-color: var(--ffz-color-26);
|
background-color: var(--ffz-color-26);
|
||||||
}
|
}
|
||||||
|
|
@ -1305,22 +1347,6 @@
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.follow-game-card__overlay {
|
|
||||||
background-color: var(--ffz-color-25);
|
|
||||||
color: var(--ffz-color-23);
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--ffz-color-3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.follow-game-card__overlay--followed {
|
|
||||||
border-color: var(--ffz-color-26);
|
|
||||||
}
|
|
||||||
.community-streams-row__title a {
|
|
||||||
color: var(--ffz-color-7);
|
|
||||||
&:hover {
|
|
||||||
color: var(--ffz-color-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bits-buy-card-offer-row__sub-text, .bits-buy-card__close {
|
.bits-buy-card-offer-row__sub-text, .bits-buy-card__close {
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
|
|
@ -1351,8 +1377,8 @@
|
||||||
.channel-header__item-count {
|
.channel-header__item-count {
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.channel-header__dropdown-hover-target:hover .channel-header__item-count, .channel-header .interactable:hover .channel-header__item-count {
|
.channel-header .interactable:hover .channel-header__item-count, .channel-header__dropdown-hover-target:hover .channel-header__item-count {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-1);
|
||||||
}
|
}
|
||||||
.channel-header__user {
|
.channel-header__user {
|
||||||
color: var(--ffz-color-1);
|
color: var(--ffz-color-1);
|
||||||
|
|
@ -1377,6 +1403,12 @@
|
||||||
.chat-share-prompt {
|
.chat-share-prompt {
|
||||||
color: var(--ffz-color-23);
|
color: var(--ffz-color-23);
|
||||||
}
|
}
|
||||||
|
.native-broadcast-notification__link {
|
||||||
|
color: var(--ffz-color-23);
|
||||||
|
&:hover {
|
||||||
|
color: var(--ffz-color-23);
|
||||||
|
}
|
||||||
|
}
|
||||||
.raid-countdown-bar__fill {
|
.raid-countdown-bar__fill {
|
||||||
background-color: var(--ffz-color-29);
|
background-color: var(--ffz-color-29);
|
||||||
}
|
}
|
||||||
|
|
@ -1405,13 +1437,13 @@
|
||||||
.chat-line__message--special {
|
.chat-line__message--special {
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-27);
|
||||||
}
|
}
|
||||||
.chat-line__moderation, .chat-line__status, .chat-line__mod-icons .mod-icon, .chat-line__bits-charity, .chat-line__raid, .chat-line__subscribe {
|
.chat-line__moderation, .chat-line__status, .chat-line__mod-icons .mod-icon, .chat-line__bits-charity, .chat-line__raid, .chat-line__ritual, .chat-line__subscribe {
|
||||||
color: var(--ffz-color-7);
|
color: var(--ffz-color-7);
|
||||||
}
|
}
|
||||||
.chat-line__bits-charity--prime, .chat-line__raid--prime, .chat-line__subscribe--prime {
|
.chat-line__bits-charity--prime, .chat-line__raid--prime, .chat-line__ritual--prime, .chat-line__subscribe--prime {
|
||||||
color: var(--ffz-color-2);
|
color: var(--ffz-color-2);
|
||||||
}
|
}
|
||||||
.chat-line__bits-charity--message, .chat-line__raid--message, .chat-line__subscribe--message {
|
.chat-line__bits-charity--message, .chat-line__raid--message, .chat-line__ritual--message, .chat-line__subscribe--message {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-24);
|
||||||
}
|
}
|
||||||
.chat-line__timestamp {
|
.chat-line__timestamp {
|
||||||
|
|
@ -1493,19 +1525,13 @@
|
||||||
background-color: var(--ffz-color-21);
|
background-color: var(--ffz-color-21);
|
||||||
}
|
}
|
||||||
.viewer-card__display-name-link {
|
.viewer-card__display-name-link {
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-23);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-23);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chat-room__pane {
|
.viewer-card__banner {
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-25);
|
||||||
border-left-color: var(--ffz-color-20);
|
|
||||||
}
|
|
||||||
.chat-room__header {
|
|
||||||
-webkit-box-shadow: inset 0 -1px 0 0 var(--ffz-color-20);
|
|
||||||
box-shadow: inset 0 -1px 0 0 var(--ffz-color-20);
|
|
||||||
background-color: var(--ffz-color-21);
|
|
||||||
}
|
}
|
||||||
.social-button__link--copy:after {
|
.social-button__link--copy:after {
|
||||||
color: var(--ffz-color-3);
|
color: var(--ffz-color-3);
|
||||||
|
|
@ -1565,7 +1591,7 @@
|
||||||
background-color: var(--ffz-color-25);
|
background-color: var(--ffz-color-25);
|
||||||
color: var(--ffz-color-23);
|
color: var(--ffz-color-23);
|
||||||
&:hover .embed-card__play {
|
&:hover .embed-card__play {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.channel-info-bar {
|
.channel-info-bar {
|
||||||
|
|
@ -1596,6 +1622,9 @@
|
||||||
.video-carousel:hover .video-carousel__button {
|
.video-carousel:hover .video-carousel__button {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
|
.video-filters {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
.video-filters--active {
|
.video-filters--active {
|
||||||
background-color: var(--ffz-color-26);
|
background-color: var(--ffz-color-26);
|
||||||
}
|
}
|
||||||
|
|
@ -1609,24 +1638,6 @@
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.clmgr-table__row-expanded {
|
|
||||||
border-color: var(--ffz-color-3);
|
|
||||||
}
|
|
||||||
.clmgr-result__subtitle {
|
|
||||||
color: var(--ffz-color-7);
|
|
||||||
}
|
|
||||||
.clmgr-result:hover .clmgr-result__subtitle {
|
|
||||||
color: var(--ffz-color-4);
|
|
||||||
}
|
|
||||||
.clmgr-table__row {
|
|
||||||
background-color: var(--ffz-color-0);
|
|
||||||
&:nth-child(2n) {
|
|
||||||
background-color: var(--ffz-color-21);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--ffz-color-27);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.event {
|
.event {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
|
|
@ -1655,9 +1666,9 @@
|
||||||
background-color: var(--ffz-color-20);
|
background-color: var(--ffz-color-20);
|
||||||
}
|
}
|
||||||
.directory-header__link {
|
.directory-header__link {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-1);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--ffz-color-24);
|
color: var(--ffz-color-1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.directory-tabs {
|
.directory-tabs {
|
||||||
|
|
@ -1684,6 +1695,24 @@
|
||||||
.directory-tabs__item:active:after {
|
.directory-tabs__item:active:after {
|
||||||
border-bottom-color: var(--ffz-color-3);
|
border-bottom-color: var(--ffz-color-3);
|
||||||
}
|
}
|
||||||
|
.event-video-card__owner-display-name {
|
||||||
|
color: var(--ffz-color-7);
|
||||||
|
&:hover {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.event-video-card__video-title:hover {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
.timetable-segment__expanded-image {
|
||||||
|
border-color: var(--ffz-color-0);
|
||||||
|
}
|
||||||
|
.for-you-community-streams-row__title a {
|
||||||
|
color: var(--ffz-color-7);
|
||||||
|
&:hover {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
.search-card-row:hover .search-card-row__link {
|
.search-card-row:hover .search-card-row__link {
|
||||||
color: var(--ffz-color-4);
|
color: var(--ffz-color-4);
|
||||||
}
|
}
|
||||||
|
|
@ -1751,9 +1780,6 @@
|
||||||
color: var(--ffz-color-55);
|
color: var(--ffz-color-55);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.video-chat {
|
|
||||||
background-color: var(--ffz-color-27);
|
|
||||||
}
|
|
||||||
.video-chat__input {
|
.video-chat__input {
|
||||||
-webkit-box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
|
-webkit-box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
|
||||||
box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
|
box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
|
||||||
|
|
@ -1877,7 +1903,7 @@
|
||||||
.tw-c-text-alt-2 {
|
.tw-c-text-alt-2 {
|
||||||
color: var(--ffz-color-7) !important;
|
color: var(--ffz-color-7) !important;
|
||||||
}
|
}
|
||||||
.tw-c-text-link, .tw-c-text-link-hover, .tw-c-text-link-active, .tw-c-text-link-visited {
|
.tw-c-text-link, .tw-c-text-link-hover, .tw-c-text-link-active, .tw-c-text-link-focus, .tw-c-text-link-visited {
|
||||||
color: var(--ffz-color-2) !important;
|
color: var(--ffz-color-2) !important;
|
||||||
}
|
}
|
||||||
.tw-c-text-alert, .tw-c-text-live {
|
.tw-c-text-alert, .tw-c-text-live {
|
||||||
|
|
@ -1899,7 +1925,10 @@
|
||||||
color: var(--ffz-color-23) !important;
|
color: var(--ffz-color-23) !important;
|
||||||
}
|
}
|
||||||
.tw-c-text-overlay-alt {
|
.tw-c-text-overlay-alt {
|
||||||
color: var(--ffz-color-24) !important;
|
color: var(--ffz-color-1) !important;
|
||||||
|
}
|
||||||
|
.tw-c-text-overlay-link, .tw-c-text-overlay-link-active, .tw-c-text-overlay-link-focus, .tw-c-text-overlay-link-hover, .tw-c-text-overlay-link-visited {
|
||||||
|
color: var(--ffz-color-2) !important;
|
||||||
}
|
}
|
||||||
.tw-c-text-chat-line-mentioning {
|
.tw-c-text-chat-line-mentioning {
|
||||||
color: var(--ffz-color-4) !important;
|
color: var(--ffz-color-4) !important;
|
||||||
|
|
@ -1958,9 +1987,14 @@
|
||||||
.mod-comment__unpublished-message {
|
.mod-comment__unpublished-message {
|
||||||
background-color: var(--ffz-color-26);
|
background-color: var(--ffz-color-26);
|
||||||
}
|
}
|
||||||
.ach-link:hover .ach-card {
|
.ach-link {
|
||||||
|
&:active .ach-card, &:focus .ach-card, &:hover .ach-card {
|
||||||
background-color: var(--ffz-color-21);
|
background-color: var(--ffz-color-21);
|
||||||
}
|
}
|
||||||
|
&:focus .ach-card {
|
||||||
|
outline: 0.5rem auto var(--ffz-color-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
.ach-card {
|
.ach-card {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
|
|
@ -1985,9 +2019,28 @@
|
||||||
.ach-sb {
|
.ach-sb {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
}
|
}
|
||||||
.ach-sb__text {
|
.ach-sb__text, .sm-cp-card__title {
|
||||||
color: var(--ffz-color-1);
|
color: var(--ffz-color-1);
|
||||||
}
|
}
|
||||||
|
.sm-cp-card a:hover .sm-cp-card__title {
|
||||||
|
color: var(--ffz-color-2);
|
||||||
|
}
|
||||||
|
.top-stats-tab {
|
||||||
|
color: "color-text-tab";
|
||||||
|
&:hover {
|
||||||
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
|
||||||
|
box-shadow: inset 0 -1px 0 var(--ffz-color-3);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
-webkit-box-shadow: 0 -2px 0 var(--ffz-color-3) inset, 0 4px 6px -4px var(--ffz-color-5);
|
||||||
|
box-shadow: inset 0 -2px 0 var(--ffz-color-3), 0 4px 6px -4px var(--ffz-color-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-stats-tab--active {
|
||||||
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
|
||||||
|
box-shadow: inset 0 -1px 0 var(--ffz-color-3);
|
||||||
|
color: var(--ffz-color-23);
|
||||||
|
}
|
||||||
.dashboard-side-nav__link {
|
.dashboard-side-nav__link {
|
||||||
color: var(--ffz-color-2);
|
color: var(--ffz-color-2);
|
||||||
}
|
}
|
||||||
|
|
@ -2021,15 +2074,24 @@
|
||||||
background-color: var(--ffz-color-9);
|
background-color: var(--ffz-color-9);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.sm-cp-card__title {
|
.sm-sb-flourish-confetti__content--purple-scale {
|
||||||
color: var(--ffz-color-1);
|
background-color: var(--ffz-color-3);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--ffz-color-26);
|
||||||
}
|
}
|
||||||
.sm-cp-card a:hover .sm-cp-card__title {
|
|
||||||
color: var(--ffz-color-2);
|
|
||||||
}
|
}
|
||||||
.sm-graph-panel {
|
.sm-graph-panel {
|
||||||
background-color: var(--ffz-color-3);
|
background-color: var(--ffz-color-3);
|
||||||
}
|
}
|
||||||
|
.video-card-dropdown__dropdown-wrapper {
|
||||||
|
background-color: var(--ffz-color-0);
|
||||||
|
color: var(--ffz-color-1);
|
||||||
|
-webkit-box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
|
||||||
|
box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
|
||||||
|
}
|
||||||
|
.video-card {
|
||||||
|
background-color: var(--ffz-color-0);
|
||||||
|
}
|
||||||
.thumbnail-selector-cropper--error {
|
.thumbnail-selector-cropper--error {
|
||||||
border-color: var(--ffz-color-14);
|
border-color: var(--ffz-color-14);
|
||||||
}
|
}
|
||||||
|
|
@ -2039,14 +2101,26 @@
|
||||||
.thumbnail-selector-cropper__thumbnail-select-image--selected {
|
.thumbnail-selector-cropper__thumbnail-select-image--selected {
|
||||||
border-color: var(--ffz-color-3);
|
border-color: var(--ffz-color-3);
|
||||||
}
|
}
|
||||||
.video-card-dropdown__dropdown-wrapper {
|
.video-manager-badge {
|
||||||
background-color: var(--ffz-color-0);
|
border-color: var(--ffz-color-0);
|
||||||
color: var(--ffz-color-1);
|
|
||||||
-webkit-box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
|
|
||||||
box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
|
|
||||||
}
|
}
|
||||||
.video-card {
|
.clmgr-table__row-expanded {
|
||||||
|
border-color: var(--ffz-color-3);
|
||||||
|
}
|
||||||
|
.clmgr-result__subtitle {
|
||||||
|
color: var(--ffz-color-7);
|
||||||
|
}
|
||||||
|
.clmgr-result:hover .clmgr-result__subtitle {
|
||||||
|
color: var(--ffz-color-4);
|
||||||
|
}
|
||||||
|
.clmgr-table__row {
|
||||||
background-color: var(--ffz-color-0);
|
background-color: var(--ffz-color-0);
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: var(--ffz-color-21);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--ffz-color-27);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.side-nav-bar {
|
.side-nav-bar {
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-27);
|
||||||
|
|
@ -2070,13 +2144,4 @@
|
||||||
.members-list-item:hover {
|
.members-list-item:hover {
|
||||||
background-color: var(--ffz-color-27);
|
background-color: var(--ffz-color-27);
|
||||||
}
|
}
|
||||||
.top-nav__home-link {
|
|
||||||
color: var(--ffz-color-4);
|
|
||||||
}
|
|
||||||
.top-nav__menu {
|
|
||||||
background-color: var(--ffz-color-26);
|
|
||||||
}
|
|
||||||
.community-selection-page__progress-container {
|
|
||||||
background-color: var(--ffz-color-27);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue