5 files changed, 129 insertions, 113 deletions
diff --git a/webAO/styles/chatbox/RevelationsPersonaDialogueMono.woff2 b/webAO/styles/chatbox/RevelationsPersonaDialogueMono.woff2
new file mode 100644
index 0000000..18bec81
--- /dev/null
+++ b/webAO/styles/chatbox/RevelationsPersonaDialogueMono.woff2
diff --git a/webAO/styles/chatbox/fc.png b/webAO/styles/chatbox/fc.png
new file mode 100644
index 0000000..cbb1407
--- /dev/null
+++ b/webAO/styles/chatbox/fc.png
diff --git a/webAO/styles/chatbox/ff.css b/webAO/styles/chatbox/ff.css
deleted file mode 100644
index 0c8640b..0000000
--- a/webAO/styles/chatbox/ff.css
+++ /dev/null
@@ -1,113 +0,0 @@
-.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;
-}
-
-.text_grey {
-  color: #bbb;
-}
-
-#client_chatcontainer {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 40%;
-  width: 100%;
-  filter: none;
-}
-
-#client_name {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 1%;
-  height: 13%;
-  min-width: 3.25em;
-  font-size: 0.8em;
-  background: rgba(60, 85, 255, 0.4);
-  box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset;
-  margin: 0;
-  padding-top: 0.4%;
-  padding-left: 1.955%;
-  padding-right: 1.955%;
-  border-color: rgba(255, 255, 255, 0.5);
-  border-style: ridge groove groove ridge;
-  border-width: 0.2em;
-  border-radius: 0.3em;
-  z-index: 1;
-  font-family: "Ace Name", "Igiari Cyrillic", "MS PGothic", "MS UI Gothic",
-    "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow",
-    "Meera", "Khmer OS", "FreeSans", "Gargi", sans-serif;
-}
-
-#client_inner_name {
-  text-justify: distribute;
-  line-height: 100%;
-  margin: 0;
-  margin-top: 2.75%;
-}
-
-#client_chat {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 98%;
-  width: calc(100% - 0.25em);
-  height: 78%;
-  margin: auto;
-  border-color: rgba(115, 115, 115);
-  border-style: double;
-  border-width: 0.15em;
-  border-radius: 0.15em;
-  background-color: rgba(0, 0, 99);
-  font-size: 1.6em;
-  word-break: keep-all;
-  overflow-wrap: break-word;
-  text-align: left;
-  overflow: hidden;
-  scroll-behavior: smooth;
-  transition: height 0.5s;
-}
-
-#client_inner_chat {
-  padding: 0.4% 2.8%;
-  margin: 1px;
-  line-height: 100%;
-}
-
-#client_trackstatus {
-  display: none;
-}
-
-#client_clock {
-  display: none;
-}
diff --git a/webAO/styles/chatbox/p1.css b/webAO/styles/chatbox/p1.css
new file mode 100644
index 0000000..5a7d84e
--- /dev/null
+++ b/webAO/styles/chatbox/p1.css
@@ -0,0 +1,129 @@
+.text_white {
+  color: #fff;
+}
+
+.text_blue {
+  color: #18d7ff;
+}
+
+.text_green {
+  color: #84fb08;
+}
+
+.text_red {
+  color: #e1522a;
+}
+
+.text_orange {
+  color: #ff7118;
+}
+
+.text_yellow {
+  color: #fef9ad;
+}
+
+.text_pink {
+  color: #ffc0cb;
+}
+
+.text_cyan {
+  color: #0ff;
+}
+
+.text_grey {
+  color: #bbb;
+}
+
+@font-face {
+  font-family: "RevelationsPersonaDialogue";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local("RevelationsPersonaDialogue"),
+    local("RevelationsPersonaDialogueMono"),
+    url("./RevelationsPersonaDialogueMono.woff2")
+      format("woff2");
+}
+
+#client_chatcontainer {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 35%;
+  width: 100%;
+  transition-property: height, width;
+  transition-duration: 0.2s;
+}
+
+#client_name {
+  display: none;
+}
+
+#client_inner_name {
+  margin: 1px;
+}
+
+#client_chat {
+  font-size: 1.1em;
+  display: block;
+  width: 90%;
+  margin: auto;
+  height: 85%;
+  border-image-source: url("p1.png");
+  border-image-slice: 45 fill;
+  border-image-width: 4em;
+  border-width: 4em;
+  background-image: linear-gradient(rgba(0,16,0,0.56), rgba(0,239,0,0.56));
+  top: 0;
+  left: 5%;
+  position: absolute;
+  word-break: keep-all;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: left;
+  overflow: hidden;
+  scroll-behavior: smooth;
+  font-family: "RevelationsPersonaDialogue", sans-serif;
+}
+
+#client_inner_chat {
+  display: block;
+  position: absolute;
+  margin: 0.8em;
+  padding: 0.1em 1em;
+  text-shadow: 4px 2px black;
+}
+
+#client_chatwaiting {
+  display: block;
+  transform: rotate(-90deg) scaleY(2);
+  position: absolute;
+  color: rgba(100,50,0,0.8);
+  font-size: 1.3em;
+  right: 0.4em;
+  bottom: -0.1em;
+}
+
+@keyframes idling {
+  0% {
+    right: 0.6em;
+  }
+
+  25% {
+    right: 0.7em;
+  }
+
+  100% {
+    right: 0.6em;
+  }
+}
+
+#client_trackstatus {
+  display: none;
+}
+
+#client_clock {
+  display: none;
+}
diff --git a/webAO/styles/chatbox/p1.png b/webAO/styles/chatbox/p1.png
new file mode 100644
index 0000000..3c4ca39
--- /dev/null
+++ b/webAO/styles/chatbox/p1.png