4 files changed, 190 insertions, 0 deletions
diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js
index 308f633..078caa2 100644
--- a/webAO/styles/chatbox/chatboxes.js
+++ b/webAO/styles/chatbox/chatboxes.js
@@ -14,6 +14,8 @@ export default [
 	"p4",
 	"chat999",
 	"halla",
+	"homestuck",
+	"yakuza",
 	"yttd",
 	"n64zelda",
 	"papermario"
diff --git a/webAO/styles/chatbox/homestuck.css b/webAO/styles/chatbox/homestuck.css
new file mode 100644
index 0000000..1341d94
--- /dev/null
+++ b/webAO/styles/chatbox/homestuck.css
@@ -0,0 +1,71 @@
+.text_white {
+	color: #000;
+}
+
+.text_blue {
+	color: #0000EE;
+}
+
+.text_green {
+	color: #38f43d;
+}
+
+.text_red {
+	color: #ff0101;
+}
+
+.text_orange {
+	color: #d6954b;
+}
+
+.text_yellow {
+	color: #feef25;
+}
+
+.text_pink {
+	color: #ff067c;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+#client_chatcontainer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 25%;
+	width: 100%;
+	color: #000000;
+    font-family: "courier-std", courier, monospace;
+    font-weight: bold;
+    overflow-wrap: break-word;
+}
+
+#client_name {
+    display: none;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	margin: auto;
+	height: 100%;
+	background-color: #EFEFEF;
+}
+
+#client_inner_chat {
+    line-height: 1.35;
+    padding-right: 2em;
+    padding-left: 2em;
+    padding-bottom: 2em;
+}
+
+#client_chatwaiting {
+	display: block;
+	position: absolute;
+	left: 2%;
+	bottom: 2%;
+}
+\ No newline at end of file
diff --git a/webAO/styles/chatbox/x_button.svg b/webAO/styles/chatbox/x_button.svg
new file mode 100644
index 0000000..0573d48
--- /dev/null
+++ b/webAO/styles/chatbox/x_button.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20.123px" height="20.122px" viewBox="0 0 20.123 20.122" enable-background="new 0 0 20.123 20.122" xml:space="preserve">
+<g>
+	<g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10.0615" y1="0" x2="10.0615" y2="18.0092">
+			<stop offset="0" style="stop-color:#5B5B5F"/>
+			<stop offset="0.0231" style="stop-color:#59595D"/>
+			<stop offset="0.4507" style="stop-color:#333335"/>
+			<stop offset="0.7912" style="stop-color:#1C1C1D"/>
+			<stop offset="1" style="stop-color:#141414"/>
+		</linearGradient>
+		<circle fill="url(#SVGID_1_)" cx="10.061" cy="10.061" r="10.061"/>
+	</g>
+	<polygon fill="#6273A8" points="16.107,5.608 14.514,4.015 10.061,8.468 5.608,4.015 4.016,5.608 8.469,10.061 4.016,14.514    5.608,16.106 10.061,11.653 14.514,16.106 16.107,14.514 11.654,10.061  "/>
+</g>
+</svg>
+\ No newline at end of file
diff --git a/webAO/styles/chatbox/yakuza.css b/webAO/styles/chatbox/yakuza.css
new file mode 100644
index 0000000..7dfa4b9
--- /dev/null
+++ b/webAO/styles/chatbox/yakuza.css
@@ -0,0 +1,99 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #6bc6f7;
+}
+
+.text_green {
+	color: #00f700;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #f77339;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+#client_chatcontainer {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 25%;
+	width: 100%;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+    text-align: left;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 15%;
+	width: 100%;	
+	background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0), rgba(0,0,0,0));
+    border-left: 0.3em solid #e3dcc5;
+    font-size: 0.6em;
+    z-index: 1;
+}
+
+#client_inner_name {
+    text-justify: distribute;
+    padding: 0 3%;
+	margin: 0;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 85%;
+    border-top: 0.1em solid rgba(100,100,100,0.5);
+    box-shadow: inset 0 0.2em 0.2em 0 rgba(0,0,0,0.75);
+	background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.4), rgba(0,0,0,0));
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+    scroll-behavior: smooth;
+    font-size: 0.6em;
+}
+
+#client_inner_chat {
+    margin: 0;
+	padding: 2% 12%;
+}
+
+#client_chatwaiting {
+	display: block;
+	position: absolute;
+	color: transparent;
+	text-shadow: none;
+	right: 4em;
+	bottom: 35%;
+    width: 1.5em;
+    height: 1.5em;
+    background-image: url("x_button.svg");
+	background-size: contain;
+	transition: opacity 0.2s;
+}
+\ No newline at end of file