aboutsummaryrefslogtreecommitdiff
path: root/webAO
diff options
context:
space:
mode:
Diffstat (limited to 'webAO')
-rw-r--r--webAO/client.js26
-rw-r--r--webAO/styles/classic.css68
-rw-r--r--webAO/styles/client.css90
-rw-r--r--webAO/styles/default.css68
-rw-r--r--webAO/styles/soj.css68
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 {
generated by cgit (git 2.34.1) at 2026-04-23 18:11:12 +0000