Make the web client UI behave more like AO2 client

Fix: background scaling #92
Changes: Now every image on the viewport is centered in the X  and Y.

1 files changed, 27 insertions, 10 deletions

diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 9671a9a..cdf9ab3 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -206,9 +206,11 @@
 #client_court_static {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_court {
@@ -216,6 +218,9 @@
 	height: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_stitch_court {
@@ -229,8 +234,10 @@
 #client_stitch_court>img {
 	position: absolute;
 	height: 100%;
-	width: 100%;
 	bottom: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 #client_court_classic {
@@ -238,10 +245,13 @@
 	height: 100%;
 	top: 0;
 	left: 0;
+	top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .def_court {
-	object-position: left;
+	object-position: center;
 }
 
 .wit_court {
@@ -249,7 +259,7 @@
 }
 
 .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 {