add 999 and zelda chatbox

3 files changed, 229 insertions, 6 deletions

diff --git a/webAO/styles/chatbox/chat999.css b/webAO/styles/chatbox/chat999.css
new file mode 100644
index 0000000..f85adba
--- /dev/null
+++ b/webAO/styles/chatbox/chat999.css
@@ -0,0 +1,116 @@
+.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: 42%;
+	width: 100%;
+	text-shadow: -1px -1px 0 #525252, 1px -1px 0 #525252, -1px 1px 0 #525252, 1px 1px 0 #525252;
+}
+
+#client_name {
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 27%;
+	min-width: 3.25em;	
+	background: rgba(0, 0, 0, 0.5);
+	padding: 0 2%;
+	border-color: #fff;
+	border-style: ridge;
+	border-width: 0.2em;
+	border-radius: 0.1em;	
+	z-index: 1;
+}
+
+#client_inner_name {
+	text-justify: distribute;
+	letter-spacing: 0.075em;
+	margin: 0;
+	line-height: 2;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 98%;
+	width: calc(100% - 0.27em);
+	height: 60%;
+	margin: auto;
+	border-color: #fff;
+	border-style: ridge;
+	border-width: 0.15em;
+	border-radius: 0.1em;
+	background-color: rgba(0, 0, 0, 0.5);
+	font-size: 2em;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 1% 3.13%;
+	margin: 1px;
+	line-height: 97%;
+	letter-spacing: 0.05em;
+	word-spacing: 0.3em;
+}
+
+#client_chatwaiting {
+	display: none;
+	transform: rotate(90deg);
+	line-height: 0.5;
+	color: #28599a;
+	animation: idling 0.4s linear infinite;
+}
+
+@keyframes idling {
+	0% {
+		right: 0;
+	}
+
+	50% {
+		right: 2%;
+	}
+
+	100% {
+		right: 0;
+	}
+}
\ No newline at end of file
diff --git a/webAO/styles/chatbox/chatboxes.js b/webAO/styles/chatbox/chatboxes.js
index 66df18f..d81e7fd 100644
--- a/webAO/styles/chatbox/chatboxes.js
+++ b/webAO/styles/chatbox/chatboxes.js
@@ -2,16 +2,18 @@ export default [
 	"aa",
 	"chatdd",
 	"dgs",
+	"chatplvsaa",
+	"trilogy",
+	"chatfuture",
+	"legacy",
 	"dr1",
 	"chatdr2",
 	"drv3",
 	"drae",
-	"legacy",
-	"chatfuture",
-	"halla",
 	"chatp3",
 	"p4",
-	"chatplvsaa",
-	"trilogy",
-	"yttd"
+	"chat999",
+	"halla",
+	"yttd",
+	"n64zelda"
 ];
\ No newline at end of file
diff --git a/webAO/styles/chatbox/n64zelda.css b/webAO/styles/chatbox/n64zelda.css
new file mode 100644
index 0000000..4c2cbbb
--- /dev/null
+++ b/webAO/styles/chatbox/n64zelda.css
@@ -0,0 +1,105 @@
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+    color: #505aff;
+}
+
+.text_green {
+	color: #46ff50;
+}
+
+.text_red {
+	color: #ff3c3c;
+}
+
+.text_orange {
+	color: #ff7800;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ff96b4;
+}
+
+.text_cyan {
+	color: #64b4ff;
+}
+
+@font-face {
+	font-family: 'ChiaroWeb';
+	src: url('https://github.com/ngarces/FE15-Text-Simulator/raw/master/FOT-ChiaroStd-B.otf') format('opentype');
+	font-weight: normal;
+	font-style: normal;
+}
+
+#client_chatcontainer {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 25%;
+	width: 100%;
+	filter: none;
+	font-family: "FOT-Chiaro Std", "ChiaroWeb", "Arial", sans-serif;
+}
+
+#client_name {
+	display: none;
+}
+
+#client_inner_name {
+	display: none;
+}
+
+#client_chat {
+	display: block;
+	position: absolute;
+	bottom: 2%;
+	left: 10%;
+	width: 80%;
+	height: 100%;
+	margin: auto;
+	border-radius: 0.5em;
+	background: rgba(0,0,0,0.7);
+	font-size: 1.3em;
+	word-break: keep-all;
+	overflow-wrap: break-word;
+    text-align: center;
+    line-height: 120%;	
+	scroll-behavior: smooth;
+}
+
+#client_inner_chat {
+	padding: 1% 5%;
+    margin: 0;
+    text-shadow: 0.1em 0.05em 0.1em #000;
+    overflow: hidden;
+}
+
+#client_chatwaiting {
+	display: block;
+	position: absolute;
+	transform: rotate(90deg);
+	left: 50%;
+	bottom: -5%;	
+    line-height: 0.5;
+    color: #0c5cd4;
+	animation: idling 0.5s linear infinite alternate;
+}
+
+@keyframes idling {
+	from {
+        color: #0c5cd4;
+        text-shadow: none;
+	}
+
+	to {
+        color: #3282ff;
+        text-shadow: 0 0 0.2em #3282ff;
+	}
+}
\ No newline at end of file