1 files changed, 302 insertions, 201 deletions

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index d56fe24..cecba80 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -1,17 +1,3 @@
-#about-logo {
-	padding-top: 5px;
-	height: 30%;
-	image-rendering: auto;
-}
-
-.lm_content :link {
-	color: #4288f2;
-}
-
-.lm_content :visited {
-	color: #a65bd4;
-}
-
 @keyframes error_blink {
 	0% {
 		color: #fff;
@@ -26,6 +12,41 @@
 	}
 }
 
+.text_rainbow {
+	background-color: #fff;
+	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_error {
 	position: absolute;
 	display: flex;
@@ -64,8 +85,39 @@
 	margin: 30px;
 }
 
-#client_gamewindow {
-	width: 100%;
+.demothing {
+	display: inline-block;
+	height: 60px;
+	width: 60px;
+	max-width: 60px;
+	max-height: 60px;
+	margin: 3px;
+	border: 1px solid #000;
+	vertical-align: top;
+}
+
+.noini {
+	transform: rotate(180deg);
+}
+
+#client_charselect {
+	display: none;
+	position: fixed;
+  	top: 5vh;
+  	left: 10vw;
+	width: 80vw;
+	max-height: 90vh;
+	overflow-y: scroll;
+	text-align: center;
+	margin: 0 auto;
+	background: #444;
+	z-index: 50;
+}
+
+#client_icwrapper {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: 100%;
 }
 
 @keyframes shake {
@@ -104,59 +156,15 @@
 	}
 }
 
-#client_charselect {
-	display: none;
-	position: fixed;
-  	top: 5vh;
-  	left: 10vw;
-	width: 80vw;
-	max-height: 90vh;
-	overflow-y: scroll;
-	text-align: center;
-	margin: 0 auto;
-	background: #444;
-	z-index: 50;
-}
-
-.demothing {
-	display: inline-block;
-	height: 60px;
-	width: 60px;
-	max-width: 60px;
-	max-height: 60px;
-	margin: 3px;
-	border: 1px solid #000;
-}
-
-#client_icwrapper {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: 100%;
-}
-
-@media (max-width: 360px) {
-	#kek {
-		width: fit-content;
-	}
-}
-
-#client_emo {
+#client_background {
 	position: relative;
-	top: 10px;
-	width: 95%;
-}
-
-.emote_button {
-	display: inline-block;
-	width: 40px;
-	height: 40px;
-	margin: 2px;
-	cursor: pointer;
-	box-shadow: 0 0 0 2px #000 inset;
-	border-radius: 4px;
+	padding-bottom: 75%;
+	background-color: transparent;
+	top: 0;
+	left: 0;
 }
 
-#client_settings {
+#client_gamewindow {
 	width: 100%;
 }
 
@@ -166,21 +174,34 @@
 	width: 100%;
 	top: 0;
 	left: 0;
+	object-fit: cover;
 }
 
-#client_char {
+#client_pair_char {
 	position: absolute;
-	height: auto;
+	height: 100%;
 	width: 100%;
 	bottom: 0;
-	left: 0;
+	object-fit: cover;
+	object-position: 50% 0;
 }
 
-#client_pair_char {
+#client_char {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	bottom: 0;
+	left: 0;
+	object-fit: cover;
+	object-position: 50% 0;
+}
+
+.def_bench, .hld_bench, .jur_bench, .sea_bench {
+	left: 0;
+}
+
+.pro_bench, .hlp_bench, .wit_bench, .jud_bench {
+	right: 0;
 }
 
 #client_bench {
@@ -188,7 +209,6 @@
 	height: auto;
 	width: 100%;
 	bottom: 0;
-	left: 0;
 }
 
 #client_fg {
@@ -211,6 +231,71 @@
 	transition-property: height, opacity;
 }
 
+#client_testimony {
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: auto;
+}
+
+@keyframes bubble {
+
+	0% {
+		left: 0;
+		top: 0;
+	}
+
+	10% {
+		left: 0;
+		top: 0;
+	}
+
+	20% {
+		left: -1%;
+		top: 0;
+	}
+
+	30% {
+		left: 1%;
+		top: 1%;
+	}
+
+	40% {
+		left: -1%;
+		top: -1%;
+	}
+
+	50% {
+		left: 1%;
+		top: 0;
+	}
+
+	60% {
+		left: -1%;
+		top: -1%;
+	}
+
+	70% {
+		left: 1%;
+		top: 0;
+	}
+
+	80% {
+		left: -1%;
+		top: 1%;
+	}
+
+	90% {
+		left: 0;
+		top: 0;
+	}
+
+	100% {
+		left: 0;
+		top: 0;
+	}
+}
+
 #client_shout {
 	display: block;
 	position: absolute;
@@ -220,19 +305,13 @@
 	left: 0;
 }
 
-#client_background {
-	position: relative;
-	padding-bottom: 75%;
-	background-color: transparent;
-	top: 0;
+#client_chatcontainer {
+	position: absolute;
+	width: 100%;
+	bottom: 0;
 	left: 0;
 }
 
-#client_inputbox {
-	font-size: 21px;
-	padding: 2px 10px;
-}
-
 .long {
 	width: 100%;
 	background-color: #ddd;
@@ -242,60 +321,9 @@
 	margin: auto;
 }
 
-#client_chatlog {
-	top: 0;
-	right: 0;
-	flex: 1;
-}
-
-#client_log {
-	position: relative;
-	height: 100%;
-	color: #fff;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	overflow-y: auto;
-	font-size: medium;
-	background-color: #242424;
-	text-align: start;
-	line-height: .85em;
-}
-
-#client_log>p {
-	line-height: 1.1em;
-}
-
-#iclog_name {
-	font-weight: bold;
-	padding-right: .35em;
-}
-
-#iclog_time {
-	float: right;
-	padding-right: .5em;
-	color: #dbdbdb;
-}
-
-#client_ooclog {
-	position: relative;
-	background-color: #242424;
-	color: #fff;
-	font-family: "Source Code Pro", "Consolas", monospace;
-	font-size: small;
-	overflow-wrap: break-word;
-	overflow-y: auto;
-	text-rendering: optimizelegibility;
-	resize: none;
-	flex: 1 1 auto;
-	border: none;
-}
-
-#client_musiclist {
-	width: 99%;
-	height: 100%;
-	background-color: #222;
-	color: #fff;
+#client_inputbox {
+	font-size: 21px;
+	padding: 2px 10px;
 }
 
 #client_bars {
@@ -305,50 +333,26 @@
 	display: -webkit-flex;
 }
 
-#client_testimony {
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: auto;
-}
-
-.evi_icon {
-	width: 70px;
-	height: 70px;
-	background-color: #787878;
-	outline-color: #886060;
-	outline-width: 1px;
-	outline-style: inset;
-	outline-offset: -1px;
-}
-
-#evi_options {
-	display: inline-block;
-	padding-left: 5px;
-}
-
-#evi_options label {
+.emote_button {
 	display: inline-block;
-	width: 3em;
-}
-
-#evi_desc {
-	flex: 1 auto;
+	width: 40px;
+	height: 40px;
+	margin: 2px;
+	cursor: pointer;
+	box-shadow: 0 0 0 2px #000 inset;
+	border-radius: 4px;
+	word-break: break-all;
+	overflow-y: hidden;
 }
 
-#bg_preview {
-	max-width: 150px;
-	max-height: 112px;
-	width: 100%;
-	height: 100%;
-	border-style: double;
-	border-radius: 7px;
-	border-color: #fff;
-	border-width: 3px;
+.emote_button.dark {
+	opacity: 0.5;
 }
 
-.healthchange_button {
-	font-size: 1.5em;
+#client_emo {
+	position: relative;
+	top: 10px;
+	width: 95%;
 }
 
 .judge_button {
@@ -371,48 +375,69 @@
 	vertical-align: middle;
 }
 
-.client_button.hover_button.inactive {
-	display: none;
+.healthchange_button {
+	font-size: 1.5em;
 }
 
-.client_button.hover_button:hover {
-	border-color: #FFD081;
+#client_chatlog {
+	top: 0;
+	right: 0;
+	flex: 1;
 }
 
-.client_button.dark {
-	opacity: 0.5;
+#client_log {
+	position: relative;
+	height: 100%;
+	color: #fff;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	overflow-y: auto;
+	font-size: medium;
+	background-color: #242424;
+	text-align: start;
+	line-height: .85em;
 }
 
-.noini {
-	transform: rotate(180deg);
+#client_log>p {
+	line-height: 1.1em;
 }
 
-.hrtext {
-	overflow: hidden;
-	text-align: center;
-	font-size: small;
-	color: #c6c6c6;
+.iclog_name {
+	font-weight: bold;
+	padding-right: .35em;
 }
 
-.hrtext:before,
-.hrtext:after {
-	background-color: #c6c6c6;
-	content: "";
-	display: inline-block;
-	height: 1px;
+.iclog_time {
+	float: right;
+	padding-right: .5em;
+	color: #dbdbdb;
+}
+
+#client_ooclog {
 	position: relative;
-	vertical-align: middle;
-	width: 50%;
+	background-color: #242424;
+	color: #fff;
+	font-family: "Source Code Pro", "Consolas", monospace;
+	font-size: small;
+	overflow-wrap: break-word;
+	overflow-y: auto;
+	text-rendering: optimizelegibility;
+	resize: none;
+	flex: 1 1 auto;
+	border: none;
 }
 
-.hrtext:before {
-	right: 0.5em;
-	margin-left: -50%;
+#client_musicsearch {
+	width: 100%;
 }
 
-.hrtext:after {
-	left: 0.5em;
-	margin-right: -50%;
+#client_musiclist {
+	width: 99%;
+	height: 95%;
+	height: calc(95% - 16px);
+	background-color: #222;
+	color: #fff;
 }
 
 #client_menu {
@@ -499,4 +524,80 @@
 
 .area-spectatable {
 	background-color: rgb(54, 198, 68);
+}
+
+#bg_preview {
+	max-width: 150px;
+	max-height: 112px;
+	width: 100%;
+	height: 100%;
+	border-style: double;
+	border-radius: 7px;
+	border-color: #fff;
+	border-width: 3px;
+}
+
+#evi_options {
+	display: inline-block;
+	width: 100%;
+	border: 2px ridge white;
+}
+
+#evi_options label {
+	display: inline-block;
+	width: 3em;
+}
+
+#evi_desc {
+	flex: 1 auto;
+}
+
+#client_settings {
+	width: 100%;
+}
+
+#about-logo {
+	padding-top: 5px;
+	height: 30%;
+	image-rendering: auto;
+}
+
+.client_button.hover_button.inactive {
+	display: none;
+}
+
+.client_button.hover_button:hover {
+	border-color: #FFD081;
+}
+
+.client_button.dark {
+	opacity: 0.5;
+}
+
+.hrtext {
+	overflow: hidden;
+	text-align: center;
+	font-size: small;
+	color: #c6c6c6;
+}
+
+.hrtext:before,
+.hrtext:after {
+	background-color: #c6c6c6;
+	content: "";
+	display: inline-block;
+	height: 1px;
+	position: relative;
+	vertical-align: middle;
+	width: 50%;
+}
+
+.hrtext:before {
+	right: 0.5em;
+	margin-left: -50%;
+}
+
+.hrtext:after {
+	left: 0.5em;
+	margin-right: -50%;
 }
\ No newline at end of file