Make the web client UI behave more like AO2 client

Fix: background scaling AttorneyOnline#92 Changes: Now every image on the viewport is centered in the X and Y.
SymphonyVR · Nov 22, 2023 · c959f01 · c959f01
1 parent 8ba20bd
commit c959f01
Showing 1 changed file with 27 additions and 10 deletions.
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
@@ -206,16 +206,21 @@
 #client_court_static {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_court {
 	position: absolute;
 	height: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_stitch_court {
@@ -229,27 +234,32 @@
 #client_stitch_court>img {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_court_classic {
 	position: absolute;
 	height: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .def_court {
-	object-position: left;
+	object-position: center;
 }
 
 .wit_court {
 	object-position: center;
 }
 
 .pro_court {
-	object-position: right;
+	object-position: center;
 }
 
 #client_fullview {
@@ -275,16 +285,20 @@
 	bottom: 0;
 }
 
+
 .client_char>img {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
 	left: 0;
-	object-fit: cover;
-	object-position: 50% 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
 }
 
+
+
 #client_bench_classic {
 	left: 0;
 }
@@ -311,17 +325,20 @@
 
 .client_bench {
 	position: absolute;
-	height: auto;
-	width: 100%;
+	height: 100%;
+	width: 1;
 	bottom: 0;
+	object-fit: contain;
 }
 
 #client_fg {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_evi {