rearrange client.css to make slightly more sense

1 files changed, 243 insertions, 257 deletions

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 0d10f31..9dd6338 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;
@@ -99,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 {
@@ -127,64 +144,6 @@
 	}
 }
 
-@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;
-	}
-}
-
 @keyframes flash {
 
 	0%,
@@ -197,60 +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;
-	vertical-align: top;
-}
-
-#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%;
 }
 
@@ -263,32 +177,25 @@
 	object-fit: cover;
 }
 
-#client_char {
+#client_pair_char {
 	position: absolute;
 	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;
 }
 
-#client_bench {
-	position: absolute;
-	height: auto;
-	width: 100%;
-	bottom: 0;
-}
-
 .def_bench, .hld_bench, .jur_bench, .sea_bench {
 	left: 0;
 }
@@ -297,6 +204,13 @@
 	right: 0;
 }
 
+#client_bench {
+	position: absolute;
+	height: auto;
+	width: 100%;
+	bottom: 0;
+}
+
 #client_fg {
 	position: absolute;
 	height: 100%;
@@ -317,11 +231,69 @@
 	transition-property: height, opacity;
 }
 
-#client_chatcontainer {
+#client_testimony {
+	display: block;
 	position: absolute;
-	width: 100%;
-	bottom: 0;
-	left: 0;
+	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 {
@@ -333,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;
@@ -355,6 +321,58 @@
 	margin: auto;
 }
 
+#client_inputbox {
+	font-size: 21px;
+	padding: 2px 10px;
+}
+
+#client_bars {
+	position: relative;
+	text-align: center;
+	display: flex;
+	display: -webkit-flex;
+}
+
+.emote_button {
+	display: inline-block;
+	width: 40px;
+	height: 40px;
+	margin: 2px;
+	cursor: pointer;
+	box-shadow: 0 0 0 2px #000 inset;
+	border-radius: 4px;
+}
+
+#client_emo {
+	position: relative;
+	top: 10px;
+	width: 95%;
+}
+
+.judge_button {
+	display: inline-block;
+	min-width: 85px;
+	min-height: 42px;
+	margin: 5px 1px;
+	padding: 2px;
+	cursor: pointer;
+	text-align: center;
+	font-weight: bold;
+	font-family: sans-serif;
+	text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
+	background-color: #c1c1c1;
+	border-radius: 5px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #919191;
+	box-shadow: 1px 1px white inset;
+	vertical-align: middle;
+}
+
+.healthchange_button {
+	font-size: 1.5em;
+}
+
 #client_chatlog {
 	top: 0;
 	right: 0;
@@ -416,114 +434,6 @@
 	color: #fff;
 }
 
-#client_bars {
-	position: relative;
-	text-align: center;
-	display: flex;
-	display: -webkit-flex;
-}
-
-#client_testimony {
-	display: block;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}
-
-#evi_options {
-	display: inline-block;
-	width: 100%;
-	border: 2px ridge white;
-}
-
-#evi_options label {
-	display: inline-block;
-	width: 3em;
-}
-
-#evi_desc {
-	flex: 1 auto;
-}
-
-#bg_preview {
-	max-width: 150px;
-	max-height: 112px;
-	width: 100%;
-	height: 100%;
-	border-style: double;
-	border-radius: 7px;
-	border-color: #fff;
-	border-width: 3px;
-}
-
-.healthchange_button {
-	font-size: 1.5em;
-}
-
-.judge_button {
-	display: inline-block;
-	min-width: 85px;
-	min-height: 42px;
-	margin: 5px 1px;
-	padding: 2px;
-	cursor: pointer;
-	text-align: center;
-	font-weight: bold;
-	font-family: sans-serif;
-	text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
-	background-color: #c1c1c1;
-	border-radius: 5px;
-	border-style: solid;
-	border-width: 1px;
-	border-color: #919191;
-	box-shadow: 1px 1px white inset;
-	vertical-align: middle;
-}
-
-.client_button.hover_button.inactive {
-	display: none;
-}
-
-.client_button.hover_button:hover {
-	border-color: #FFD081;
-}
-
-.client_button.dark {
-	opacity: 0.5;
-}
-
-.noini {
-	transform: rotate(180deg);
-}
-
-.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%;
-}
-
 #client_menu {
 	overflow-y: auto;
 	height: 100%;
@@ -608,4 +518,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