4.20.89

* Added: Setting to display timestamps on additional types of chat messages. (Closes #983)
* Changed: Do not set a Chat Width by default.
* Changed: Have WebMunch dump a list of possible webpack bundle names when failing to find webpack.
* Fixed: Appearance issues caused by Twitch's continual migration to procedural CSS class names, requiring duplicate CSS to achieve a native look.
* Fixed: Ambiguous input field names in some FFZ Control Center widgets. (Closes #1017)
* Fixed: Stop using Algolia for tag search.

styles/main.scss

@@ -3,7 +3,7 @@
 @import 'widgets';
 @import 'dialog';
 
-@import 'input/index';
+@import 'native/index';
 @import 'structure/index';
 
 @import 'chat';

styles/native/card.scss

@@ -0,0 +1,15 @@
+.ffz-card-img {
+	background-color: var(--color-background-placeholder);;
+	flex-shrink: 0;
+	width: 100%;
+
+	&--size-2 { width: 2rem }
+	&--size-3 { width: 3rem }
+	&--size-4 { width: 4rem }
+	&--size-6 { width: 6rem }
+	&--size-8 { width: 8rem }
+	&--size-12 { width: 12rem }
+	&--size-16 { width: 16rem }
+	&--size-24 { width: 24rem }
+	&--size-32 { width: 32rem }
+}

styles/native/index.scss

@@ -1,4 +1,7 @@
 @import "button";
 @import "checkbox";
 @import "interactable";
-@import "text";
+@import "text";
+@import "link";
+@import "card";
+@import "tag";

styles/native/link.scss

@@ -0,0 +1,67 @@
+.ffz-link {
+	color: var(--color-text-link);
+	text-decoration: none;
+
+	.tw-root--hover &:hover {
+		color: var(--color-text-link-hover);
+		text-decoration: underline;
+	}
+
+	&:active { color: var(--color-text-link-active); }
+	&[data-focus-visible-added], &:focus { color: var(--color-text-link-focus); }
+	&:visited { color: var(--color-text-link-visited); }
+
+	&--overlay {
+		color: var(--color-text-overlay-link);
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		.tw-root--hover &:hover {
+			color: var(--color-text-overlay-link-hover);
+		}
+
+		&:active { color: var(--color-text-overlay-link-active) }
+		&:focus, &[data-focus-visible-added] { color: var(--color-text-overlay-link-focus) }
+		&:visited { color: var(--color-text-overlay-link-visited) }
+	}
+
+	&--underline { text-decoration: underline; }
+
+	&--inherit {
+		&, &:visited, &:focus, &[data-focus-visible-added], &:active {
+			color: inherit;
+		}
+
+		.tw-root--hover &:hover {
+			color: var(--color-text-link-hover);
+		}
+	}
+
+	.tw-root--hover &--hover-color-inherit:hover {
+		color: inherit;
+	}
+
+	.tw-root--hover &--hover-underline-none {
+		&, &:hover {
+			text-decoration: none;
+		}
+	}
+
+	&--button {
+		&:active {
+			outline: none
+		}
+	}
+
+	&--disabled {
+		opacity: .5;
+
+		.tw-root--hover &:hover {
+			cursor: not-allowed;
+			text-decoration: none;
+		}
+	}
+}

styles/native/tag.scss

@@ -0,0 +1,62 @@
+.ffz-tag {
+	background-color: var(--color-background-tag-default);
+	border: var(--border-width-tag) solid transparent;
+	color: var(--color-text-tag);
+	height: 2rem;
+
+	&:not(:disabled) {
+		&:focus, &[data-focus-visible-added] {
+			background: var(--color-background-tag-hover);
+			border: var(--border-width-tag) solid var(--color-border-input-focus);
+		}
+
+		.tw-root--hover &:hover {
+			background: var(--color-background-tag-hover);
+			color: var(--color-text-tag);
+			text-decoration: none;
+		}
+
+		&:active {
+			background: var(--color-background-tag-active);
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	&__content {
+		padding: 0 .8rem;
+
+		&--icon {
+			padding-right: .4rem
+		}
+	}
+
+	&__icon {
+		height: 1.6rem;
+		width: 1.6rem;
+	}
+
+	&--overlay {
+		background: rgba(0,0,0,0.3);
+		border: var(--border-width-tag) solid var(--color-border-input-overlay);
+		color: var(--color-text-overlay);
+
+		&:not(:disabled) {
+			&:focus, &[data-focus-visible-added] {
+				border: var(--border-width-tag) solid var(--color-border-input-overlay-focus);
+			}
+
+			.tw-root--hover &:hover {
+				background: var(--color-background-interactable-overlay-hover);
+				color: var(--color-text-overlay);
+			}
+
+			&:active {
+				background: var(--color-background-interactable-overlay-active);
+			}
+		}
+	}
+}