handle text colors in css

5 files changed, 257 insertions, 63 deletions

diff --git a/webAO/client.js b/webAO/client.js
index f51f4f6..777a560 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1163,15 +1163,15 @@ class Viewport {
 		};
 
 		this.colors = [
-			"#ffffff", // white
-			"#00ff00", // green
-			"#ff0000", // red
-			"#ffa500", // orange
-			"#4596ff", // blue
-			"#ffff00", // yellow
-			"#fedcba", // 6 is rainbow.
-			"#ffc0cb", // pink
-			"#00ffff"  // cyan
+			"text_white",
+			"text_green",
+			"text_red",
+			"text_orange",
+			"text_blue",
+			"text_yellow",
+			"text_rainbow",
+			"text_pink",
+			"text_cyan"
 		];
 
 		this.blip = new Audio(AO_HOST + "sounds/general/sfx-blipmale.wav");
@@ -1571,12 +1571,8 @@ class Viewport {
 				chatBox.style.display = "block";
 				chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px";				
 
-				if (this.chatmsg.color === 6)
-					chatBoxInner.className = "rainbow-text";
-				else {
-					chatBoxInner.className = "";
-					chatBoxInner.style.color = this.colors[this.chatmsg.color] || "#ffffff";
-				}
+				chatBoxInner.className = this.colors[this.chatmsg.color];
+
 				this.chatmsg.startspeaking = false;
 
 				if (this.chatmsg.preanimdelay === 0) {
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
index f8ceb79..b0a84cf 100644
--- a/webAO/styles/classic.css
+++ b/webAO/styles/classic.css
@@ -10,6 +10,73 @@ img {
 	-ms-interpolation-mode: nearest-neighbor;
 }
 
+.text_white {
+	color: #fff;
+}
+
+.text_blue {
+	color: #6bc6f7;
+}
+
+.text_green {
+	color: #0f0;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #ffa500;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_rainbow {
+	background-color: rgb(255, 255, 255);
+	background-image: repeating-linear-gradient(to right,
+			red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
+			red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
+			red 80% 88%, orange 88% 96%, yellow 96% 100%);
+	background-size: 40% 40%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: rainbow 4s linear infinite;
+}
+
+@keyframes rainbow_alt {
+
+	0%,
+	100% {
+		background-position: 0 0;
+	}
+
+	50% {
+		background-position: 400% 0;
+	}
+}
+
+@keyframes rainbow {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 400% 0;
+	}
+}
+
 #client_chatcontainer {
 	filter:none;
 }
@@ -57,7 +124,6 @@ img {
 
 #client_chat p {
 	padding: 1% 3.13%;
-	color: white;
 	margin: 1px;
 	line-height: 97%;
 }
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 3be4db8..31c8a2a 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -69,17 +69,40 @@
 	width: 100%;
 }
 
-@keyframes shake { 
-    0%,100%	{left: 0; }
-	20%		{left: -10%; }
-	40%		{left: +10%; }
-	60%		{left: -10%; }
-	80%		{left: +10%; }
+@keyframes shake {
+
+	0%,
+	100% {
+		left: 0;
+	}
+
+	20% {
+		left: -10%;
+	}
+
+	40% {
+		left: +10%;
+	}
+
+	60% {
+		left: -10%;
+	}
+
+	80% {
+		left: +10%;
+	}
 }
 
-@keyframes flash { 
-    0%,100%	{background-color: transparent; }
-    50%		{background-color: white; }
+@keyframes flash {
+
+	0%,
+	100% {
+		background-color: transparent;
+	}
+
+	50% {
+		background-color: white;
+	}
 }
 
 #client_charselect {
@@ -194,7 +217,7 @@
 	height: 0%;
 	width: auto;
 	top: 1em;
-	transition: 0.25s linear;  
+	transition: 0.25s linear;
 	transition-property: height, opacity;
 }
 
@@ -215,29 +238,6 @@
 	left: 0;
 }
 
-.rainbow-text {
-	background-color: rgb(255, 255, 255);
-	background-image: repeating-linear-gradient(to right,
-	red  0%  8%, orange  8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
-	red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
-	red 80% 88%, orange 88% 96%, yellow 96% 100% );
-	background-size: 40% 40%;
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	animation: rainbow 4s linear infinite;
-  }
-  
-  @keyframes rainbow_alt { 
-    0%,100% {background-position:    0 0; }
-    50%     {background-position: 400% 0; }
-  }
-
-  @keyframes rainbow { 
-    0%   {background-position:    0 0; }
-    100% {background-position: 400% 0; }
-  }
-
 #client_inputbox {
 	font-size: 21px;
 	padding: 2px 10px;
@@ -326,7 +326,7 @@
 	width: 70px;
 	height: 70px;
 	background-color: #787878;
-	outline-color:#886060;  
+	outline-color: #886060;
 	outline-width: 1px;
 	outline-style: inset;
 	outline-offset: -1px;
@@ -399,8 +399,8 @@
 	bottom: 0;
 	position: relative;
 	display: inline-block;
-	transition: 1s linear;  
-  	transition-property: width;
+	transition: 1s linear;
+	transition-property: width;
 }
 
 .healthchange_button {
@@ -522,37 +522,37 @@
 }
 
 .area-default {
-	background-color: rgb(54,198,68);
+	background-color: rgb(54, 198, 68);
 }
 
 .area-idle {
-	background-color: rgb(54,198,68);
+	background-color: rgb(54, 198, 68);
 }
 
 .area-looking-for-players {
-	background-color: rgb(255,255,0);
+	background-color: rgb(255, 255, 0);
 }
 
 .area-casing {
-	background-color: rgb(255,166,0);
+	background-color: rgb(255, 166, 0);
 }
 
 .area-recess {
-	background-color: rgb(255,190,30);
+	background-color: rgb(255, 190, 30);
 }
 
 .area-rp {
-	background-color: rgb(200,52,252);
+	background-color: rgb(200, 52, 252);
 }
 
 .area-gaming {
-	background-color: rgb(55,255,255);
+	background-color: rgb(55, 255, 255);
 }
 
 .area-locked {
-	background-color: rgb(127,127,127);
+	background-color: rgb(127, 127, 127);
 }
 
 .area-spectatable {
-	background-color: rgb(54,198,68);
+	background-color: rgb(54, 198, 68);
 }
\ No newline at end of file
diff --git a/webAO/styles/default.css b/webAO/styles/default.css
index eb50603..50b57c0 100644
--- a/webAO/styles/default.css
+++ b/webAO/styles/default.css
@@ -10,6 +10,73 @@ img {
 	-ms-interpolation-mode: nearest-neighbor;
 }
 
+.text_white {
+	color: #fff;
+}
+
+.text_green {
+	color: #0f0;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #ffa500;
+}
+
+.text_blue {
+	color: #4596ff;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_rainbow {
+	background-color: rgb(255, 255, 255);
+	background-image: repeating-linear-gradient(to right,
+			red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
+			red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
+			red 80% 88%, orange 88% 96%, yellow 96% 100%);
+	background-size: 40% 40%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: rainbow 4s linear infinite;
+}
+
+@keyframes rainbow_alt {
+
+	0%,
+	100% {
+		background-position: 0 0;
+	}
+
+	50% {
+		background-position: 400% 0;
+	}
+}
+
+@keyframes rainbow {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 400% 0;
+	}
+}
+
 #client_name {
 	display: none;
 	padding: 0px 6px;
@@ -43,7 +110,6 @@ img {
 
 #client_chat p {
 	margin: 4px;
-	color: white;
 }
 
 #client_chatwaiting {
diff --git a/webAO/styles/soj.css b/webAO/styles/soj.css
index 8cc8197..98e2634 100644
--- a/webAO/styles/soj.css
+++ b/webAO/styles/soj.css
@@ -2,6 +2,73 @@ body {
 	font-family: sans-serif;
 }
 
+.text_white {
+	color: #fff;
+}
+
+.text_green {
+	color: #0f0;
+}
+
+.text_red {
+	color: #f00;
+}
+
+.text_orange {
+	color: #ffa500;
+}
+
+.text_blue {
+	color: #4596ff;
+}
+
+.text_yellow {
+	color: #ff0;
+}
+
+.text_pink {
+	color: #ffc0cb;
+}
+
+.text_cyan {
+	color: #0ff;
+}
+
+.text_rainbow {
+	background-color: rgb(255, 255, 255);
+	background-image: repeating-linear-gradient(to right,
+			red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
+			red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
+			red 80% 88%, orange 88% 96%, yellow 96% 100%);
+	background-size: 40% 40%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: rainbow 4s linear infinite;
+}
+
+@keyframes rainbow_alt {
+
+	0%,
+	100% {
+		background-position: 0 0;
+	}
+
+	50% {
+		background-position: 400% 0;
+	}
+}
+
+@keyframes rainbow {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 400% 0;
+	}
+}
+
 #client_chatcontainer {
 	position: absolute;
 	top: 73%;
@@ -39,7 +106,6 @@ body {
 #client_chat p {
 	margin: 4px;
 	padding: 5px 3%;
-	color: white;
 }
 
 #client_chatwaiting {