1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-01 07:28: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 2018-02-08 18:28:30 -05:00
parent 3ca7d1d955
commit f0bcf7f53e
5 changed files with 1671 additions and 1589 deletions

View file

@ -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>
<ul class="chat-menu-content menu-side-padding">
<li>Fixed: Error fetching room-specific user-specific emote sets.</li>

View file

@ -263,7 +263,8 @@ export default class Badges extends Module {
props: {
'data-provider': 'twitch',
'data-badge': badge_id,
'data-version': version
'data-version': version,
style: {}
},
badges
};

View file

@ -26,7 +26,7 @@
v-html="t(item.desc_i18n_key || item.i18n_key + '.description', item.description, item)"
/>
</section>
<template v-if="! item.contents">
<template v-if="! item.contents || ! item.contents.length">
<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)">

View file

@ -342,7 +342,8 @@ export default class Metadata extends Module {
html: true,
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',
popper: {

View file

@ -58,12 +58,12 @@
--ffz-color-54: hsla(256, 8%, 73%, 0.9);
--ffz-color-55: #000;
--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-interactable {
color: inherit;
}
.modal__backdrop {
background-color: var(--ffz-color-25);
}
@ -83,7 +83,7 @@
fill: var(--ffz-color-7);
}
.tw-svg__asset--brand {
fill: var(--ffz-color-2);
fill: var(--ffz-color-5);
}
.tw-svg__asset--live {
fill: var(--ffz-color-14);
@ -117,7 +117,7 @@
background-color: var(--ffz-color-7);
}
.tw-badge--brand {
background-color: var(--ffz-color-2);
background-color: var(--ffz-color-5);
}
.tw-badge--live, .tw-badge--notification {
background-color: var(--ffz-color-14);
@ -270,6 +270,16 @@
-webkit-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 {
border-color: transparent;
@ -281,18 +291,18 @@
color: var(--ffz-color-4);
}
&:focus {
border-color: var(--ffz-color-46);
border-color: var(--ffz-color-22);
background-color: var(--ffz-color-6);
color: var(--ffz-color-4);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
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-22);
}
&:active {
border-color: var(--ffz-color-58);
background-color: transparent;
color: var(--ffz-color-4);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
box-shadow: 0 0 6px 0 var(--ffz-color-45);
border-color: var(--ffz-color-46);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
box-shadow: 0 0 6px 0 var(--ffz-color-22);
}
&.tw-button--hollow, &.tw-button--state-loading, &.tw-button--state-success {
border-color: var(--ffz-color-4);
@ -469,18 +479,18 @@
color: var(--ffz-color-4);
}
&:focus {
border-color: var(--ffz-color-46);
border-color: var(--ffz-color-22);
background-color: var(--ffz-color-6);
color: var(--ffz-color-4);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
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-22);
}
&:active {
border-color: var(--ffz-color-58);
background-color: transparent;
color: var(--ffz-color-4);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-45);
box-shadow: 0 0 6px 0 var(--ffz-color-45);
border-color: var(--ffz-color-46);
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
box-shadow: 0 0 6px 0 var(--ffz-color-22);
}
&.tw-button-icon--hollow {
border-color: var(--ffz-color-4);
@ -520,25 +530,6 @@
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 {
color: var(--ffz-color-23);
&:checked + .tw-checkbox__label {
@ -577,9 +568,6 @@
.tw-drop-zone--over {
border-color: var(--ffz-color-3);
}
.tw-input__icon svg {
fill: var(--ffz-color-23);
}
.tw-input {
border-color: var(--ffz-color-26);
background-color: var(--ffz-color-27);
@ -596,6 +584,9 @@
.tw-input--error {
border-color: var(--ffz-color-14);
}
.tw-interactable {
color: inherit;
}
.tw-interactable--disabled, .tw-interactable:disabled {
background-color: var(--ffz-color-6);
}
@ -619,13 +610,16 @@
}
.tw-interactable--selected {
background-color: var(--ffz-color-26);
color: currentColor;
}
.tw-interactable--alpha {
&.tw-interactable--hover, &:hover {
background-color: var(--ffz-color-40);
color: inherit;
}
&:active {
background-color: var(--ffz-color-41);
color: inherit;
}
&:focus {
-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 {
background-color: var(--ffz-color-42);
color: inherit;
}
}
.tw-interactable--alert {
@ -667,23 +662,53 @@
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);
}
.tw-group__optional, .tw-group__hint {
.tw-form-group__optional, .tw-form-group__hint {
color: var(--ffz-color-7);
}
.tw-group--error {
.tw-group__hint, .tw-group__label {
.tw-form-group--error {
.tw-form-group__hint, .tw-form-group__label {
color: var(--ffz-color-14);
}
}
.tw-group__hint--error {
.tw-form-group__hint--error {
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);
}
.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 {
background-color: var(--ffz-color-4);
color: var(--ffz-color-27);
@ -738,7 +763,7 @@
background-color: var(--ffz-color-7);
}
.tw-pill--brand {
background-color: var(--ffz-color-2);
background-color: var(--ffz-color-5);
}
.tw-pill--live, .tw-pill--notification {
background-color: var(--ffz-color-14);
@ -1019,6 +1044,23 @@
.tw-thumbnail-card a:hover .tw-thumbnail-card__title {
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 {
p code {
background-color: var(--ffz-color-27);
@ -1034,12 +1076,12 @@
border-bottom-color: var(--ffz-color-20);
}
}
.passport-modal {
background-color: var(--ffz-color-4);
}
.scrollable-area .simplebar-track .simplebar-scrollbar {
background-color: var(--ffz-color-0);
}
.passport-modal {
background-color: var(--ffz-color-4);
}
.language-selector__list--border-right {
border-right-color: var(--ffz-color-20);
}
@ -1058,34 +1100,23 @@
box-shadow: 0 0 6px 0 var(--ffz-color-5);
}
.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);
background-color: var(--ffz-color-21);
&:hover {
background-color: var(--ffz-color-27);
}
.search-results-panel__highlight-link {
color: var(--ffz-color-2);
}
}
.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 {
.search-results-panel__link {
color: var(--ffz-color-7);
}
.search-panel__card:hover {
.search-panel__highlight-link, .search-panel__link {
color: var(--ffz-color-4);
.search-results-panel__card:hover {
.search-results-panel__highlight-link, .search-results-panel__link {
color: var(--ffz-color-23);
}
}
.notice-wrap__title, .notice-wrap__text {
color: var(--ffz-color-7);
}
.blue-bar {
background-color: var(--ffz-color-32);
}
@ -1165,17 +1196,6 @@
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 {
background-color: var(--ffz-color-20);
&:hover {
@ -1292,6 +1312,28 @@
.anon-front__social-container {
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 {
background-color: var(--ffz-color-26);
}
@ -1305,22 +1347,6 @@
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 {
color: var(--ffz-color-7);
}
@ -1351,8 +1377,8 @@
.channel-header__item-count {
color: var(--ffz-color-7);
}
.channel-header__dropdown-hover-target:hover .channel-header__item-count, .channel-header .interactable:hover .channel-header__item-count {
color: var(--ffz-color-24);
.channel-header .interactable:hover .channel-header__item-count, .channel-header__dropdown-hover-target:hover .channel-header__item-count {
color: var(--ffz-color-1);
}
.channel-header__user {
color: var(--ffz-color-1);
@ -1377,6 +1403,12 @@
.chat-share-prompt {
color: var(--ffz-color-23);
}
.native-broadcast-notification__link {
color: var(--ffz-color-23);
&:hover {
color: var(--ffz-color-23);
}
}
.raid-countdown-bar__fill {
background-color: var(--ffz-color-29);
}
@ -1405,13 +1437,13 @@
.chat-line__message--special {
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);
}
.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);
}
.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);
}
.chat-line__timestamp {
@ -1493,19 +1525,13 @@
background-color: var(--ffz-color-21);
}
.viewer-card__display-name-link {
color: var(--ffz-color-4);
color: var(--ffz-color-23);
&:hover {
color: var(--ffz-color-4);
color: var(--ffz-color-23);
}
}
.chat-room__pane {
background-color: var(--ffz-color-27);
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);
.viewer-card__banner {
background-color: var(--ffz-color-25);
}
.social-button__link--copy:after {
color: var(--ffz-color-3);
@ -1565,7 +1591,7 @@
background-color: var(--ffz-color-25);
color: var(--ffz-color-23);
&:hover .embed-card__play {
color: var(--ffz-color-24);
color: var(--ffz-color-1);
}
}
.channel-info-bar {
@ -1596,6 +1622,9 @@
.video-carousel:hover .video-carousel__button {
background-color: var(--ffz-color-0);
}
.video-filters {
color: currentColor;
}
.video-filters--active {
background-color: var(--ffz-color-26);
}
@ -1609,24 +1638,6 @@
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 {
background-color: var(--ffz-color-0);
}
@ -1655,9 +1666,9 @@
background-color: var(--ffz-color-20);
}
.directory-header__link {
color: var(--ffz-color-24);
color: var(--ffz-color-1);
&:hover {
color: var(--ffz-color-24);
color: var(--ffz-color-1);
}
}
.directory-tabs {
@ -1684,6 +1695,24 @@
.directory-tabs__item:active:after {
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 {
color: var(--ffz-color-4);
}
@ -1751,9 +1780,6 @@
color: var(--ffz-color-55);
}
}
.video-chat {
background-color: var(--ffz-color-27);
}
.video-chat__input {
-webkit-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 {
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;
}
.tw-c-text-alert, .tw-c-text-live {
@ -1899,7 +1925,10 @@
color: var(--ffz-color-23) !important;
}
.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 {
color: var(--ffz-color-4) !important;
@ -1958,9 +1987,14 @@
.mod-comment__unpublished-message {
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);
}
&:focus .ach-card {
outline: 0.5rem auto var(--ffz-color-5);
}
}
.ach-card {
background-color: var(--ffz-color-0);
}
@ -1985,9 +2019,28 @@
.ach-sb {
background-color: var(--ffz-color-0);
}
.ach-sb__text {
.ach-sb__text, .sm-cp-card__title {
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 {
color: var(--ffz-color-2);
}
@ -2021,15 +2074,24 @@
background-color: var(--ffz-color-9);
}
}
.sm-cp-card__title {
color: var(--ffz-color-1);
.sm-sb-flourish-confetti__content--purple-scale {
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 {
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 {
border-color: var(--ffz-color-14);
}
@ -2039,14 +2101,26 @@
.thumbnail-selector-cropper__thumbnail-select-image--selected {
border-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-manager-badge {
border-color: var(--ffz-color-0);
}
.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);
&:nth-child(2n) {
background-color: var(--ffz-color-21);
}
&:hover {
background-color: var(--ffz-color-27);
}
}
.side-nav-bar {
background-color: var(--ffz-color-27);
@ -2070,13 +2144,4 @@
.members-list-item:hover {
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);
}
}