The In-Line Actions Update

* Add extensible actions system.
* Add extensive UI for configuring the actions system.
* Add setting to disable channel hosting.
* Fix the stupid Rooms thing popping up every time you open a channel.
* Fix how we grab chat types from React.
* Refactor how we handle incoming chat messages.
* Add a hook for outgoing chat messages.
* Fix emoji appearing squished with baseline emote alignment.
* Display arrows on balloons.
* Fix an issue generating emoji URLs.
* Do not use the default values for settings with merge strategies if profiles have those settings, just empty.
* Display a message in the chat settings menu if we tried opening FFZ's settings and failed.
* Wait a bit for webpack's loader if it's not immediately there for some reason.
* Probably other stuff.
* Not mod cards. Yet.

styles/chat.scss

@@ -29,7 +29,7 @@
 }
 
 
-.ffz-i-lock {
+.ffz__tooltip .ffz-i-lock {
 	position: absolute;
 	bottom: 0; right: 0;
 	border-radius: .2rem;

styles/icons.scss

@@ -101,6 +101,8 @@
 .ffz-i-block:before { content: '\e824'; } /* '' */
 .ffz-i-pin:before { content: '\e825'; } /* '' */
 .ffz-i-pin-outline:before { content: '\e826'; } /* '' */
+.ffz-i-gift:before { content: '\e827'; } /* '' */
+.ffz-i-link-ext:before { content: '\f08e'; } /* '' */
 .ffz-i-twitter:before { content: '\f099'; } /* '' */
 .ffz-i-gauge:before { content: '\f0e4'; } /* '' */
 .ffz-i-download-cloud:before { content: '\f0ed'; } /* '' */
@@ -111,6 +113,7 @@
 .ffz-i-twitch:before { content: '\f1e8'; } /* '' */
 .ffz-i-bell-off:before { content: '\f1f7'; } /* '' */
 .ffz-i-trash:before { content: '\f1f8'; } /* '' */
+.ffz-i-eyedropper:before { content: '\f1fb'; } /* '' */
 .ffz-i-window-maximize:before { content: '\f2d0'; } /* '' */
 .ffz-i-window-minimize:before { content: '\f2d1'; } /* '' */
 .ffz-i-window-restore:before { content: '\f2d2'; } /* '' */

styles/tooltips.scss

@@ -5,60 +5,53 @@ body {
 .ffz-metadata-balloon {
 	z-index: 999999999 !important;
 	margin: 6px;
+}
 
+
+.tw-balloon {
 	&[x-placement^="bottom"] > .tw-balloon__tail {
-		top: -3px;
-		box-shadow: -1px -1px 0 #dad8de;
+		bottom: 100%;
 
-		.tw-theme--dark & {
-			box-shadow: -1px -1px 0 #2c2541;
-		}
-
-		.tw-theme--ffz & {
-			box-shadow: -1px -1px 0 var(--ffz-color-20);
+		.tw-balloon__tail-symbol {
+			top: auto;
+			bottom: -8px;
+			left: 8px;
 		}
 	}
 
 	&[x-placement^="top"] > .tw-balloon__tail {
-		bottom: -3px;
-		box-shadow: 1px 1px 0 #dad8de;
+		top: 100%;
 
-		.tw-theme--dark & {
-			box-shadow: 1px 1px 0 #2c2541;
-		}
-
-		.tw-theme--ffz & {
-			box-shadow: 1px 1px 0 var(--ffz-color-20);
+		.tw-balloon__tail-symbol {
+			top: auto;
+			bottom: 8px;
+			left: 8px;
 		}
 	}
 
 	&[x-placement^="right"] > .tw-balloon__tail {
-		left: -3px;
-		box-shadow: -1px 1px 0 #dad8de;
+		right: 100%;
 
-		.tw-theme--dark & {
-			box-shadow: -1px 1px 0 #2c2541;
-		}
-
-		.tw-theme--ffz & {
-			box-shadow: -1px 1px 0 var(--ffz-color-20);
+		.tw-balloon__tail-symbol {
+			left: auto;
+			right: -8px;
+			top: 8px;
 		}
 	}
 
 	&[x-placement^="left"] > .tw-balloon__tail {
-		right: -3px;
-		box-shadow: 1px -1px 0 #dad8de;
+		left: 100%;
 
-		.tw-theme--dark & {
-			box-shadow: 1px -1px 0 #2c2541;
-		}
-
-		.tw-theme--ffz & {
-			box-shadow: 1px -1px 0 var(--ffz-color-20);
+		.tw-balloon__tail-symbol {
+			left: auto;
+			right: 8px;
+			top: 8px;
 		}
 	}
 }
 
+
+
 .ffz-metadata-balloon,
 .ffz__tooltip {
 	.loader {

styles/widgets.scss

@@ -12,7 +12,6 @@
 .tw-width-auto { width: auto !important }
 
 .ffz--widget {
-
 	input, select {
 		min-width: 20rem;
 	}
@@ -23,6 +22,34 @@
 }
 
 
+.ffz--color-widget input,
+.ffz--inline label {
+	min-width: unset;
+}
+
+
+.ffz-color-preview {
+	margin: 1px;
+
+	figure.ffz-i-eyedropper {
+		opacity: 0.5;
+	}
+
+	&:hover, &:focus {
+		figure {
+			opacity: 1
+		}
+	}
+
+	figure {
+		width: 3rem;
+		margin: .4rem;
+
+		height: calc(100% - .8rem);
+	}
+}
+
+
 .ffz--menu-page {
 	padding: 1rem;
 
@@ -67,7 +94,9 @@
 		.ffz--profile__icon {
 			font-size: 2rem;
 		}
+	}
 
+	.ffz--profile {
 		.ffz-i-ok { color: green }
 	}